I want to learn Flutter. How to start?

After I spoke at DevFest 2018 about Flutter, I have been getting plenty of requests on Linkedin and 5 messages each day. 4 of them ask this one famous question,

How do I start learning Flutter? Please help me.

After a point of time, it became tiring for me to reply the same thing to everyone. Thus, I decided to write this article.

Pooja’s Guide to Flutterverse.

There are plenty of articles or GitHub repositories that will give you a list of resources to start from, and I am going to link some of them as well. But this article will be a little different. I want to hold your hand and help you walk the baby steps to Flutterverse, and then leave you to fly on your own.

Um, excuse me? What is Flutterverse again?
Flutter universe! xD Just pass the infant stage and then you will also know these terms soon.

Prerequisites, first.

If you come under one or more of the following categories, you can go ahead and start Flutter without any problem.

  • I have worked with Dart language.
  • I have worked with Object Oriented Languages such as Java, C++ and I’m comfortable with OOP concepts such as Classes, Objects, Methods, Inheritance, Abstraction, etc
  • I am a mobile developer, have worked with Android or iOS native or React Native or Xamarin or Ionic or other mobile development framework.

Rest of you who don’t fall in any of the above category should start learning OOP concepts first. That’s very very important for you to start any framework. I wouldn’t recommend anyone to skip OOP fundamentals and jump straight to Flutter. You may crack it, but your progress will be slow.

Little crash course on Dart?

For many of you, who may not have worked on Dart or would not have heard of Dart if it weren’t for Flutter, I have some good news for you. Dart is pretty easy to learn. I managed it in a day or two. But I had plenty of Android experience, naturally were comfortable with OOP, and had good enough experience with JavaScript. However, I did teach a class of Dart in Flutter Study Jam organized by GDG BBSR, and most of the students grabbed the concepts pretty fast too.

So I have a list of concepts that one must know before they dive into Flutter, and instead of giving you bullet points, I am going to share my Flutter Study Jam presentation with you (only the Dart part). I’m sure, this will be a great help to you.

Here are the slides. Try the concepts mentioned in each slide (from Slide 5)in this DartPad and that’s all you need to know for now.

If you want to dig deeper, here are some resources that can help you —


Can we start Flutter now, please?

Sure, you are ready to take the next flight.

Baby steps and Baby widgets

Here is a short 3 minute read on installing and running your first Hello World app in Flutter. Thanks to Husayn Hakeem.

Now that you know how to run a simple app, let us learn the basic widgets first. I feel it’s very important to experiment with the basic widgets because they are like the building blocks for your app.

Now delete everything in your Hello World app, and just have the following code pasted.

Let’s play with some widgets

For our Flutter Study Jam, I had prepared this GitHub Repository for beginners to play with. It contains the code for basic widgets and most of the properties that we can apply in that widget.

Best way would be to fork the project and play with the existing examples yourself. Play around, delete a property and see how that changes the appearance of the widget in the emulator.

Or if you would like to write them from scratch, then go to the README.md of the repository and write each example one by one, by yourself and keep checking the changes in the emulator.

For example, lets start with the Text widget.
In the above
main.dart in line 24, replace it with the following code —

Text( "Hello Flutter It is Awesome WOW", ),

Check the changes in the emulator. And now let’s add more properties to the widget. (I’m basically adding parameters here, but I like to call it widget properties)

Text(
"Hello Flutter It is Awesome WOW",
textAlign: TextAlign.right,),

Or

Text(
"Hello Flutter It is Awesome WOW",
textAlign: TextAlign.right,
style: TextStyle(
color: Colors.black,
fontSize: 50.0,
),
),

Now continue adding more properties or do the same experiment with the rest of the widgets in the README.md

PS. Flutter has Hot Reload, so you don’t have to “restart” app for every change. Just press Ctrl + Backslash and it will reload the changes for you in few seconds.

Keep exploring. Keep experimenting.

Best way to get comfortable with Flutter?

This is a tried and tested method. It helps you get comfortable with Flutter easily and it’s a lot of fun to perform this task.

Presenting to you, the Flutter UI Challenge

So rules are simple. Find your favourite app UI design and replicate it in Flutter by yourself. There are plenty of amazing designs on UpLabs and Dribbble. Pick one. Or many. And conquer them one by one. There is a bliss in achieving crazy designs in development. (Hey, maybe the core backend people, who were never interested in design won’t get the bliss. I’m a designer first developer, so I care a lot about the look and feel of my apps.)

Some of the people I know who have been constantly posting UI Challenges are Fluttery and Deven Joshi. I’m sure there are more, if you know any one, please put their links in the comments.

A personal tip —

It’s very important to imagine the structure of a design just by looking at it, so I always try to break down the design into blocks. I wrote an article on this earlier “Breaking layouts in Rows and Columns in Flutter” This will definitely help you develop your designs better. Good luck!

I want to dive in more

Yes, sure. There are plenty of other resources by other members from the Flutter community. Putting some of them here —

MTechViral Flutter Tutorials by Pawan Kumar

The Flutter Crash Course by Nick Manning

More stuff —

Okay, now I am comfortable with Flutter

Congratulations! Now that you are comfortable with Flutter, and you feel extremely excited for the next part of this journey, the following resources will help you gain more and more knowledge about this beaaautiful SDK.

And ofcourse,


Did I miss a crazy beginner tutorial or super important Flutter resource? Put them in the comments
My articles are free, but you know you can press the clap👏 button 50 times? The higher you go, the more it motivates me to write more stuff for you guys.
Hello World, I am Pooja Bhaumik. A creative developer and a logical designer. You can find me on Linkedin or stalk me on GitHub or maybe follow me on Twitter? If that’s too social for you, just drop a mail to pbhaumik26@gmail.com if you wish to talk tech with me.
Have a nice fluttery day!