bug_report

Set up an editor
Get started
Set up an editor
You can build apps with Flutter using any text editor or
integrated development environment (IDE) combined with
Flutter’s command-line tools. The Flutter team recommends
using an editor that supports a Flutter extension or plugin, like
VS Code and Android Studio. These plugins provide code
completion, syntax highlighting, widget editing assists, run &
debug support, and more.

You can add a supported plugin for Visual Studio Code,

Android Studio, or IntelliJ IDEA Community, Educational, and
Ultimate editions. The Flutter plugin only works with Android
Studio and the listed editions of IntelliJ IDEA.

(The Dart plugin supports eight additional JetBrains IDEs.)

Follow these procedures to add the Flutter plugin to VS Code,

Android Studio, or IntelliJ.

If you choose another IDE, skip ahead to the next step: Test
drive.

Visual Studio Code

Android Studio and IntelliJ

Install VS Code
VS Code is a code editor to build and debug apps. With the
Flutter extension installed, you can compile, deploy, and debug
Flutter apps.
To install the latest version of VS Code, follow Microsoft’s
instructions for the relevant platform:

• Install on macOS
• Install on Windows
• Install on Linux

Install the VS Code

Flutter extension
1 Start VS Code.

2 Open a browser and go to the Flutter extension page on

the Visual Studio Marketplace.

3 Click Install. Installing the Flutter extension also installs

the Dart extension.

Validate your VS Code

setup
1 Go to View > Output.
You can also press Control / Command + Shift + U.

2 In the dropdown on the upper right of the Output panel,

select flutter (flutter).

3 Go to View > Command Palette….

You can also press Control / Command + Shift + P.

4 Type doctor.
 5 Select the Flutter: Run Flutter Doctor. Flutter Doctor
runs and its response displays in the Output panel.

6 Automated
Flutter builds
with Bitrise
Out-of-the-box support for your Flutter apps. Build
Flutter apps for both iOS and Android and use our
Flutter Steps to build, test, and deploy them.

Hot reload
Tools
Hot reload
Flutter’s hot reload feature helps you quickly and easily
experiment, build UIs, add features, and fix bugs. Hot reload
works by injecting updated source code files into the running
Dart Virtual Machine (VM). After the VM updates classes with
the new versions of fields and functions, the Flutter framework
automatically rebuilds the widget tree, allowing you to quickly
view the effects of your changes.
How to perform a hot
reload
To hot reload a Flutter app:

1 Run the app from a supported Flutter editor or a terminal

window. Either a physical or virtual device can be the
target. Only Flutter apps in debug mode can be hot
reloaded or hot restarted.
2 Modify one of the Dart files in your project. Most types of
code changes can be hot reloaded; for a list of changes
that require a hot restart, see Special cases.
3 If you’re working in an IDE/editor that supports Flutter’s
IDE tools, select Save All (cmd-s/ctrl-s), or click the hot
reload button on the toolbar.
If you’re running the app at the command line using flutter
run, enter r in the terminal window.

After a successful hot reload operation, you’ll see a message in

the console similar to:

content_copy
Performing hot reload...
Reloaded 1 of 448 libraries in 978ms.
The app updates to reflect your change, and the current state
of the app is preserved. Your app continues to execute from
where it was prior to run the hot reload command. The code
updates and execution continues.

What is the difference between hot reload, hot restart, and

full restart?

• Hot reload loads code changes into the VM and re-builds

the widget tree, preserving the app state; it doesn’t rerun
 main() or initState(). (⌘\ in Intellij and Android Studio, ⌃F5 in
VSCode)
• Hot restart loads code changes into the VM, and restarts
the Flutter app, losing the app state. (⇧⌘\ in IntelliJ and
Android Studio, ⇧⌘F5 in VSCode)
• Full restart restarts the iOS, Android, or web app. This
takes longer because it also recompiles the Java / Kotlin /
ObjC / Swift code. On the web, it also restarts the Dart
Development Compiler. There is no specific keyboard
shortcut for this; you need to stop and start the run
configuration.
Flutter web currently supports hot restart but not hot reload.

Controls for run, run debug, hot reload, and hot restart in
Android Studio

A code change has a visible effect only if the modified Dart

code is run again after the change. Specifically, a hot reload
causes all the existing widgets to rebuild. Only code involved in
the rebuilding of the widgets is automatically re-executed. The
main() and initState() functions, for example, are not run again.

