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

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

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

Widgetについて、公式の[Widget catalog](https://flutter.dev/docs/development/ui/widgets)に詳しくまとまっています。
また、YouTubeでも[Widget of the Week](https://youtu.be/b_sQ9bMltGU)としてまとめられていますので、こちら全てチェックすることをおすすめします。

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

## Layout系
### Align
![align.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/c7923aec-2f42-6695-b2bd-e0857de1ea9b.png)

```dart
Align(
    alignment: Alignment.topRight,
    child: ...
  ),
```
名前の通りで、左上や右下など子Widgetの配置を揃えることができます。

### Padding
![padding.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/25283e1b-aa72-1a49-2844-6899ebc370b7.png)

```dart
Padding(
    padding: EdgeInsets.all(30.0),
    child: ...
  ),
```
EdgeInsetsでPaddingのサイズを設定できます。

### Container
![container.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/8f1157e7-df93-9c99-0bfa-21f84539cd52.png)

```dart
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/23f82e09-8a8e-34c6-86cf-3f4b07c44e5a.png)

```dart

Center(
  child: ...
),
```
子Widgetを中央表示してくれます。

### FittedBox / BoxFit
![fittedbox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/935cf3d1-18e5-8418-e1b4-3794f8e6c6d7.png)

```dart
FittedBox(
  fit: BoxFit.fitHeight,
  child: Image.network('https://picsum.photos/250?image=9',),
  ),
),
```
領域の「高さを合わせて表示」したり「幅に合わせて表示」したりできるWidgetです。
もともと正方形の画像を、高さに合わせて表示（BoxFit.fitHeight）しています。

### SafeArea
![safearea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/23e6d1bb-0bae-e872-15eb-28235c2f9e3a.png)

```dart

SafeArea(
  child: ...
),

```
SafeArea内を塗りつぶしています。
ノッチへの対応はこのWidgetで囲うだけです。

## Multi Layout
### Column
![column.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/7cd3fff1-5051-6ee3-fd86-a2c8fc485f39.png)

```dart

Column(
  children: <Widget>[
    ...
    ...
  ],
),
```
縦方向に並べたい時のWidgetです。

### Row
![row.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/bd9f51ac-e3f7-115c-457b-2d5de86f5052.png)

```dart

Row(
  children: <Widget>[
    ...
    ...
  ],
),
```
Columnの横方向バージョンです。

### Expanded
![expanded2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/359357bb-4bfc-ffe5-8ef5-fd882bc883ea.png)

```dart

Row(
  children: <Widget>[
    Expanded(
      flex: 3, child: ...
    ),
    Expanded(
      flex: 2, child: ...
    ),
    Expanded(
      flex: 1, child: ...
    ),
  ],
),
```
領域の最大限のサイズまで広げるWidgetです。
比率も指定できるため、こちらでは3:2:1の比率で表示しています。

### Stack
![stack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/3cc58061-cadc-00b0-d486-29fb1b1afe93.png)

```dart

Stack(
  children: <Widget>[
    ...
    ...
  ],
),
```
複数Widgetを重ねて表示することができます。

### ListView / ListTile
![listview.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/1daf67a8-5b26-7c46-9e96-de9bf8a132ce.png)

```dart

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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/ceec60da-0d8b-3c0a-ae12-28576ec48585.gif)

```dart

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](https://github.com/coka01/flutter_widget_app/blob/master/lib/multi_layout/tabbar_page.dart)

### BottomNavigationBar
![bottomnavigationbar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/07f5a79c-1ca1-ba94-3858-d3f50528813f.png)

```dart

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


## Item
### Image
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/ca46cbf2-73b8-0fb1-50d3-a4ae56523e62.png)

```dart

Image.network(...),
```
今回はImage.networkでURLを指定して表示しています。
他にもImage.assetでローカル画像を表示できたりします。
git画像がサポートされているのも嬉しいポイントです。

### Icon
![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/4ed88367-cff2-bda7-c4ef-2d770945e1b0.png)

```dart

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

### Progress
![progress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/339fac17-9671-7192-f0a5-59f6b5dc28d8.gif)

```
CircularProgressIndicator()
```
```
LinearProgressIndicator()
```
プログレスも2種類用意されています。

### CheckBox / Radio / Switch
![check.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/8fd5cc79-05de-7d11-87a7-3f51d0bc12d9.gif)

```dart

