アプリ開発のUIの基盤となるScafoldについて、よく使うプロパティを紹介します。

appBar

アプリのヘッダー

Scaffold(
  appBar: AppBar(title: const Text('AppBarのタイトル'),),
);

body

ヘッダーより下のほとんどの部分

Scaffold(
  appBar: AppBar(title: const Text('AppBarのタイトル'),),
  body: const Text('body'),
);

floatingActionButton

右下のボタン

Scaffold(
  appBar: AppBar(title: const Text('AppBarのタイトル'),),
  body: const Text('body'),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add)
  ),
);

drawer

左から出てくるメニュー

Scaffold(
  appBar: AppBar(title: const Text('AppBarのタイトル'),),
  body: const Text('body'),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add)
  ),
  drawer: const Drawer(
    child: SafeArea(child: Text('Drawer')),
  ),
);

endDrawer

右から出てくるメニュー

Scaffold(
  appBar: AppBar(title: const Text('AppBarのタイトル'),),
  body: const Text('body'),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add)
  ),
  drawer: const Drawer(
    child: SafeArea(child: Text('Drawer')),
  ),
  endDrawer: const Drawer(
    child: SafeArea(child: Text('Drawerの逆')),
  ),
);

backgroundColor

背景色

Scaffold(
  appBar: AppBar(title: const Text('AppBarのタイトル'),),
  body: const Text('body'),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add)
  ),
  drawer: const Drawer(
    child: SafeArea(child: Text('Drawer')),
  ),
  endDrawer: const Drawer(
    child: SafeArea(child: Text('Drawerの逆')),
  ),
  backgroundColor: Colors.lightGreen,
);