Flutterコンポーネントの基本——Container

Flutter コンポーネントの基礎 ——Container#

Container はコンテナコンポーネントで、H5 の

タグや iOS の UIView に似ており、レイアウトの基本的なウィジェットです。

Container の属性#

Container の一般的な属性は以下の通りです：

Container
- child：子ビュー
- alignment：子ビューの配置方法
  - topLeft：上部左揃え
  - topCenter：上部中央揃え
  - topRight：上部右揃え
  - centerLeft：中央左揃え
  - center：中央揃え
  - centerRight：中央右揃え
  - bottomLeft：下部左揃え
  - bottomCenter：下部中央揃え
  - bottomRight：下部右揃え
- color：背景色
- width：幅
- height：高さ
- padding：子ビューと Container の間の余白
- margin：Container と親ビューの間の余白
- decoration：装飾

子ビューの配置方法 - alignment#


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              'Alignment center',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.center,
            width: 500.0,
            height: 400.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

効果図は以下の通りです：

Container の幅と高さ#

width と height の設定は、直接固定の値です。

H5 のような '100%' の設定はありません。したがって、Container を画面の幅と高さに設定したい場合は、以下の方法を使用できます：

方法一：


import 'dart:ui';

final width = window.physicalSize.width;
final height = window.physicalSize.height;

Container(
  color: Colors.red,
  width: width,
  child: Text("幅はどれくらいか"),
)

方法二：


Container(
  color: Colors.red,
  width: double.infinity,
  child: Text("幅はどれくらいか"),
)

子ビューと Container の間の余白 - padding#

padding は子ビューと Container の間の余白を設定します。通常、2 つの設定方法があります。EdgeInsets.allはすべての余白を均一に設定するために使用され、EdgeInsets.fromLTRBは指定された余白を設定するために使用されます（LTRB は Left、Top、Right、Bottom に対応します）。コードは以下の通りです：


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              'padding left: 10, top: 20',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.topLeft,
            width: 500.0,
            height: 400.0,
            color: Colors.lightBlue,
            padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0.0, 0.0),
            // padding: const EdgeInsets.all(20),
          ),
        ),
      ),
    );
  }
}

表示効果は以下の通りです：

Container の親ビューとの間の余白 - margin#

margin の設定は padding と同様で、効果を比較するために、まず width と height をコメントアウトします。コードは以下の通りです：


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              'margin all 30',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.topLeft,
            // width: 500.0,
            // height: 400.0,
            color: Colors.lightBlue,
            // padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0.0, 0.0),
            // padding: const EdgeInsets.all(20),
            margin: const EdgeInsets.all(30.0),
          ),
        ),
      ),
    );
  }
}

効果は以下の通りです：

Container の decoration#

decoration は背景色、背景グラデーション効果、ボーダー効果などを設定するために使用されます。decoration と color は同時に設定できないことに注意が必要です。両方を設定する必要がある場合は、decoration 内で color を設定することで実現できます。コードは以下の通りです：


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
              child: Text(
                'margin all 30',
                style: TextStyle(fontSize: 40.0),
              ),
              alignment: Alignment.topLeft,
              width: 500.0,
              height: 400,
              // color: Colors.lightBlue,
              // padding: const EdgeInsets.fromLTRB(10.0, 20.0, 0.0, 0.0),
              // padding: const EdgeInsets.all(20),
              // margin: const EdgeInsets.all(30.0),
              decoration: BoxDecoration(
                  gradient: const LinearGradient(colors: [
                    Colors.lightBlue,
                    Colors.greenAccent,
                    Colors.purple,
                  ]),
                  border: Border.all(width: 10.0, color: Colors.red),
                  color: Colors.lightBlue)),
        ),
      ),
    );
  }
}

効果は以下の通りです：

エラー：#

次のアサーションが MyApp (dirty) のビルド中にスローされました：
色と装飾を両方提供することはできません
両方を提供するには、「decoration: BoxDecoration (color: color)」を使用してください。
'package/src/widgets/container.dart':
失敗したアサーション：行 274 pos 15: 'color == null || decoration == null'

エラーコードは以下の通りです：


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Learn',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              'Container Text',
              style: TextStyle(fontSize: 40.0),
            ),
            alignment: Alignment.topLeft,
            color: Colors.lightBlue,
            padding: const EdgeInsets.fromLTRB(10.0, 30.0, 0.0, 0.0),
            margin: const EdgeInsets.all(30.0),
            decoration: BoxDecoration(
                gradient: const LinearGradient(colors: [
                  Colors.lightBlue,
                  Colors.greenAccent,
                  Colors.purple,
                ]),
                border: Border.all(width: 10.0, color: Colors.red)),
          ),
        ),
      ),
    );
  }
}

原因：Container の color と decoration は同時に設定できません。これらの両方を設定する必要がある場合は、BoxDecoration(color: color)を設定することで実現できます。

参考#

Flutter Container Doc
Flutter 無料動画第二季 - 一般的なコンポーネント