Android-學習筆記-flutter-widget

一. 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"

二. flutter 學習

參考 《Flutter技術入門與實戰》

2.1 佈局及裝飾組件

2.2 常用 Widget

• Container

• Row / Column

• Align / Center , Center繼承自 Align，只不過其 alignment 爲 Alignment.center

• Stack 重疊

• Expanded ：其中一個 Widget 將容器主軸上的剩餘空間充滿

• Wrap :自動換行

• ListView

• GridView

• SingleChildScrollView

• PageView

• image

• margin

• padding

• decoration : BoxDecoration , InputDecoration

• ClipRRect / ClipOval /ClipPath ：裁剪圓角/橢圓/

• BackdropFilter 高斯模糊

• Opacity

• SafeArea （root 爲Scaffold 時不必使用）

• Text

• CircleAvatar 頭像

• Input

	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,//對齊表意字符的水平線
      )

	Image.asset("images/xx.jpg")
	//Image.file(File())
	//Image.network()

 	margin: const EdgeInsets.all(4.0)

	 padding: const EdgeInsets.all(8.0),
	 
   //padding: const EdgeInsets.only(bottom: 8),
     padding: const EdgeInsets.only(top:8,right: 3),
     
   //在水平或垂直方向上對稱均分所給參數，作爲邊距。
   //padding: const EdgeInsets.symmetric(vertical: 8),//horizontal

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

	Widget text = Text(
		  'Hello,  How are you? How are you?How are you?How are you?',
		  // 對齊方式
		  textAlign: TextAlign.center,
		  // 省略方式
		  overflow: TextOverflow.clip,
		    // TextOverflow.ellipsis
		    //TextOverflow.fade
		    
		  // 文字風格
		  style: TextStyle(
		      fontWeight: FontWeight.bold,
		      color: Colors.deepPurpleAccent,
		      fontSize: 30,
		      decoration: TextDecoration.overline
		         //TextDecoration.underline
		         //TextDecoration.lineThrough
		         // TextDecoration.none
		
		  ),
		  // 文字方向
		  //textDirection: TextDirection.ltr,
		  //maxLines: 2,
		  //無
		// textSpan:TextSpan(
		//
		//  )
	 );

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

	//ClipRRect 用於將一個 Widget 剪裁爲圓角矩形。
	var clipRRect = ClipRRect(
	  borderRadius: BorderRadius.all(Radius.circular(12)),
	   //剪裁模式。Clip.antiAlias-消除鋸齒；Clip.hardEdge-有鋸齒
	   clipBehavior: Clip.hardEdge,
	   // 需要剪裁的 Widget
	  child: Image.asset('images/katongshu.png'),
	);
	
	
	//ClipOval 用於將一個 Widget 裁剪爲橢圓形。
	var clipOval = ClipOval(
	  clipBehavior: Clip.hardEdge,
	  child: Image.asset('images/katongshu.png'),
	);

2.3 Image

BoxFit 取值

2.4 Text

三 表單組件

3.1 TextField 的屬性

3.2 TextFormField

    TextField(
      keyboardType: TextInputType.text,//text  number phone emailAddress url
      textInputAction: TextInputAction.next,
      maxLines: 1,
      //maxLength: 12,
      cursorColor: Colors.deepOrangeAccent,
      autofocus: true,
      decoration: InputDecoration(
        labelText: "用戶名",
        hintText: "請輸入用戶名或郵箱",
        hintStyle:TextStyle(color: Colors.green) ,
        prefixIcon: Icon(Icons.person),
        suffixIcon: Icon(Icons.alarm),
//          border: //InputBorder.none
//          OutlineInputBorder(
//
//          )

      ),
      //controller: TextEditingController(),


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

四 Material Design 風格組件

4.1 Scaffold 的常用屬性

4.2 appBar 頂部導航欄

AppBar 的常用屬性

4.3 bottomNavigationBar

     //底部導航欄。在 persistentFooterButtons 下面
      bottomNavigationBar:
      BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首頁'),
             // 設置當item被選中時的 icon
              activeIcon: Icon(Icons.pages)
//              Image.asset(
//                'images/ganen.jpg',
//                width: 20,
//                height: 20,
//              ),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.favorite),
              title: Text('收藏')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.add_shopping_cart),
              title: Text('訂單')
          ),
        ],
        currentIndex: _currentIndex,
        //選中的item的顏色
        fixedColor: Colors.blue,
        //當一個item被點擊的時候會回調
        onTap: (index) {
          setState(() {
            _currentIndex = index;
            //
          });
        },
      )
      

4.4 floatingActionButton

      //一種特殊的漂浮Button。
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
        }),
        tooltip: 'Increment Counter',
        child: Icon(Icons.add),
      ),
      //設置floatingActionButton的位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,