1. coka__01

    Posted

    coka__01
Changes in title
+Flutter開発する前に知っておきたい35のWidget一覧
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,420 @@
+運よくFlutterでの開発プロジェクトに参加できましたので、Flutter開発する前に知っておきたいWidget集をまとめます。
+
+それぞれのWidgetがどんなものなのか、イメージが湧けば十分だと思いますので、画像中心でいきます。
+
+Widgetについて、公式の[Widget catalog](https://flutter.dev/docs/development/ui/widgets)に詳しくまとまっています。
+詳しくはそちらをご覧いただければと思います。
+
+個人の見解でWidgetを選定していますのでご了承ください。
+
+## Layout系
+### Align
+![align.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/c7923aec-2f42-6695-b2bd-e0857de1ea9b.png)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+Row(
+ children: <Widget>[
+ Expanded(
+ flex: 3, child: ...
+ ),
+ Expanded(
+ flex: 2, child: ...
+ ),
+ Expanded(
+ flex: 1, child: ...
+ ),
+ ],
+),
+```
+比率を設定して、子Widgetを最大限のサイズまで広げる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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+Checkbox(
+ value: ...
+),
+```
+```
+Radio(
+ value: ...
+),
+```
+```
+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)
+
+```
+Card(
+ child: ...
+),
+```
+影の幅や形なども変えることができます。
+もともとのサイズは0なので、親か子でサイズを指定することで表示されるようになります。
+
+### FloatingActionButton
+![fab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/8482a9b1-42de-8596-09e9-1ee88bc649cf.png)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)
+
+```
+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)ので、もしよければご覧ください。
+
+だんだんFlutterを触っていると、自分の好きなWidgetが出てくると思います。
+あなたの推しWidgetはどれでしょうか??
+ぜひ、一番の推しWidgetを見つけてみてください!
+
+私は、FlutterLogoという、あまり活躍頻度が高くないWidgetがさりげなく作られていて、一番気に入っています。
+ぜひ使ってあげてください。