Help us understand the problem. What is going on with this article?

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

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

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

Widgetについて、公式のWidget catalogに詳しくまとまっています。
また、YouTubeでもWidget of the Weekとしてまとめられていますので、こちら全てチェックすることをおすすめします。

個人の見解で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です。
比率も指定できるため、こちらでは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においていますので、もしよければご覧ください。

これ以外にも、たくさんの便利なWidgetが用意されています。
以下の2つはチェックしておくことをおすすめします。
1. Widget catalog
2. Widget of the Week

coka__01
Flutterが好きなスマホアプリエンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした