Hot Reloadでも状態を保持

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 14/34。

プレビューには、変更を反映する方法が2つあります。Runはアプリを最初から起動します。Hot reloadはアプリを実行したまま新しいコードに差し替え、Stateを保持します。つまり、カウンターの数値はそのままです。

試してみましょう。プラスを数回押し、数値の色を変えて、Hot reloadを押します。新しい色が表示され、カウントはそのままです。画面のスタイルを調整するとき、これならタップして元の状態に戻す手間が省けます。

Hot reloadは新しいコードで画面を再構築しますが、新しいStateは作成しません。そのため、int _count = 0;をint _count = 10;にするような初期値の変更は反映されません。この行はStateが作成されたときにのみ実行されるためです。確認するにはRunを押してください。

mainの場合や、StatelessWidgetをStatefulWidgetに変更する場合も同じです。Hot reload後に変更が反映されないときは、Runを押してください。

チャレンジ

簡単

数値のサイズを64、色をColors.deepPurpleにします。まずプラスを数回押してから、ホットリロードを実行し、カウントが維持されることを確認します。
カウンターを10から開始するようにします。ホットリロードではその値が表示されず、実行すると表示されることを確認します。

自分で試してみよう

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

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

  void _decrease() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}