A Developer's Guide to Flutter
Tags: flutter, webdev, beginners, tutorial
Published: 2019-11-28 11:27:50

Since it's much-awaited launch, Flutter has caught a lot of attention, and we're excited about it too! I'm hoping that a massive chunk of non-game apps will transition to flutter, and in anticipation, we are therefore training our team on it as well.


Since there are new, but few, resources scattered over the internet to learn flutter - we've compiled our Flutter tutorial to get developers off their feet and start developing apps for Flutter.

In this Flutter guide for beginners, we will cover:

- Flutter: What, How, and Why?
- Setting up Flutter
- Dart Basics
- Flutter Basics
- Widgets
- Layouts
- Interactive Widgets
- Designing an app: Forms, Gestures, and Images
- Lists & Navigation
- Networking
- JSON and Serialization
- Dependency Management
- State Management
- Testing (Unit and Integration)

#Flutter: What, How, and Why?

What is Flutter, and how is it different? Just remember this - Flutter was built to work for any device with a screen and works with:

- iOS and Android
- Web and Desktop (Mac, Windows, and Ubuntu) - Even support PWA
- Auto
- Raspberry Pi (POC stage)

Check out this video from Google; it's a great place to get a grasp - comparing Native Development, Hybrid App Development, React Native Development, and finally, [Flutter App Development](https://www.solutelabs.com/flutter-app-development-services).

{% youtube l-YO9CmaSUM %}

Here is the latest news on the launch of the new version of Flutter and Dart programming language-

