Container
Containerの基本
「Container」クラスは内包する子ウィジェットをカスタマイズするために利用するウィジェットです。 どんなことができるのかを一つずつみていきましょう。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Material Design',
home: Scaffold(
body: Center(
child: Container(
color: Colors.blue,
width: 300.0,
height: 300.0,
),
),
),
);
}
}

このように背景色の指定、幅と高さを指定して青い四角を書いてみました。
widthやheightを変更することで自由にサイズを変更することができます。
色
色味についてもう少しみていきましょう。
Color
色の指定の仕方はColorクラスを使うことで可能です。
Colorは以下のように指定できます。
Color(0xFF42A5F5)
Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5)
Color.fromARGB(255, 66, 165, 245)
Color.fromRGBO(66, 165, 245, 1.0)
Colors
色指定のもう一つの方法としては、Colorsクラスを使うと簡単に色指定ができます。
いくつもの色があるので、必要な色を探して利用するだけで済むでしょう。
Colors.green
Colors.blue
Colors.red
また、探した色が目的の色とそぐわない場合でも、濃淡を変更することが可能です。
指定方法は以下の2種類があります。
Colors.blue[900],
Colors.blue.shade900
濃淡で指定できる数値はどちらの方法でも以下の通りです。
数値 |
---|
50 |
100 |
200 |
300 |
400 |
500 |
600 |
700 |
800 |
900 |
これ以外の数値は指定できません。
そのためColors.blue[101]
などとしても色は表示できません。
テキスト
ここに文字を表示してみましょう。
child: Container(
color: Colors.blue,
width: 300.0,
height: 300.0,
child: Text('word')
),

小さくて見辛いと思いますがこれで文字が表示されます。
配置
Padding
次にPaddingをあててもう少し中心によってもらいましょう。
child: Container(
color: Colors.blue,
width: 300.0,
height: 300.0,
child: Text('word'),
padding: const EdgeInsets.all(50.0),
),

Paddingは、EdgeInsetsクラスによって設定します。
全周囲にかける場合はEdgeInsets.all
特定の辺にのみPaddingを付ける場合はEdgeInsets.only
を使いましょう。
padding: const EdgeInsets.only(top:50.0),

Margin
Paddingを当てたので今度はMarginを指定してみましょう。
child: Container(
color: Colors.blue,
width: 300.0,
height: 300.0,
child: Text('word'),
margin: const EdgeInsets.all(100.0),
),

横幅がMarginで入りきらなくなったため、押しつぶされてしまいましたが、このようにMarginもかけることが可能です。
Paddingと同じく全周囲にかける場合はEdgeInsets.all
特定の辺にのみMarginを付ける場合はEdgeInsets.only
を使いましょう。
margin: const EdgeInsets.only(left:50.0),

揃え
次に文字列の配置を調整してみましょう。
Alignmentを使って中央に表示してみます。
child: Container(
color: Colors.blue,
width: 300.0,
height: 300.0,
child: Text('word'),
alignment: Alignment.center,
),

Alignmentクラスには他にも以下のようなものがあります。
topLeft | topCenter | topRight |
centerLeft | center | centerRight |
bottomLeft | bottomCenter | bottomRight |
このように、子要素の配置箇所を揃えることが可能です。
変化
また、transformを使うことによって、形状を変化させることが可能です。
child: Container(
color: Colors.blue,
width: 300.0,
height: 300.0,
child: Text('word'),
transform: Matrix4.rotationZ(0.1),
),

TransformはX,Y,Z軸の回転や尺度(Scale)の変更、子要素の位置変更(translate)などができます。