Flutteris an open source mobile app development SDK from Google, used to build beautiful Native Android and iOS apps with a single codebase. Dart is the language used to develop Flutter apps.
Flutter is now out of beta andFlutter 1.0 was announced on Dec 4th.
This article covers how to install Flutter and the development environment, and also shares solutions for the most common requirements and issues faced in Flutter app development. The process below is more helpful for Android developers who want to try their hand at Flutter app development.
Add Flutter tool to the path from the terminal. $ export PATH = $PATH: "PWD"/flutter/bin PWD → Present Working Directory.
This is a temporary path setting, so when you restart your system, you have to set the Flutter tool path again.
Note: To set the Flutter path permanently in MacOS and avoid setting on every restart, do as shown below in your MacOS terminal.
$ export PATH=$PATH: "PWD"/flutter/bin “PWD” → Present Working Directory.
To verify Flutter installation and version
flutter doctor -v
#2 — Android Studio Configuration
Installation of Android Studio
To run the app in Android Emulator, you must install Android Studio to get the Android SDK and emulators.
Download Android Studio and run the .dmg file. It will automatically install the latest Android SDK.
Add Dart Plugin to Android Studio
If you prefer to use Android Studio as your main IDE to develop Flutter, you have to set dart language support to Android Studio as shown below. From here we will be focusing more on Android Studio setup, but you could also use Visual Studio Code or IntelliJ (which is similar to Android Studio).
Preferences → Plugins → Browse Repository → type Dart in search bar → Install and Restart Android Studio.
Add Flutter Plugin to Android Studio
Preferences → Plugins → Browse Repository → type Flutter in search bar → Install and Restart Android Studio.
Create Android Emulator
Tools → AVD Manager → Opens a window
Select → Create Virtual Device
Phone → Nexus 5X 5’2″ → Oreo x86 → Android 8.0 → AVD Name(Nexus 5X API 26) → Finish
Select Nexus 5X API 26 emulator → click on Launch AVD(start) button
Creating Android Emulator
#3 — iOS Simulator Setup
Installation of Xcode
To execute the app in iOS simulator, we must install Xcode. Get Xcode from App Store and install.
Launch iOS Simulator from Android Studio
You can see the Flutter Device Selection button below the toolbar in Android Studio.
If you have already installed Xcode, clicking the Flutter Device Selection button opens the iOS simulator.
Useful iOS Simulator Commands
Return to Home → Cmd+Shift+h
See Recent Apps →Cmd+Shift+h+h
#4 — Using Terminal to Run on Emulator or Simulator
Execute Flutter Apps from Terminal
Run From Terminal → flutter run
Run in all devices → flutter run -d all lib/welcome.dart
If your system is connected with multiple devices then, check the connected devices with this command → flutter devices
Running above command will list devices like below
Expand iOS folder → Runner → Assets.xcassets → LaunchImage.imageset → add all sizes of splash images in the folder
Expand iOS folder → Runner → Assets.xcassets → LaunchImage.imageset → → open Contents.json → change file name
I hope the above setup instructions and advice on how to set a few basic requirements are useful for beginners in Flutter app development. As Flutter is now out of beta, I look forward to seeing more and more developers using Flutter for developing Android and iOS apps with a single codebase. For motivation, check out this Widgets Library website built by the Flutter community.