Checkbox(
  value: ...
),
```
```dart

Radio(
  value: ...
),
```
```dart

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

### Card
![card.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/7e70b27e-fea5-6245-7540-8617651f3622.png)

```dart

Card(
  child: ...
),
```
影の幅や形なども変えることができます。
もともとのサイズは0なので、親か子でサイズを指定することで表示されるようになります。

### FloatingActionButton
![fab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/8482a9b1-42de-8596-09e9-1ee88bc649cf.png)

```dart

Scaffold(
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {...},
  ),
);
```
右下のアイコンです。
floatingActionButtonLocationでFABアイコンの場所を変えられます。

### Drawer
![drawer.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/419c4e76-e641-49dd-1c81-99e35dd3a12a.gif)

```dart

Scaffold(
  drawer: Drawer(
    child: ...
  ),
);
```
自動的にハンバーガーアイコンが表示されます。
その他にもDrawerHeaderというWidgetも用意されています。

### CircleAvatar
![circleavatar.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/c91ed854-194c-5b2f-a911-36044564a918.png)

```dart

CircleAvatar(
  child: Icon(Icons.person),
),
```
プロフィール画像などに使われる円形のWidgetです。

### Opacity
![opacity.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/38fbe663-a3e4-9a1b-e3fb-df68ea677835.png)

```dart

Opacity(
  opacity: 0.5,
  child: ...
),
```
子Widgetをすべて透過できます。

## Button
### RaisedButton
![raisedbutton.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/b918b47f-19cb-0c77-cdd6-3cfe90e05c7a.gif)

```dart

RaisedButton(
  child: Text("Button!"),
  onPressed: () {}
),
```
スタンダードなボタンです。

### FlatButton
![flatbutton.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/7fdd8e73-ad19-d4b9-8607-ad031d725795.gif)

```dart

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

### IconButton
![iconbutton.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/72b0f3d9-7d91-2567-2471-62546d00b42a.gif)

```dart

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

### DropDownButton
![dropdown.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/50411228-1ced-04d3-cadf-870ffb3e813e.gif)

```dart

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

書き方は伝わりにくいと思いますので、直接コードみてみてください。
[drop_down_button.dart](https://github.com/coka01/flutter_widget_app/blob/master/lib/button/drop_down_button.dart)

## Text
### Text / TextStyle
![text.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/8249eec3-029a-a589-00ef-7aab8d2572b3.png)

```dart

Text('I love Flutter',
  style: TextStyle(
    fontSize: 32.0,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.normal,
    letterSpacing: 4.0,
  ),
),
```
文字サイズや色などもTextStyleで簡単に設定できます。
[Cookbook](https://flutter.dev/docs/cookbook/design/fonts)にカスタムフォントに変更する方法も解説されています。

### TextField
![textfield.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/2cbb30ba-a3dd-12f3-e4f5-826916078f89.gif)

```dart

TextField(
  decoration: InputDecoration(
    hintText: '入力してください'
  ),
),
```
簡易的に入力ボックスを実装できるWidgetです。
InputFormTextも用意されています。

## Animation
### AnimatedPositioned etc..
![animatedpositioned.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/473cd916-a89f-ab2c-b723-2865457cde7b.gif)
[animated_positioned_page.dart](https://github.com/coka01/flutter_widget_app/blob/master/lib/animation/animated_positioned_page.dart)

FlutterではAnimation系が充実していて、他にもAnimatedOpacityやAnimatedPaddingなどなど複数用意されています。
以下で、とてもわかりやすく解説してくれています。
[参考]： https://medium.com/flutter-jp/implicit-animation-b9d4b7358c28

## まとめ
[今回のプロジェクトをGitHubにおいています](https://github.com/coka01/flutter_widget_app)ので、もしよければご覧ください。

これ以外にも、たくさんの便利なWidgetが用意されています。
以下の2つはチェックしておくことをおすすめします。
1. [Widget catalog](https://flutter.dev/docs/development/ui/widgets)
2. [Widget of the Week](https://youtu.be/b_sQ9bMltGU)