How to Get Started with Flutter

This post will cover the basics of how to get started with Flutter. It’ll provide you with an overview of your first Flutter app and will give you some pointers on how to get familiar with Flutter, Dart, the tools and ecosystem around building apps using the Flutter SDK. Enough about what you’ll take out of this post, let’s get into it by starting at the beginning.

What is Flutter?

According to the technical overview provide that’s part of the documentation at Flutter.dev, Flutter is a “mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single codebase”. However, there has been a lot of discussion about Flutter being used for Web and embedded as a solution for desktop apps on MacOS, Windows and Linux.

Before we get too much further into what Flutter is, let’s back up a bit and try to understand why Flutter is needed. A number of years ago it became evident that for a mobile app to be successful it needed to be available on at least iOS and Android. The sheer cost and difficulty of keeping two entirely separate codebases up to date meant that most companies look to some form of cross platform solution. Unfortunately the cross platform, until recently has been a bit hit and miss. On one end you had solutions such as PhoneGap / Cordova that provided a native shell around a web app – these apps typically suffered from poor usability, were often slow and felt like they were a mobile website. Then you had solutions like Xamarin that offered native-like performance but without the ability to share the user interface layer. More recently Xamarin.Forms and ReactNative both offer an abstraction for the user interface that relies heavily on the native platform controls. The abstraction layer is often a point of contention amongst developers who often find themselves spending considerable time adapting the platform controls to get consistency in their apps across the different platforms and devices. In addition, the abstraction layer can become a bottleneck resulting in performance and at times stability issues.

What’s interesting about Flutter is that it takes ownership of the entire page and is solely responsible for rendering each widget that makes up the app using Skia. This approach frees developers up from a lot of the platform idiosyncrasies whilst still giving them the a uniform developer experience for defining the user interface, navigation and behaviour of the app in a consistent manner using Dart.

Before we discuss Dart, it’s worth pointing out a couple of resources that help understand the background of Flutter:

• Fragmented Podcast 118: Flutter and cross platform development with GDE Eugenio Marletti – Part 1
• Fragmented Podcast 119: Flutter with GDE Eugenio Marletti – Part 2
• Flutter Technical Overview
• Getting Started with Flutter
• Google’s Flutter Framework Spreads its Wings and Goes Multi-Platform

What is Dart?

Flutter apps are written almost entirely in Dart, which is a modern programming language with clear similarities to other object-oriented languages such as Java, C#, JavaScript, Objective-C, Swift. According to the official language website dart.dev, Dart is “a client-optimised language for fast apps on any platform” but this doesn’t specifically address why we need yet another programming language.

An interesting article, entitled Why Flutter Uses Dart, from back in 2017 provides a number of points as to why Flutter uses Dart:

• Dart supports AOT allowing it to optimise down to native code in order to perform well in production.
• Dart supports JIT, allowing a fast developer cycle, namely hot reload.
• Dart supports the declaration of layout for Flutter apps without the need of a separate markup language (the article Making Dart a Better Language for UI delves into this in more detail).
• Dart borrows many existing static and dynamic language features from other languages that developers are already familiar with.

As you get into developing Flutter apps it’s worth spending a bit of time exploring the Dart programming language – there are a number of features that have been added to make it easier to declare the user interface for Flutter apps.

To get familiar with Dart, head over to DartPad where you can experiment with different language features. On the left side you can write out some Dart code; hit the Run button; and see the output displayed in the right pane.

For those moving to Flutter/Dart from C#, Adam Pedley put together a post on Moving From C# to Dart: Quick Start. There’s also a C# to Dart transpiler Windows app available in the Microsoft Store. For Java developers there’s a Codelab entitled Intro to Dart for Java Developers. However, having gone through the codelab I would encourage anyone wanting to learn more about Dart to give it a go, regardless of what language/technology you’re coming from.

Get Started with Flutter – Your First App

At this point I’m going to jump right in and create an app. I’ll walk you through the process of creating and running an app, highlighting some of the tools and steps you should be aware of. I’ll be doing on a Windows PC using Visual Studio Code (VS Code) but the general process is the same if you’re on a different platform, or using a different IDE.

Talking of IDEs, the Flutter SDK works well with both Android Studio and Visual Studio Code. Rather than step you through getting the tools setup, head over to the installation instructions, pick your platform and work your way through the steps to download and install both your IDE (Android Studio or VS Code) and the Flutter SDK.

