BLOG
MaterialAppとScaffold: Flutter開発者の必須ウィジェット
2023.10.03
2023.10.10
1. はじめに
Flutterは、高性能なモバイルアプリをクロスプラットフォームで迅速に開発するためのUIツールキットとして非常に人気があります。Flutterの魅力の一つは、豊富なウィジェットが提供されており、それによって手軽にデザインが豊富なアプリを構築できることです。その中でも、MaterialAppとScaffoldは、Flutterアプリ開発において中心的な役割を果たす2つのウィジェットです。
この記事ではFlutter 3.10.1とDart 3.0.1をベースに解説を行っています。
2. MaterialAppとは
MaterialAppは、Material Designスタイルのアプリケーションを実装するためのウィジェットです。このウィジェットは、多くのアプリケーションでトップレベルのウィジェットとして利用されることが多いです。その理由として以下のような特徴が挙げられます。
2.1 テーマの設定
Flutterアプリで一貫したデザインを実現するためのテーマ設定を提供します。例えば、アプリ全体の文字色やボタンの色などを簡単に指定できます。
参考として以下のコードをご覧ください:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
);2.2 ルートの管理
Flutterでの画面遷移はNavigatorを用いて行いますが、MaterialAppのonGenerateRouteプロパティを使って特定のルート名に応じたページを表示することができます。
以下に、ルートの管理を行う部分を抜粋して示します。
return MaterialApp(
onGenerateRoute: (settings) {
if (settings.name == '/second') {
return MaterialPageRoute(builder: (context) => const SecondPage());
}
return MaterialPageRoute(builder: (context) => const MyHomePage(title: 'Flutter Demo Home Page'));
},
);上記のコードでは、onGenerateRouteを利用して、ルート名が/secondの場合にSecondPageを表示し、それ以外の場合はMyHomePageを表示しています。
また、実際に画面遷移を行う部分は以下のようになります。
void _navigateToSecondPage() {
Navigator.pushNamed(context,'/second');
}このメソッドは、ボタンがタップされた時に呼び出され、/secondという名前のルートに移動するよう指示しています。
2.3 ローカライゼーション
さまざまな言語や地域に合わせたアプリの対応をサポートします。
以下にローカライゼーションを行う部分を抜粋しています。
supportedLocales: const [
Locale('en', 'US'), // English
Locale('ja', 'JP'), // Japanese
],英語と日本語に限らず、多数の言語をサポートしています。
3. Scaffoldとは
Scaffoldは、基本的なMaterial Designのビジュアルレイアウト構造を提供するウィジェットです。主な特徴として以下の要素を簡単に実装できる点が挙げられます。
- AppBar: 画面の上部に配置されるアプリケーションバーをサポートします。これは、ページのタイトルやアクションボタンなどを含めることができる領域です。
- Drawer: 画面の左端からスワイプすることで表示されるナビゲーションメニューを実装することができます。
- FloatingActionButton: 画面の右下などに配置される、特定のアクションをトリガするための丸いボタンをサポートします。
- BottomNavigationBar: 画面の下部にタブのようなナビゲーション要素を追加することができます。
- Body: アプリの主要なコンテンツを表示する領域です。
4. MaterialAppとScaffoldを使用した例
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
onGenerateRoute: (settings) {
if (settings.name == '/second') {
return MaterialPageRoute(builder: (context) => const SecondPage());
}
return MaterialPageRoute(builder: (context) => const MyHomePage(title: 'Flutter Demo Home Page'));
},
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en', 'US'), // English
Locale('ja', 'JP'), // Japanese
],
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _navigateToSecondPage() {
Navigator.pushNamed(context, '/second');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: _navigateToSecondPage,
child: const Text('Go to Second Page'),
),
],
),
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Back'),
),
),
);
}
}5. まとめ
Flutterアプリを開発する際、MaterialAppとScaffoldは基本的な構成要素として非常に重要です。MaterialAppによって、アプリの基盤となる設定や機能が提供され、Scaffoldを利用することで、Material Designに基づいた一般的なページ構造を簡単に実装することができます。これらのウィジェットをうまく活用することで、効率的に高品質なアプリを開発することが可能となります。
