22 Short Lessons To Become A Mobile Programmer Using Flutter Framework

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 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.

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.

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.

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).

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.

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.

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.

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.

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.

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 Futures an equivalent.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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. ;)