Start with Flutter for mobile development
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
To my understanding, flutter (opens new window) is really good for mobile development. With the matured community in flutter and dart (opens new window), also with the convenient hot-reload feature to simulator, it boost productivity and allow engineer to have more control on the mobile app they create.
I've tried Flutter one year ago with a simple APP, it was quick to build mobile APP with minimum effort. However, the APP I build turns out not really interesting and I lost my interest on it. After one year, look at flutter and dart again, they seem to be more matured than before. I've get a better idea now, maybe it worth a shot again and perhaps to build an APP and put it to production usage.
# Setup
Install flutter according to official documentation (opens new window), which go with latest dart compiler as well. Since I use macOS, the setup is simple for me as
$ git clone https://github.com/flutter/flutter.git -b stable
$ export PATH="$PATH:`pwd`/flutter/bin"
2
We can check details of flutter as
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.14.6 18G87, locale en-HK)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[!] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
[!] Android Studio (not installed)
[✓] VS Code (version 1.43.0)
[!] Connected device
! No devices available
! Doctor found issues in 3 categories.
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
It clearly mentioned all required items with details on what I'm missing and how to fix the missing parts. Since I plan to do mobile development in Android using VS code, I will skip the missing part for Xcode, Android Studio and connected device for now.
- a recommended vscode plugin (opens new window)
# Initialize
after install the vscode with vscode plugin, initialize a flutter project with >flutter: New Project in vscode will help generate a basic source code folder project.
$ tree
.
├── README.md
├── android
│ ├── app
│ │ ├── build.gradle
│ │ └── src
│ │ ├── debug
│ │ │ └── AndroidManifest.xml
│ │ ├── main
│ │ │ ├── AndroidManifest.xml
│ │ │ ├── java
│ │ │ │ └── io
│ │ │ │ └── flutter
│ │ │ │ └── plugins
│ │ │ │ └── GeneratedPluginRegistrant.java
│ │ │ ├── kotlin
│ │ │ │ └── com
│ │ │ │ └── example
│ │ │ │ └── instagram_cache
│ │ │ │ └── MainActivity.kt
│ │ │ └── res
│ │ │ ├── drawable
│ │ │ │ └── launch_background.xml
│ │ │ ├── mipmap-hdpi
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-mdpi
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xxhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ ├── mipmap-xxxhdpi
│ │ │ │ └── ic_launcher.png
│ │ │ └── values
│ │ │ └── styles.xml
│ │ └── profile
│ │ └── AndroidManifest.xml
│ ├── build.gradle
│ ├── gradle
│ │ └── wrapper
│ │ ├── gradle-wrapper.jar
│ │ └── gradle-wrapper.properties
│ ├── gradle.properties
│ ├── gradlew
│ ├── gradlew.bat
│ ├── instagram_cache_android.iml
│ ├── local.properties
│ └── settings.gradle
├── instagram_cache.iml
├── ios
│ ├── Flutter
│ │ ├── AppFrameworkInfo.plist
│ │ ├── Debug.xcconfig
│ │ ├── Generated.xcconfig
│ │ ├── Release.xcconfig
│ │ └── flutter_export_environment.sh
│ ├── Runner
│ │ ├── AppDelegate.swift
│ │ ├── Assets.xcassets
│ │ │ ├── AppIcon.appiconset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── Icon-App-1024x1024@1x.png
│ │ │ │ ├── Icon-App-20x20@1x.png
│ │ │ │ ├── Icon-App-20x20@2x.png
│ │ │ │ ├── Icon-App-20x20@3x.png
│ │ │ │ ├── Icon-App-29x29@1x.png
│ │ │ │ ├── Icon-App-29x29@2x.png
│ │ │ │ ├── Icon-App-29x29@3x.png
│ │ │ │ ├── Icon-App-40x40@1x.png
│ │ │ │ ├── Icon-App-40x40@2x.png
│ │ │ │ ├── Icon-App-40x40@3x.png
│ │ │ │ ├── Icon-App-60x60@2x.png
│ │ │ │ ├── Icon-App-60x60@3x.png
│ │ │ │ ├── Icon-App-76x76@1x.png
│ │ │ │ ├── Icon-App-76x76@2x.png
│ │ │ │ └── Icon-App-83.5x83.5@2x.png
│ │ │ └── LaunchImage.imageset
│ │ │ ├── Contents.json
│ │ │ ├── LaunchImage.png
│ │ │ ├── LaunchImage@2x.png
│ │ │ ├── LaunchImage@3x.png
│ │ │ └── README.md
│ │ ├── Base.lproj
│ │ │ ├── LaunchScreen.storyboard
│ │ │ └── Main.storyboard
│ │ ├── GeneratedPluginRegistrant.h
│ │ ├── GeneratedPluginRegistrant.m
│ │ ├── Info.plist
│ │ └── Runner-Bridging-Header.h
│ ├── Runner.xcodeproj
│ │ ├── project.pbxproj
│ │ ├── project.xcworkspace
│ │ │ └── contents.xcworkspacedata
│ │ └── xcshareddata
│ │ └── xcschemes
│ │ └── Runner.xcscheme
│ └── Runner.xcworkspace
│ └── contents.xcworkspacedata
├── lib
│ └── main.dart
├── pubspec.lock
├── pubspec.yaml
└── test
└── widget_test.dart
38 directories, 65 files
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
We should be able to start a simple app from it already, to view what is in the app, we need a mobile emulators for it. Don't forgot install sdkmanager and avdmanager in command line
$ flutter emulators
No emulators available.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.
You can find more information on managing emulators at the links below:
https://developer.android.com/studio/run/managing-avds
https://developer.android.com/studio/command-line/avdmanager
2
3
4
5
6
7
8
To install a proper emulator, you need to install sdk first:
$ sdkmanager --list
...
...
system-images;android-R;google_apis;x86 | 1 | Google APIs Intel x86 Atom System Image
system-images;android-R;google_apis;x86_64 | 1 | Google APIs Intel x86 Atom_64 System Image
system-images;android-R;google_apis_playstore;x86 | 1 | Google Play Intel x86 Atom System Image
system-images;android-R;google_apis_playstore;x86_64 | 1 | Google Play Intel x86 Atom_64 System Image
$ sdkmanager "system-images;android-R;google_apis;x86"
2
3
4
5
6
7
8
9
Then, create the avd with a name now
$ avdmanager create avd -n latest-android -k "system-images;android-R;google_apis;x86"
Auto-selecting single ABI x86===========] 100% Fetch remote repository...
Do you wish to create a custom hardware profile? [no] no
2
3
once you have avd with a predefined hardware profile, you can list them with details as:
$ avdmanager list avd
Available Android Virtual Devices:
Name: latest-android
Path: /Users/marvin/.android/avd/latest-android.avd
Target: Google APIs (Google Inc.)
Based on: Android R Preview Tag/ABI: google_apis/x86
2
3
4
5
6
make sure you have those ANDROID environment variables available
export ANDROID_NDK_HOME=/usr/local/share/android-ndk
export ANDROID_SDK_ROOT=/usr/local/share/android-sdk
export PATH=$ANDROID_SDK_ROOT/emulator:$ANDROID_SDK_ROOT/tools:$PATH
2
3
Then you can start your emulator with your flutter app running as:
- show your emulator
$ flutter emulator
1 available emulator:
latest-android • latest-android • • android
To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.
You can find more information on managing emulators at the links below:
https://developer.android.com/studio/run/managing-avds
https://developer.android.com/studio/command-line/avdmanager
2
3
4
5
6
7
8
9
10
11
- Start your emulator
$ flutter emulator --launch latest-android
- Run your app from
lib/main.dart
- Run and Debug from Vscode
debug
