93
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Flutterでよくつかう共通Widget

Posted at

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

93
61
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
93
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?