Viewing changes in Flutter using hot reload

Build and publish a Flutter-based app for the App Store and Google Play — updated for 2026 with current tooling, shortcuts, and Flutter 3.44 features.

Hot reload is one of Flutter's most compelling advantages for mobile development. The ability to see UI changes reflected on a running device in under a second — without losing app state — transforms the way you iterate on a design. If you haven't used it before, you'll quickly wonder how you ever managed without it.

TL:DR –  Start by following the instructions in Getting started with Flutter on a Mac and then you'll be able to complete the tasks in this article.

What's changed in 2026

Flutter has moved on considerably since this series began. Flutter 3.44 is the current stable release, and the tooling around hot reload has become significantly more capable. A few things worth knowing before you dive in:

• Hot reload now works on Flutter Web — both hot reload and hot restart are supported on the web target, which was not reliably the case in earlier versions. You no longer need to treat web as a second-class target during development.
• Hot reload on save is now a first-class option in both VS Code and Android Studio. In VS Code, add "dart.flutterHotReloadOnSave": "all" to your settings. In Android Studio, enable it via Settings > Languages & Frameworks > Flutter and also check Settings > Tools > Actions on Save.
• Keyboard shortcuts have been standardised. In IntelliJ and Android Studio, hot reload is Cmd+\ and hot restart is Shift+Cmd+\. In VS Code, hot reload is Ctrl+F5 and hot restart is Shift+Cmd+F5.
• Agentic Hot Reload — Google's Antigravity AI coding assistant now includes an Agent mode that can trigger hot reload automatically as part of an AI-assisted edit cycle, further tightening the feedback loop between writing code and seeing results on device.

The rest of this article walks through the same practical exercise as before — extending the starter app with an image, a caption, and an improved AppBar — but with the tooling guidance brought up to date.

Material Components for Flutter

Material Components for Flutter (MDC-Flutter) is included by default in Flutter's packages. Import the material.dart file to access the widgets. Material is a design system — backed by open-source code — that helps teams build high-quality digital experiences. MDC-Flutter is developed and maintained by a core team of engineers and UX designers at Google to support beautiful and functional Android and iOS apps.

To get familiar with the editing and development tools, let's extend the starter app by adding an image with a caption, and giving the AppBar a better title and an action. It will serve as the temporary first screen on cold launch and includes:

• a better AppBar title and an AppBar action, which will eventually launch a login page,
• an image positioned near the top of the screen, with a caption beneath it.

The starter app puts all the scaffolding in place for our cross-platform Flutter app. MDC-Flutter capabilities are provided by import 'package:flutter/material.dart';. There is already an appBar, a body, and a floatingActionButton. You can see them in the code, and also in the Flutter Inspector in Android Studio or VS Code.

Understanding the Widget tree

Widgets are the building blocks of a Flutter app's functionality. The Widget tree in Android Studio provides a convenient visualisation of them and an effective way to navigate the source code. The tree represents a hierarchy — you can see your widgets in the screenshot under the Scaffold part of the hierarchy.

Open main.dart and scroll to find the widgets being used.

Widgets in the Render Tree

    ...
    appBar: AppBar(
    ...
    floatingActionButton: FloatingActionButton(
    ...

In Android Studio, expand the tree by selecting Flutter Inspector from the right-hand panel. Selecting a widget in the inspector navigates directly to it in your code. The same inspector is available in VS Code via the Flutter sidebar.

Using hot reload while you edit

Hot reload injects updated source code into the running Dart VM without restarting your app. State is preserved — if you're three screens deep in a navigation stack, you stay there. Hot restart is the heavier option: it recompiles and restarts the app from scratch, which is necessary when you change app-level state or initialisation logic.

The quickest way to iterate is to enable hot reload on save so changes appear the moment you press Cmd+S:

• VS Code: Add "dart.flutterHotReloadOnSave": "all" to your settings.json.
• Android Studio: Go to Settings > Languages & Frameworks > Flutter and enable hot reload on save, then also check Settings > Tools > Actions on Save.

If you prefer manual control, use the keyboard shortcuts:

• Android Studio / IntelliJ: Hot reload — Cmd+\  |  Hot restart — Shift+Cmd+\
• VS Code: Hot reload — Ctrl+F5  |  Hot restart — Shift+Cmd+F5

Keep in mind that hot reload does not handle every type of change. Modifications to main(), changes to global variables, or edits to initState() typically require a hot restart. The Flutter tooling will usually warn you when this is the case.

Adding an image asset and caption

The Image class in Flutter displays an image. It has several constructors covering different image sources. This example uses an asset image bundled with the app — suitable for logos or branding. You could equally use a constructor to fetch an image from a URL, the filesystem, or memory.

Local image assets must be declared in the project. Create the directory using Android Studio or in the terminal with mkdir assets inside the project folder. Note that asset paths are relative to the directory containing pubspec.yaml.

Copy your images into the folder and reference them in pubspec.yaml. You can specify individual filenames or use a trailing / on the directory path to include everything in that folder.

You can read more about Assets and Images in the Flutter documentation.

Enabling local image assets in Flutter

flutter:
  assets:
    - assets/

The image Image.asset('assets/yourimagename.png') is now eligible to be loaded because it lives inside the declared folder. Add spacing below it using SizedBox(height: 12.0), then update the existing text widget to serve as your caption.

Editing the AppBar title and adding an action

An app bar provides a toolbar using the AppBar class. It displays the page title and supports actions — typically represented with IconButton widgets on mobile.

      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            icon: Icon(
              Icons.info_outline,
              semanticLabel: 'Login button',
            ),
            onPressed: () {
              debugPrint('Login button pressed');
            },
          ),
        ],
      ),

Edit the title of the AppBar and add an actions widget to define the icon. The semanticLabel provides accessibility information for screen readers. The onPressed property is mandatory — use debugPrint rather than print for development logging, as it's stripped from release builds automatically.

You can use any of the icons provided by MDC-Flutter. There's a searchable list at fonts.google.com/icons, and Android Studio will also autocomplete icon names as you type Icons.

Run the app on your devices

In the terminal, change into the project folder: cd nameofyourproject

Running Gradle task 'assembleDebug'... Done                        39.3s
✓ Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...                        13.2s

Once running, try making a small change — edit the AppBar title string, for example — and trigger a hot reload. The update should appear on your device within a second, with no app restart and no lost navigation state. This is the core of the hot reload workflow.

The image, caption, and AppBar action should now appear in your app. The colours are still defaults and the layout needs refinement — the AppBar action isn't themed and the image may feel oversized — but this confirms that asset loading and widget composition are working correctly. These will be improved in the next articles.