Movatterモバイル変換


[0]ホーム

URL:


Skip to main content

docs.flutter.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic.

Learn more

Flutter 3.41 is live! Check out theblog post!

Android Studio and IntelliJ

Learn how to develop Flutter apps in Android Studio and other IntelliJ products.

Installation and setup

#

Android Studio and IntelliJ IDEA offer a complete, IDE experience once you install the Flutter plugin.

To install the latest version of the following IDEs, follow their instructions:

Install the Flutter plugin

#
  1. Go toFile>Settings.

    You can also pressCtrl +Alt +S.

    ThePreferences dialog opens.

  2. From the list at the left, selectPlugins.

  3. From the top of this panel, selectMarketplace.

  4. Typeflutter in the plugin search field.

  5. Select theFlutter plugin.

  6. ClickInstall.

  7. ClickYes when prompted to install the plugin.

  8. ClickRestart when prompted.

  1. Start Android Studio or IntelliJ.

  2. From the macOS menu bar, go toAndroid Studio (orIntelliJ)>Settings....

    You can also pressCmd +,.

    ThePreferences dialog opens.

  3. From the list at the left, selectPlugins.

  4. From the top of this panel, selectMarketplace.

  5. Typeflutter in the plugin search field.

  6. Select theFlutter plugin.

  7. ClickInstall.

  8. ClickYes when prompted to install the plugin.

  9. ClickRestart when prompted.

  1. Go toFile>Settings.

    You can also pressCtrl +Alt +S.

    ThePreferences dialog opens.

  2. From the list at the left, selectPlugins.

  3. From the top of this panel, selectMarketplace.

  4. Typeflutter in the plugin search field.

  5. Select theFlutter plugin.

  6. ClickInstall.

  7. ClickYes when prompted to install the plugin.

  8. ClickRestart when prompted.

Updating the plugins

#

Updates to the plugins are shipped on a regular basis. You should be prompted in the IDE when an update is available.

To check for updates manually:

  1. Open preferences (Android Studio > Check for Updates on macOS,Help > Check for Updates on Linux).
  2. Ifdart orflutter are listed, update them.

Creating projects

#

You can create a new project in one of several ways.

Creating a new project

#

Creating a new Flutter project from the Flutter starter app template differs between Android Studio and IntelliJ.

In Android Studio:

  1. In the IDE, clickNew Flutter Project from theWelcome window orFile > New > New Flutter Project from the main IDE window.
  2. Specify theFlutter SDK path and clickNext.
  3. Enter your desiredProject name,Description, andProject location.
  4. If you might publish this app,set the company domain.
  5. ClickFinish.

In IntelliJ:

  1. In the IDE, clickNew Project from theWelcome window orFile > New > Project from the main IDE window.
  2. SelectFlutter from theGenerators list in the left panel
  3. Specify theFlutter SDK path and clickNext.
  4. Enter your desiredProject name,Description, andProject location.
  5. If you might publish this app,set the company domain.
  6. ClickFinish.

Set the company domain

#

When creating a new app, some Flutter IDE plugins ask for an organization name in reverse domain order, something likecom.example. Along with the name of the app, this is used as the package name for Android, and the Bundle ID for iOS when the app is released. If you think you might ever release this app, it is better to specify these now. They cannot be changed once the app is released. Your organization name should be unique.

Opening a project from existing source code

#

To open an existing Flutter project:

  1. In the IDE, clickOpen from theWelcome window, orFile > Open from the main IDE window.

  2. Browse to the directory holding your existing Flutter source code files.

  3. ClickOpen.

    Important

    Donot use theNew > Project from existing sources option for Flutter projects.

The Flutter plugin performs code analysis that enables the following:

  • Syntax highlighting.
  • Code completions based on rich type analysis.
  • Navigating to type declarations (Navigate > Declaration), and finding type usages (Edit > Find > Find Usages).
  • Viewing all current source code problems (View > Tool Windows > Dart Analysis). Any analysis issues are shown in the Dart Analysis pane:
    Dart Analysis pane

Running and debugging

#
Note

You can debug your app in a few ways.

  • UsingDevTools, a suite of debugging and profiling tools that run in a browserand include the Flutter inspector.
  • Using Android Studio's (or IntelliJ's) built-in debugging features, such as the ability to set breakpoints.
  • Using the Flutter inspector, directly available in Android Studio and IntelliJ.

The instructions below describe features available in Android Studio and IntelliJ. For information on launching DevTools, seeRunning DevTools from Android Studio in theDevTools docs.

Running and debugging are controlled from the main toolbar:

Main IntelliJ toolbar

Selecting a target

#

