Flutterでよくつかう共通Widget

More than 1 year has passed since last update.

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行のテキストと、左右のアイコンを含むリストアイテムを簡単に作れる。