Flutter Widget一覧（最新版）

# はじめに
Flutter最高ですね！
Flutterに関する記事を書きたいと思い、FlutterのWidget一覧を作成しました。
もしよろしければご覧ください。
随時更新していきます。

改訂履歴
※2021/05/16 スタイルに関するWidgetを追加


# ◇目次
・[基本的なWidget](#基本的なwidget)
・[テキストに関するWidget](#テキストに関するwidget)
・[スタイルに関するWidget](#スタイルに関するwidget)
・[最後に](#最後に)


# ◇基本的なWidget
Flutterでアプリを作る上で必ず知っておきたいWidgetです。

|  Widget名  |  イメージ  |  説明  |  よく使うプロパティ  |  動画  |
| :--- | :--- | :--- | :--- | :--- |
|  [Appbar()](https://api.flutter.dev/flutter/material/AppBar-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/f5abda1c-373f-54da-4fc4-2c4f4558d4d8.png"  width="100" height="100">  |  マテリアルデザインのAppBarです。AppBarはToolBarやTabBar、FlexibleSpaceBar等で構成されています。  |  title:<br> centerTitle:<br> leading:<br> actions:  |   |
|  [Container()](https://api.flutter.dev/flutter/widgets/Container-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/520dc6d9-cbd0-cba4-2232-6e115a162d70.png"  width="100" height="100">  |  色付け、配置、サイズ設定ウィジェットを組み合わせた便利なウィジェット。  |  child:<br> color:<br> padding:<br> margin:<br> decoration:<br> width:<br> height:<br>  |  https://youtu.be/c1xLMaTUWCY  |
|  [Column()](https://api.flutter.dev/flutter/widgets/Column-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/c24783ba-5691-7eea-df4f-c9aaa5950dea.png"  width="100" height="100">  |  子ウィジェットを縦並びに配置します。  |  children:<br> mainAxisAlignment:<br> crossAxisAlignment:<br>  |   |
|  [Row()](https://api.flutter.dev/flutter/widgets/Row-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/2f6d892c-0522-1c3f-324a-e1c03bc82567.png"  width="100" height="100">  |  子ウィジェットを横並びに配置します。  |  children:<br> mainAxisAlignment:<br> crossAxisAlignment:  |   |
|  [ElevatedButton()](https://api.flutter.dev/flutter/material/ElevatedButton-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/549c4732-8ad5-a85a-22f2-f28d37aa3a8c.png"  width="100" height="100">  |  マテリアルデザインの立体ボタン。押下された際に浮かび上がってくる、塗りつぶされたボタン。  |  child:<br> enabled:<br> onPressed:<br> onLongPress:<br> style:  |   |
|  [Icon()](https://api.flutter.dev/flutter/widgets/Icon-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/a394982e-b804-6f06-402b-5f720955376f.png"  width="100" height="100">  |  マテリアルデザインのアイコンです。  |  color:<br> size:  |   |
|  [Image()](https://api.flutter.dev/flutter/widgets/Image-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/1b2771b6-e921-64cd-efaf-a42f9372ccc1.png"  width="100" height="100">  |  画像を表示するウィジェットです。  |  width:<br> height:<br> fit:  |  https://youtu.be/7oIAs-0G4mw  |
|  [Placeholder()](https://api.flutter.dev/flutter/widgets/Placeholder-class.html)  |   |  ボックスを配置するウィジェットです。そのボックスは将来的に配置されるであろう他のウィジェットを意味しています。  |  fallbackHeight:<br> fallbackWidth:<br> color:  |  https://youtu.be/LPe56fezmoo  |
|  [Scaffold()](https://api.flutter.dev/flutter/material/Scaffold-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/3c5e5250-0b5d-104c-5e5d-14b1edcdfa7b.png"  width="100" height="100">  |  Scaffoldはマテリアルデザインの基本的なレイアウトを構成している道具の集まりです。Scaffoldはドロワー表示やスナックバー、ボトムシート等のAPIを提供しています。  |  appBar:<br> drawer:<br> endDrawer:<br> body:<br> floatingActionButton:<br> bottomNavigationBar:<br>  |   |
|  [Text()](https://api.flutter.dev/flutter/widgets/Text-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/d702fc98-8b44-5a40-ce9c-ce58d7e4bfbe.png"  width="100" height="100">  |  シンプルなテキストを表示するWidgetです。  |  style:  |   |


# ◇テキストに関するWidget
テキスト表示の際に使用するWidgetです。

|  Widget名  |  イメージ  |  説明  | よく使うプロパティ  |  動画  |
| :--- | :--- | :--- | :--- | :--- |
|  [Text()](https://api.flutter.dev/flutter/widgets/Text-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/d702fc98-8b44-5a40-ce9c-ce58d7e4bfbe.png"  width="150" height="150">  |  シンプルなテキストを表示するWidgetです。  |  style: |   |
|  [RichText()](https://api.flutter.dev/flutter/widgets/RichText-class.html)  |   |  リッチテキスト・ウィジェットは、複数の異なるスタイルを使用したテキストを表示します。表示されるテキストは、TextSpanオブジェクトのツリーを用いて描画されます。それぞれのTextSpanオブジェクトはオブジェクトのサブツリーに使用するスタイルに結び付けられます。  |  text:  |  https://youtu.be/rykDVh-QFfw  |
|  [DefaultTextStyle()](https://api.flutter.dev/flutter/widgets/DefaultTextStyle-class.html)  |   |  明確なスタイルの無い派生したテキストウィジェットに利用するためのテキストスタイルです。  |  child:  |    |


# ◇スタイルに関するWidget
テキスト表示の際に使用するWidgetです。

|  Widget名  |  イメージ  |  説明  | よく使うプロパティ  |  動画  |
| :--- | :--- | :--- | :--- | :--- |
|  [Padding()](https://api.flutter.dev/flutter/widgets/Padding-class.html)  |  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269434/400e4b34-0de4-0033-fbcc-17ebcde2adc9.png"  width="150" height="150">  |  子に指定したウィジェットのパディングを設定するウィジェット 。  |  child:<br> padding:  |  https://youtu.be/oD5RtLhhubg  |
|  [MediaQuery.of(context)](https://api.flutter.dev/flutter/widgets/Padding-class.html)  |    |  メディアクエリーが与えられたデータによって、解析したサブツリーを作ります。  |  .size  |  https://youtu.be/A3WrA4zAaPw  |
|  [Theme.of(context)](https://api.flutter.dev/flutter/widgets/Padding-class.html)  |    |  派生したウィジェットにテーマを与えます。テーマとはアプリの色や表記の選択肢の事です。  |  .primaryColor<br> .textTheme<br> .primaryTextTheme  |    |


# ◇最後に
ここまで読んで頂きありがとうございました。
(最後に「いいね！」ボタン押して頂けたら嬉しいですﾎﾞｿｯ)
みなさま、良きFlutterライフを！