Flutter: New Project

Let’s get started with a new Flutter project – I’m going to walk through using VS Code but the process should be similar if you’re working with Android Studio. We’ll get started with Flutter using the VS Code Command Palette (Use Ctrl+Shift+P or from the View menu select Command Palette). Assuming you’ve already got the Flutter and Dart extensions installed (go here if you haven’t set these up) if you type ‘flutter’ you’ll see a list of commands that you can invoke that relate to Flutter.

Select “Flutter:New Project” either using the mouse or since it’s the first item you can just press Enter. Next you’ll be prompted to give you app/project a name. Flutter requires it to be in lowercase and use underscore to separate words (i.e. no spaces). In this case we’re just going to be walking through the default project that the Flutter SDK creates which is a simple counter, so we’ll call our project flutter_counter.

After naming your Flutter project you’ll be prompted for a location on your computer where you want the source code to be located. Once you’ve specified a folder, VS Code will go ahead and create your Flutter project. You’ll see the project structure, including files and folders appear in the Explorer on the left, and you’ll see a progress notification appear in the bottom right corner.

Once your project has been created the notification in the bottom right corner of the screen will update to indicate that “Your Flutter project is ready!”

A couple of things to note here:

• The notification also includes instructions on how to run your Flutter app – You can press F5 to start running.
• Behind the notification you can see in the Output window that there are some additional instructions. It’s worth scrolling back up through the output and having a read. For example, and we’ll come back to this later, the actual command executed to create the Flutter project was “flutter create –ios-language objc –android-language java” which specifies the use of Objective-C and Java for any platform specific code.
• At the end of the create process it also checked to see whether all the Flutter tooling is correctly setup. In the above screenshot you can just see the last of these checks where it indicates that there is no connected device – we’ll resolve this in a second when we launch the Android emulator. These checks are useful for diagnosing if anything is wrong with your setup and you can run Flutter Doctor for more information/assistance.

Show Me It Running

In VS Code you can press F5 to run the Flutter app. As I mentioned in the previous section, currently I don’t have any devices attached. This means that I’ll see the following prompt appear at the top of the screen. If you have a connected physical device you’ll be able to select

that device at this point.

Picking one of the existing emulator images will launch that emulator and will subsequently build and deploy the flutter_counter app to the emulator. Note that this process can take a few minutes the first time you do it, so be patient and keep an eye on both the Debug Console window and the notifications – these will update to let you know what VS Code is doing. Once your application is deployed and running you’ll see a mini toolbar appear at the top of the VS Code window.

The toolbar allows you to perform typical debugging actions such as pausing execution, step over, step into and step out. It also allows you to trigger a hot reload (we’ll come to this shortly), restart the app and stop the debugging session. In addition to the toolbar you might also see a notification to Open DevTools – don’t worry if you miss this, or any, notification as you can access them again from the status bar at the bottom of the VS Code window by clicking on the bell icon on the far right side.

You can click on the Open DevTools button in the notification to bring up the Dart DevTools. At any stage in the future if you want to bring up the Dart DevTools you can just type “devtools” into the Command Palette to find the appropriate command. The Dart DevTools are incredibly useful as they give you an immediate view of all the widgets that make up your app at any given point in time. You can click on widgets in the tree on the left and see various properties of that widget in the right pane.

There are a host of different features of the Dart DevTools that you should explore and will assist you diagnosing and improving your app. Switching back to VS Code, if you look at the editor window you’ll see the code for the flutter_counter app. As this is a very basic Flutter app, all the Dart code is in a single file. However, you’ll want to make sure you establish the structure of your project so that as your application grows it’s easy to navigate the file/folder structure.

A couple of things you’ll notice about the editor window:

• The code is coloured to highlight Dart keywords, class and property names
• There are vertical lines, making it easy to identify where code blocks start and end
• Code is nicely indented to again make it easy to identify code blocks

As you start to write your application, you’ll want to make sure you keep your code nicely formatted. The Flutter extension for VS Code comes with a great code formatter which you can invoke either from the menu/context menu or using the Shift+Alt+F keyboard shortcut.

Breakpoints

