Flutterでよくつかう共通Widget

Flutterには非常にたくさんのWidgetが用意されています。特に、Material library内のWidgetはリッチなUIを簡単に作り上げることができます。
どんなWidgetがあるかはWidgets Catalogから探せますが、ここではよく使う共通Widgetを紹介します。

Container

padding、margin、borderをつけたり、背景色を変更したりするのに使います。

new Container(
  padding: const EdgeInsets.all(16.0),
  margin: const EdgeInsets.all(4.0),
  decoration: new BoxDecoration(
    border: new Border.all(width: 4.0, color: Colors.grey[600]),
    borderRadius: const BorderRadius.all(const Radius.circular(4.0)),
  ),
  child: new Text("Container"),
);

GridView

よくあるGridレイアウトです。AndroidでいうGridView。要素が画面に入りきらない場合にはスクロールできます。

List<Container> _createList(int count) {
  return new List<Container>.generate(
    count, (int index) =>
      new Container(
        child: new Text('Text${index+1}'),
        padding: const EdgeInsets.all(16.0),
      ),
  );
}

Widget gridView = new GridView.extent(
  maxCrossAxisExtent: 160.0,
  padding: const EdgeInsets.all(4.0),
  mainAxisSpacing: 2.0,
  crossAxisSpacing: 2.0,
  children: _createList(20)
);

ListView

よくあるListレイアウトです。AndroidでいうRecyclerView。

List<Widget> list = <Widget>[
  new ListTile(
    title: new Text(
        'Title1',
        style: new TextStyle(
            color: Colors.green[600],
            fontSize: 16.0
        )
    ),
    leading: new Icon(
      Icons.android,
      color: Colors.green[600],
    ),
  ),
  new ListTile(
    title: new Text(
        'Title2',
        style: new TextStyle(
            color: Colors.green[600],
            fontSize: 16.0
        )
    ),
    leading: new Icon(
      Icons.android,
      color: Colors.green[600],
    ),
  ),
];

return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
  body: new ListView(
    children: list,
  ),
);

Stack

Widgetを重ね合わせることができる。AndroidでいうFrameLayoutのようなもの。

new Stack(
  children: [
    new Container(
      color: Colors.green,
    ),
    new Container(
      padding: const EdgeInsets.all(16.0),
      decoration: new BoxDecoration(
        color: Colors.black,
      ),
      child: new Text(
        'Text',
        textAlign: TextAlign.center,
        style: new TextStyle(
          fontSize: 16.0,
          color: Colors.white,
        ),
      ),
    ),
  ],
);

Card

Material DesignにあるCardレイアウト。AndroidでいうCardView。
デフォルトサイズは0なので、SizedBoxをつかってカードのサイズを指定する。radiusやz軸の高さも指定できる。

new SizedBox(
  height: 100.0,
  child: new Card(
    child: new Container(
      ...
    ),
  ),
)

ListTile

最大3行のテキストと、左右のアイコンを含むリストアイテムを簡単に作れる。