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.
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?
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.
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
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)
"Hello Flutter It is Awesome WOW",
"Hello Flutter It is Awesome WOW",
Now continue adding more properties or do the same experiment with the rest of the widgets in the
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.)
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
The Flutter Crash Course
A lean and effective Flutter course focused on realistic, end to end code examples and recipes. This crash course is…
More stuff —
- Flutter Bootcamp by AppBrewery — recommended by Flutter Team
- Flutter Tutorials + Dart by VoidRealms
- Flutter Tutorials by Raja Yogan
- Udemy course by Stephen Grider
- flutterlearn.com by GeekyAnts
Flutter for everyone?
If you are coming from another platform development, you will stumble upon questions like, “Swift can do this, how to do the same in Flutter? Android has this amazing feature, can we have it in Flutter too?” If you are that loyal to your framework, check out the following links and see if you can find what you are looking for.
- Flutter for Android developers
- Flutter for iOS developers
- Flutter for React Native Developers
- Flutter for Web Developers
- Flutter for Xamarin Developers
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.
- Flutter Playlists by Google Developers on YouTube
- My favorite list of GitHub repositories by Solido.
- Flutter Weekly newsletter for weekly news on Flutter.
- Collection of my favorite articles/tutorials on Flutter.
- If you are on Twitter, follow Nilay Yener and Flutter to be upto date with everything Flutter related.
Here’s a Turkish translation by Beyza Sunay Güler for all my Turkish readers. Thank you Beyza!
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.
Feeling super generous? Buy me a cupcake.
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 firstname.lastname@example.org if you wish to talk tech with me.
Have a nice fluttery day!