In our previous series of articles, we discussed the installation of Android Studio to the development and debugging of your very first android application. If you haven’t gone through those, do checkout by clicking the link here to get started with Android Development.
In this article, we shall discuss the open-source, cross-platform UI development kit(SDK) introduced by Google, Flutter. Flutter comes with an in-built material UI design library kit that makes it a lot easier to build beautiful and expressive user interfaces. Let’s discuss the benefits of using Flutter as UI SDK,
- Flutter provides UI SDK for building faster and high-performance cross-platform apps for iOS, Android, Web, and Desktop using a single codebase.
- Flutter comes with stateful hot reload functionality that makes the app development quicker. It helps in experimenting with UI designs, fixing bugs quickly.
- Dart’s native compiler converts flutter codebase to native ARM machine code to minimize all platform differences such as icons, navigation, scrolling, and fonts.
Integrate Flutter with Android Studio on Windows:
Flutter can be integrated easily with major IDE’s such as Android studio, Visual Studio Code, and many more. In this article, we will configure Flutter with Android studio for rapid application development.
Requirements (Recommended by Google):
- Windows 7 SP1 or later (64 bits only)
- 400+ MB disk space (Diskspace for IDE not included)
- Required tools: Windows PowerShell 5.0 or newer, Git CLI(Command-line interface)for Windows 2.x
Flutter is available for major operating systems, including Windows, MacOSX, and Linux. Visit the link to download the latest version of the Flutter available for windows.
Once you checked the above points and ready with the downloaded file( in our case flutter_windows_1.17.2-stable.zip ~ 600 MB), we can begin the installation part.
Step #1:
- Extract the downloaded zip file in any directory you like other than the ProgramFiles directory as they require elevated privileges.
- In our case, we extracted the zip file in the Flutter folder in the root directory of Local Disk (C:), as mentioned in the below screenshot.
- It will take a while to extract the zip file with an extracted folder size of around 1.3 GB.
Step #2:
- You need to update the environment path variable to access Flutter from the regular Windows console.
- Open the start search bar and type “Edit environment variables for your account” and hit enter to open the below dialog.
- You need to append the flutters\bin directory to the path variable under the System variables section.
- In our case, we will append “C:\Flutter\flutter_windows_1.17.2-stable\flutter\bin” to the path variable.
Step #3:
- Check the Flutter installation by running the command “flutter doctor” in the flutter\bin directory.
- In our case, we need to open the command prompt in this “C:\Flutter\flutter_windows_1.17.2-stable\flutter\bin” directory and press enter after typing the doctor command.
- In our case, the flutter doctor reported four issues, and we need to fix few of them.
Step #4:
- Let us resolve the first issue reported by flutter doctor, “Some Android licenses not accepted.”
- To resolve this issue, type “flutter doctor –android-licensess” in the command prompt and press enter.
- You need to enter “y” and hit enter to accept all license agreements till you get this message “All SDK package licenses accepted.”
- Now type “flutter doctor” in the command prompt and verify if the first issue is resolved.
Step #5:
- Let us resolve the second reported issue “Flutter/Dart plugin not installed.”
- Go to the File menu and click on the Settings option and navigate to the Plugins section.
- Now search for the keyword ‘Flutter’ in the market place and click install.
- Accept the installation agreement and then click next for subsequent pop-ups.
- Restart the IDE after the successful installation of the Flutter plugin. Dart plugin comes along with the Flutter plugin.
- Now type “flutter doctor” in the command prompt and verify if the second issue is resolved.
The rest two issues we can ignore as we are not using VS Code IDE and the virtual device is not yet running. Once the virtual device is up, or a physical device is connected, you can see the below messages on querying “flutter doctor” command.
Setup a Flutter project:
Launch the Android Studio IDE. On the welcome screen, select the second option, “Start a new flutter project.” This option will allow us to create a new flutter application from scratch.
Summary:
In this article, we have introduced the Flutter UI SDK and its features. Subsequently, we explained the steps for setup and integration of Flutter plugin with Android Studio IDE. In the upcoming series, we will discuss the Dart programming language more and wil create beautiful UI using the Flutter.
