Setup Flutter on Android Studio,Flutter is an open source cellular app improvement SDK from Google, used to construct beautiful Native Android and iOS apps with a unmarried codebase. Dart is the language used to increase Flutter apps.
Flutter is now out of beta and Flutter 1.0 was introduced on Dec 4th.
This article covers the way to install Flutter and the development surroundings, and also shares solutions for the most commonplace requirements and issues faced in Flutter app improvement. The manner below is greater helpful for Android builders who want to try their hand at Flutter app improvement.
Setup Flutter on Android Studio,1 — Setup
IDEs used to develop Flutter apps
- Android Studio
- Visual Studio Code
- IntelliJ
Setup Flutter on Android Studio,Installation of Flutter
- Download Flutter Zip report.
- Extract Zip document.
- Add Flutter tool to the route from the terminal.
- $ export PATH = $PATH: “PWD”/flutter/bin
- PWD → Present Working Directory.
- This is a temporary route placing, so whilst you restart your gadget, you need to set the Flutter device route again.
Note: To set the Flutter direction permanently in MacOS and keep away from placing on every restart, do as shown beneath for your MacOS terminal.
- Touch .Bash_profile
- open .Bash_profile
- $ export PATH=$PATH: “PWD”/flutter/bin
- “PWD” → Present Working Directory.
Setup Flutter on Android Studio,To affirm Flutter installation and version
- flutter physician -v
Setup Flutter on Android Studio,2 — Android Studio Configuration
Setup Flutter on Android Studio,Installation of Android Studio
To run the app in Android Emulator, you must installation Android Studio to get the Android SDK and emulators.
- Download Android Studio and run the .Dmg document. It will routinely installation the contemporary Android SDK.
Add Dart Plugin to Android Studio
If you opt to use Android Studio as your principal IDE to expand Flutter, you have to set dart language help to Android Studio as shown beneath. From right here we can be focusing extra on Android Studio setup, however you could additionally use Visual Studio Code or IntelliJ (which is similar to Android Studio).
- Preferences → Plugins → Browse Repository → kind Dart in seek bar → Install and Restart Android Studio.
Setup Flutter on Android Studio,Add Flutter Plugin to Android Studio
- Preferences → Plugins → Browse Repository → kind Flutter in seek bar → Install and Restart Android Studio.
Setup Flutter on Android Studio,Create Android Emulator
- Tools → AVD Manager → Opens a window
- Select → Create Virtual Device
- Phone → Nexus 5X 5’2″ → Oreo x86 → Android eight.0 → AVD Name(Nexus 5X API 26) → Finish
- Select Nexus 5X API 26 emulator → click on on Launch AVD(start) button
Creating Android Emulator
Setup Flutter on Android Studio,03 — iOS Simulator Setup
Installation of Xcode
- To execute the app in iOS simulator, we ought to install Xcode. Get Xcode from App Store and set up.
Launch iOS Simulator from Android Studio
- You can see the Flutter Device Selection button under the toolbar in Android Studio.
- If you have got already established 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
- Quit Simulator→Cmd+q
04 — Using Terminal to Run on Emulator or Simulator
Execute Flutter Apps from Terminal
- Run From Terminal → flutter run
- Run in all gadgets → flutter run -d all lib/welcome.Dart
If your gadget is connected with multiple devices then, take a look at the connected gadgets with this command → flutter gadgets
Running above command will listing gadgets like underneath
SM G890UU • 4299a0c86788f678 • android-arm • Android 7.Zero (API 24) (emulator)
Run in the decided on tool → flutter run -d 4299a0c86788f678
Check the unique design/run precise dart file in a particular tool → flutter run -d 4299a0c86788f678 lib/main.Dart
5 — Flutter Project Structure
In this article, I am the use of Flutter with Android Studio.
In the Project phase, the above screenshot suggests the shape of the Flutter app.
- Android: Has all of the Android related documents.
- IOS: Has all of the iOS-related files.
- Lib: Has all the dart files. This is the principle folder, in which we are able to write all of the utility code.
- Check: Has all the trying out code.
- Pictures: I created this folder. This has all the snap shots we utilized in our utility.
- Pubspec.Yaml: Has all of the third birthday party dependencies and the belongings we use in our software.
Yaml — Yet Another MultiColumn Layout. Flutter Developers Add dependencies and snap shots in pubspec.Yaml report
flutter_rating is the 1/3 birthday celebration dependency. We must specify property in the pubspec.Yaml. We can specify file course with folder call and report name or simplest the folder call.
Pics/apple.Jpeg → we are able to use simplest apple.Jpeg photograph. Images/ → we can use all snap shots which are in the photographs folder.
Make certain that dependencies are properly aligned with spaces. Otherwise, the images received’t show. This unique trouble is tough to discern out if you are fairly new to Flutter or YAML.
6 — How to Change App Name
In Android
Android folder → app → src → principal → Open Manifest → exchange the label in Application tag.
In iOS
iOS folder → Runner → info.Plist → Edit the string underneath CFBundleName
CFBundleName flutter_ios_app
7 — How to Change App Icon
In Android
Expand the Android folder → app → src → major → res → add app icons in mipmap folders.
Expand the Android folder → app → src → principal → open Manifest → exchange the icon in Application tag.
In iOS Expand iOS folder → Runner → Assets.Xcassets → AppIcon.Appiconset In that folder upload all app icons.
Expand iOS folder → Runner → Assets.Xcassets → AppIcon.Appiconset → update the Contents.Json file.
8 — How to trade Splash Image
In Android
Expand Android folder → res → drawable → upload picture Expand Android folder → res → drawable → in Launch_background.Xml, upload bitmap tag.
In iOS
Expand iOS folder → Runner → Assets.Xcassets → LaunchImage.Imageset → upload all sizes of splash photographs inside the folder
Expand iOS folder → Runner → Assets.Xcassets → LaunchImage.Imageset → → open Contents.Json → trade report call
I hope the above setup instructions and advice on the way to set a few simple necessities are useful for beginners in Flutter app improvement. As Flutter is now out of beta, I look forward to seeing increasingly developers the usage of Flutter for developing Android and iOS apps with a single codebase. For motivation, take a look at out this Widgets Library website built by the Flutter community.