CODEX

Expert Flutter IDE SetUp

an opinionated way to set-up an IDE for Flutter app development to get more power!

Fred Grott
Mar 5 · 10 min read

No matter you want to use the Android Studio IDE or the Microsoft Visual Studio Code IDE for Flutter App Development it’s not easy to learn a whole new IDE on top of both the dart computer language and the flutter front-end framework. Would it not be nice if you could download this magical git repo that would have things organized so that you could import a settings file or two and have the IDE already maximized in the editor settings to get fast on flutter app development right away?

You are in luck as since I want to make sure you have the right flutter app development habits from the beginning; I have set up such a git repo called flutter_setUP:

flutter-setup https://gitlab.com/fred.grott/flutter_setup

Yes, there are some goodies in that repo such as the keyboard shortcut pdfs for both IDEs, the correct run-configurations(launch configurations), etc.

Download that git repo first and unzip it to a folder. Now I will discuss both IDE’s and how to use that flutter_setup repo to set up your Flutter IDE for maximum speed in developing flutter applications.

IDE Concepts

Integrated Developer Environment Tools combine code source control, code compilation and code completion, and other features into one application. And, they all have these same concepts:
1. Single-Folder Projects: One Workspace, One Root, and One Git Root. In Front-End due to having the flutter framework cover all targeted platforms with one framework, we are no -longer dealing with the complicated multi-root workspaces. It’s just one project folder as the workspace and in that folder, we also have one git code repo root represented by the dot-git folder.
2. Each IDE has code completion both for classes and functions you type in the editor.
3. Each IDE has its own compiler or integrates with the build compiler packaged with a development framework.
4. Each IDE has its own set of emulators or simulators or connects to emulators and simulators for the targeted platforms. And, each IDE has a way to configure run or launch configurations for those emulators and simulators.
5. Usually there is a save all changes setting so you do not close the IDE without saving changes.
6. Every IDE has enough editor settings that one can slim down the IDE chrome to get maximum editor code editing size in the editor windows.

When you master one IDE all those skills generally apply to the other one.

IDE Editions

For Flutter App Development I recommend that you use the beta editions of the IDE as they give you a preview of some useful new features and keep you updated with the beta edition of flutter via the IDE plugins. Plus, the beta editions are Apple M1 silicon ready.

So let’s get an IDE. The Android Studio IDE, Beta Edition Preview, is based on the IntelliJ Java-Kotlin IDE made by JetBeans. The Beta Edition Preview can be found at:

https://developer.android.com/studio/preview

You want the left download as the right download which is the canary edition is not supported by the flutter and dart plugins. It already has one Android SDK bundled with the native OS-platform installer.

Microsoft’s Visual Studio Code IDE is an electron-based IDE, ie run by nodeJS. You will want the Insiders edition as it’s Apple M1 Silicon ready on Macs as well as running on Linux, Unix, and MS Windows. It can be found at:

https://code.visualstudio.com/insiders/

It has a nice OS-platform native installer and it’s easy to just follow the directions and install it.

Now, the git repo you just downloaded is also based on the beta edition of flutter. That means that it supports building flutter apps that target Android Mobile devices, iOS Mobile devices, and the web. Do you need to download all the ios and android SDK right away? Now as since Flutter also targets the web you can wait a bit and just get down to coding flutter apps right now.

Let’s skip downloading the mobile SDKs right now and get you to get the IDE you have chosen to use opened and using it for more power in Flutter App Development!

Android Studio IDE

I will cover the Android Studio IDE first as it sort of this old friend as I have used it for years. The way to use Java-based IDE’s is to remember that your laptop or desktop is not a server box where usually java app servers are installed. This means you have to do some tweaking as your cheap laptop or desktop does not have 128–256gigs of ram that the normal server box does.

Go ahead and open up your installed Android Studio IDE after it prompts you to install the first android SDK. Do not open that flutter_setup git repo you just downloaded just yet. Open up your Android Studio IDE and install the flutter plugin as that will also install the dart plugin.

