Flutter: Building Your First App

Flutter is a Google’s UI toolkit for building beautiful, natively compiled cross-platform applications for mobile (Android & iOS), web, and desktop from a single codebase.

In this guide, I will be using android studio (IDE) for my environment setup. So for those who hasn’t setup their development environment yet, I prefer you go with Android Studio or either VsCode(Text Editor).

Setup Guide For Windows Os

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

• Operating Systems: Windows 7 SP1 or later (64-bit)
• Disk Space: 1.32 GB (does not include disk space for IDE/tools).
• Tools: Flutter depends on these tools being available in your environment.
• Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)
• Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.
• If Git for Windows is already installed, make sure you can run git commands from the command prompt or PowerShell.

Get the Flutter SDK

1. Download the following installation bundle to get the latest stable release of the Flutter SDK.
2. Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter; do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges).

Update your path

If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:

• From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
• Under User variables check if there is an entry called Path:
• If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
• If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.

You have to close and reopen any existing console windows for these changes to take effect.

Run flutter doctor

From a console window that has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup

[-] Android toolchain — develop for Android devices
• Android SDK at D:\Android\sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.

Android setup

Note: Flutter relies on a full installation of Android Studio to supply its Android platform dependencies. However, you can write your Flutter apps in a number of editors; a later step discusses that.

Install Android Studio

1. Download and install Android Studio.
2. Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

Set up your Android device

To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) or higher.

1. Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android documentation.
2. Windows-only: Install the Google USB Driver.
3. Using a USB cable, plug your phone into your computer. If prompted on your device, authorize your computer to access your device.
4. In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_SDK_ROOT environment variable to that installation directory.

Set up the Android emulator

To prepare to run and test your Flutter app on the Android emulator, follow these steps:

1. Enable VM acceleration on your machine.
2. Launch Android Studio > Tools > Android > AVD Manager and select Create Virtual Device. (The Android submenu is only present when inside an Android project.)
3. Choose a device definition and select Next.
4. 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.
5. Under Emulated Performance, select Hardware — GLES 2.0 to enable hardware acceleration.
6. Verify the AVD configuration is correct, and select Finish.
7. For details on the above steps, see Managing AVDs.
8. In Android Virtual Device Manager, click Run in the toolbar. The emulator starts up and displays the default canvas for your selected OS version and device.

Setup Guide For Mac Os

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

• Operating Systems: macOS (64-bit)
• Disk Space: 2.8 GB (does not include disk space for IDE/tools).
• Tools: Flutter depends on these command-line tools being available in your environment.
• bash
• curl
• git 2.x
• mkdir
• rm
• unzip
• which
• zip

Get the Flutter SDK

1. Download the following installation bundle to get the latest stable release of the Flutter SDK:
2. Extract the file in the desired location, for example:

cd ~/development
unzip ~/Downloads/flutter_macos_1.17.5-stable.zip

3. Add the flutter tool to your path:

export PATH="$PATH:`pwd`/flutter/bin"

This command sets your PATH variable for the current terminal window only. To permanently add Flutter to your path, see Update your path.

Run flutter doctor

Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):

flutter doctor

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you might need to install or further tasks to perform (shown in bold text).

For example:

[-] Android toolchain — develop for Android devices
• Android SDK at /Users/obiwan/Library/Android/sdk
✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.dev/setup/#android-setup for detailed instructions.

Update your path

You can update your PATH variable for the current session at the command line, as shown in Get the Flutter SDK. You’ll probably want to update this variable permanently, so you can run flutter commands in any terminal session.

The steps for modifying this variable permanently for all terminal sessions are machine-specific. Typically you add a line to a file that is executed whenever you open a new window. For example:

1. Determine the directory where you placed the Flutter SDK. You need this in Step 3.
2. Open (or create) the rc file for your shell. Typing echo $SHELL in your Terminal tells you which shell you’re using. If you’re using Bash, edit $HOME/.bash_profile or $HOME/.bashrc. If you’re using Z shell, edit $HOME/.zshrc. If you’re using a different shell, the file path and filename will be different on your machine.
3. Add the following line and change [PATH_TO_FLUTTER_GIT_DIRECTORY] to be the path where you cloned Flutter’s git repo:

export PATH=”$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin”

4.Run source $HOME/.<rc file> to refresh the current window, or open a new terminal window to automatically source the file.

5. Verify that the flutter/bin directory is now in your PATH by running:

echo $PATH

Platform setup

macOS supports developing Flutter apps in iOS, Android, and the web (technical preview release). Complete at least one of the platform setup steps now, to be able to build and run your first Flutter app.

iOS setup

Install Xcode

To develop Flutter apps for iOS, you need a Mac with Xcode installed.

1. Install the latest stable version of Xcode (using web download or the Mac App Store).
2. Configure the Xcode command-line tools to use the newly-installed version of Xcode by running the following from the command line:

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch

This is the correct path for most cases, when you want to use the latest version of Xcode. If you need to use a different version, specify that path instead.

3. Make sure the Xcode license agreement is signed by either opening Xcode once and confirming or running sudo xcodebuild -license from the command line.

Versions older than the latest stable version may still work, but are not recommended for Flutter development. Using old versions of Xcode to target bitcode is not supported, and is likely not to work.

With Xcode, you’ll be able to run Flutter apps on an iOS device or on the simulator.

Set up the iOS simulator

To prepare to run and test your Flutter app on the iOS simulator, follow these steps:

1. On your Mac, find the Simulator via Spotlight or by using the following command:

open -a Simulator

2. Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator’s Hardware > Device menu.

3. Depending on your development machine’s screen size, simulated high-screen-density iOS devices might overflow your screen. Set the device scale under the Window > Scale menu in the simulator.

Create and run a simple Flutter app

To create your first Flutter app and test your setup, follow these steps:

1. Create a new Flutter app by running the following from the command line:

flutter create first_app

2. A first_app directory is created, containing Flutter’s starter app. Enter this directory:

cd first_app

3.To launch the app in the Simulator, ensure that the Simulator is running and enter:

flutter run