As with most modern programming languages, Dart/Flutter offers a high fidelity debugging experience. By this I mean that you can set breakpoints where the code execution will be paused, allowing you to inspect variables and the call stack, before stepping forward line by line.

To set a breakpoint in VS Code you simply need to click in the empty space immediately to the left of the line number in the editor window. Alternatively put the cursor on the line where you want to set a breakpoint and press F9 (or set a breakpoint via the Debug menu). In each case a red dot will appear to the left of the line number indicating that a breakpoint has been set. The following image shows the state when a breakpoint has been hit.

The main editor window highlights the line that execution has been paused at (i.e. just prior to that line being executed). At this point you can use the left windows to inspect local variables and observe the call stack. You can then use familiar debugging actions such as Step Over (F10), Step Into (F11) and Step Out (Shift+F11) to progress through the code.

Hot Reload

One of the big features that everyone loves to talk about is the ability to make changes and for them to be reflected immediately in the running app. Coming from a Windows/.NET background the big fuss around hot reload seems to be blown out of proportion – we’ve had Edit-and-Continue for as long as I can recall. Admittedly this hasn’t been available, until recently, for Xamarin.Forms developers.

Anyhow, to give you an idea of what’s possible, lets change the text that displays the counter value in our flutter_counter app. Here’s the current code.

Text(
  '$_counter',
  style: Theme.of(context).textTheme.display1,
),

With the flutter_counter app running, let’s change the code to the following:

Text(
  'Current count is $_counter',
  style: Theme.of(context).textTheme.display1,
),

When you save the file, you’ll see that the app automatically picks up the changes and updates the running app. On the left is the original app; on the right is the app with the updated Text – updated without having to stop and restart the app. Note that the count, which is part of the state of the app, remains the same.

How Should You Get Started With Flutter?

So far we’ve covered an introduction to Flutter and Dart, and walked through some of the tools as part of creating a simple counter app. The question is where should you go next to learn more about Flutter?

The best way to build skills and familiar is just to get started with Flutter – get the tools and start building an app. Of course, you’ll want some assistance along the way, so here’s just a few resources that you may want to take advantage of.

Online Courses on Flutter

If you want to follow more structured learning, there are a bunch of online courses that cover the basics and will help you get started with Flutter. The following is a selection of some of the more popular courses.

Udemy
Getting Started With Flutter 1.0
Learn Flutter & Dart to Build iOS & Android Apps
The Complete Flutter App Development Course for Android, iOS

Pluralsight
Flutter: Getting Started

Udacity
Build Native Mobile Apps with Flutter

Flutter Crash Course
4 modules: The Basics, Flutter for Junior Devs, The Tourism & Co.App, Pro Flutter Essentials

App Brewery
The Complete Flutter Development Bootcamp Using Dart

Flutter Learn
https://flutterlearn.com

Raywenderlick
Getting Started with Flutter

Labs and Challenges

For those who prefer to explore and learn through trying, there are a bunch of coding labs and challenges that you can take on.

Google
Flutter CodeLabs

Coding Challenges
Dart Codewars
Uplabs design challenges
Try reproducing any of the designs on Dribbble

Community Resources

The Flutter community has an amazing set of contributor producing blogs, videos and collecting lists of resources that are useful for Flutter developers at every level.

YouTube / Video
Mtechviral
VoidRealms
Raja Yogan
Google Developers – Flutter
Fireship.io – Flutter

Resources
Awesome flutter – resources list
PoojaB26 – AwesomeFlutterPlaylist

News, Chat and People

Lastly, there are some great sites, mailing list, chats and people that you can participate or follow in order to ask for help, or just keep up with what’s going on in the Flutter-verse.

News
Flutter weekly
Medium – Flutter

Chat
Gitter – Flutter
MindOrks Slack channel

Twitter
@FlutterWk
@flutterio
@r_FlutterDev
Tim Sneath @timsneath
Eugenio Marletti @workingkills
Seth Ladd @sethladd
Nilay Yener @nlycskn
Pooja Bhaumik @pblead26
Brett Morgan @DomesticMouse
Thomas Burkhart @ThomasBurkhartB

Get Started With Flutter

As you can see the world of Flutter is rapidly evolving – there are a ton of great resources produced by Google and the community alike. Now’s the time to get familiar with Flutter and start building amazing cross-platform applications.