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
Recruitment

Operating in the STEM sector, ClearSky Logic recently had a recruitment drive for 5 positions and saw only 15-20% of our applications coming from women.

App Creation

As restaurants begin to reopen their (physical doors) under new Covid-rules, now is the perfect time for this industry's players to move into the Mobile App game.

User Design

If you've never heard of a11y and the world hasn't ended, why bother now? Because for 71% of your web visitors with disabilities, the world didn't end but their visit to your website just did.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
  • Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.