Futter容器ケースモデルの使用例

Futterの箱の模型を言う前に、まずHTMLの箱の模型を見てみます。下の図のように、一つのページ要素は父の容器との外距離、自身の内容と外枠の内縁距離を含んでいます。外の距離と内側の余白は、LRB（左、上、右、下）によって個別に4方向の大きさを設定することができます。

Futterの箱の模型はHTMLのと同じです。一般的な容器のContinerはそれで同じです。HTMLのdivタグと同じです。元素のサイズ、外距、内余白、外枠を制御するには、Continer容器を使用して元素を包むのが一般的です。もちろんFutterは、より具体的なレイアウトコンポーネントを提供しています。例えば、

Sized Box：サイズを指定する容器。

ContstaintedBox：最小幅と高さを制限するような制約付き容器。

Decorate Box：グラデーションなどの装飾を施した容器。

RotatedBox：一定角度の容器を回転させる。

これらのコンポーネントは実際にはContinerのパラメータ設定で完成できますが、開発時には具体的な容器を使うだけでコンポーネントパラメータを減らすことができます。
サンプルコード
ここでは具体的な例を用いて箱のモデルの具体的な概念を説明します。ここではデータの変化に関係しないため、Statelessの無状態コンポーネントを直接使用します。コードは以下の通りです。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter     ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('    '),
        ),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            child: Container(
              color: Colors.red,
              margin: EdgeInsets.fromLTRB(10, 0, 20, 30),
              child: Container(
                margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
                color: Colors.white60,
                child: Text('       ，       ,       ，       ,       ，       '),
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

ここでbodyのセットの階層は以下の通りです。

センター：センターコンポーネントです。

Conttainer：300 xサイズ、色は青で、一番外側のコンポーネントです。

コンタイナー：大きさが指定されていません。（箱のモデルによって大きさが制限されています。）親レベルのコンポーネントの外との距離は左10、上0、右20、下30で、色は赤色です。

Conttainer：大きさは指定していません。親レベルの部品との上下左右の外の距離は10で、内側のマージンは上下左右とも10で、色は白色です。

Text：複数行のテキストを表示し、内側余白効果を示す。

運転後の画面は下図のように見えます。予想通りです。

以上がFutter容器ケースモデルの使用例の詳細です。Futter容器の箱モデルに関する資料は他の関連記事に注目してください。