Posted at

Flutter開発する前に知っておきたい35のWidget一覧

運よくFlutterでの開発プロジェクトに参加できましたので、Flutter開発する前に知っておきたいWidget集をまとめます。

それぞれのWidgetがどんなものなのか、イメージが湧けば十分だと思いますので、画像中心でいきます。

Widgetについて、公式のWidget catalogに詳しくまとまっています。

詳しくはそちらをご覧いただければと思います。

個人の見解でWidgetを選定していますのでご了承ください。


Layout系


Align

align.png

Align(

alignment: Alignment.topRight,
child: ...
),

名前の通りで、左上や右下など子Widgetの配置を揃えることができます。


Padding

padding.png

Padding(

padding: EdgeInsets.all(30.0),
child: ...
),

EdgeInsetsでPaddingのサイズを設定できます。


Container

container.png

Container(

height: 100.0,
width: double.infinity,
color: Colors.red,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.all(10.0),
child: ...
),

高さや幅、色、Padding、Marginなどが組み合わさった、便利なWidgetです。

使い勝手がいいので、よく使われる基礎的なWidgetです。


Center

center.png

Center(

child: ...
),

子Widgetを中央表示してくれます。


FittedBox / BoxFit

fittedbox.png

FittedBox(

fit: BoxFit.fitHeight,
child: Image.network('https://picsum.photos/250?image=9',),
),
),

領域の「高さを合わせて表示」したり「幅に合わせて表示」したりできるWidgetです。

もともと正方形の画像を、高さに合わせて表示(BoxFit.fitHeight)しています。


SafeArea

safearea.png

SafeArea(

child: ...
),

SafeArea内を塗りつぶしています。

ノッチへの対応はこのWidgetで囲うだけです。


Multi Layout


Column

column.png

Column(

children: <Widget>[
...
...
],
),

縦方向に並べたい時のWidgetです。


Row

row.png

Row(

children: <Widget>[
...
...
],
),

Columnの横方向バージョンです。


Expanded

expanded2.png

Row(

children: <Widget>[
Expanded(
flex: 3, child: ...
),
Expanded(
flex: 2, child: ...
),
Expanded(
flex: 1, child: ...
),
],
),

比率を設定して、子Widgetを最大限のサイズまで広げるWidgetです。

3:2:1の比率で表示しています。


Stack

stack.png

Stack(

children: <Widget>[
...
...
],
),

複数Widgetを重ねて表示することができます。


ListView / ListTile

listview.png

ListView(

children: <Widget>[
ListTile(
leading: Icon(Icons.g_translate),
title: Text("Google"),
),
ListTile(
leading: Icon(Icons.computer),
title: Text("Dart"),
),
ListTile(
leading: Icon(Icons.mobile_screen_share),
title: Text("Flutter"),
),
],
),

ListViewとListTileで実現しています。

ListView.builderやListView.customなどがありますが、この辺りは割愛します。

横向きのListViewもscrollDirectionで指定してあげることで実現できます。

もちろんスクロール可能です。


TabBar / Tab / TabBarView

tabbar.gif

DefaultTabController(

length: 3,
child: Scaffold(
appBar: AppBar(
title: ...
bottom: TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.tag_faces,),),
Tab(icon: Icon(Icons.credit_card,),),
Tab(icon: Icon(Icons.info,),),
],
),
),
body: TabBarView(
children: <Widget>[
Container(color: Colors.yellow,),
Container(color: Colors.orange,),
Container(color: Colors.red,),
]),
),
),

tabbar_page.dart


BottomNavigationBar

bottomnavigationbar.png

Scaffold(

bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(...),
BottomNavigationBarItem(...),
...
],
),
);


Item


Image

image.png

Image.network(...),

今回はImage.networkでURLを指定して表示しています。

他にもImage.assetでローカル画像を表示できたりします。

git画像がサポートされているのも嬉しいポイントです。


Icon

icon.png

Icon(

Icons.accessibility,
),

Iconsでかなり多くのアイコンが用意されているので、ほとんどカバーできると思います。


Progress

progress.gif

CircularProgressIndicator()

LinearProgressIndicator()

プログレスも2種類用意されています。


CheckBox / Radio / Switch

check.gif

Checkbox(

value: ...
),

Radio(

value: ...
),

Switch(

value: ...
),

設定画面などでよく使用される、CheckBox/Radio/Switchがそれぞれ用意されています。


Card

card.png

Card(

child: ...
),

影の幅や形なども変えることができます。

もともとのサイズは0なので、親か子でサイズを指定することで表示されるようになります。


FloatingActionButton

fab.png

Scaffold(

floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {...},
),
);

右下のアイコンです。

floatingActionButtonLocationでFABアイコンの場所を変えられます。


Drawer

drawer.gif

Scaffold(

drawer: Drawer(
child: ...
),
);

自動的にハンバーガーアイコンが表示されます。

その他にもDrawerHeaderというWidgetも用意されています。


CircleAvatar

circleavatar.png

CircleAvatar(

child: Icon(Icons.person),
),

プロフィール画像などに使われる円形のWidgetです。


Opacity

opacity.png

Opacity(

opacity: 0.5,
child: ...
),

子Widgetをすべて透過できます。


Button


RaisedButton

raisedbutton.gif

RaisedButton(

child: Text("Button!"),
onPressed: () {}
),

スタンダードなボタンです。


FlatButton

flatbutton.gif

FlatButton(

child: Text("Button!"),
onPressed: () {}
),


IconButton

iconbutton.gif

IconButton(

icon: Icon(Icons.add_circle),
onPressed: () {},
),


DropDownButton

dropdown.gif

DropdownButton(

value: ...,
items: [
DropdownMenuItem(...),
],
onChanged: (value) {...},
),

書き方は伝わりにくいと思いますので、直接コードみてみてください。

drop_down_button.dart


Text


Text / TextStyle

text.png

Text('I love Flutter',

style: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.normal,
letterSpacing: 4.0,
),
),

文字サイズや色などもTextStyleで簡単に設定できます。

Cookbookにカスタムフォントに変更する方法も解説されています。


TextField

textfield.gif

TextField(

decoration: InputDecoration(
hintText: '入力してください'
),
),

簡易的に入力ボックスを実装できるWidgetです。

InputFormTextも用意されています。


Animation


AnimatedPositioned etc..

animatedpositioned.gif

animated_positioned_page.dart

FlutterではAnimation系が充実していて、他にもAnimatedOpacityやAnimatedPaddingなどなど複数用意されています。

以下で、とてもわかりやすく解説してくれています。

[参考]: https://medium.com/flutter-jp/implicit-animation-b9d4b7358c28


まとめ

今回のプロジェクトをGitHubにおいていますので、もしよければご覧ください。

だんだんFlutterを触っていると、自分の好きなWidgetが出てくると思います。

あなたの推しWidgetはどれでしょうか??

ぜひ、一番の推しWidgetを見つけてみてください!

私は、FlutterLogoという、あまり活躍頻度が高くないWidgetがさりげなく作られていて、一番気に入っています。

ぜひ使ってあげてください。