※本記事で使用している環境
<パソコン>
機種:MacBook Air(13inch)
OS:macOS Sonoma(ver.14.5)
チップ:Apple M3
シェル:zsh
<ソフトウェア>
・Flutter(ver.3.22.3)
・Xcode(ver.15.4)
・CocoaPods(ver.1.15.2)
・Android Studio(ver.2024.1)
・Visual Studio Code(ver.1.92.0)
前回は、Column Widget と Row Widget の解説を行いました。
今回は、StatefulWidget について解説します。
記事を執筆するにあたって、以下の書籍を参考にしました。
参考にした書籍
公式ドキュメントの該当箇所
公式ドキュメントの解説は、以下のページにあります。
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
StatefulWidget とは
以前、StatelessWidget について扱いました。
状態を持たない(静的な) Widget 。
一度画面に描画すると、再び描画することがないときに使用する。
では、StatefulWidget とはどんなものなのでしょうか。
動的に変化する状態を持つ Widget 。
一度画面に描画されても、再び描画し直す時に使用する。
前回作ったファイルは、StatelessWidget を使用していたので、今回は新しくプロジェクトを立ち上げて解説を行います。
新規プロジェクトを立ち上げる
StatefulWidget を記述する手順
では、以下のコードになるように書いていきます。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return const Placeholder();
}
}
まず、
import 'package:flutter/material.dart';
void main() {
runApp(App);
}
と書きます。
その次に、
stful
と記述しましょう。
自動で、型が表示されます。
ここまで出来たら、StatefulWidget を利用したページの作成は完了です。
次は、return の引数を書き換えていきます。
これにて、StatefulWidget についての解説を終わります。
次は、ElevatedButton Widget についての解説を行います。
コメント