When a Flutter project is open in the IDE, you should see a set of Flutter-specific buttons on the right-hand side of the toolbar.

Note

If the Run and 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.

  1. Locate theFlutter Target Selector drop-down button. This shows a list of available targets.
  2. Select the target you want your app to be started on. When you connect devices, or start simulators, additional entries appear.
  1. Click thePlay icon in the toolbar, or invokeRun > Run. The bottomRun pane shows logs output.

Run app with breakpoints

#
  1. If desired, set breakpoints in your source code.
  2. Click theDebug icon in the toolbar, or invokeRun > Debug.
    • The bottomDebugger pane shows Stack Frames and Variables.
    • The bottomConsole pane shows detailed logs output.
    • Debugging is based on a default launch configuration. To customize this, click the drop-down button to the right of the device selector, and selectEdit configuration.

Fast edit and refresh development cycle

#

Flutter offers a best-in-class developer cycle enabling you to see the effect of your changes almost instantly with theStateful Hot Reload feature. To learn more, check outHot reload.

Show performance data

#
Note

To view the performance data, including the widget rebuild information, start the app inDebug mode, and then open the Performance tool window usingView > Tool Windows > Flutter Performance.

Flutter performance window

To see the stats about which widgets are being rebuilt, and how often, clickShow widget rebuild information in thePerformance pane. The exact count of the rebuilds for this frame displays in the second column from the right. For a high number of rebuilds, a yellow spinning circle displays. The column to the far right shows how many times a widget was rebuilt since entering the current screen. For widgets that aren't rebuilt, a solid grey circle displays. Otherwise, a grey spinning circle displays.

The app shown in this screenshot has been designed to deliver poor performance, and the rebuild profiler gives you a clue about what is happening in the frame that might cause poor performance. The widget rebuild profiler is not a diagnostic tool, by itself, about poor performance.

The purpose of this feature is to make you aware when widgets are rebuilding—you might not realize that this is happening when just looking at the code. If widgets are rebuilding that you didn't expect, it's probably a sign that you should refactor your code by splitting up large build methods into multiple widgets.

This tool can help you debug at least four common performance issues:

  1. The whole screen (or large pieces of it) are built by a single StatefulWidget, causing unnecessary UI building. Split up the UI into smaller widgets with smallerbuild() functions.

  2. Offscreen widgets are being rebuilt. This can happen, for example, when a ListView is nested in a tall Column that extends offscreen. Or when the RepaintBoundary is not set for a list that extends offscreen, causing the whole list to be redrawn.

  3. Thebuild() function for an AnimatedBuilder draws a subtree that does not need to be animated, causing unnecessary rebuilds of static objects.

  4. An Opacity widget is placed unnecessarily high in the widget tree. Or, an Opacity animation is created by directly manipulating the opacity property of the Opacity widget, causing the widget itself and its subtree to rebuild.

You can click on a line in the table to navigate to the line in the source where the widget is created. As the code runs, the spinning icons also display in the code pane to help you visualize which rebuilds are happening.

Note that numerous rebuilds doesn't necessarily indicate a problem. Typically you should only worry about excessive rebuilds if you have already run the app in profile mode and verified that the performance is not what you want.

And remember,the widget rebuild information is only available in a debug build. Test the app's performance on a real device in a profile build, but debug performance issues in a debug build.

If you have additional tips we should share,let us know!

Assists & quick fixes

#

Assists are code changes related to a certain code identifier. A number of these are available when the cursor is placed on a Flutter widget identifier, as indicated by the yellow lightbulb icon. The assist can be invoked by clicking the lightbulb, or by using the keyboard shortcut (Alt+Enter on Linux and Windows,Option+Return on macOS), as illustrated here:

IntelliJ editing assists

Quick Fixes are similar, only they are shown with a piece of code has an error and they can assist in correcting it. They are indicated with a red lightbulb.

Wrap with new widget assist

#

This can be used when you have a widget that you want to wrap in a surrounding widget, for example if you want to wrap a widget in aRow orColumn.

Wrap widget list with new widget assist

#

Similar to the assist above, but for wrapping an existing list of widgets rather than an individual widget.

Convert child to children assist

#

Changes a child argument to a children argument, and wraps the argument value in a list.

Live templates

#

Live templates can be used to speed up entering typical code structures. They are invoked by typing their prefix, and then selecting it in the code completion window:

IntelliJ live templates

The Flutter plugin includes the following templates:

  • Prefixstless: Create a new subclass ofStatelessWidget.
  • Prefixstful: Create a new subclass ofStatefulWidget and its associated State subclass.
  • Prefixstanim: Create a new subclass ofStatefulWidget and its associated State subclass, including a field initialized with anAnimationController.