Special cases
The next sections describe specific scenarios that involve hot
reload. In some cases, small changes to the Dart code enable
you to continue using hot reload for your app. In other cases, a
hot restart, or a full restart is needed.

An app is killed
Hot reload can break when the app is killed. For example, if the
app was in the background for too long.

Compilation errors
When a code change introduces a compilation error, hot reload
generates an error message similar to:

content_copy
Hot reload was rejected:
'/path/to/project/lib/main.dart': warning: line 16 pos 38: unbalanced '{'
opens here
Widget build(BuildContext context) {
^
'/path/to/project/lib/main.dart': error: line 33 pos 5: unbalanced ')'
);
^
In this situation, simply correct the errors on the specified lines
of Dart code to keep using hot reload.

CupertinoTabView’s builder
Hot reload won’t apply changes made to a builder of a
CupertinoTabView. For more information, see Issue 43574.

Enumerated types
Hot reload doesn’t work when enumerated types are changed
to regular classes or regular classes are changed to
enumerated types.

For example:

Before the change:

content_copy
enum Color {
red,
green,
blue,
}
After the change:

content_copy
class Color {
Color(this.i, this.j);
final int i;
final int j;
}
Generic types
Hot reload won’t work when generic type declarations are
modified. For example, the following won’t work:

Before the change:

content_copy
class A<T> {
T? i;
}
After the change:

content_copy
class A<T, V> {
T? i;
V? v;
}

Native code
If you’ve changed native code (such as Kotlin, Java, Swift, or
Objective-C), you must perform a full restart (stop and restart
the app) to see the changes take effect.

Previous state is combined with

new code
Flutter’s stateful hot reload preserves the state of your app.
This approach enables you to view the effect of the most recent
change only, without throwing away the current state. For
example, if your app requires a user to log in, you can modify
and hot reload a page several levels down in the navigation
hierarchy, without re-entering your login credentials. State is
kept, which is usually the desired behavior.

If code changes affect the state of your app (or its

dependencies), the data your app has to work with might not be
fully consistent with the data it would have if it executed from
scratch. The result might be different behavior after a hot reload
versus a hot restart.

Recent code change is

included but app state is
excluded
In Dart, static fields are lazily initialized. This means that the
first time you run a Flutter app and a static field is read, it’s set
to whatever value its initializer was evaluated to. Global
variables and static fields are treated as state, and are
therefore not reinitialized during hot reload.

If you change initializers of global variables and static fields, a

hot restart or restart the state where the initializers are hold is
necessary to see the changes. For example, consider the
following code:

content_copy
final sampleTable = [
Table(
children: const [
TableRow(
 children: [Text('T1')],
)
],
),
Table(
children: const [
TableRow(
children: [Text('T2')],
)
],
),
Table(
children: const [
TableRow(
children: [Text('T3')],
)
],
),
Table(
children: const [
TableRow(
children: [Text('T4')],
)
],
),
];
After running the app, you make the following change:

content_copy
final sampleTable = [
Table(
children: const [
TableRow(
children: [Text('T1')],
)
],
),
Table(
children: const [
TableRow(
children: [Text('T2')],
 )
],
),
Table(
children: const [
TableRow(
children: [Text('T3')],
)
],
),
Table(
children: const [
TableRow(
children: [Text('T10')], // modified
)
],
),
];
You hot reload, but the change is not reflected.

Conversely, in the following example:

content_copy
const foo = 1;
final bar = foo;
void onClick() {
print(foo);
print(bar);
}
Running the app for the first time prints 1 and 1. Then, you
make the following change:

content_copy
const foo = 2; // modified
final bar = foo;
void onClick() {
print(foo);
print(bar);
}
While changes to const field values are always hot reloaded, the
static field initializer is not rerun. Conceptually, const fields are
treated like aliases instead of state.

The Dart VM detects initializer changes and flags when a set of

changes needs a hot restart to take effect. The flagging
mechanism is triggered for most of the initialization work in the
above example, but not for cases like the following:

content_copy
final bar = foo;
To update foo and view the change after hot reload, consider
redefining the field as const or using a getter to return the value,
rather than using final. For example, either of the following
solutions work:

content_copy
const foo = 1;
const bar = foo; // Convert foo to a const...
void onClick() {
print(foo);
print(bar);
}
content_copy
const foo = 1;
int get bar => foo; // ...or provide a getter.
void onClick() {
print(foo);
print(bar);
}
For more information, read about the differences between the
const and final keywords in Dart.

Recent UI change is excluded

Even when a hot reload operation appears successful and
generates no exceptions, some code changes might not be
visible in the refreshed UI. This behavior is common after
changes to the app’s main() or initState() methods.

As a general rule, if the modified code is downstream of the

root widget’s build() method, then hot reload behaves as
expected. However, if the modified code won’t be re-executed
as a result of rebuilding the widget tree, then you won’t see its
effects after hot reload.

For example, consider the following code:

content_copy
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
return GestureDetector(onTap: () => print('tapped'));
}
}
After running this app, change the code as follows:

content_copy
import 'package:flutter/widgets.dart';

void main() {
runApp(const Center(child: Text('Hello', textDirection:
TextDirection.ltr)));
}
With a hot restart, the program starts from the beginning,
executes the new version of main(), and builds a widget tree
that displays the text Hello.

However, if you hot reload the app after this change, main() and
initState() are not re-executed, and the widget tree is rebuilt with
the unchanged instance of MyApp as the root widget. This
results in no visible change after hot reload.

How it works
When hot reload is invoked, the host machine looks at the
edited code since the last compilation. The following libraries
are recompiled:

• Any libraries with changed code

• The application’s main library
• The libraries from the main library leading to affected
libraries
The source code from those libraries is compiled into kernel
files and sent to the mobile device’s Dart VM.

The Dart VM re-loads all libraries from the new kernel file. So
far no code is re-executed.

The hot reload mechanism then causes the Flutter framework

to trigger a rebuild/re-layout/repaint of all existing widgets and
render objects.

bug_report

Set up an editor
Get started
 Set up an editor
You can build apps with Flutter using any text editor or
integrated development environment (IDE) combined with
Flutter’s command-line tools. The Flutter team recommends
using an editor that supports a Flutter extension or plugin, like
VS Code and Android Studio. These plugins provide code
completion, syntax highlighting, widget editing assists, run &
debug support, and more.

You can add a supported plugin for Visual Studio Code,

Android Studio, or IntelliJ IDEA Community, Educational, and
Ultimate editions. The Flutter plugin only works with Android
Studio and the listed editions of IntelliJ IDEA.

(The Dart plugin supports eight additional JetBrains IDEs.)

Follow these procedures to add the Flutter plugin to VS Code,

Android Studio, or IntelliJ.

If you choose another IDE, skip ahead to the next step: Test
drive.

Visual Studio Code

Android Studio and IntelliJ

Install VS Code
VS Code is a code editor to build and debug apps. With the
Flutter extension installed, you can compile, deploy, and debug
Flutter apps.

To install the latest version of VS Code, follow Microsoft’s

instructions for the relevant platform:

• Install on macOS
• Install on Windows
• Install on Linux
Install the VS Code
Flutter extension
1 Start VS Code.

2 Open a browser and go to the Flutter extension page on

the Visual Studio Marketplace.

3 Click Install. Installing the Flutter extension also installs

the Dart extension.

Validate your VS Code

setup
1 Go to View > Output.
You can also press Control / Command + Shift + U.

2 In the dropdown on the upper right of the Output panel,

select flutter (flutter).

3 Go to View > Command Palette….

You can also press Control / Command + Shift + P.

4 Type doctor.

5 Select the Flutter: Run Flutter Doctor. Flutter Doctor

runs and its response displays in the Output panel.
 6 Automated
Flutter builds
with Bitrise
Out-of-the-box support for your Flutter apps. Build
Flutter apps for both iOS and Android and use our
Flutter Steps to build, test, and deploy them.
Start 30-day free trial
Talk to an expert →
 The ideal place to
build, test, and
release Flutter
apps
Build faster, better Flutter apps with optimized Flutter
 builds.

Full integration for Flutter builds

Use our Flutter Steps to run all available Flutter build
commands in a CI environment without having to worry about
custom scripting. Test, analyze, build, and deploy Flutter apps
automatically.

A single Workflow for all platforms

Build a cross-platform app with Flutter and manage your Flutter
build in a single Workflows for iOS and Android: You can take
care of both at the same time by adding the necessary Steps.

Easy testing and analysis