Now, one of the differences between Android Studio IDE and Microsoft’s Visual Studio Code IDE is that Android Studio IDE has no setting to list the plugins to use with a specific project workspace. That means I have to tell what other plugins you need besides the ones already bundled with Android Studio IDE and the flutter and dart plugins you just installed.

Those plugins are:

1. Markdown plugin by JetBeans
2. PlantUML Integration
3. Flutter Pub Version Checker
4. Genymotion Emulator Plugin(Only if you use that mobile 3rd party android emulator)
5. Dash(Yes, it covers ZeaL and Velocity doclet viewers)

You are now ready to finally open that flutter_setup git repo so that I can direct you to import the settings. To import the settings, it’s File->ManageSettings->Import and the zip file you want to point to is in the settings sub-folder in the dot-run sub-folder of flutter_setup. Now open up the main.dart file in the lib subfolder and I walk you through some power moves of using the Android Studio IDE.

Android Studio IDE Power Moves

First, let’s fix the IDE max memory as AS IDE still defaults to wrong settings for Java-kotlin based projects, and with the android version of flutter engine still running on java-kotlin, we still need to adjust IDE max memory settings. The setting is in File->Project Settings->

It should be changed from 786MB to about 1280MB.

Now for some fun. Go ahead and open the flutter_setup project you downloaded and unzipped. Choose the main.dart lib in the lib sub-folder as I want to show you how to do split screens which are super powerful to use.

Split Editor Windows

In order to split the window, right-click on the tab of the file that you want to split and then choose Split Vertically/Horizontally

Zen Mode

You can use the Distraction Free Mode of Android Studio to remove the editor tabs and tool-windows buttons. By doing so, your focus will be on the coding part and nothing else. To enable the Distraction Free Mode, go to View->Appearance->Enter Distraction Free Mode

Before Zen Mode:

and Zen Mode:

Macros

Macros are very beneficial when you want to perform more than one action by just pressing one key(or a combination). For example, if you want to remove the unwanted imports, then arrange the code, and finally save the code, then you have to perform three operations through a keyboard. But with the help of Macros, you can perform all these just by pressing ctrl + s or any key combination of your choice.

To make a macro, go to Edit > Macros > Start Macro Recording, and then the macro recording will be started. Now, do the desired operations by pressing the keys. For example, press ctrl + alt + o(in Windows) or ctrl + option + o(in Mac) and then ctrl + s. After that, stop the Macro recording by pressing the Macro recording button(in the bottom right corner of Android Studio) and then give the name and key combination to your macro. Now, whenever you press your key combination, the above 2 operations will be performed.

Code Completion

You can use the Postfix Code Completion to write the code in a faster way. All you need to do is press ctrl + j(in Windows) or cmd + j(in Mac) and Android Studio will give you a number of possible codes. For example, if you want to write the code for a Toast, then just write “T” and press Ctrl + j (or cmd + j), you will be given a list of possible items. Select Toast and click Enter.

Method Navigation

In an Android file, there are various methods and it becomes a harder task to navigate from one method to another as a method can be very large and you need to scroll to move on to the next method. So, to do it quickly, we can press alt + down arrow to move to the next method in the downward direction and alt + up arrow to move to the next method in the upward direction.

You can find the information related to a method by putting the cursor on the required method and then pressing the ctrl + q(in Windows) or ctrl + j(in Mac).

To get the information about the parameters of the methods, you can press ctrl + p(in both Windows and Mac).

Now, let’s deal with the other quirks of Android Studio IDE. Let me show you how to get the run configs as old legacy IntelliJ-Android Studio places run configs in the idea folder which everyone gitignore’s as it has other settings that cannot be stored in git repos.

Android Studio IDE RunConfigs

In all the flutter app repos I am using to teach flutter app development I copy my Android Studio run-configs to a dot-run sub-folder so that you can see and import those run-config settings to use in that app project you just opened.

