Part1では環境構築をしたのでPart2では実際にプログラムを動かしてみましょう
仮想マシン立ち上げ
flutterを開いてはじめのテストプログラムを動かす前に、Part1で設定したAVDでandroidの仮想マシンを立ち上げます
まずandroidのロゴのあるスマホマークを押して、次に設定したスマホが出てくるので矢印ボタンを押します
こんな感じにロードして。。。
スマホ仮想マシンが出てきました！！
（あんまりやる人はいないと思いますがNestedに対応していないCPUのVMでやると仮想マシンは動きません）
テストプログラムを動かします
libに行くとmain.dartと書かれたファイルが出てきます。flutterは基本dart言語なのでここが出発点的な感じですね
右上のボタンをクリックするとプログラムが実行されます。
プログラム実行はちょっと時間がかかります。
ちょっと時間がたつと仮想マシンに動きが。。。
そうこれがテストプログラムの中身です。右下のプラスボタンを押すと真ん中の数字がカウントされていく感じです。
さてこのプログラムがどうなっているのか初心者なりに勉強したのでちょっと見てみましょう。。
import 'package:flutter/material.dart';
これはファイルを読み取る文で、material.dartというクラス（設計図的な）がいろいろ入ったパッケージを読み取ることでこのmain.dartで使えるクラスを増やします。
例えると料理で何も今道具がない状態でmaterial.dartという包丁を手に入れたようなものです。素手で料理する以外にも様々なことができるようになります。
void main() {
runApp(const MyApp());
}
main関数は始めの関数という感じです。そしてrunAppでMyAppを呼び出しているだけという感じで理解します。
void mainとついているのはmainはMyAppを呼び出すだけで何も返さなくていいよという感じです。
詳しくはこちらを。。
flutterzero.com
@override
これは結構難しかったので
wa3.i-3-i.info
ここで基本的なことを見て勉強してからの
zenn.dev
こちらを読むとよいと思います。
つまりStateless Widgetのbuildメソッドを上書きしているということになると思います。
たこ焼きに例えましょう。MyAppはたこ焼きの名前とします。
本来stateless widget（たこ焼き）のbuildメソッドはたこ焼きの焼き方が記されています。
しかし今回はオーソドックスなたこ焼きではダメです。作りたいものを作るのです。
そこでインポート（冷蔵庫にあった）してきた具材セット(Material App)を持ってきました。
そこでたこ焼きの中身をtitle: Flutter Demo(ネギ) theme:Theme Data(鰹節) Primary Swatch: Colors.blue(アオノリ）home: const MyHomePage...(イカ）に再定義しました。
そうするとたこ焼きの焼き方であるbuildメソッドがイカ焼きになってしまいました。
しかしStateless Widgetの基本的なたこ焼きの作り方（たこ焼き機を使うなど）は変更されていませんので、材料がイカでもあの平べったいイカ焼きではなく、丸いイカ焼きができます。
これが@overrideです。 たぶん
たこ焼きの話長くなったので飛んで32行目いきます
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
さっきbuildメソッドでMyhomepage（イカ）が呼び出されていたのでここで詳細を書くということでしょうか。つまりイカの産地とか種類とか部位とかを決めるんでしょう
final String title;
これはbuildメソッドの最後で出てきた
home: const MyHomePage(title: 'Flutter Demo Home Page'),
のtitleをfinalで定義しています。finalは変えることのできない定数です。
つまりこれはイカであり、それは不変だと言っているんだと思います。
イカ（title: 'Flutter Demo Home Page')を変えたら違う料理になってしまいますからね。
@override
State<MyHomePage> createState() => _MyHomePageState();
はいまた出てきました@override
そういえば今回のクラス(class MyHomePage extends StatefulWidget)
はstatelessではなくてstatefull、つまり状態が変わるクラスになります。
どういうことかというと
サンプルプログラムを実行するとFlutter Demo Home Pageと出るところは上にあり、カラーは青色でこのアプリの名前はFlutter Demoという状態は変わらないものなので先ほどはStatelessだったわけです。
しかし今回のクラスはボタン押したりボタン押したらカウントされたりと状態が変わります。これがstatefulです。たぶん。
なんか全体像が見えてきましたね
先ほどたこ焼きの長い説明をしていたクラスが回りのガワを決めるクラスで、今説明しているクラスがボタンとかカウントしたら数字が増えるとかの機能を持つことになるんでしょう。
というわけで
@override
State<MyHomePage> createState() => _MyHomePageState();
はMyHomePageのcreateStateは_MyHomePageStateに上書きされるということですね。
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
クラスの仕様も段々わかってきたかもですね。今回もState<MyHomePage>というものから借りてきてます。
そして _counterを0に定義しています。
void _incrementCounter() {
setState(() {
_counter++;
});
ここで_incrementCounterが呼び出されたら_counterに1加えるという処理が書かれています。
@override
Widget build(BuildContext context) {
またbuildのoverrideですが、これは_Myhomepageのbuildをoverrideするということですね
return Scaffold(
Scaffoldクラスは画面構成を描画、実装するクラスです。つまり今からイカ焼きを実際に作るところに入ります。
appBar: AppBar(
title: Text(widget.title),
AppBarは上のFlutter Demo Home Pageが書かれているところです。
ここにさきほどfinalで定義したtitleを書きます
widgetと書いているのはMyHomePageがstateful widgetから定義したものであるのでMyHomePageはwidgetだからです（あんま理解してないです）
body: Center(
HTMLのボディと同じ感じです。centerとあるので真ん中に位置するということだと思います
child: Column(
ボディの子としてColumnが呼び出されました。
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
Columnの中身としてはこんな感じで、入れるものを真ん中表示にします。
そこに文字を入れたTextウィジェットを入れています。
そしてまた_counterを入れたTextウィジェットを入れています。
そうすることでサンプルプログラムはあのようなテキストが表示されます。
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
次にボタンをウィジェットを呼び出しています。
onPressedという押したらどうなるかというメソッドで_incrementcounter、つまり_counterが1加算されるという操作をします。
そしてconst Icon、つまりアイコンの形はIcons.addということでプラスボタンを指定しています。
以上でこのサンプルプログラムが成り立っているのです。
Flutterはこんな感じでどんどんウィジェットなどの部品をいじったりして組み立てていく感じですね。
あんまりわからないこともありますが、まあ学んでいくうちに理解していくでしょう。
Part3では実際に書いていきたいと思います。
