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

22 Short Lessons To Become A Mobile Programmer Using Flutter Framework

zaiste profile image Zaiste Updated on ・5 min read

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

Posted on by:

zaiste profile

Zaiste

@zaiste

Software Engineer. I teach programming on YouTube: https://www.youtube.com/user/ohzaiste

Discussion

pic
Editor guide
 

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!

 

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.

 

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

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.

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.

Good to have you with us! :)

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?

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

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

 

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

 

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 ?

 

How to interface with the underlying phone APIs.

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

 

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 🤣

 

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

 

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 😁❤️

 

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

 

The issue I've found with Flutter when I last tried to use it is that it requires VirtualBox to run, but on Windows 10 Pro, I use Hyper-V.

Did that change?

 

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.

 

I don't want to specifically develop an iOS-compatible app, my issue is the fact that Flutter only supports mobile device simulators based on VirtualBox, which I cannot use on my Windows workstation, since I use Hyper-V (another, different level, hypervisor).

 

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.

 

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

 

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

 

Excellent article. Thanks a lot 🙂

 

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

 

Great! Thank you so much! I've just got into Flutter world and it's amazing 🙂

 

Hi!
You have done awesome job. I just figured out that your YouTube link in the bottom isn't working. Can you please it?
Thank you

 

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

 

I appreciate your work :D but one que- what all am I supposed to know in the flutter to get started in my career??

 

Thanks for the kind words. I'm not sure to understand your question. Is it about the range of Flutter topics to master from the employer standpoint ?

 

Great piece of article that you shared. Keep up the good work.

 

Thank You Zaiste! Great Work:)

 

Thanks for making this Coruse .

 

Awesome tutorial series. Thanks! :)

 

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