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,
          ),
        ),
      ),
    );
  }
}

bule box

このように背景色の指定、幅と高さを指定して青い四角を書いてみました。
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)
指定方法としてはWebやネイティブアプリでは一般的なRGBまたは16進数で指定することができます。

Colors

色指定のもう一つの方法としては、Colorsクラスを使うと簡単に色指定ができます。
いくつもの色があるので、必要な色を探して利用するだけで済むでしょう。

Colors.green
Colors.bule
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')
  ),

text box

小さくて見辛いと思いますがこれで文字が表示されます。

配置

Padding

次にPaddingをあててもう少し中心によってもらいましょう。

  child: Container(
    color: Colors.blue,
    width: 300.0,
    height: 300.0,
    child: Text('word'),
    padding: const EdgeInsets.all(50.0),
  ),

padding box

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

    padding: const EdgeInsets.only(top:50.0),
padding top box

Margin

Paddingを当てたので今度はMarginを指定してみましょう。

  child: Container(
    color: Colors.blue,
    width: 300.0,
    height: 300.0,
    child: Text('word'),
    margin: const EdgeInsets.all(100.0),
  ),

margin box

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

    margin: const EdgeInsets.only(left:50.0),
margin left box

揃え

次に文字列の配置を調整してみましょう。
Alignmentを使って中央に表示してみます。

  child: Container(
    color: Colors.blue,
    width: 300.0,
    height: 300.0,
    child: Text('word'),
    alignment: Alignment.center,
  ),

alignment center

Alignmentクラスには他にも以下のようなものがあります。

topLefttopCentertopRight
centerLeftcentercenterRight
bottomLeftbottomCenterbottomRight

このように、子要素の配置箇所を揃えることが可能です。

変化

また、transformを使うことによって、形状を変化させることが可能です。

  child: Container(
    color: Colors.blue,
    width: 300.0,
    height: 300.0,
    child: Text('word'),
    transform: Matrix4.rotationZ(0.1),
  ),

transform center

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