This quickstart guide describes how to create and run your first Flutter app. It assumes you have already installed the Flutter SDK.
- Creating your first Flutter app
- Running your Flutter app
- Quickly viewing source code changes with ‘hot reload’
- Next steps
Creating your first Flutter app
To create a starter project, open a terminal and run the
flutter create <project name> command .
Here is an example:
$ flutter create myapp
The above command creates a Flutter project directory called
myapp that contains a simple demo
app that uses Material Design.
In the project directory, the code for your app is in
Running your Flutter app
flutter run command to run your Flutter app on a connected
device or simulator.
To run your app from the command-line:
- Open a terminal and change directories to the root of your app (the same directory that
pubspec.yamlfile for your project).
- Run the following command. Once the
fluttertool is running, if you change the app’s source code, you can hit
rto hot-reload your application (updating the source on the fly without actually restarting the entire app).
$ cd myapp $ flutter run
If more than one device is connected, use the
flutter devices command
to get their IDs, and then
flutter run -d deviceID to run your app.
- In IntelliJ, click Create New Project from the Welcome window or File > New > Project… from the main IDE window.
- Select Flutter in the menu, and click Next.
- Under Project location enter, or browse to, the directory holding your new Flutter app.
- Click Finish.
- Click the Run icon in the toolbar, or invoke the menu item Run > Run.
Note: If the Run & Debug buttons are disabled, and no targets are listed, Flutter has not been able to discover any connected iOS or Android devices or simulators. You need to connect a device, or start a simulator, to proceed.
If everything works, you should see your starter app on your device or simulator.
Quickly viewing source code changes with ‘hot reload’
Flutter offers a fast development cycle with hot reload, the ability to reload the code of a live running app without restarting or losing app state. Simply make a change to your source code, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.
To edit your code and hot reload changes:
- Start your app with ‘Run’ (without breakpoints) or ‘Debug’ (with breakpoints).
- Make desired changes in your source code.
- Do not press the ‘Stop’ button; let your app continue to run.
- To see your changes invoke Save All (
ctrl-s), or click the Hot Reload button (the button with the lightning bolt icon).
A more detailed detailed description on how to use the IntelliJ plugin and which changes are supported by the hot reload feature can be found on the page Developing apps in the IntelliJ IDE.
Please reach out to us at our mailing list. We’d love to hear from you!
You might also want to check out: