LoginSignup
717
600

More than 3 years have passed since last update.

@coka__01

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

Last updated at Posted at 2019-04-14

運よく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

717
600
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
717
600