（六）容器部件 Container

• 如果需要一塊視圖，有背景顏色，設置固定尺寸以及邊距，圓角邊框的設定等，Container 這個Widget值得考慮
• Container 可讓您創建矩形視覺元素。container 可以裝飾爲一個BoxDecoration, 如 background、一個邊框、或者一個陰影。 Container 也可以具有邊距（margins）、填充(padding)和應用於其大小的約束(constraints)。另外， Container可以使用矩陣在三維空間中對其進行變換。
• Container
  • color 背景顏色
  • child 添加布局 ，例如Row 即橫排視圖
    • Row
      • children
      • mainAxisAlignment 主軸對齊
        • MainAxisAlignment.center 對齊居中
  • padding
    • EdgeInsets.only(left: 10.0, right:10.0) 分別添加內邊距
    • EdgeInsets.all(10.0) 整體內邊距添加
  • margin
    • EdgeInsets.all(10.0) 整體外邊距添加
  • width 容器寬度
  • height容器寬度
  • decoration 容器的裝飾，例如背景顏色 邊框 陰影
    • BoxDecoration
      • image 背景圖像
        • DecorationImage
          • image:
            • NetworkImage 網絡圖像
          • alignment
            • Alignment.topCenter 圖像放置頂部中間
          • repeat 圖像重複模式
            • ImageRepeat.noRepeat
            • ImageRepeat.repeat
            • ImageRepeat.repeatX
            • ImageRepeat.repeatY
          • fit 填充模式
            • BoxFit.cover 圖像保持比例 覆蓋整個容器
          • colorFilter 設置顏色濾鏡
            • ColorFilter.mode 需要設置2個參數
              • 設置顏色 例如 Colors.indigoAccent[400].withOpacity
              • 設置混合模式
                • BlendMode.hardLight,
      • color 背景顏色 與 Container本身 的 color屬性只用其中一個即可
      • border 邊框
        • Border
          • top
            • BorderSide
              • color
              • width
              • style
                • BorderStyle.solid
          • bottom
        • Border.all 統一設置邊框樣式
      • borderRadius 圓角效果
        • BorderRadius.circular 統一設置四個圓角
        • BorderRadius.only 分別設置
          • topLeft
            • Radius.circular
          • bottomLeft
      • boxShadow
        • BoxShadow
          • offset 陰影偏移量
            • Offset
          • color 陰影顏色
          • blurRadius 陰影的模糊程度值 越大與模糊的越明顯
          • spreadRadius 陰影的擴散程度 負數縮小陰影面積 正數擴大陰影面積
      • shape 形狀
        • BoxShape.rectangle 矩形
        • BoxShape.circle 圓形 此時不能使用圓角borderRadius 屬性，會報錯
      • gradient 漸變
        • RadialGradient 近向漸變
          • color: [Color.fromRGBO(7,10,25,1.0),Color.fromRGBO(3,140,255,1.0)]
        • LinearGradient 線性漸變，默認從最左邊到最右邊
          • color: [Color.fromRGBO(7,10,25,1.0),Color.fromRGBO(3,140,255,1.0)]
          • begin 漸變開始位置
          • end 結束位置
            • Alignment.topCenter
            • Alignment.bottomCenter

實例一

import 'package:flutter/material.dart'; 


void main() => runApp(MyApp());

// 繼承靜態組件
class MyApp extends StatelessWidget {

  //重寫 build 方法 返回Widget組件
  //傳一個build 上下文
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Hello TextWidget',
      // home 給個腳手架組件
      home:  Scaffold(
        appBar: AppBar(
          title: Text('Hello AppBar Title'),
          ),
        body: Center(
          child: Container(
            child: new Text(
              'new 出來的 Text',
              style: TextStyle(
                fontSize: 25.0
              ),
            ),
            /*
            * Alignment.bottomCenter 底部居中對齊
            * */
            alignment: Alignment.topCenter,
            width: 500.0,
            height: 400.0,
            color: Colors.deepPurple,
          ),
        ),
      ),
    );
  }

}

實例二

import 'package:flutter/material.dart'; 

void main() => runApp(MyApp());

// 繼承靜態組件
class MyApp extends StatelessWidget {

  //重寫 build 方法 返回Widget組件
  //傳一個build 上下文
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Hello TextWidget',
      // home 給個腳手架組件
      home:  Scaffold(
        appBar: AppBar(
          title: Text('Hello AppBar Title'),
          ),
        body: Center(
          child: Container(
            child: new Text(
              'new 出來的 Text',
              style: TextStyle(
                fontSize: 25.0
              ),
            ),
            /*
            * Alignment.bottomCenter 底部居中對齊
            * */
            alignment: Alignment.topCenter,
            width: 500.0,
            height: 400.0,
            // 線性漸變屬性
            decoration: BoxDecoration(
              gradient: const LinearGradient(colors: [
                Colors.lightBlue,
                Colors.greenAccent,
                Colors.amberAccent
              ])
            ),
            /*
            * 上下左右內邊距有都相同EdgeInsets.all(20.0)
            * */
            padding: const EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
            margin: const EdgeInsets.all(10.0),
          ),
        ),
      ),
    );
  }

}