Flutterでアプリを開発する際、UIを構築する基本となるのがScaffoldウィジェットです。Scaffoldは、アプリ画面の「骨格」を作るためのウィジェットで、他のウィジェットと組み合わせることで、柔軟なレイアウトを実現できます。この記事では、Scaffoldの主な特徴やプロパティについて解説し、初心者が実際に使えるサンプルコードも交えて、その使い方を詳しく紹介します。
Scaffoldの特徴
UI構築のスタート地点
Scaffoldは、FlutterでUIを設計する際の基本フレームです。アプリ全体のレイアウト構造を簡単に定義できるため、Flutterアプリのほとんどで使われています。
例えると「白紙のキャンバス」
Scaffoldを一枚の白紙に例えると、その上にペン（ウィジェット）を使って、文字や絵を自由に描くイメージです。ボタンやリスト、ナビゲーションバーといった要素を自由に追加していけます。
Material Designとの相性の良さ
GoogleのデザインガイドラインであるMaterial Designに準拠したUI構築を簡単に実現できます。例えば、appBarやfloatingActionButtonなどは、Scaffoldのプロパティとして直接設定できます。
Scaffoldの主なプロパティ
必須プロパティ
- appBar: アプリ画面上部のバー（タイトルやボタンを配置可能）
- body: 画面のメインコンテンツ領域
- floatingActionButton: 強調されたアクションボタン
その他の便利なプロパティ
- drawer: 左側のサイドメニュー
- endDrawer: 右側のサイドメニュー
- bottomNavigationBar: 画面下部のナビゲーションバー
- bottomSheet: コンテキストメニューやモーダル表示
- backgroundColor: 背景色
- persistentFooterButtons: 常に表示されるフッターボタン
- extendBody: Body領域の背面まで拡張
- resizeToAvoidBottomInset: キーボード表示時の自動レイアウト調整
Scaffoldの各プロパティの使い方
appBar
appBarは、画面の上部に表示されるバーで、タイトルやアクションボタンを配置できます。以下のサンプルコードでは、タイトルとアクションボタンを設定しています。
Scaffold(
appBar: AppBar(
title: Text('アプリのタイトル'),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
print('設定ボタンが押されました');
},
),
],
),
);body
bodyは、画面のメインコンテンツを定義するエリアです。ColumnやRowを組み合わせることで、複雑なレイアウトも簡単に構築できます。
Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('メインコンテンツ'),
ElevatedButton(
onPressed: () {},
child: Text('ボタン'),
),
],
),
),
);floatingActionButton
画面の下部に配置される目立つボタンです。通常、特定のアクションを促すために使用されます。
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
print('FABが押されました');
},
child: Icon(Icons.add),
),
);drawerとendDrawer
アプリのサイドメニューを作成する際に使用します。drawerは左側、endDrawerは右側に表示されます。
Scaffold(
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
child: Text('メニュー'),
),
ListTile(
title: Text('項目1'),
onTap: () {},
),
],
),
),
);bottomNavigationBar
画面下部のタブナビゲーションを作成できます。
Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ホーム'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: '検索'),
],
),
);その他のプロパティ
- bottomSheet: 一時的な情報やアクションを表示します。
- backgroundColor: 画面全体の背景色を設定します。
- resizeToAvoidBottomInset: キーボードが表示されたときにレイアウトを調整します。
サンプルコードで学ぶScaffold
以下は、これまで解説したプロパティを活用した簡単なサンプルコードです。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Scaffoldの例'),
),
body: Center(
child: Text('メインコンテンツ'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
print('FABクリック！');
},
child: Icon(Icons.add),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ホーム'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: '検索'),
],
),
),
);
}
}Scaffoldを使う上でのTips
- floatingActionButtonを自由に配置
FloatingActionButtonLocationを活用することで、好きな位置にボタンを配置可能。
- ネストされたScaffoldを避ける
- 一つの画面で複数のScaffoldを使用すると、UIの動作が不安定になることがあります。
- 表示崩れの対処
resizeToAvoidBottomInsetをfalseに設定し、キーボード表示時の自動調整を無効にする。
まとめ
Scaffoldは、FlutterでUIを構築する際に欠かせない重要なウィジェットです。本記事で紹介したプロパティを理解することで、Material Designに沿ったUIを簡単に実装できます。さまざまなアプリに応用して、快適な開発を体験してください！
