Everything Flutter (Part 2) : Installing Flutter


In this second part, we'll go through the installation of Flutter both on Android Studio and Visual Studio Code (VS Code).

System Requirement
  • Operating Systems: Windows 7 SP1 or later (64-bit)
  • Disk Space: 400MB (does not include disk space for IDE/tools)
  • Tools: Flutter depends on these tools being available in your environment.

Get The Flutter SDK
  • Download the Installation Bundle
  • Extract the zip-file and place the contained flutter in your desired Installation location for the Flutter SDK (e.g “C:\Flutter\flutter”; do not install flutter in a directory like “C:\Program Files\” that requires elevated privileges)
  • Locate the file flutter_console.bat inside the flutter directory. Start it by double-clicking. With this you are ready to run Flutter Commands in the Flutter Console.

Update Your Path
If you wish to run Flutter Commands in the regular Windows Command Prompt, follow the steps below to add Flutter to the PATH environment variables.
  • Go to “Control Panel > User Account > Change my environment variables”
  • Under User Variable check if there is an entry called Path or PATH
    • If the entry does exist, append the full path to flutter\bin using ; as a separator from existing values
    • If the entry does not exist, create a new User Variable named Path or PATH with full path to flutter\bin as it’s value
  • Reboot Windows to fully apply changes
  • Run flutter doctor in your Windows Command Prompt to see if there are dependencies you need to install to complete the setup

IDE Installation And Setup

Android Studio - Download And Install Android Studio
  • Start Andriod Studio, and go through the Andriod Studio Setup Wizard. This will install the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android

Visual Studio Code - Download And Install Visual Studio Code

Andriod Studio - Set up your Android device
To prepare to run and test your Flutter app on an Android device, you’ll need an Android device running Android 4.1 (API level 16) or higher.
  • Enable Developer options and USB debugging on your device
  • Windows-only: Install the Google USB Driver
  • Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
  • In the terminal, run the flutter device command to verify that Flutter recognizes your connected Android device.

Android Studio - Setup the Android Emulator
To prepare to run and test your Flutter app on the Android emulator, follow these steps:
  • Launch ”Android Studio>Tools>Android>AVD Manager” and select Create Virtual Device. (The Android submenu is only present when inside an Android project.)
  • Choose a device definition and select Next.
  • Select one or more system images for the Android versions you want to emulate, and select Next. An x86 or x86_64 image is recommended.
  • Save Your AVD Name in a notepad
  • Verify the AVD configuration is correct, and select Finish.
  • Locate your emulator folder in your android sdk folder (e.g. C:\Users\HP\AppData\Local\Android\sdk\emulator)
  • Copy the path (e.g. C:\Users\HP\AppData\Local\Android\sdk\emulator)
  • Add the path as a User Variable at your User Path just like you did when adding flutter\bin to your Path
  • In the terminal, run emulator –avd {YOUR_AVD_NAME} command to start your visual machine
  • In the terminal, run the flutter device command to verify that Flutter recognizes your avd

Installation Of Flutter And Dart
Flutter is supported by two plugins:
  • The Flutter plugin powers Flutter developer workflows (running, debugging, hot reload, etc.)
  • The Dart plugin offers code analysis (code validation as you type, code completions, etc.)

Android Studio - Installation Of Flutter And Dart
  • Start Android Studio.
  • Open plugin preferences (“Preferences>Plugins” on macOS, ”File>Settings>Plugins” on Windows & Linux).
  • Select Browse repositories, select the Flutter plug-in and click install
  • Click Yes when prompted to install the Dart plugin.
  • Click Restart when prompted

VS Code - Installation Of Flutter And Dart
  • Start VS Code
  • Invoke ”View>Command Palette”
  • Type install, and select the ”Extensions: Install Extension” action
  • Enter flutter in the search field, select Flutter in the list, and click Install
  • Enter dart in the search field,select Dart in the list,and click Install if not installed
  • Select ‘OK’ to reload VS Code
