Flutter StatelessWidget vs StatefulWidget を深く理解する

import 'package:flutter/material.dart';

// ユーザー情報表示コンポーネント（ステートレス）
class UserCard extends StatelessWidget {
  // プロパティを final として定義し、不変を保証
  final String name;
  final String email;
  final String avatarUrl;

  // const コンストラクタでパフォーマンス向上
  const UserCard({
    super.key,
    required this.name,
    required this.email,
    this.avatarUrl = '',
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          children: [
            // アバター
            CircleAvatar(
              backgroundImage: avatarUrl.isNotEmpty
                  ? NetworkImage(avatarUrl)
                  : null,
              child: avatarUrl.isEmpty
                  ? const Icon(Icons.person)
                  : null,
            ),
            const SizedBox(width: 16),
            // ユーザー情報
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    name,
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    email,
                    style: TextStyle(
                      color: Colors.grey[600],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

// カウンターアプリ
class CounterApp extends StatefulWidget {
  const CounterApp({super.key});

  @override
  State<CounterApp> createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  // カウンターの状態
  int _counter = 0;
  // タイマー（dispose のデモ用）
  Timer? _timer;

  // 1. initState - 状態の初期化
  @override
  void initState() {
    super.initState();
    // カウンターの初期化
    _counter = 0;
    // タイマーを開始（毎秒1回増加）
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      _increment();
    });
  }

  // 2. didChangeDependencies - 依存関係が変化したときに呼び出される
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }

  // 3. build - UI の構築
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('计数器'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '当前计数：',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '$_counter',
              style: const TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
      // 増加ボタン
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }

  // カウンターを増加させるメソッド
  void _increment() {
    // setState を呼び出して UI 更新をトリガーする必要がある
    setState(() {
      _counter++;
    });
  }

  // 4. didUpdateWidget - 親 Widget が再構築されたときに呼び出される
  @override
  void didUpdateWidget(CounterApp oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  // 5. dispose - リソースのクリーンアップ
  @override
  void dispose() {
    // タイマーをキャンセルし、メモリリークを防ぐ
    _timer?.cancel();
    super.dispose();
  }
}

// 正しい：setState 内で状態を更新する
void _increment() {
  setState(() {
    _counter++;
  });
}

// 正しい：状態更新が UI と無関係な場合は setState を使わなくてもよい
void _someInternalLogic() {
  // 内部ロジック、UI に影響しない
  _calculateSomething();
}

// 正しい：非同期操作の後に状態を更新する
Future<void> _loadData() async {
  final data = await fetchData();
  setState(() {
    _items = data;
  });
}

// 誤り：状態を変更するが setState を呼び出さない
void _increment() {
  _counter++;  // 状態は変わったが、UI は更新されない！
}

// 誤り：build メソッド内で setState を呼び出す
@override
Widget build(BuildContext context) {
  // build 内で setState を絶対に呼び出さないこと！
  setState(() {
    _counter++;  // これは無限ループを引き起こす
  });
  return Text('$_counter');
}