Write and run unit, widget, and integration tests for Flutter
builds on Bitrise: Just use the ready-made Flutter Test Step.
Analyze your results with the Test Reports add-on: View
individual test cases, check the logs, or just download your
results.

Extensive customization for Flutter

builds
Customize your Flutter build to fit your needs. Specify the exact
version of the Flutter SDK that you want to use on Bitrise, or
add any flag available to any of
Get cross-platform and third-party support, automated
workflow configuration, custom plans, and more
continuous integration for your Flutter build — you name
it, we have it.

Automatic Flutter Workflow

configuration
The Bitrise project scanner will detect that your app is built with
Flutter, and will automatically configure an initial Workflow for
you with all the necessary Flutter Steps. If you have tests in
your project, the scanner also recognizes those.

350+ integrations
The Bitrise Step library has over 350 integrations with mobile
tooling and is ever-expanding. Integrate with most third-party
mobile tools to manage your dependencies, run your tests, or
deploy your app. Missing anything? Request or build it yourself!

Enterprise-ready feature sets for

Flutter builds
Bitrise supports all major Git services, Pay-As-You-Build, SAML
SSO, team and role management, enterprise-grade security,
and hosting. Used by 20% of Fortune's Global 100 for some of
the world's most downloaded apps.

The best
integrations for
Flutter builds
Integrating with all the tools you love and use for testing,
distribution, and notification.

Flutter Install
Install the Flutter SDK on your build machine: Choose the
version you want to use or stick to the latest stable one.

Flutter Analyze
Run the `flutter analyze` command in any Flutter build to check
your code with the Dart analyzer.

Flutter Build
Build and deploy your Flutter apps for both Android and iOS
with their own customized configurations.

Flutter Test
Run integration tests, unit tests, and widget tests that are
written for Flutter builds. Use any of the available flags for the
`flutter test` command.

Start 30-day free trial

Talk to an expert →
 The ideal place to
build, test, and
release Flutter
apps
Build faster, better Flutter apps with optimized Flutter
 builds.

Full integration for Flutter builds

Use our Flutter Steps to run all available Flutter build
commands in a CI environment without having to worry about
custom scripting. Test, analyze, build, and deploy Flutter apps
automatically.

A single Workflow for all platforms

Build a cross-platform app with Flutter and manage your Flutter
build in a single Workflows for iOS and Android: You can take
care of both at the same time by adding the necessary Steps.

Easy testing and analysis

Write and run unit, widget, and integration tests for Flutter
builds on Bitrise: Just use the ready-made Flutter Test Step.
Analyze your results with the Test Reports add-on: View
individual test cases, check the logs, or just download your
results.

Extensive customization for Flutter

builds
Customize your Flutter build to fit your needs. Specify the exact
version of the Flutter SDK that you want to use on Bitrise, or
add any flag available to any of your Flutter builds as additional
parameters.

Continuous
Integration for
 Flutter builds
Get cross-platform and third-party support, automated
workflow configuration, custom plans, and more
continuous integration for your Flutter build — you name
it, we have it.

Automatic Flutter Workflow

configuration
The Bitrise project scanner will detect that your app is built with
Flutter, and will automatically configure an initial Workflow for
you with all the necessary Flutter Steps. If you have tests in
your project, the scanner also recognizes those.

350+ integrations
The Bitrise Step library has over 350 integrations with mobile
tooling and is ever-expanding. Integrate with most third-party
mobile tools to manage your dependencies, run your tests, or
deploy your app. Missing anything? Request or build it yourself!

Enterprise-ready feature sets for

Flutter builds
Bitrise supports all major Git services, Pay-As-You-Build, SAML
SSO, team and role management, enterprise-grade security,
and hosting. Used by 20% of Fortune's Global 100 for some of
the world's most downloaded apps.

The best
integrations for
 Flutter builds
Integrating with all the tools you love and use for testing,
distribution, and notification.

Flutter Install
Install the Flutter SDK on your build machine: Choose the
version you want to use or stick to the latest stable one.

Flutter Analyze
Run the `flutter analyze` command in any Flutter build to check
your code with the Dart analyzer.

Flutter Build
Build and deploy your Flutter apps for both Android and iOS
with their own customized configurations.
Flutter Test
Run integration tests, unit tests, and widget tests that are
written for Flutter builds. Use any of the available flags for the
`flutter test` command.