Flutterよく使う ウィジェット

Flutterでよく使うウィジェット一覧とコードまとめ
※随時更新します

ボタン

名前	画像	説明
FloatingActionButton		画面の上に浮かぶ円形のボタン
TextButton		テキスト上のボタン
ElevatedButton		影のあるボタン
IconButton		アイコンのボタン

テキスト

名前	画像	説明
Text		テキストを表示
TextField		テキストを入力できる場所

アイテム

名前	画像	説明
Appbar		画面上部のバー
Drawer		左側に画面を表示
BottomNavigationBar		画面下部に配置するナビゲーションバー
SnackBar		画面下部の通知
Card		カード形式のコンテンツ
Container		様々なスタイルがある箱
Image		画像を表示

レイアウト

名前	画像	説明
Align		右上や左下などに配置する
Stack		ウィジェットを重ねる
Sizedbox		隙間やサイズを固定する
Center		要素を真ん中に置く
Row		要素を横に並べる
Columun		要素を縦に並べる
Padding		要素に余白をつける
ListView		要素をリストに並べる

FloatingActionButton ・ SnackBar

FloatingActionButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('ボタンが押されました！'),
      ),
    );
  },
  child: const Icon(Icons.add),
);

TextButton

TextButton(
  onPressed: () {},
  child: const Text('テキストボタン'),
);

ElevatedButton

ElevatedButton(
  onPressed: () {},
  child: const Text('ボタン'),
),

IconButton

IconButton(
  onPressed: () {},
  icon: const Icon(Icons.favorite_sharp),
);

Text

Text(
  "テキスト"
  style: const TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.bold,
  ),
),

TextField

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'テキストフィールド',
  ),
),

AppBar

return Scaffold(
  appBar: AppBar(
  backgroundColor: Colors.blue,
  title: const Text('ウィジェット一覧'),
),

Drawer

Drawer(
  child: ListView(
    children: <Widget>[
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('上部'),
      ),
      ListTile(
        title: const Text('アイテム１'),
        onTap: () {},
      ),
      ListTile(
        title: const Text('アイテム２'),
        onTap: () {},
      ),
    ],
  ),
);

BottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'タブ1',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.message),
      label: 'タブ2',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.brightness_5_sharp),
      label: 'タブ3',
    ),
  ],
  selectedItemColor: Colors.blue,
),

Card

Card(
  child: ListTile(
    leading: Icon(Icons.photo),
    title: Text('カード'),
    subtitle: Text('カードのサブタイトル'),
  ),
),

Container

Container(
  height: 100,
  width: double.infinity,
  color: Colors.blue,
);

Image

Image(
  image: NetworkImage(
    'URL',
  ),
  width: 100,
  height: 100,
),