GETTING STARTED WITH FLUTTER

Beginner’s guide to setting up their Flutter environment and running their first Flutter app

What is Flutter?
Flutter is a framework (a framework can be said to be a structural skeleton or a set of building blocks on which a complete building is constructed) developed by Google for building user interfaces (UIs) for mobile, web, and desktop applications from a single codebase. In simple terms, it's like having a versatile toolbox for creating apps that work on different devices without having to start from scratch each time.
Flutter uses a programming language called Dart, and it offers a wide range of pre-built widgets (UI components) that you can customize and arrange to create your app's look and feel.

Setting up your Flutter Environment
Before going further with the setup, make sure your system meets the following requirements

• Memory: At least 8 GB

• Operating System: You need a 64-bit version of Microsoft Windows 10 or newer, and it must have Windows PowerShell 5.0 or later.

• Space: At least 11.0 GB.

• Development Tools: You need to have Git version 2.27 as this will help to manage the different versions of your source code. Make sure that you can always execute git commands from the command prompt or PowerShell

• IDE: Many IDES can be used with Flutter but the two most common ones are; Android Studio and Visual Studio Code (VS code). We will work through the setup of VS Code in this article.
  To download VS Code, just click on Visual Studio Code if you are on Windows or Visual Studio Code for iOS

Setting up the Software Development Kit (SDK)
Next, we will install the Flutter Software Development Kit (SDK).

• Go to the Flutter website to download the SDK version specific to your Operating system (OS)

• Create a folder where Flutter can be installed and extract the zip files. Note: Don’t install Flutter in a path that requires elevated privileges and make sure the path does not contain special characters or spaces.

• Add the PATH variable on your system to your Flutter bin directory (if it has not already been added) by;

1. Clicking on the start menu button and typing environment
   variables

2. Click on edit system variables
   Scroll down until you find PATH under system variables and

3. Click on Edit.
   Select "New" and insert the Flutter SDK binary path. For instance, "C:\Users\user\Flutter\flutter\bin".

4. Lastly, click on OK and save the changes

Check the images provided below;

• To confirm whether Flutter has been properly configured, run the “Flutter --version” or “Flutter doctor” in your command prompt.

Installing Android Debug Bridge (adb) and configuring Android Studio
After configuring the Flutter SDK, the next thing to do is to install Android Studio. Flutter requires the full setup of Android Studio to be able to run Android apps, we also need the Android SDK which comes with Android Studio together with some other libraries and plugins needed to build an Android app.

• You can download Android Studio from their official website and install it.

• Launch Android Studio and follow the Android Studio setup wizard to correctly install Android Studio. To verify if Android Studio has been successfully recognized by Flutter, run “flutter doctor” in your command prompt.

Installing Android Studio SDK and other tools

• In Android Studio, go to Settings>Appearance and Behavior>Android SDK and install the following components;
  • Android SDK Platform, API 34.0.0
  • Android SDK Command-line Tools
  • Android SDK Build-Tools
  • Android SDK Platform-Tools
  • Android Emulator

• Next, we will set up the Android Emulator which will be used to run/preview your apps.
  • The first thing we are going to do is to enable the VM acceleration (Go to the Android Studio documentation website to read more about the VM)
  • From the Android Studio Welcome screen, click on More Actions > Virtual Device Manager.
  • Click on Virtual Device Manager and follow the necessary setup procedures. You can read more on setting up your Android Emulator here

Agree to Android Licenses
The next thing to do is to agree to Android Licenses by doing the following;

• Open the command prompt

• Run the following command to agree to the Android license; flutter doctor --android-licenses
  If the command is not successful or shows an error, run “flutter doctor” to know what the problem is and to fix it.
  And if there’s no error, you should see a prompt that says “All SDK package licenses accepted”. To confirm the state of your configuration, you can run “flutter doctor”

NOTE: You can also run your project on your Physical Android device. To do that, follow the following steps;

• On your device, open Settings, Select Developer Options, and select Enable USB DEBUGGING

• Connect your system to your device via USB.
  If you are having any issues setting up the device or connecting the device, click here
  To visit the official website.

Running your first app

• After the successful configuration, it’s time to run your first app.
  • Launch Visual Studio Code (VS Code) that was installed earlier.
  • Go to “Extensions” and search for “Flutter ” and “Dart” and install the two extensions.
  • Click on “View” in the menu at the top and click on the command palette or you can just use the shortcut Ctrl+Shift+P on Windows/Linux and Cmd+Shift+P on macOS.
  • In the command Palette, enter "Flutter: New Project" and select it when it appears.

• You will then be prompted to choose a project;
  • Select Flutter Application from the list of options brought out
  • Choose the location where you want to create the new project and provide a name for it.
  • Wait patiently for your project to be created.
  • Once the project is created, the main. dart file for the newly created project will automatically open.
  • If you are using a physical device, make sure you are connected to the device through the USB. And if you are using an Emulator, make sure your emulator is perfectly running.

• There are two ways you can choose to run your app;

The first option is;
• From the menu file, click on run.
• From the dropdown menu, click on Start debugging
• Wait patiently and watch the app load and come up on your physical device or your emulator.

The second option is;
• Open the VS Code terminal.
• Run the flutter run command and press enter.
• Wait patiently and watch the app load and come up on the physical device that you connected or your emulator.

CONCLUSION
Congratulations! You've successfully set up your Flutter environment and have just run your first Flutter app on your phone or emulator. Remember, you can interact with the app running on your phone or emulator just like any real-time app. You're now prepared to immerse yourself in the exciting world of Flutter fully.