Validate your setup with the Flutter Doctor
  • Open Window Command Prompt / IDE Terminal
  • Run flutter doctor
  • Review the OUTPUT for any issue


Creating New Flutter Application

 Android Studio - Creating Flutter App
  • Select ”File > New Flutter Project”
  • Select Flutter application as the project type, and press Next
  • Enter a project name (e.g. myapp) and press Next
  • Click Finish
  • Wait for Android Studio to install the SDK, and create the project.
Android Studio - Run The App
  • Locate the main Android Studio toolbar
  • In the target selector, select an Android device for running the app. If none are listed as available, select ”Tools> Android > AVD Manager” and create one or start one there
  • Click the Run icon in the toolbar, or invoke the menu item ”Run > Run”
  • If everything works, you should see your starter app on your device or simulator
VS Code - Creating Flutter App
  • Start VS Code
  • Invoke ”View > Command Palette”
  • Type flutter, and select the Flutter: New Project action
  • Enter a project name (such as myapp) and press Enter
  • Create or select the parent directory for the new project folder
  • Wait for project creation to complete and the main.dart file to appear
VS Code - Run The App
  • Locate the VS Code status bar (the blue bar at the bottom of the window)
  • In the terminal, run emulator –avd {YOUR_AVD_NAME} command to start emulator or plug in your physical device after enabling Developer options and USB debugging on your device
  • Invoke “Debug > Start Debugging” or press F5
  • Wait for the app to launch — progress is printed in the Debug Console view
  • If everything works, after the app has been built, you’ll see the starter app on your device or emulator

Comments

Post a Comment

Popular posts from this blog

Everything Flutter (Part 4) : Write Your First Flutter App (Part 2)

Image
Introduction Flutter is Google's mobile SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. In this codelab, you'll extend a basic Flutter app to include interactivity. You'll also create a second page (called a route ) that the user can navigate to. Finally, you'll modify the app's theme (color). This codelab extends part 1, Create a Lazily Loaded List , but we'll provide the starting code, if you'd like to start with part 2. What you'll learn in part 2 How to write a Flutter app that looks natural on both iOS and Android. Using hot reload for a quicker development cycle. How to add interactivity to a stateful widget. How to create and navigate to a second screen. How to change the look of an app using themes. What you'll build in part 2 You'll start with a s
Read more

Everything Flutter (Part 3) : Write Your First Flutter App (Part 1)

Image
Introduction Flutter is Google's mobile SDK for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. In this codelab, you'll create a simple Flutter app. If you are familiar with object-oriented code and basic programming concepts such as variables, loops, and conditionals, you can complete this codelab. You don't need previous experience with Dart or mobile programming. What you'll learn in part 1 How to write a Flutter app that looks natural on both iOS and Android. Basic structure of a Flutter app. Finding and using packages to extend functionality. Using hot reload for a quicker development cycle. How to implement a stateful widget. How to create an infinite, lazily loaded list. In part 2 of this codelab, you'll add interactivity, modify the app's theme, and add the ability to navi
Read more

Everything Flutter (Part 1) : Introducing Flutter

Image
So, you've heard about Flutter?  You think it's cool but you're not sure how it can really be of help or where it stands amongst other similar platforms like itself. This 'Everything Flutter' series is a Flutter-focused walkthrough inspired from the Flutter Study Jam and DevFest events by GDG communities. In this first part, we'll go through the very basics. Let's go through a few details. What Is Flutter? Flutter is Google’s mobile SDK that helps developers craft high-quality native experiences across mobile platforms in record time. Flutter is the next step in app development because of its Speed And Performance (Fast, Smooth And Predictable), Flexibility (customization, control), Native Look And Feel (Familiarity, ease of use), and Less Time To Market (Rapid development, free). Flutter is Written In Dart Language. What Is Dart? Dart is an open-source web programming language developed by Google. It is a class-based, single-inheritance,
Read more