You can also define custom templates inSettings > Editor > Live Templates.

Keyboard shortcuts

#

Hot reload

On Linux (keymapDefault for XWin) and Windows the keyboard shortcuts areControl+Alt+; andControl+Backslash.

On macOS (keymapMac OS X 10.5+ copy) the keyboard shortcuts areCommand+Option andCommand+Backslash.

Keyboard mappings can be changed in the IDE Preferences/Settings: SelectKeymap, then enterflutter into the search box in the upper right corner. Right click the binding you want to change andAdd Keyboard Shortcut.

IntelliJ settings keymap

Hot reload vs. hot restart

#

Hot reload works by injecting updated source code files into the running Dart VM (Virtual Machine). This includes not only adding new classes, but also adding methods and fields to existing classes, and changing existing functions. A few types of code changes cannot be hot reloaded though:

  • Global variable initializers
  • Static field initializers
  • Themain() method of the app

For these changes you can fully restart your application, without having to end your debugging session. To perform a hot restart, don't click the Stop button, simply re-click the Run button (if in a run session) or Debug button (if in a debug session), or shift-click the 'hot reload' button.

Editing Android code in Android Studio with full IDE support

#

Opening the root directory of a Flutter project doesn't expose all the Android files to the IDE. Flutter apps contain a subdirectory namedandroid. If you open this subdirectory as its own separate project in Android Studio, the IDE will be able to fully support editing and refactoring all Android files (like Gradle scripts).

If you already have the entire project opened as a Flutter app in Android Studio, there are two equivalent ways to open the Android files on their own for editing in the IDE. Before trying this, make sure that you're on the latest version of Android Studio and the Flutter plugins.

  • In the"project view", you should see a subdirectory immediately under the root of your flutter app namedandroid. Right click on it, then selectFlutter > Open Android module in Android Studio.
  • OR, you can open any of the files under theandroid subdirectory for editing. You should then see a "Flutter commands" banner at the top of the editor with a link labeledOpen for Editing in Android Studio. Click that link.

For both options, Android Studio gives you the option to use separate windows or to replace the existing window with the new project when opening a second project. Either option is fine.

If you don't already have the Flutter project opened in Android studio, you can open the Android files as their own project from the start:

  1. ClickOpen an existing Android Studio Project on the Welcome splash screen, orFile > Open if Android Studio is already open.
  2. Open theandroid subdirectory immediately under the flutter app root. For example if the project is calledflutter_app, openflutter_app/android.

If you haven't run your Flutter app yet, you might see Android Studio report a build error when you open theandroid project. Runflutter pub get in the app's root directory and rebuild the project by selectingBuild > Make to fix it.

Editing Android code in IntelliJ IDEA

#

To enable editing of Android code in IntelliJ IDEA, you need to configure the location of the Android SDK:

  1. InPreferences > Plugins, enableAndroid Support if you haven't already.
  2. Right-click theandroid folder in the Project view, and selectOpen Module Settings.
  3. In theSources tab, locate theLanguage level field, and select level 8 or later.
  4. In theDependencies tab, locate theModule SDK field, and select an Android SDK. If no SDK is listed, clickNew and specify the location of the Android SDK. Make sure to select an Android SDK matching the one used by Flutter (as reported byflutter doctor).
  5. ClickOK.

Flutter Property Editor

#

The Flutter Property Editor is a powerful tool provided by theFlutter plugin that lets you view and modify widget properties directly from its visual interface.

How to open the Flutter Property Editor in Android Studio and IntelliJ

#
  1. Click on the Flutter Property EditoriconFlutter Property Editor Android Studio/IntelliJ icon in the Android Studio or IntelliJ sidebar.
  2. The Flutter Property Editor will load in the side panel.
  3. Please refer to the Flutter Property Editordocumentation for a detailed usage guide.

Flutter Property Editor side panel in Android Studio/IntelliJ

Troubleshooting

#

Known issues and feedback

#

Important known issues that might impact your experience are documented in theFlutter plugin README file.

Known bugs and feature requests are tracked in the issue trackers:

We welcome feedback, both on bugs/issues and feature requests. Prior to filing new issues:

  • Do a quick search in the issue trackers to see if the issue is already tracked.
  • Make sure you haveupdated to the most recent version of the plugin.

When filing new issues, include the output offlutter doctor.

Was this page's content helpful?

Unless stated otherwise, the documentation on this site reflects Flutter 3.41.2. Page last updated on 2026-02-09.View source orreport an issue.


[8]ページ先頭

©2009-2026 Movatter.jp