Hot reload and hot restart in Flutter - Mini App: Build & Ship

Build: Hot Reload Demo

A simple Flutter screen to demonstrate hot reload and hot restart by changing text and color dynamically.

Target UI

-------------------------
| Hot Reload Demo       |
|-----------------------|
| Text: Hello World     |
| Color: Blue           |
|                       |
| [Change Text] [Change Color] |
-------------------------

Display a text widget with initial text 'Hello World'.

Display a colored container below the text with initial color blue.

Add two buttons: 'Change Text' and 'Change Color'.

When 'Change Text' is tapped, update the text to 'Hello Flutter!'.

When 'Change Color' is tapped, update the container color to green.

Use hot reload to see text changes without losing state.

Use hot restart to reset the app to initial state.

Starter Code

Flutter

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HotReloadDemo(),
    );
  }
}

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

  @override
  State<HotReloadDemo> createState() => _HotReloadDemoState();
}

class _HotReloadDemoState extends State<HotReloadDemo> {
  String displayText = 'Hello World';
  Color boxColor = Colors.blue;

  // TODO: Add methods to change text and color

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hot Reload Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(displayText, style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 20),
            Container(
              width: 100,
              height: 100,
              color: boxColor,
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: () {
                    // TODO: Change text
                  },
                  child: const Text('Change Text'),
                ),
                ElevatedButton(
                  onPressed: () {
                    // TODO: Change color
                  },
                  child: const Text('Change Color'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HotReloadDemo(),
    );
  }
}

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

  @override
  State<HotReloadDemo> createState() => _HotReloadDemoState();
}

class _HotReloadDemoState extends State<HotReloadDemo> {
  String displayText = 'Hello World';
  Color boxColor = Colors.blue;

  void changeText() {
    setState(() {
      displayText = 'Hello Flutter!';
    });
  }

  void changeColor() {
    setState(() {
      boxColor = Colors.green;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hot Reload Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(displayText, style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 20),
            Container(
              width: 100,
              height: 100,
              color: boxColor,
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: changeText,
                  child: const Text('Change Text'),
                ),
                ElevatedButton(
                  onPressed: changeColor,
                  child: const Text('Change Color'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

This Flutter app shows a text and a colored box. Two buttons let you change the text and the color.

When you tap 'Change Text', the text changes from 'Hello World' to 'Hello Flutter!'. When you tap 'Change Color', the box color changes from blue to green.

Using hot reload after changing the code updates the UI instantly without losing the current state (like the changed text or color). Using hot restart resets the app to its initial state, so the text and color go back to 'Hello World' and blue.

This helps you see code changes quickly and understand how state works in Flutter.

Final Result

Completed Screen

-------------------------
| Hot Reload Demo       |
|-----------------------|
| Text: Hello Flutter!  |
| Color: Green          |
|                       |
| [Change Text] [Change Color] |
-------------------------

Tap 'Change Text' button: text changes to 'Hello Flutter!' immediately.

Tap 'Change Color' button: box color changes to green immediately.

Hot reload updates code without resetting text or color.

Hot restart resets text to 'Hello World' and color to blue.

Stretch Goal

Add a reset button that sets text and color back to initial values.

💡 Hint

Create a new method that sets displayText to 'Hello World' and boxColor to Colors.blue, then call setState.