【Flutter】Container|Widgetの背景色・余白・配置などを調整

今回はContainer の基本的な使い方を紹介します。

Containerを使えば任意のWidgetの背景色・余白・配置などを調整できます。

\ 世界最大級のオンライン学習サービス /

目次

Containerの使い方

Container(
  height: 200,
  width: 200,
  color: Colors.blue,
  child: Text(
    'Hello World',
    style: TextStyle(
      fontSize: 20,
      color: Colors.white,
    ),
  ),
),

Containerchild で背景色や配置を調整したいWidgetをラップします。

Container の高さ、横幅、背景色はそれぞれheight width color で指定します。

外側に余白をつける

Container(
  height: 150,
  width: 150,
  color: Colors.red,
  margin: EdgeInsets.all(30),
),

marginの引数にEdgeInsets を渡して外側の余白を調整できます。

外側に余白をつける

Container(
  height: 200,
  width: 200,
  color: Colors.blue,
  padding: EdgeInsets.only(left: 20, top: 150),
  child: Text(
    'Hello World',
    style: TextStyle(
      fontSize: 20,
      color: Colors.white,
    ),
  ),
),

paddingの引数にEdgeInsets を渡して内側の余白を調整できます。

childを指定した位置に配置

Container(
  height: 200,
  width: 200,
  color: Colors.blue,
  alignment: Alignment.bottomRight,
  child: Text(
    'Hello World',
    style: TextStyle(
      fontSize: 20,
      color: Colors.white,
    ),
  ),
),

alignmentの引数にAlignmentを渡してchildを指定した位置に配置できます。

childをAlignでラップしても同じです。

一緒に読みたい

参考

  • URLをコピーしました!
目次