【Flutter】StatefulWidget の使い方

前回は、Column Widget と Row Widget の解説を行いました。

あわせて読みたい

【Flutter】Column の使い方 ※本記事で使用している環境＜パソコン＞機種：MacBook Air（13inch）OS：macOS Sonoma（ver.14.5）チップ：Apple M3シェル：zsh ＜ソフトウェア＞・Flutter（ver.3.22.3…

今回は、StatefulWidget について解説します。

記事を執筆するにあたって、以下の書籍を参考にしました。

公式ドキュメントの該当箇所

公式ドキュメントの解説は、以下のページにあります。

https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

StatefulWidget とは

以前、StatelessWidget について扱いました。

あわせて読みたい

【Flutter】StatelessWidget の使い方 ※本記事で使用している環境＜パソコン＞機種：MacBook Air（13inch）OS：macOS Sonoma（ver.14.5）チップ：Apple M3シェル：zsh ＜ソフトウェア＞・Flutter（ver.3.22.3…

では、StatefulWidget とはどんなものなのでしょうか。

前回作ったファイルは、StatelessWidget を使用していたので、今回は新しくプロジェクトを立ち上げて解説を行います。

新規プロジェクトを立ち上げる

STEP

VS Code と iOS シミュレーターを起動

STEP

Flutter: New Project と入力

STEP

Application と入力

STEP

プロジェクトを格納する親フォルダを選択

STEP

プロジェクト名を入力

STEP

新規プロジェクトが作成された画面

STEP

main.dart ファイルに書かれているものを全て削除

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();
  }
}

STEP

stful と記述する

まず、

import 'package:flutter/material.dart';

void main() {
  runApp(App);
}

と書きます。

その次に、

stful

と記述しましょう。

自動で、型が表示されます。

STEP

StatefulWidget の型が表示された画面

STEP

マルチカーソルを利用して、クラス名に「MyApp」と記述する

STEP

runApp 関数の引数に MyApp というクラスを書く

ここまで出来たら、StatefulWidget を利用したページの作成は完了です。

次は、return の引数を書き換えていきます。

これにて、StatefulWidget についての解説を終わります。

次は、ElevatedButton Widget についての解説を行います。

あわせて読みたい

【Flutter】ElevatedButton の使い方 ※本記事で使用している環境＜パソコン＞機種：MacBook Air（13inch）OS：macOS Sonoma（ver.14.5）チップ：Apple M3シェル：zsh ＜ソフトウェア＞・Flutter（ver.3.22.3…