Last Updated on 2021-10-12 by Clay
Flutter is a set of App development framework developed by Google and actively promoted, which use Dart programming language to write the functions we want to implement.
Among them, the most famous framework feature of Flutter is that you only need to write a piece of code and it can compile into a program executed on Android and iOS.
In addition, Google also claims that the performance of Flutter is similar to that of native Kotlin and Swift, which is very attractive.
As time goes by, Flutter's community has grown larger. Now if you are devoting yourself to Flutter to develop apps, if you have any features want to make, you can go to the development community to see if someone has already done.
As far as I know, many common feature packages are already available, you can call them directly.
The topic is far off.
Today I want to record is how to configure the Flutter development environment through Android Studio. My system is MacOs, Windows and Linux can also refer to the official Flutter SDK configuration teaching file: https://flutter.dev/docs/get-started/install.
Configure Flutter development environment on Android Studio
In below, I will record how to configure these environments step by step. First we need to install the Flutter SDK and confirm flutter doctor command can be executed (this is a command that Flutter detects the development environment depends on), and according to the missing environment detected by the command to make up.
Generally speaking, if the flutter doctor have no problem, you can start the development of Flutter App.
Step 1: Install Flutter SDK
First, go to the site to install Flutter SDK: https://flutter.dev/docs/get-started/install
Select you operating system.
After download, follow the steps of the guide. (I store the download file under the Downloads folder)
mkdir ~/Tools
cd ~/Tools
unzip ~/Downloads/flutter_macos_1.22.6-stable.zip
The set the environment variables. In order to make the settings work every time you open the terminal, add the settings of environment variables to the file ~/.bash_profile (or your ~/.bashrc)
Take my environment as an example, my Flutter SDK is unzipped under the ~/Tools folder, so I set the absolute path of ~/Tools/flutter/bin.
# Environment
export PATH="$PATH:/Users/clay/Tools/flutter/bin"
Let the settings take effect:
source ~/.bash_profile(Optional) Execute flutter doctor command
The following commands should now be available in the terminal:
flutter doctor
Output:
[✓] Flutter (Channel stable, 1.22.6, on Mac OS X 10.15.7 19H2 darwin-x64, locale
en-TW)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
Install Android Studio from:
https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK
components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup
for detailed instructions).
If the Android SDK has been installed to a custom location, set
ANDROID_SDK_ROOT to that location.
You may also want to add it to your PATH environment variable.
[✗] 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
✗ CocoaPods not installed.
CocoaPods is used to retrieve the iOS and macOS platform side's plugin
code that responds to your plugin usage on the Dart side.
Without CocoaPods, plugins will not work on iOS or macOS.
For more info, see https://flutter.dev/platform-plugins
To install:
sudo gem install cocoapods
[!] Android Studio (not installed)
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
As just said, the command will detect what packages and software may be lacking in Flutter currently being developed.
The above message tell us still lack:
- Android SDK
- Xcode (CocoaPods)
- Android Studio
- Connected device (The device is okay, just create it when needed)
The items you lack may be different from mine. just install it according to the suggestion by your flutter doctor.
Step 2: Install Android Studio (Android SDK will be installed at the same time)
Download Android Studio: https://developer.android.com/studio/index.html and install it, during the installation process just select Next.
Then you need to use the following command:
flutter doctor --android-licenses
Choose Yes all the way to complete the Android authorization. (This step is very important)
Step 3: Install Flutter and Dart Plugin of Android Studio
Configure > Plugins.
Install Flutter and Dart.
After installation, restart you Android Studio.
Step 4: Install Xcode (MacOS)
Xcode can download fromApp Store.
After download, key in on terminal:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
In addition, we also need to install CocoaPods.
sudo gem install cocoapodsIf you get any error when you install, you can refer: [Solved] /Library/Ruby/Gems/2.6.0/extensions/universal-darwin-19/2.6.0/ffi-1.14.2/mkmf.log extconf failed, exit code 1.
You can refer these advise to switch Ruby version.
Step 5: Confirm successful installation
Open Android Studio, you should see a Create New Flutter Project option. We can select it and create a new project.
After opening, there should be a basic sample code. In order to test, I created a virtual iOS device and executed the sample code.
The red frame on the top is where I set up the virtual device, and the mobile phone screen on the right is the execution result of the sample program.
If you click the blue floating button and the value in the middle will increase, it means we have successfully configured the Flutter development environment on Android Studio.