DEV Community 👩‍💻👨‍💻

Cover image for 22 Short Lessons To Become A Mobile Programmer Using Flutter Framework
Zaiste
Zaiste

Posted on • Updated on

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

Top comments (44)

Collapse
 
noaudio profile image
Samuel Odongo

Thanks for this!

From early this year I've been trying to get into web development but I have to admit it's been really unfulfilling. Before that I was coding mostly in C# and C++.

Recently I took a stab at Dart and I've had more fun than I've ever had while using Javascript, so I decided to ditch the web and focus on Flutter for now. This series looks like it'll be helpful to me.

Thanks again!

Collapse
 
zaiste profile image
Zaiste

I'm curious why do you find it unfulfilling? Is it because the landscape is so fragmented and without clear guidelines? If so, I can relate to that.

Thanks for the kind words. With the series I've been trying to fill the gap with the existing tutorials as they usually do not focus on the architecture that much.

Collapse
 
noaudio profile image
Samuel Odongo • Edited on

Yeah exactly that, I constantly felt lost when trying to learn, and even after completing a course I'd feel like I'd accomplished little. Whenever I finished a project I'd just be relieved that I wasn't working on it anymore haha.

App development is what lured me into programming so I decided I'd get back to it. I did web development because I thought it had a more secure future than mobile, kinda still do to be honest, but in the end I didn't like it much. I'd rather do something that doesn't make me want to pull my hair out.

Your videos are amazing by the way, I've done 5 from the playlist and it was an enjoyable learning experience :)

Thread Thread
 
shazz profile image
shazz

I agree with Samuel Odundo ... I share the same perspective and Dart is really good, though I am stuck with Javascript as very early on in my development learning phase I had started with Javascript.

Thread Thread
 
noaudio profile image
Samuel Odongo

Its been a while since I posted this comment. Since then I've learnt Dart and I'm much better at it. And to make things better, I can still do web development with Dart (AngularDart to be exact). I do not regret the choice I made to ditch Javascript. I've still gotten some freelancing jobs that require a little js but in general I've been able to choose my own stack and I choose Dart always.

Thread Thread
 
zaiste profile image
Zaiste

Good to have you with us! :)

Thread Thread
 
shazz profile image
shazz

I am in process of learning Dart too ... and loving it, primarily plan to use it for Flutter. I am not so confident of Dart for web development though, IMHO I think React for front end is a very good choice compared to Angular.

Whats your opinion?

Thread Thread
 
shazz profile image
shazz

@zaiste ... is there any resources from where we can download your Flutter videos?

Thread Thread
 
yassinedevox profile image
Yassine Rassy

i dont know if its late for my response but you can get all videos from this link : youtube.com/watch?v=MbUey9oquuU&li...

Collapse
 
cadams profile image
Chad Adams

Can you make a video on how to create flutter plugins? I’ve ran into a scenario where you can’t play music in flutter on iOS 13 so I had to create a flutter plugin for that. The 3rd party plugins don’t seem very good for this....

Collapse
 
zaiste profile image
Zaiste

Yes, I've already started something in that vein. Is it just about the plugin creation itself or you are rather interested how to interface with the underlying phone APIs ?

Collapse
 
cadams profile image
Chad Adams

How to interface with the underlying phone APIs.

Thread Thread
 
zaiste profile image
Zaiste

That's a great idea for a lesson. I'll investigate it.

Collapse
 
r3ddev1l profile image
r3ddev1l

Hello,

I'm just getting started with flutter and I found this tutorial series very helpful so I just wanted to thank you for taking your time to make this wonderful tutorial series. The only thing that bugs me is your theme choice for Visual Studio Code 🤣

Collapse
 
kris profile image
kris

Great lessons indeed! This will surely help learn the basics of flutter and dart programming. Easy to understand. I highly appreciate the video tutorials. Learned a lot from this. To dive into the real-world apps we can check some amazing flutter templates out there in the market which can be your next app or inspiration to develop the next application

Collapse
 
omkarchavan28 profile image
OMKAR CHAVAN

You have no idea how much this has helped me i spenta whole day looking at my laptop figuring out how to work all out and now after watching your videos all the concepts are cleared,. A big thanks to you 😁❤️

Collapse
 
zaiste profile image
Zaiste

I'm happy I could help. Good luck with the future programming adventures!

Collapse
 
leandrit_ferizi profile image
Leandrit Ferizi

Thanks for these. Dart looks a beautiful language, which on top of great almost native apps, it yields great programming practices which can be applied to many other languages like Java, C# and other OOP flowers :D

Collapse
 
zaiste profile image
Zaiste

You want to develop an iOS compatible app, did it get that right ? If so, yes there may be some rough edges e.g. lack of the proper debugging. If you stick with the Material there shouldn't be any issues to my knowledge.

Collapse
 
mtstring profile image
MT

Thank you for this. Today I am starting your series in youtube.

Collapse
 
etekumoses profile image
etekumoses

pretty cool thanks zaite...please how can i create a voting app using dart...??

Collapse
 
rsajdok profile image
rsajdok🇪🇺

Excellent article. Thanks a lot 🙂

Collapse
 
faakhy profile image
Rémy | FakeRunner

I started Flutter development with your tutorial ! Very clear. Good job 👏 and thank you.

Collapse
 
nbedevi profile image
Nureddin Bedevi

Thank your for this list, for my I struggling with creating view and style it, I come from Html and javascript background, so I feel hard for structuring columns or make stack widgets.

Collapse
 
shazz profile image
shazz

Hats off to @zaiste ... very good effort ... subscribing to your youtube channel :)

Collapse
 
mohammad_makeen profile image
Mohammad Makeen

These are the best lessons about flutter concepts I have ever seen. Keep going man we are rooting for you

Collapse
 
deulizealand profile image
DeUliZeaLand

Thanks for making this Coruse .

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.