Flutter学習記録（Day2）

lindablog

2年前

Flutterの画面の更新

Flutterの画面はWidgetによりツリー状に構成されている。
なお、FlutterのUIを構築しているパーツのことをWidgetと呼んでいる。

実践入門ではMyApp, Scaffold, Column, Center, Textなどが使われている。
他に使えるWidgetは公式Webで説明されている。
https://docs.flutter.dev/development/ui/widgets

_MyHomePageStateクラスの中に変数を定義する。
そしてカウンタが押されたときのメソッドを記述する。

void _incrementCounter(){
setState((){_counter++;});
}

setStateにより値の変更がFlutterのフレームワークに伝わる。Stateオブジェクトの内部状態を変更するときはいつでも、setStateに渡す関数で変更を行う。

string型の変数を定義します。stringは文字列を入れられる型。
dartでは以下のように記述。

String _type =”偶数”;

setStateの中に偶数奇数判定のコードを書く。

_counter++;
if (_counter % 2 == 0) {
_type = “偶数”;
} else {
_type = “奇数”;
}

最後に値が更新されていったら自動でテキストを更新。

Text(‘$_type’, style: TextStyle(fontSize: 20, color: Colors.red))