Stateless？Stateful？Flutter初心者がつまずいたポイントと学び 🌀✨

はじめに

こんにちは！新卒1年目のエンジニア、吉永です🐣
普段はFlutterアプリの改修をしていますが、実は当時の私の知識は Flutter = 0、Dartも書いたことなし。
「Widget？State？なにそれ？🤔」という状態からのスタートでした。

この記事では、そんな私がFlutterを実際に触って 「WidgetとStateってこういうことか！」 と気づくまでの体験談をまとめます ✨

---

📚目次

• 🔰 最初に直面した混乱
• 💡 Widgetを理解するためにやった工夫
• 📜 サンプルコードで理解した違い
• 🌱 少しずつ分かってきたこと
• 🎯 まとめ

---

🔰 最初に直面した混乱

改修を始めた当初はとにかく大混乱でした 🌀

• 画面を開くと Widgetだらけ で意味不明 🤯
• 「Stateless」と「Stateful」が出てくるけど違いがわからない…

正直、「もう無理かも…」と思った瞬間もありました。

💡 Widgetを理解するためにやった工夫

そこで「どうすれば理解できるか？」を考えて、シンプルに整理しました。

• Widget = UIを返す部品 と割り切る
  → まるで「引数を受け取ってUIを返す関数」みたいなイメージ 🧩
• Stateless vs Stateful = 変化するかどうか
  → 変わらないならStateless、変わるならStateful 🔄
• 小さく分割して整理
  → 「Header」「Body」「Footer」に分けると頭がスッキリ ✂️

こうやって考えると、だんだんWidgetの全体像が見えてきました。

📜 サンプルコードで理解した違い

✨ StatelessWidget（変化しないUI）

class MyText extends StatelessWidget {
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("私は変わりません！"),
    );
  }
}

👉 何度見ても「私は変わりません！」。
つまり 一度描画したらそのまま 🪧

🪧

🔄 StatefulWidget（変化するUI）

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('カウント: $_count')),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

👉 ボタンを押すたびに数字が増える！
これが Statefulの力 🚀

🌱 少しずつ分かってきたこと

Flutterを触ってみて、ようやくこんな感覚が掴めました。

• Flutterは「全部Widget」と考えるとシンプル
• StatelessかStatefulかを決めるのは 「変化があるかどうか」
• 最初は混乱しても、コードを小さく試すと腑に落ちる

🎯 まとめ

知識ゼロからいきなりFlutterを触るのは大変でしたが、
「WidgetはUIを返す部品」「Stateは変化を表すもの」と理解してから、一気にわかりやすくなりました ✨

これからFlutterを触る方や、私のように突然仕事で触ることになった方にとって、この記事が少しでも参考になれば嬉しいです！🌸