Flutter 淺談Container

官方說明文件：https://api.flutter.dev/flutter/widgets/Container-class.html

官方文件就寫得非常棒了，這篇文章算是把一些基本的東西整理成我自己看得懂的版本。

Layout behavior

Container會盡可能的服從child的layout。

我的Text及Container沒有寫任何與layout相關的程式碼，Container會如下圖一樣，變得跟Text一樣大。

Container(
  color: Colors.white,
  child: HelloWorldText(),
);
Text(
  'Hello World',
  style: TextStyle(
    fontSize: 40,
  ),
);

若有寫width, height則是以指定的width, height為優先

Container(
  color: Colors.white,
  child: HelloWorldText(),
  padding: EdgeInsets.all(50.0),
  width: 200.0,
  height: 300.0,
);

margin

margin的值是EdgeInsets

margin:從Container的邊緣向「外」，與其他UI的距離。我將margin設為EdgeInsets.all(100.0)，結果會如下圖

Container(
  color: Colors.white,
  child: HelloWorldText(),
  margin: EdgeInsets.all(100.0),
);

padding

Padding的值是EdgeInsets

Padding:從Container的邊緣向「內」，與child的距離。我將padding設為EdgeInsets.all(50.0)，結果會如下圖

Container(
  color: Colors.white,
  child: HelloWorldText(),
  padding: EdgeInsets.all(50.0),
);

color

顧名思義就是Container的顏色

Container(
  color: Colors.red,
  child: HelloWorldText(),
  padding: EdgeInsets.all(50.0),
);

alignment

child的對齊方式，我發現寫了alignment後，Container似乎會向外擴展後再計算padding及margin

Container(
  color: Colors.red,
  child: HelloWorldText(),
  padding: EdgeInsets.all(50.0),
  alignment: Alignment.center,
);

constraints

constraints的值是BoxConstraints，用來設定Container的高度及寬度的最大及最小值

Container(
  color: Colors.red,
  child: HelloWorldText(),
  padding: EdgeInsets.all(50.0),
  alignment: Alignment.center,
  constraints: BoxConstraints(
    maxHeight: 300.0,
    maxWidth: double.infinity,
  ),
);

transform

爬了許多文覺得太複雜，索性不寫了，只要記得是旋轉、縮放、變形大概都是這個屬性，有需要用的時候再來研究。