Flutter Containerをいじってみる

#Container Widgetとは
ContainerはStatelessWidgetのサブクラスです。
用途は文字通りコンテナで、HTMLのdiv要素のように領域確保したり他のWidgetを入れたりします。

#設定可能なプロパティ
width：
　コンテナの横幅を指定します。
height：
　コンテナの縦幅を指定します。
color：
　コンテナの色を指定します。
decoration：
　ボーダーのスタイルを変更したい場合などに使用します。
　colorプロパティとdecorationプロパティを同時に指定することはできません。
　decorationプロパティを使用しつつコンテナの色を変更する場合は、BoxConstraintsクラスを使用します。
margin：
　マージン幅を指定します。
padding：
　パディング幅を指定します。
transform：
　コンテナを回転させたりすることができます。
child：
　子Widgetを1つ指定します。
alignment：
　childプロパティの位置を指定します。

#サンプル
Color

return Scaffold(
  body: Container(
    color: Colors.green,
  ),
);

　 　 **Margin**

return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
  ),
);

　 　 **transform**

return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    transform: Matrix4.rotationZ(0.1),
  ),
);

　 　 **child** コンテナのサイズは子要素のサイズによって変化します。

return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    child: Text('Text'),
  ),
);

　 　 **Padding**

return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    padding: EdgeInsets.fromLTRB(10, 20, 50, 80),
    child: Text('Text'),
  ),
);

　 　 **Width/Height** パターン①

return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    padding: EdgeInsets.fromLTRB(10, 20, 50, 80),
    child: Text('Text'),
    width: 300.0,
    height: 300.0,
  ),
);

　 　 パターン②

return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    child: Text('Text'),
    width: 20.0,
    height: 15.0,
  ),
);

　 　 パターン③

return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    child: Text('Text'),
    width: double.infinity,
    height: double.infinity,
  ),
);

　 　 **alignment** paddingで指定した余白を計算に含めています

return Scaffold(
  body: Container(
    color: Colors.green,
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    padding: EdgeInsets.fromLTRB(10, 20, 50, 80),
    child: Text('Text'),
    alignment: Alignment.center,
  ),
);

　 　 **decoration**

return Scaffold(
  body: Container(
    margin: EdgeInsets.fromLTRB(10, 20, 30, 40),
    padding: EdgeInsets.fromLTRB(10, 20, 50, 80),
    child: Text('Text'),
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: Colors.amberAccent,
      borderRadius: BorderRadius.circular(5.0),
      border: Border.all(
        color: Colors.black,
        width: 3,
      ),
    ),
  ),
);