👨💻
Flutterのmain.dartについて
この記事について
Flutterのmain.dartについてまとめた。
理由：数年ぶりのプログラミング学習で色々忘れていることがあったため。また、main.dartにて「これなんだっけ？」と再度調べることがありすぐに確認できるよう備忘録としても記載。
この記事に向いている人
- Flutterを始めたばかりの人。
- プログラミングの基礎はわかっている人。
main.dartは表示する画面
このコードは、ボタンをタップするたびにカウンターがインクリメントされ、それを画面に表示する。
import
"material"パッケージをインポートするためのコード。
import 'package:flutter/material.dart';
- マテリアルデザインに基づいたUIコンポーネントを提供するためのパッケージ。
- アプリのタイトルバー、ナビゲーションバー、ボタン、テキストフィールドなどが含まれる。
- "MaterialApp"や"RaisedButton"などのウィジェットを使用することができる。
void main()
void main() {
runApp(const MyApp());
}
- Flutterアプリケーションのエントリーポイント。
- Flutterアプリケーションの最初に実行される関数であり、ここでアプリケーションのルートウィジェットを作成して、表示するための処理を行う。
class MyApp（少し長いので分割して記載）
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
- Flutterアプリケーションのルートウィジェットである、"MyApp"クラスの定義部分。
- "MyApp"クラスは、"StatelessWidget"クラスを継承して、ウィジェットツリー内で変更されないUIを構築するためのクラス。
- "MyApp"クラスのコンストラクタが定義されている。
- "MyApp"クラスのコンストラクタには、"Key"というオプションの引数が渡されている。
- "Key"は、ウィジェットが識別されるための一意の識別子であり、ウィジェットの再構築時に使用される。
- "super(key: key)"
- 親クラスである"StatelessWidget"クラスのコンストラクタを呼び出している。
- 親クラスのコンストラクタには、"Key"という引数が必要であり、この引数は"super"を使用して親クラスのコンストラクタに渡す必要がある。
- "Key"引数を受け取り、"StatelessWidget"クラスのコンストラクタに渡している。
- ウィジェットの構築に関する詳細は記述されていない。具体的なUIの構築に関するコードは、"build"メソッド内に記述される。
@overrideから下部分
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
@override
- サブクラスでスーパークラスのメソッドを再定義する際に使用する。同じ名前のメソッドを定義し、スーパークラスのメソッドを上書きしている。
- ウィジェットのレンダリングを定義するために"build"メソッドを使用するが、このメソッドはWidgetクラスに定義されている。したがって、サブクラスで"build"メソッドを再定義する際には、"@override"キーワードを使用して、Widgetクラスの"build"メソッドをオーバーライドしていることを明示的に示す必要がある。
buildメソッド
- ウィジェットのレンダリングを定義するメソッド。
- 必ず"Widget"オブジェクトを返す必要がある。
- このメソッドの中で、"MaterialApp"ウィジェットが返されている。
MaterialApp
マテリアルデザインを基本としたアプリケーションを作るためのウィジェットの一つ
- アプリケーション全体を包括するウィジェットで、通常はアプリケーションの最初に表示される。
- このウィジェットを使用することで、アプリケーションのテーマ、ルーティング、ローカリゼーションなどの基本的な機能を設定できる。
MaterialAppに設定できる主なプロパティ
- title：アプリケーションのタイトルを指定するための引数
- theme：アプリケーションのテーマを指定するための引数
- home：アプリケーションのホームページを指定するための引数
- routes：アプリケーション内で使用するルート
- localizationsDelegates：アプリケーションの多言語化に関する設定
"theme"引数："ThemeData"オブジェクトが指定されており、"primarySwatch"プロパティが"Colors.blue"に設定されてる。これにより、アプリケーションのプライマリーカラーがブルーで表示される。
"home"引数："MyHomePage"ウィジェットが指定されており、そのタイトルとして"Flutter Demo Home Page"が渡されている。"MyHomePage"ウィジェットは、アプリケーションのホームページを定義するためのウィジェットであり、タイトルを表示するテキストウィジェットやカウンターを操作するボタンウィジェットなどを含んでいる。
class MyHomePage
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
MyHomePageクラスについて
- MyHomePageは、ユーザーインターフェイス上に表示されるタイトルを持つ。
- MyHomePageクラスは、StatefulWidgetクラスを継承している。これにより、MyHomePageは、状態を保持するために使用できるStateオブジェクトを持つことができる。
- State< MyHomePage >クラスを継承している。
- createStateメソッドをオーバーライドして、MyHomePageに関連する_MyHomePageStateオブジェクトを作成している。
_MyHomePageState
- State< MyHomePage >クラスを継承している。
- ビルドメソッドが含まれており、MyHomePageの外観を定義するために使用される。
const
- constを使用して、MyHomePageのコンストラクターを定義し、titleプロパティを受け取るようにしている。
- このコンストラクターは、super.keyを呼び出して、StatefulWidgetクラスのコンストラクターを呼び出している。
void _incrementCounter()
void _incrementCounter() {
setState(() {
_counter++;
});
}
_incrementCounter
- _incrementCounterという名前のメソッドを定義している。ボタンがタップされたときに呼び出される。
- setStateメソッドを使用して、アプリケーションの状態を変更している。_counterという名前の変数を1つ増やしている。これがないと画面に変更された数字が画面に表示されない。
下記はホーム画面を表している
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
Scaffold
- ページの土台となる。アプリケーションバー、ボトムナビゲーションバー、フローティングアクションボタンなどの一般的なUI要素を含まれている。
appBar
- アプリの上部に表示されるバー。
- アプリ名やページのタイトルなどの情報を含めることができる。
- アプリケーションバーを構成するためのウィジェットを指定できる。
- titleプロパティには、MyHomePageウィジェットが持つtitleプロパティの値が渡される。
body
- アプリのメインコンテンツを構成するためのウィジェットを指定できる。この場合、Centerウィジェットが作成され、その中にColumnウィジェットがある。
Column
- mainAxisAlignmentプロパティがあり、縦方向の配置方法を指定できる。この場合、MainAxisAlignment.centerが指定されているため、子要素が垂直方向に中央に配置される。
children
- Textウィジェットが2つあり、最初のTextウィジェットは、固定テキストを表示し、2番目のTextウィジェットは、_counter変数の値を表示する。
floatingActionButton
- フローティングアクションボタンを構成するためのウィジェットを指定できます。この場合、FloatingActionButtonウィジェットが作成され、onPressedプロパティには、_incrementCounterメソッドが指定され、ボタンがタップされたときに呼び出される。
child
-
Icons.addが指定されているので、プラスアイコンがボタンに表示される。
tooltip
- ボタンにマウスを乗せたときに表示されるテキストが指定される。
全体
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
Discussion