【Flutter】Scaffoldでよく使う要素まとめ

Slackコミュニティに

無料で参加する

Flutterラボの

プレミアム会員になる

【Flutter】Scaffoldでよく使う要素まとめ

2021.11.21

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

Flutterラボ｜動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

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,
);

Flutterラボ 現役エンジニアが教えるFlutter学習！プログラミング初心者でもiOS・Android・WEBアプリ開発を学ぶことがで www.youtube.com