Android-學習筆記-flutter

1. flutter 安裝

參考如下：

window 安裝flutter 並運行
flutter config --android-studio-dir=“C:\Program Files\Android\Android Studio”

macOs 安裝flutter述
export PATH="$PATH:/Users/zuochunsheng/Desktop/install/flutter/bin"
flutter config android-studio-dir="/Applications/Android\ Studio.app"

2. flutter 學習

參考 微信讀書 《Flutter技術入門與實戰》

1 佈局及裝飾組件

1.2 常用

• Container
• Align
• Center
• Row
• Column
• Stack 重疊
• ListView
• GridView

	Align(
          alignment: FractionalOffset.center,
          child: new Image.asset(
            "images/xianhua.jpg",
            width: 120,
            height: 128,
          ),
        )

	Container(
      color: Colors.blueGrey,
      height: 200,
      width: 200,
      // 百分比佈局，相對父
      child: FractionallySizedBox(
        alignment: Alignment.topLeft,
        widthFactor: 0.5,//寬度因子
        heightFactor: 1.5,
        child: Container(
          color: Colors.green,
        ),
      ),
    )

	Container(
      child: GridView.extent(
        maxCrossAxisExtent: 150.0,//次軸的寬度
        padding: const EdgeInsets.all(4),
        mainAxisSpacing: 4.0 ,//主軸間隙
        crossAxisSpacing: 4.0,//次軸間隙
        children: <Widget>[
          Container(
            child: Image.asset("images/ganen.jpg"),
          ),
          ...
          
        ],

      ),
    );

	Baseline(
        baseline: 20,
        baselineType:
        TextBaseline.alphabetic,//對齊字符底部的水平線
        //TextBaseline.ideographic,//對齊表意字符的水平線
      )

2 控件

• image
• margin
• padding
• decoration
• Text
• CircleAvatar 頭像

	Image.asset("images/xx.jpg")

 	margin: const EdgeInsets.all(4.0)

	padding: const EdgeInsets.all(32)

 	decoration: BoxDecoration(
      //邊框寬度爲 10， 顏色爲藍灰色
      border: Border.all(width: 10, color: Colors.blueGrey),
      //邊框弧度 爲 8.0
      borderRadius: const BorderRadius.all(const Radius.circular(8.0))
    )

	Text( "Hello ABC",
        style: TextStyle(fontSize: 36.0),
    )

	CircleAvatar(
        backgroundImage: AssetImage("images/x.png") ,
        radius: 10,
      )

2.1
BoxFit 取值

2.2 Text

3 表單組件

• Form
• TextFormField

	TextFormField(
         decoration: InputDecoration(labelText: "請輸入密碼"),
         obscureText: true,
         //表單驗證器
         validator: (value) {
           return value.length < 6 ? "密碼長度不夠6位" : null;
         },
         onSaved: (value) {
           password = value;
         },
     )

4 Material Design 風格組件

5 Route