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.
Image designed by Giridhar Reddy Vennapusa
Flutter is now out of beta and Flutter 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.
IDEs used to develop Flutter apps
Installation of Flutter
Note: To set the Flutter path permanently in MacOS and avoid setting on every restart, do as shown below in your MacOS terminal.
To verify Flutter installation and version
Installation of Android Studio
To run the app in Android Emulator, you must install Android Studio to get the Android SDK and emulators.
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).
Add Flutter Plugin to Android Studio
Create Android Emulator
Installation of Xcode
Launch iOS Simulator from Android Studio
Useful iOS Simulator Commands
Execute Flutter Apps from Terminal
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
SM G890UU • 4299a0c86788f678 • android-arm • Android 7.0 (API 24) (emulator)
Run in the selected device → flutter run -d 4299a0c86788f678
Check the specific design/run particular dart file in a selected device → flutter run -d 4299a0c86788f678 lib/main.dart
In this article, I am using Flutter with Android Studio.
Flutter Project Structure
In the Project section, the above screenshot shows the structure of the Flutter app.
Add dependencies and images in pubspec.yaml file
flutter_rating is the third party dependency.
We have to specify assets in the pubspec.yaml. We can
specify file path with folder name and file name or only the folder name.
images/apple.jpeg → we can use only apple.jpeg image.
images/ → we can use all images that are in the images folder.
Make sure that dependencies are properly aligned with spaces. Otherwise, the images won’t display. This particular issue is hard to figure out if you are fairly new to Flutter or YAML.
Android folder → app → src → main → Open Manifest → change the label in Application tag.
iOS folder → Runner → info.plist → Edit the string under CFBundleName
Expand the Android folder → app → src → main → res → add app icons in mipmap folders.
Expand the Android folder → app → src → main → open Manifest → change the icon in Application tag.
Expand iOS folder → Runner → Assets.xcassets → AppIcon.appiconset
In that folder add all app icons.
Expand iOS folder → Runner → Assets.xcassets → AppIcon.appiconset → update the Contents.json file.
Expand Android folder → res → drawable → add image
Expand Android folder → res → drawable → in Launch_background.xml, add bitmap tag.
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.