You will just open each run-config file and copy the settings to the run-config settings panel. Let me step you through that as Android Studio will still save that run-config setting to the dot-idea sub-folder.

Other Android Studio Quirks

  1. Android Studio IDE will form time-to-time ask to update the Gradle plugin, ignore that recommendation as that will change the Gradle build script which then will give you build problems.
  2. After your app get’s towards 10k in lines of code you will have to increase the max memory the IDE uses.
  3. Always, and this goes for any IDE you want to use, launch your IDE using an administrator user account as the underlying flutter build system needs to have that type of access permissions.

VSCode

Microsoft’s Visual Studio Code(VSCode) is an electron-based node-IDE. Not to worry since VSCode has both plugins recommend settings in the workspace file and the run-configs in the dot-vscode sub-folder you can just open that dot-workspace.code-workspace file and have everything basically set. In other words, after you install the flutter and dart plugins just open that file in vscode and it will import that project with all the settings and then instruct you to install the rest of the plugins.

VSCode Power Moves

You will like the slim memory footprint of VSCode as it responds faster to developer input.

Split Screens

To enable split screens press the control key+ the backslash on MS-Windows. On other platforms, it’s similar so refer to the keyboard shortcut pdf I have included in the referenced gi repo.

Zen Mode

Zen mode is just the mode that is opposite of presentation mode in which you only have the code editor panel and the terminal set of outputs panel at the bottom and nothing else. To get the Zen Mode of no distractions, which removes the excess tabs and other IDE chrome, press the control key+k z on MS Windows.

Code Completion

Code completion is the control key+space to get code suggestions.

Method Navigation

In Visual Studio Code, we use the outline view to navigate to any method, class, or function in an opened code file. The outline view is usually in the lower-left panel:

Conclusion

I updated the flutter_setup project git repo to include customized settings for both Android Studio and VSCode for flutter app development including keyboard shortcut pdf maps and run-config(launch) setting files. The problem I found in writing this article is even though I have used Android Studio for years I became a VSCode convert over-night as it has a slimmer memory footprint and is way more customize-able than android studio.

Resources

Article specific resources:
flutter_setup flutter app project git repo https://gitlab.com/fred.grott/flutter_setup

Expert Flutter Setup(article@medium.com in CodeX publication) https://medium.com/codex/flutter-perfect-setup-c5462b412f78

General Flutter and Dart resources:

Flutter Community Resources https://flutter.dev/community

Flutter SDK https://flutter.dev/docs/get-started/install

Android Studio IDE https://developer.android.com/studio

MS’s Visual Studio Code https://code.visualstudio.com/

Flutter Docs https://flutter.dev/docs

Dart Docs https://dart.dev/guides

Google Firebase Mobile Device TestLab https://firebase.google.com/docs/test-lab

Trademark Notice

Google LLC owns the following trademarks; Dart, Flutter, Android, Roboto, Noto. Apple Inc owns the trademarks iOS, MacOSX, Swift, and Objective-C. Apple Inc owns trademarks to their fonts of SF Pro, Sf Compact, SF mono, and New York. JetBeans Inc owns the trademarks to JetBeans, IntelliJ, and Kotlin. Oracle Inc owns the Java trademark. Microsoft Inc owns the trademarks of MS Windows OS and Powershell. Gradle is a trademark of Gradle Inc. The Git Project owns the trademark to Git. Linux Foundation owns the trademark of Linux. Smartphone OEM’s own trademarks to their mobile phone product names. To the best of my ability, I follow the brand and usage guidelines with the above-mentioned trademarks.

About Fred Grott

I’m the crazy SOB who as a former android mobile developer is starting to write about flutter mobile app development, design, and life(see Eff COVID and GOP https://fredgrott.medium.com/eff-covid-and-the-gop-e912db0548b8). Will I reach the pivotal One Million Medium monthly viewers mark? Sit back and watch it happen. Find me on these social platforms:

https://twitter.com/fredgrott

CodeX

Everything connected with Code & Tech!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store