contact us

send us your message

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

The latest and greatest

Featured articles from our in-house Superheroes

App Development - Flutter setup in 5 steps

By

|

December 18, 2019

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:

‘cd[your directory]’

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!

...

featured posts
Business Advice

Launch a new part of your business with a Bounce Back Loan

We’ve put together three ways you can use all or some of your Bounce Back Loan to promote growth and new thinking through technology in your business.

Recruitment

Our team is remarkable, its growing but it's not for everyone.

Our team is remarkable, its growing but it's not for everyone.