App Development - Flutter setup in 5 steps
What is Flutter?
Flutter is Google’s answer to developing brilliant Android and iOS applications under a single, shared code-base. Flutter developers must use Dart to build their projects, along with the Flutter UI framework, which allows the use of many interface widgets. Dart uses many of the object-oriented concepts that developers will be familiar with, however, new and aspiring developers should find this syntax lightweight and easy to pick up with time.
Step 1 – Prerequisites
To be able to develop using Flutter, you’re going to need a few different tools. Links are provided for these:
- Flutter SDK – Contains all the necessary Google files.
- Visual Studio Code – Recommended IDE for carrying out development on your projects.
- Android Studio – Will allow you to create virtual devices to easily debug your projects.
Download the newest version each of these for your OS.
Step 2 – Flutter Extraction
First,we’ll set up the Flutter tools. Navigate to your specified drive,which you will install Flutter on, then create a new directory ‘src’.You can now extract your Flutter SDK .zip folder to this location.
We must now open ‘Edit Environment variables for your account’ to update our path variable.
Once open, select the ‘Path’ variable and press ‘Edit…’. Add anew entry to your Flutter/bin folder.
For example, ‘C:\src\flutter\bin’
Step 3 – IDE Setup
Once you have installed Visual Studio Code, navigate to the extensions tab on the left-hand side of the window.
Search for the ‘Flutter’ and ‘Dart’ extensions and install both of these, as these will allow you to debug using both in VS Code.
Step 4 – Android Virtual Device
Once Android Studio is installed, you can go ahead and load it up. If this is your first time launching, create a new empty project (you won’t be using this project so don’t worry about the settings). If you already have an existing project, load that as we won’t be using it anyway. Navigate to ‘Tools/AVD Manager’ and Create a new virtual device if you don’t already have one you plan on using.
On the first option, you are able to select your desired device to replicate, good choices are the Pixel 2 or Nexus 6 which provide good scope for your projects. Next, select your desired System Image. it’s generally best to go with the most up to date API Level. If you don’t have your desired image installed, click the download button next to it. On the final page you can update with other details, such as naming your AVD and choosing orientation.
Step 5 – Create a project
Now,to create a Flutter project, create a new directory to hold your Flutter projects if you currently have no home for them. I’ll create a ‘flutter_dev’ folder in my Documents folder.
Open Command Prompt and navigate to your chosen directory using:
Now,you can create a new Flutter project using:
‘Flutter create [project name]’
Run your app!
Open the project in Visual Studio Code, by using going to ‘File/OpenFolder’ and selecting your project directory. Go back to your Android Studio AVD Manager and click the launch button for your chosen avd.
click the green button to launch your avd
Now,go back to your project in VS Code, and press F5, select Dart &Flutter as your environment, then your chosen avd.
It may take it’s time, but your new app with the standard Flutter project should now load!