{% medium https://blog.solutelabs.com/google-launched-flutter-sdk-1-2-and-dart-programming-language-2-2-8ebab5500fb %}

#Setting up Flutter

Flutter is relatively straightforward to set up and depending on what OS you're using; you can check out the steps in this official Flutter tutorial: 

https://flutter.dev/docs/get-started/install

But in case, you do run into something, check out here: https://github.com/flutter/flutter/wiki/Workarounds-for-common-issues#flutter-installation

The reason we ask that you setup Flutter before Dart is because when you install Flutter, you install Dart too, and while you can separately install dart, it would an unnecessary step. Flutter will decide which dart version will be used, so installing different dart version will be ambiguous as well.

Once you've downloaded and unzipped Flutter, you should see something like this on running the flutter command at the console:

![flutter development](https://cdn-images-1.medium.com/max/800/1*aIAn1ORPEBwUY1krrd8iDA.png)

If you're new to [mobile development](https://www.solutelabs.com/mobile-app-development) in general, you will need to download [Xcode](https://developer.apple.com/xcode/) and [Android Studio](https://developer.android.com/studio/index.html) (and toolchain), as well. Once you've setup Flutter, scaffolding a new project is just one command.

#Dart Basics

Flutter uses [Dart language](https://dart.dev) to build Apps. To understand why Flutter uses dart, check out my previous blog and down to the section - **How Flutter was born**

{% medium https://blog.solutelabs.com/flutter-for-your-next-product-idea-everything-you-need-to-know-f5179a925524 %}

Flutter and Chrome use the same rendering engine - SKIA. Instead of interacting with native APIs, it controls every pixel on the screen, which gives it the much necessary freedom from the legacy baggage as well as the performance it has.

Do give the [official doc](https://flutter.dev/docs/resources/faq#why-did-flutter-choose-to-use-dart) a read, but I found this one to be good at explaining dart

[Why Flutter Uses Dart](https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf)

P.S. You can follow up with dart updates on their [medium account](https://medium.com/dartlang)

Now, you know why [Google](https://en.m.wikipedia.org/wiki/Google) choose Dart - so let's get your hands dirty!

###Learn Dart

Check out the official docs of Dart language, [a tour](https://dart.dev/guides/language/language-tour), and their [language samples](https://dart.dev/samples).

Once you have an overview, head over to http://jpryan.me/dartbyexample/ and do all the examples religiously.

###Practice, Practice, Practice!

Edit your code on [DartPad](https://dartpad.dartlang.org/) for starters and get a better grip. I'm sure you'll be up and running in no time!

![My First Hello, World! in Dart](https://cdn-images-1.medium.com/max/800/1*j5k-sQWAqf0LHl_SUR3_Gg.png)

After, you're done with dartbyexample, head over to exercism, and complete their dart track. It's trendy, so in case it's full, you can do the practice track too.

[Dart | Exercism](https://exercism.io/tracks/dart)

#Flutter Basics

Now that you're familiar with Dart, it's finally time to move on to Flutter

![penguin gif](https://cdn-images-1.medium.com/max/800/1*jHSZ0_y9aoas3UxUMkRMZw.gif)

Let's start with the technical overview here:

[Technical overview](https://flutter.dev/docs/resources/technical-overview)

And scaffold a new flutter app with:

```sh
$ flutter create app_name
```

And you should see something like this:

![android studio](https://cdn-images-1.medium.com/max/800/1*3KBHP-3nKyS3XP8bTma2Yw.png)

Open the project on the Android Studio, download the emulator, and an Android version if not done already and run the project - and et voila!

![Flutter demo](https://cdn-images-1.medium.com/max/800/1*dA0ntm5vz0xGyDYsp2-f7g.png)

Understand as to how should you structure your project directory and understand which files are meant for which purpose

[Flutter Project Structure](https://dev.to/jay_tillu/flutter-project-structure-1lhe) 

Now that you've setup flutter, it's time to do what all developers do! Use other's code 😆 - what I meant is to set up the package file: pubspec, written in YAML

[The pubspec file](https://dart.dev/tools/pub/pubspec)

###Widgets

> *Remember - Everything's a widget in Flutter*

If you've not read the technical overview as we asked you before, go back and read it :) You will get a fair idea of what widgets are. Widgets come in two flavors: **_stateless_** and **_stateful_**

Stateless Widgets are those whose state doesn't change like a button or an image. As the name states, it doesn't change its state when an action is performed on the screen.

Check out the short video series, and it's [documentation](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html) by Google to explore in-depth (I'm attaching the first video in the series).

When a widget needs to hold some state like a current page in [PageView](https://api.flutter.dev/flutter/widgets/PageView-class.html), the currently selected tab in a [BottomNavigationBar](https://api.flutter.dev/flutter/widgets/PageView-class.html), Stateful widgets are the right choice to make.

StatefulWidgets can hold the current state of a Widget. Instead of a widget build method, a Stateful widget has a [State](https://api.flutter.dev/flutter/widgets/State-class.html) build method which calls each time we explicitly call **_setState_**.

And Similarly, check out the documentation (it has the video inside) for the stateful widgets here:

[StatefulWidget class](https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html)

Flutter 1.9 was released at [GDD China](https://developers.googleblog.com/2019/09/flutter-news-from-gdd-china-flutter1.9.html?m=1) with a host of new features and a mark that the community is multiplying (and that you can't ignore China now)

##Layouts in Flutter

As we discussed earlier, everything is a widget in Flutter - including layout models.

Check out the documentation here:

[Layouts in Flutter](https://flutter.dev/docs/development/ui/layout)

Widgets such as the rows, columns, and grid are layout widgets (which we don't see on screen) that helps other visible widgets to arrange, constraints, and align.

> ⏰ Time for Codelab: [_Write your First Flutter App : Part-1_](https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0)

##And, Some more Widgets!

Flutter comes with a suite of powerful basic Widgets such as [Text](https://api.flutter.dev/flutter/widgets/Text-class.html), [Column](https://api.flutter.dev/flutter/widgets/Column-class.html), [Row](https://api.flutter.dev/flutter/widgets/Row-class.html), [Stack](https://api.flutter.dev/flutter/widgets/Stack-class.html), and [Container](https://api.flutter.dev/flutter/widgets/Container-class.html). The basic widgets will help you creating custom views as you want.

If your app follows [material design guidelines](https://material.io/design/guidelines-overview/), Flutter has a lot to cover by default. Flutter provides several widgets that support Material Design. It includes widgets such as [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html), [AppBar](https://api.flutter.dev/flutter/material/AppBar-class.html), [Scaffold](https://api.flutter.dev/flutter/material/Scaffold-class.html), etc.

![Material Navigation Drawer (https://material.io/components/navigation-drawer/#)](https://cdn-images-1.medium.com/max/800/0*NibO5ZD4c_QJMAHR.png)

Flutter also includes the iOS-centric [Cupertino component](https://flutter.dev/docs/development/ui/widgets/cupertino) package. It covers widgets such as [CupertinoApp](https://api.flutter.dev/flutter/cupertino/CupertinoApp-class.html), [CupertinoNavigationBar](https://api.flutter.dev/flutter/cupertino/CupertinoNavigationBar-class.html), etc.

![Cupertino NavigationBar (https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/)] (https://cdn-images-1.medium.com/max/800/0*3GR_8PDpRyl4Tvmv.png)

##Interactive Widgets

So far, we have seen Widgets that display information on-screen or arrange other widgets. For the real app, it is equally essential to make the app interactive and get user's input in various forms like Gesture, taps, etc.

To achieve this, Flutter has numbers of StatefullWidgets such as [Checkbox](https://api.flutter.dev/flutter/material/Checkbox-class.html), [Radio](https://api.flutter.dev/flutter/material/Radio-class.html), [Slider](https://api.flutter.dev/flutter/material/Slider-class.html), [InkWell](https://api.flutter.dev/flutter/material/InkWell-class.html), [Form](https://api.flutter.dev/flutter/widgets/Form-class.html), and [TextField](https://api.flutter.dev/flutter/material/TextField-class.html), etc. These widgets are capable enough to maintain their state (e.g., Text we are entering in TextField, whether a CheckList is checked or not.)

Go and check out the below example to add Favorites/Non-Favorites functionality to your app.

[Adding interactivity to your Flutter app](https://flutter.dev/docs/development/ui/interactive)

> ⏰ *Time for Codelab*: [*Write your First Flutter App : Part-2*](https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0)


> *As you have reached here, you should be clear with __What is Widgets?__ and __Types of Widget__*

Now you must be curious about what are all widgets available in Flutter?

So here is a Widget Catalog, Check all the Widgets that make Flutter development relaxed and Fun 😍

[Widget catalog](https://flutter.dev/docs/development/ui/widgets)

##Flutter Cookbook

And here we go, It's time to learn Flutter for real apps. I mean Apps that have Multiple screens, Images, Network dependency, and all.

So, Let's begin.

##Designing an App

Check the below app illustration.

![-----------------] (https://cdn-images-1.medium.com/max/800/1*FVbUPfA8Q03E7_old_Yajw.gif)

This Simple looking app has these features 👇

1. Navigation Drawer
https://flutter.dev/docs/cookbook/design/drawer

2. SnackBar
https://flutter.dev/docs/cookbook/design/snackbars

3. Custom Fonts (A Text have its own Style 😉)
https://flutter.dev/docs/cookbook/design/package-fonts

4. A [Text](https://flutter.dev/docs/development/ui/widgets/text)-based on Orientation (Bigger fonts in Landscape)
https://flutter.dev/docs/cookbook/design/orientation

5. And, Multiple Tabs
https://flutter.dev/docs/cookbook/design/tabs

> *__Note here: OrientationBuilder__ is independent of the device's orientation. Instead, It calculates the current Orientation by comparing the width and height available to the parent widget. To determine the device's orientation you can refer __MediaQuery.of(context).orientation__*

##Forms

Flutter has a **Form** widget that helps to build a form that efficiently manages the essential requirement of a Form, e.g., State of a Form, Validation, etc. Check out the complete guild in the below documentation.

[Cookbook](https://flutter.dev/docs/cookbook#forms)

##Gestures

To get the user inputs and some-time to make the app super interactive, we maximize the use of Gestures. Flutter has pre-built widgets to cover this.

1. Adding Material Ripple Effect
https://flutter.dev/docs/cookbook/gestures/ripples

2. Handle Taps
https://flutter.dev/docs/cookbook/gestures/handling-taps

3. Swipe to Dismiss
https://flutter.dev/docs/cookbook/gestures/dismissible

##Images

To make apps beautiful and engaging, we use Images. Flutter provides an **Image** widget to display an image in the Flutter app from various sources.

1. Display Images from Network

[Display images from the internet](https://flutter.dev/docs/cookbook/images/network-image)

2. Display Image with Placeholder & with Fade-in Animation

[Fade in images with a placeholder](https://flutter.dev/docs/cookbook/images/fading-in-images)

3. Sometimes it's handy to Load image from network and cache it in local storage to make it quickly available next time.

[Work with cached images](https://flutter.dev/docs/cookbook/images/cached-images)

##Showing more data using List

To accommodate more data, we use List to show them. The list can be horizontally or linearly.

Flutter has a [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) and [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html). These are basic widgets with different contractors to identify how they can be used.

1. Create a grid list

[Create a grid list](https://flutter.dev/docs/cookbook/lists/grid-lists)

2. Create list horizontally

[Create a horizontal list](https://flutter.dev/docs/cookbook/lists/horizontal-list)

3. The list can have different types of Item. E.g., a header & items to it. Check here how you can cover such cases in ListView.

[Create lists with different types of items](https://flutter.dev/docs/cookbook/lists/mixed-list)

4. Floating app bar and Nested scrolling using SliverList

[Place a floating app bar above a list](https://flutter.dev/docs/cookbook/lists/floating-app-bar) .


####*Don't forget to check out [this awesome article](https://medium.com/flutter/slivers-demystified-6ff68ab0296f) by Emily Fortuna to understand Slivers in depth*####

5. Sometimes we have predefined arbitrary items to be placed in a List. e.g., Setting categories. In ListView, you can pass custom items (in the form of Widgets) to its children.

[Use lists](https://flutter.dev/docs/cookbook/lists/basic-list)

6. Sometimes a List has more items then the viewport of a screen. In such cases, it makes no sense to build all the items at once. Flutter has *__ListView.Builder__* that uses the Lazy rendering approach to create list items efficiently.

[Work with long lists](https://flutter.dev/docs/cookbook/lists/long-lists)

If you have more items in a list and looking to paginate them. Here is a good article I found 👇

{% medium https://blog.solutelabs.com/paginate-your-data-in-flutter-7744995febd1 %}

##Navigating between screens aka routes

Most apps contain multiple screens to display data in a well-organized manner. 

In Flutter, we can do navigation-related operations using [Navigator](https://api.flutter.dev/flutter/widgets/Navigator-class.html). 
Check below diagram to understand how Flutter manages multiple routes, and later, we will discuss how to navigate up and forth between them.

![-----------------] (https://cdn-images-1.medium.com/max/800/1*oqlVDLGspU6203J22EQPZg.png)

1. Navigate to a new screen and back

[Navigate to a new screen and back](https://flutter.dev/docs/cookbook/navigation/navigation-basics)

2. Pass data to new screens and retrieve results.

[Send data to a new screen](https://flutter.dev/docs/cookbook/navigation/passing-data)

[Return data from a screen](https://flutter.dev/docs/cookbook/navigation/returning-data)

> *So far, what we have seen is suitable for small projects. But when the project grows, we want to manage all routes at a single place. Also, we might need to address below questions*
1. How many routes we have?
2. How to initialize each route?
3. What data is required by each route?
etc..

3. To manage all this efficiently, Flutter has named routes.

[Navigate with named routes](https://flutter.dev/docs/cookbook/navigation/named-routes)

4. Pass arguments in named routes.

[Pass arguments to a named route](https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments)

And, What about this animation while navigating to a new screen?

![Hero animation (https://flutter.dev/docs/cookbook/navigation/hero-animations)] (https://cdn-images-1.medium.com/max/800/0*gK4EzVCEIToPH_Rh.gif)

5. Animate a widget across screens

[Animate a widget across screens](https://flutter.dev/docs/cookbook/navigation/hero-animations)

##Networking

Most apps we come across nowadays, are generally connected with third party server and makes requests to the server to fetch or post data.

In Flutter, we can use Http as a third party pub to do such stuff.

[http | Dart Package](https://pub.dev/packages/http)

1. Fetch data from the network

[Fetch data from the internet](https://flutter.dev/docs/cookbook/networking/fetch-data)

2. Make authenticated requests

[Make authenticated requests](https://flutter.dev/docs/cookbook/networking/authenticated-requests)

3. Work with web sockets

[Work with WebSockets](https://flutter.dev/docs/cookbook/networking/web-sockets)

[Flutter has few more pubs available, which do such stuff more efficiently. Don't forget to take a look at the below pubs](https://flutter.dev/docs/cookbook/networking/web-sockets).

[dio | Dart Package](https://pub.dev/packages/dio)

[chopper | Dart Package](https://pub.dev/packages/chopper)

##Using JSON and Serialization

In Flutter, we generally have two strategies for JSON serialization. Manual parsing and automated serialization using code generation.

> *Runtime [reflection](https://en.wikipedia.org/wiki/Reflection_(computer_programming)) is disabled in Flutter, resulting we cannot have libraries like [GSON](https://github.com/google/gson), [Jackson](https://github.com/FasterXML/jackson-core) or [Moshi](https://github.com/square/moshi)*

Check out the full guide with both strategies here:

[JSON and serialization](https://flutter.dev/docs/development/data-and-backend/json)

For manual parsing, don't forget to check out this online tool to auto-generate boilerplate for the model class.

[Instantly parse JSON in any language | quicktype](https://app.quicktype.io/)

##Data Persistence

Sometimes we need to persist data in local memory to quickly available whenever we need them.

1. If you have a relatively small amount of data to be stored in a key-value pair. Consider using [shared-preferences](https://pub.dev/packages/shared_preferences). Below is the detailed guide to achieving the same using Flutter.

[Store key-value data on disk](https://flutter.dev/docs/cookbook/persistence/key-value)

2. You can also read and write files on disk.

[Read and write files](https://flutter.dev/docs/cookbook/persistence/reading-writing-files)

3. If an app needs to persist a large amount of data and also it requires to query them. It is advised to use an [SQLite database](https://www.sqlite.org/index.html)

Flutter app can use the SQLite database via [sqflite](https://pub.dev/packages/sqflite) pub.

[Persist data with SQLite](https://flutter.dev/docs/cookbook/persistence/sqlite)

For easy to use, reactive persistence, check out below pub. Moor is a wrapper around sqflite.

[moor_flutter | Flutter Package](https://pub.dev/packages/moor_flutter)

##Dependency Management

We use so many pubs in the app. It's a great way to work collectively and share code across apps without having to develop everything from scratch.

You can find all the useful packages from here.

[Dart packages](https://pub.dev/)

With multiple pubs, you might faces issues like conflicts in the version resolving. You can find all the best practices here to be followed while using pubs.

[Using packages](https://flutter.dev/docs/development/packages-and-plugins/using-packages)

And, with all this, you now have completed Flutter cookbook. 👏

#An Art of State Management

###Introduction

In a typical app, it is a common use-case that a change made at Point-A reflects some changes at Point-B. That is called State management. It can also be understood by the below illustration.

![Alt text of image](https://media.giphy.com/media/TFIZ2EBWVGHt59txzK/giphy.gif)

Flutter has multiple approaches that can efficiently manage the State of the app. Based on project size we can decide the appropriate techniques.

Here we will discuss a few of the possible techniques for State management.

1. **setState way**

[Adding interactivity to your Flutter app](https://flutter.dev/docs/development/ui/interactive)

{% medium https://medium.com/@agungsurya/basic-state-management-in-google-flutter-6ee73608f96d %}

2. Inherited Widget

Check out the below video to understand, **What is Inherited Widgets?**

{% youtube Zbm3hjPjQMk %}

Also, Check out the complete list of articles here.

[List of state management approaches](https://flutter.dev/docs/development/data-and-backend/state-mgmt/options#inheritedwidget--inheritedmodel)

###_Remember "Theme.of(context);" and "Navigator.of(context);" you used earlier? That is using the same Inherited Widget concept to access data down in the widget tree._

3. The Provider Package

The [provider](https://pub.dev/packages/provider) is a mixture of DI (dependency injection) and State management built with widgets for widgets.

Official documentation of provider is too good to understand it in depth.

[provider - Dart API docs](https://pub.dev/documentation/provider/latest/)

4. BLoC Pattern

[BLoC](https://bloclibrary.dev/#/) is a Simple, Lightweight, and highly testable a predictable state management library for Dart.

Here is an official guide to: [Bloc](https://bloclibrary.dev/#/)

I also found this good video series explaining BLoC pattern (with [Accompanying article series](https://resocoder.com/2019/10/26/flutter-bloc-library-tutorial-1-0-0-stable-reactive-state-management/))

{% youtube oxeYeMHVLII %}

> *There are also other popular State management techniques in the industry. Like [Redux](https://flutter.dev/docs/development/data-and-backend/state-mgmt/options#redux) and [Mobx](https://flutter.dev/docs/development/data-and-backend/state-mgmt/options#mobx).*


##Testing

When the app grows, it becomes hard to test every feature, and then it comes regression too. In such cases, automation testing is the way to go. It helps ensure that the app performs as expected before we release it. 
And so we don't fall in such situations. 😆

![](https://media.giphy.com/media/de5bARu0SsXiU/giphy.gif) 

Automation testing falls under three categories

- A *[unit](https://flutter.dev/docs/testing#unit-tests)* test tests a single function, method, or class.

- A *[widget test](https://flutter.dev/docs/testing#widget-tests) (in other UI frameworks referred to as component test) tests a single widget.

- An *[integration test](https://flutter.dev/docs/testing#integration-tests) tests a complete app or a large part of an app.

Check out the introduction to testing in Flutter here

[Testing Flutter apps](https://flutter.dev/docs/testing)

##Unit Testing

The goal of Unit testing is to test a particular Unit of code with Stub/mock dependencies. Verify the code works as expected in different scenarios. A unit test is very fast and doesn't require an actual device to execute.

[An introduction to unit testing](https://flutter.dev/docs/cookbook/testing/unit/introduction)

While doing Unit tests, any dependent classes should be injectable, so that we can inject a mock or fake implementation of dependancy and verify if everything working as expected. Flutter has a [mockito](https://pub.dev/packages/mockito) framework that helps to create a mock or fake implementation.

[mockito | Dart Package](https://pub.dev/packages/mockito)

##Widget Testing

Widget Testing (in Flutter) is a UI testing technique. 
The goal of widget testing is to test if particular Widget UI looks as expected, and it's interactive. Widget testing doesn't require a physical device.

We could also test the properties of Widget, like Color, Size, Font Family, etc..
We can also perform user events like tap, gestures, entering text, etc.

[An introduction to widget testing](https://flutter.dev/docs/cookbook/testing/widget/introduction)

##Integration Testing

Integration test work in a pair. The goal here is to test how multiple units work together. Integration testing happens on a real device or emulators.

We can fire a series of User interaction events and expect UI rendering or unit codes to be executed properly.

[An introduction to integration testing](https://flutter.dev/docs/cookbook/testing/integration/introduction)

{% youtube KjE2IDphA_U %}

##BDD: Behavior-driven development

TDD or Unit Tests helps when a stakeholder has strong technical skills. BDD is all about writing a test case from the end user's perspective. This is written in a natural English language.

Testcase can be written in the below format:
**Given**: the initial context at the beginning of the scenario, in one or more clauses;
**when**: the event that triggers the scenario;
**then**: the expected outcome, in one or more clauses.

Internally, a behavior test cases can be a Unit test, widget test, or a combination of both.

BDD helps to understand software functionality from an end-user perspective and becomes a sort of functional documentation.

Flutter has a [gherkin](https://cucumber.io/docs/bdd/better-gherkin/) that helps us writing Behaviour Test cases.

[gherkin | Dart Package](https://pub.dev/packages/gherkin)

---

This guide covers all the basics that you would need to know to start with flutter and develop your apps! We hope this helps you on your journey to flutter.