22 Short Lessons To Become A Mobile Programmer Using Flutter Framework 
Tags: tutorial, career, flutter
Published: 2019-11-17 21:34:36

---
title: 22 Short Lessons To Become A Mobile Programmer Using Flutter Framework 
published: true
description: Here is a list of 22 short, video lessons aimed for absolute beginners and non-programmers to learn mobile software development from scratch.
tags: tutorial, beginners, career, flutter
cover_image: https://thepracticaldev.s3.amazonaws.com/i/7g5c6pmsv7etsqbq5m7k.png
---

Here is a list of 22 short, **video lessons** that provide essential information to start developing mobile applications. This crash course is aimed for **beginners** and **non-programmers**.

Instead of teaching abstract concepts and ideas in both Flutter and Dart, those lessons showcase a process of **building an actual, mobile application**.

Join me in this adventure to become a great mobile programmer! :)


### 0. What is Flutter ?
[Flutter](https://flutter.dev/) is a framework for building mobile applications, created at Google. You can develop both Android and iOS mobile applications, which means that it is a so-called « **cross-platform solution** ». You develop it once with a single codebase written using a single programming language called Dart. Instead of using Swift for iOS and Java or Kotlin for Android.

Flutter abstracts the interaction with both Android & iOS while still **producing native code**. Simply put, you don’t need to learn different ways of writing mobile applications for different mobile platforms.This is similar to React Native, but Flutter’s advantage is that the framework, the programming language and the toolchain are developed by single company while still being open source.

{% youtube MbUey9oquuU %}

### 1. Development Setup

Visual Studio Code has a fantastic integration with Flutter. There are two great plugins: `Dart` and `Flutter` to streamline the development process. There is also a built-in **hot reload feature** , which provides instant code reloading while developing the app.

{% youtube G5vxhjzYO-Q %}

### 2. Creating First Flutter Application

The Flutter plugin adds to VS Code commands to create a new project boilerplate and to launch a mobile device emulator for both Android and iOS.

{% youtube b86t20jr_wU %}

### 3. Stateless & Stateful Widgets

Flutter is pretty similar to React or Vue.js. The notion of Component is replaced by a notion of Widget, which is basically the same thing. Similarly, we distinguish Widgets that have state as Stateful Widgets (Smart Components in React) and those without state are Stateless Widgets (Dumb Components in React).

{% youtube pFsIjiGsfqQ %}

### 4. Listings Elements 

One of the most common and import ways to interact with a mobile application is simply by using lists. In Flutter, listing elements on screen is extremely easy thanks to the `ListView` widget. 

{% youtube TEIhOnlMudM %}

### 5. Assets

A mobile device is slightly different than a web page. If there is a need to display images or handle data files that accessible offline, those need to be store on that device as assets.

{% youtube pZfOQ95uab4 %}

###  6. Using Types in Dart

Types allows to provide a clear intent in our code.  They improve the coding experience on the lower level and at the micro scale. Dart, the language used by Flutter, is not only statically typed, but it also provides a sophisticated type inference - a way for the compiler to guess types for you.

{% youtube rniuCsmxCsI %}


### 7. Serializing JSON

At some point there is a need to serialize a payload, usually acquired over the wire in the JSON format. Dart & Flutter provide convenient helpers for such tasks.

{% youtube NkUtwePWhZo %}

### 8. Doing HTTP Request and Parsing HTTP Responses

The `http` package in Dart comes with a comprehensive tool-set to perform any type of HTTP request and to efficiently parse the HTT responses.

{% youtube WsgsP-AKxFo %}

### 9. Async / Await Syntax

Dart supports the `async/await` syntax out-of-the-box. In many eyes, this leads to a code which is easier to read and understand. For those, who prefer the notion of `Promise`, Dart has `Future`s an equivalent.

{% youtube _60WdOoezmc %}

### 10. Navigating Between Screens

The screen on a mobile is usually considerably smaller than the one of your laptop. The interactions result in often screen changes. In this lesson, we explain that mechanism in detail. 

{% youtube TACydvfx2gE %}

### 11. Creating Simple Forms

Similarly to web pages, a common way to interact with a mobile application is through forms. You can enter some data via input fields or select some criteria via radio buttons or drop-down menus. Creating forms in Flutter is also pretty straightforward. This lesson shows the basics of that process.

{% youtube VaWobMmVOWQ %}

### 12. Creating More Complicated Forms

Forms are sent in by submitting them. It may be necessary, not only to control particular fields, but also the form as a whole. Flutter allows to group different fields under a `Form` widget, so that the form submission triggers saving all fields values in that form.

{% youtube X43DHrmwa1s %}

### 13. Validating Forms

Forms need to be validated. It is a process of accepting proper values and rejecting those that don’t conform to the rules defined for each field. Flutter comes with a built-in mechanism for validating forms.

{% youtube WHJLVHgIlpI %}

### 14. Adding Side Menu

Side menus are used to display allowed operations along with the profile information for a currently logged in user. There is no need to build this feature from scratch in Flutter as it comes built-in.

{% youtube kVi7taaaUVM %}

### 15. Making List Items Dissmissable

As noted previously, lists are common in mobile applications. It is also popular to interact with list items through gestures such as swiping. In Flutter, this feature is also built-in and available as the `Dismissible` widget.

{% youtube 6WM3uUX640Y %}

### 16. Creating Tab Bars  

Another popular element in mobile applications is a tab bar, usually located at the top of the screen. And yes, this is also built-in in Flutter. No need to reinvent the wheel, you can simply use the `TabBarView` widget.

{% youtube omZ9ge1ZRUI %}

### 17. Adding Navigation Bars 

Contrary to the tab bars, the navigation bars are usually located at the bottom of the screen. In addition, they often have icons associated with each item in the bar. Once again, Flutter has your back and provides a convenient `BottomNavigationBar` widget to quickly create that functionality.

{% youtube tz73WexQtac %}

### 18. Streams & The BLoC Pattern

The Dart programming language has a great, built-in support for streams. This mechanism is extremely useful to deal with state in your mobile application. Along with the built-in `StreamBuilder` you can easily rebuild a portion of your widget tree in response to changes in streams.

{% youtube PRd4Y_E2od4 %}

### 19. Combining Streams with Futures

Streams may require some additional learning, but they also provide more flexibility than regular variables. At the beginning it may no be straightforward how to combine entities providing values once with the notion of streams, which is a stream of values. In this lesson we dive into that topic by showing how to combine an HTTP future with a stream in Flutter.

{% youtube T9aYTkF53X0 %}

### 20. Creating A Client-Side Search

The search functionality is also something pretty common for mobile applications. And yet again, Flutter helps us out by providing a built-in mechanism to easily implement that feature. In this lesson, we show how to build a search screen.

{% youtube Ndi3xxiVmv0 %}

### 21. Explaining The Inherited Widget

In addition to Stateful and Stateless widgets, Flutter has a special widget for sharing data across the widget tree. In this episode we deep dive into that topic to fully understand how to use in order to provide our widgets with data.

{% youtube WgLW38VSEVc %}

### 22. The Sprinkle Architecture

In this lesson, we introduce a mental model for the architecture by using a garden as the metaphor. Widgets are plants while Streams are the water sprinkles them, so that those widgets could grow or change.

{% youtube J7WJkkNvyHE %}

---

This course is free and it will always be free. There is no catch. If you like it, found it useful or it helped you in your career, please write me a private message. Seeing and hearing from people enjoying those lessons really motivates me to produce more. 

**You can also subscribe to [my YouTube channel](https://www.youtube.com/channel/UCzgkOWKcwy0uhYilE6bd1Lg). ;)**