1. coka__01

    No comment

    coka__01
Changes in body
Source | HTML | Preview
@@ -1,420 +1,444 @@
運よく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を最大限のサイズまで広げるWidgetです。
-3:2:1の比率で表示しています。
+領域の最大限のサイズまで広げる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)ので、もしよければご覧ください。
-だんだんFlutterを触っていると、自分の好きなWidgetが出てくると思います。
-あなたの推しWidgetはどれでしょうか??
-ぜひ、一番の推しWidgetを見つけてみてください!
-
-私は、FlutterLogoという、あまり活躍頻度が高くないWidgetがさりげなく作られていて、一番気に入っています。
-ぜひ使ってあげてください。
+これ以外にも、たくさんの便利なWidgetが用意されています。
+以下の2つはチェックしておくことをおすすめします。
+1. [Widget catalog](https://flutter.dev/docs/development/ui/widgets)
+2. [Widget of the Week](https://youtu.be/b_sQ9bMltGU)