atabata site

Layouts in Flutter

Widgetの種類

  • 以下の2パターンがありそう
    1. Layout Widget…配置などを指定するWidget(Container, Row, Columnなど)
    2. Visible Widget…子要素が実際に目に見えるWidget(Text, Cartなど)

水平・垂直方向の配置

  • Row/Columnを使う

Widgetの整列

  • Row/Columnに置いてmainAxisAlignmentとcrossAxisAlimentを指定して行 or 列をどのように整列させるか制御できる
  • イメージ
  • 整列の例としては以下がある
    • spaceEven…等間隔に領域を利用し並ぶ

Widgetの大きさ

  • 大きくなりすぎたりする場合はExpandを利用する
  • Expandを利用する際、flexプロパティを利用すれば他の要素と比べてN倍のサイズを指定できる
  • 小さくまとめたい場合はmainAxisSizeでminを指定すればいい

一般的なLayout Widget

Container

  • padding, margin, borderや背景などの装飾を変更できる
  • 子要素は一つ
  • 使用例
Container(
  decoration: const BoxDecoration(
    color: Colors.black26,
  ),
  child: Column(
    children: [
      _buildImageRow(1),
      _buildImageRow(3),
    ],
  ),
);

Container(
  decoration: BoxDecoration(
    border: Border.all(width: 10, color: Colors.black38),
    borderRadius: const BorderRadius.all(Radius.circular(8)),
  ),
  margin: const EdgeInsets.all(4),
  child: Image.asset('images/pic$imageIndex.jpg'),
),

GridView

  • 2次元リスト
  • 自動スクロールあり
  • contentでColumnの数を、extentでタイルの最大pixel数を指定できる

ListView

  • 1次元リスト
  • 自動スクロールあり

Stack

  • Z軸方向にWidgetを積む

Card

  • Material DesignにあるCard
  • ListTileとよく一緒に使われる
  • SizedBoxを使えばカードの大きさを制約できる
  • 使用例
Card(
  child: Column(
    children: [
      ListTile(
        title: const Text(
          '1625 Main Street',
          style: TextStyle(fontWeight: FontWeight.w500),
        ),
        subtitle: const Text('My City, CA 99984'),
        leading: Icon(
          Icons.restaurant_menu,
          color: Colors.blue[500],
        ),
      ),
      const Divider(),
      ListTile(
        title: const Text(
          '(408) 555-1212',
          style: TextStyle(fontWeight: FontWeight.w500),
        ),
        leading: Icon(
          Icons.contact_phone,
          color: Colors.blue[500],
        ),
      ),
      ListTile(
        title: const Text('costa@example.com'),
        leading: Icon(
          Icons.contact_mail,
          color: Colors.blue[500],
        ),
      ),
    ],
  ),
),

ListTile

  • 最大3行まで表示できる
  • ListViewやCardでよく使われる