Flutterは、Googleによって開発されたクロスプラットフォームのモバイルアプリ開発フレームワークで、Android、iOS、Web、Windows、macOSなどの複数のプラットフォームでアプリケーションを開発できます。
Scaffoldは、Flutterで最も一般的に使用されるウィジェットの1つで、アプリケーションの標準的な画面構造を提供します。Scaffoldウィジェットは、アプリケーションバー、ドロワー、浮動アクションボタン、スナックバーなど、アプリケーションの基本的な構成要素を含むことができます。
この記事では、FlutterのScaffoldウィジェットについて、使い方を詳しく解説します。
Scaffoldの主なプロパティ
Scaffoldウィジェットは、アプリケーションの基本的な構成要素を提供します。以下は、Scaffoldウィジェットの主なプロパティです。
appBar: スクリーンの上部に表示されるアプリバーを定義します。body: アプリケーションの本体となるウィジェットを指定します。floatingActionButton: ウィンドウの右下隅に浮かび上がるボタンを定義します。persistentFooterButtons: ボディーの下に表示されるボタンのリストを定義します。drawer: アプリバーの左側に表示されるナビゲーションドロワーを定義します。endDrawer: アプリバーの右側に表示されるナビゲーションドロワーを定義します。bottomNavigationBar: スクリーンの下部に表示されるナビゲーションバーを定義します。bottomSheet: スクリーンの下部にスライドインするウィジェットを指定します。backgroundColor: Scaffoldの背景色を定義します。resizeToAvoidBottomInset: ソフトウェアキーボードが表示されたときに、自動的にScaffoldのサイズを調整するかどうかを制御します。extendBody: ボディの背景色をAppBarとBottomNavigationBarまで拡張するかどうかを制御します。extendBodyBehindAppBar: アプリバーの下までボディーの背景色を拡張するかどうかを制御します。
Scaffoldの各プロパティの使い方
ここでは上記のプロパティの主な使い方を紹介します。
appBar
appBarプロパティは、スクリーンの上部に表示されるアプリバーを定義します。以下は、AppBarにタイトルを表示する例です。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Scaffold Widget Demo',
home: MyHomepage(),
);
}
}
class MyHomepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('appBar Test'),
),
body: Container(),
);
}
}
これ以降のサンプルコードの記載は、上記サンプルコードの中で Scaffoldウィジット 部分を抜粋して記載します。
body
アプリケーションのメインコンテンツを表示します。以下は、bodyプロパティの例です。
Scaffold(
appBar: AppBar(
title: Text('body Test'),
),
body: Center(
child: Text('Hello, World!'),
),
);
floatingActionButton
floatingActionButtonプロパティは、ウィンドウの右下隅に浮かび上がるボタンを定義します。以下は、ScaffoldにFloatingActionButtonを表示する例です。
Scaffold(
appBar: AppBar(
title: Text('floatingActionButton Test'),
),
body: Container(),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
);
persistentFooterButtons
persistentFooterButtonsプロパティは、ボディーの下に表示されるボタンのリストを定義します。以下は、Scaffoldにボタンを表示する例です。
Scaffold(
appBar: AppBar(
title: Text('persistentFooterButtons Test'),
),
body: Container(),
persistentFooterButtons: <Widget>[
ElevatedButton(
onPressed: () {},
child: Text('Button 1'),
),
ElevatedButton(
onPressed: () {},
child: Text('Button 2'),
),
],
);
drawer
drawerプロパティは、アプリバーの左側に表示されるナビゲーションドロワーを定義します。以下は、ScaffoldにDrawerを表示する例です。
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Container(),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {},
),
ListTile(
title: Text('Item 2'),
onTap: () {},
),
],
),
),
);endDrawer
endDrawerプロパティは、アプリバーの右側に表示されるナビゲーションドロワーを定義します。以下は、ScaffoldにEndDrawerを表示する例です。
Scaffold(
appBar: AppBar(
title: Text('endDrawer Test'),
),
body: Container(),
endDrawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: Text('Item 1'),
onTap: () {},
),
ListTile(
title: Text('Item 2'),
onTap: () {},
),
],
),
),
);bottomNavigationBar
bottomNavigationBarプロパティは、スクリーンの下部に表示されるナビゲーションバーを定義します。以下は、ScaffoldにBottomNavigationBarを表示する例です。
Scaffold(
appBar: AppBar(
title: Text('bottomNavigationBar Test'),
),
body: Container(),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
),
);
bottomSheet
bottomSheetプロパティは、スクリーンの下部に表示されるスライドシートを定義します。以下は、ScaffoldにBottomSheetを表示する例です。
Scaffold(
appBar: AppBar(
title: Text('bottomSheet Test'),
),
body: Container(),
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200.0,
child: Center(
child: Text('This is the BottomSheet'),
),
);
},
);
},
child: Icon(Icons.add),
),
);extendBody
extendBodyプロパティは、Scaffoldのボディーの範囲をアプリバーとボトムナビゲーションバーの下まで拡張するかどうかを指定します。以下は、extendBody: trueを使用した例です。
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Container(),
extendBody: true,
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
),
);extendBodyBehindAppBar
extendBodyBehindAppBarプロパティは、アプリバーの背後にボディーを拡張するかどうかを指定します。以下は、extendBodyBehindAppBar: trueを使用した例です。
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
title: Text('extendBodyBehindAppBar Test'),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/background.png'),
fit: BoxFit.cover,
),
),
child: Center(
child: Text('Welcome to my app'),
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
),
);
resizeToAvoidBottomInset
resizeToAvoidBottomInsetプロパティは、ソフトウェアキーボードが表示されたときに、ボディーを自動的にリサイズするかどうかを指定します。以下は、resizeToAvoidBottomInset: trueを使用した例です。
Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Container(),
resizeToAvoidBottomInset: true,
);まとめ
以上が、Scaffoldのプロパティとその使い方についての詳細です。Scaffoldは、Flutterアプリの基盤となるウィジェットであり、様々なUI要素を簡単に実装することができます。各プロパティを使用して、アプリケーションのデザインと機能を最適化しましょう。