本記事の目標
プロジェクト作成時の「main.dart」ファイルの内容をざっくり理解する
前提
プログラミングの知識が多少あること
main.dartファイルの中身（初期コメントは削除済み）
まずは「main.dart」ファイルを全て記載しておきます
import 'package:flutter/material.dart';
//１章「main関数」
void main() {
runApp(MyApp());
}
//２章「StatelessWidget」
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
//３章「StatefulWidget-前編」
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
//４章「StatefulWidget-後編」
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}今後の説明がしやすいように章番号をコメントとして記載しています
１章：main関数
main関数は、アプリを実行した時に最初に呼ばれる関数です！
Dartの場合は必ず必要な関数となっています〜
runApp(MyApp())に関しては一旦放置します〜
２章：StatelessWidget
StatelessWidgetをextends（継承）しているので、ここで使用されているウィジェットは不変ですね！
ここで先ほど放置したMyAppが出てきました〜クラス名だったんですね！
ということは、runAppがまだわかっていませんが、
おそらくmain関数では、MyAppクラスを実行しますよ〜みたいな感じですかね！
３章：StatefulWidget-前編
今度はStatefulWidgetをextendsしているので、ユーザー操作などによって値や文字が変わる可能性があるウィジェットが使用されます！
ただし、StatelessWidgetとは違い、StatefulWidgetの場合はもう一つのクラス（Stateを継承したもの）が必要となります
４章：StatefulWidget-後編
ということで、最後！
先ほど、StatefulWidgetにはクラスが２つ必要的なことを言ったのですが必要なクラスは以下の２つです
- StatefulWidgetを継承したクラス（３章）
- State<StatefulWidgetを継承したクラス名>を継承したクラス（４章）
実際に、状態を更新するためにはsetState()を呼ぶ必要があるなど、いろいろあるのですが今回はざっくり理解が目標なので
StatefulWidgetを使うためには二つのクラスが必要なんだなと思っていてください！
