Roadmap To Become A Flutter Developer (Resources for Beginners)
Hello Everyone, This article is inlined for those who are keen to start with flutter, A roadmap for beginners to learn gradually from all the necessary resources.
What is Flutter?
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Introductory to flutter is in best summarised in below-mentioned videos;
Why Flutter??
We already know there are a lot of frameworks out there that provide the cross-platform functionality then what makes flutter standalone in this rat race?
Fast Development
Flutter’s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android. Learn more
Expressive, beautiful UIs
Delight your users with Flutter’s built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness. Browse the widget catalog
Native Performance
Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts to provide full native performance on both iOS and Android. Examples of apps built with Flutter
Check out what Flutter is capable of
Here are the showcases of flutter apps that developers around the world have built.
Showcase
Apps take flight with Flutter See how customers are using Flutter to make beautiful apps in record timeflutter.dev
Flutter Apps | It’s All Widgets!
An open list of example apps made with Flutter include many open-source samples.itsallwidgets.com
Start Flutter | Free Flutter Themes for Android and iOS
Forever free, open source, and easy to use. Start Flutter is a library of free to download Flutter templates. All…startflutter.com
What to Start With First?
Flutter is fast and easy, If you are familiar with java or any object-oriented language you are good to go but I strongly recommend that you should have the basic knowledge of Dart.
These are some videos that you might find helpful to watch.
For those who are not into watching videos
Tutorials
These tutorials teach you how to use the Dart language, tools, and APIs to build applications. If you want a hands-on…dart.dev
Dart Programming Tutorial
Dart is an open-source general-purpose programming language. It is originally developed by Google and later approved as…www.tutorialspoint.com
Learn Dart In A Week With These Free Resources
In this article, I sum up some of the best resources and tutorials for the Dart programming language as of 2019.hackernoon.com
What make dart so quintessential and why flutter use it?
Why Flutter Uses Dart?
Why Flutter Uses Dart
Many linguists believe that the natural language a person speaks affects how they think. Does the same concept apply to…hackernoon.com
How Does Flutter work under the hood?
Your dart code is directly compiled to native using AOT (Ahead of time ) compilation because iOS doesn’t allow dynamic compilation.
To know more check out these resources below:
Technical overview
What is Flutter?Flutter is an app SDK for building high-performance,high-fidelity apps for iOS, Android, and web([tech…flutter.dev
What’s Revolutionary about Flutter
What is Flutter?hackernoon.com
Flutter is fast and easy to use, now let’s check out how we can install it.
How to Install Flutter?
Here’s the link to the developer docs where you can start to install the flutter in the OS you have.
Install
Select the operating system on which you are installing Flutter:{{site.alert.note}} **Are you on Chrome OS?** If so…flutter.dev
Here are also some articles on Windows, Mac, and Ubuntu that might help.
Have you struck while installing flutter?
If you have any problems with installing flutter and flutter not working, those are some of the issues that have occurred.
Flutter and Dart plugin not installed warnings in flutter doctor · Issue #11940 · flutter/flutter
I’m using IntelliJ CE 2017.2.3 EAP and I get missing plugin warnings in flutter doctor when it seems like everything is…github.com
Android Studio flutter and dart plugins not recognized by flutter doctors, but plugins are…
Hello everybody, I am trying to install flutter on ubuntu, android studio flutter and dart plugins have been…github.com
Having trouble setting flutter path – flutter commands not found
I’ve been trying to set a flutter path so I don’t need to do a temporary path every single time. I’m new to using…stackoverflow.com
Some common issues while installing flutter.
Set up an editor for Flutter
Set up an editor
You can build apps with Flutter using any text editor combined with our command-line tools. However, we recommend using…flutter.dev
Create your flutter project
To create flutter project
flutter create <project-name>
or you can use the IDE (Intellij, Android Studio, etc)
Project overview
When you create the flutter app you will see these files and folders, Most of the code is written in dart in lib folder and when In case of the native requirement android and ios are required.
An article by Jay Tillu explaining about the project structure.
Flutter Project Structure
As always, I’ll be very straight forward and try to keep the article short, simple and very precise. So that in no time…dev.to
Run your first app
Test drive
Do you also want to run your Flutter app on the web? The web version of Flutter is available as early support…flutter.dev
or you can use
To run the your first app
flutter run
and … and .. and
Have got excited when you first app launches (Technically it’s not yours, Code was already there 😜 ). I got excited too 🎉.
When you create your flutter app you will see there is already code for a counter app.
When you run the code, you will see this. This is a simple counter application where you have a FAB(FloatingActionButton) and Text which indicate how many times the FAB has been pressed.
Widgets in flutter
If you see the code you will see StatefulWidget and StatelessWidget. Before we dive into that let’s understand what is a Widget in a flutter.
Introduction to widgets
Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you…flutter.dev
Basically, everything you see in your flutter app is a widget.
I find this explanation very accurate about “What is a Widget in Flutter”
What is a Widget in Flutter?
Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share…stackoverflow.com
There’s also a youtube playlist (Widget of the week )provided by the Flutter team that only talks about Widgets in flutter.
Now
What is a Stateful and Stateless Widget?
In Stateless Widget, all of its properties are immutable which means a StatelessWidget will never rebuild by itself (but can from external events) but a StatefulWidget can.
“Flutter: Stateful vs Stateless Widget” by Souvik Biswas
Flutter: Stateful vs Stateless Widget
In this article, I will show you what is the difference between Stateful and Stateless Widget.medium.com
Let’s create your first flutter app
Google already provides a Codelab where you can learn from scratch that how to build your very first flutter app.
Write Your First Flutter App, part 1
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from…codelabs.developers.google.com
Write Your First Flutter App, part 2
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from…codelabs.developers.google.com
“Build a Flutter app from scratch” by Raman Sah
Flutter Tutorial: How to build an app from scratch
Part 1 of the complete flutter tutorial seriesmedium.com
How to create UI in flutter?
To build the UI in a flutter, you need to get a basic understanding of the layouts and how to work with them.
Layouts in Flutter
What’s the point? Widgets are classes used to build UIs. Widgets are used for both layout and UI elements. Compose…flutter.dev
There’s also a great article on “Flutter layout Cheat Sheet” by Tomek Polański.
Flutter Layout Cheat Sheet
Do you need simple layout samples for Flutter?
I present you my set of Flutter layout code snippets. I will keep it…medium.com
How to add interactions in your app?
In flutter, you cannot just assign a value and leave it
Example
String value="Hello";
------------------------------
Text(value);
---SOMEWHERE IN THE CODE------
onTap(){
value="How are you?";
}
if you think the text is going to change then you are wrong 🙅♂️ , you will have to use setState().
onTap(){
setState({
value="How are you?";
});
}
Adding setState() will rebuild the widget and display the change.
Adding interactivity to your Flutter app
What you’ll learn How to respond to taps. How to create a custom widget. The difference between stateless and stateful…flutter.dev
I would definitely ask you to follow up with the official documentation of flutter regarding the development
Everything in flutter is a Widget, you can create any custom widget on your own, but there are already defined widget by flutter.
Widget catalog
Create beautiful apps faster with Flutter’s collection of visual, structural, platform, and interactive widgets. In…flutter.dev
JSON Parsing in Flutter
JSON and serialization
It is hard to think of a mobile app that doesn’t need to communicate with a web server or easily store structured data…flutter.dev
Parsing JSON | Flutter
It is really confusing for beginners to understand how to parse JSON data.medium.com
“Parsing complex JSON in Flutter ” by Pooja Bhaumik
Parsing complex JSON in Flutter
Parse different types of simple and complex JSON structures using built-in dart:convert library in Fluttermedium.com
“Working with APIs in Flutter” by Pooja Bhaumik
Working with APIs in Flutter
A beginner’s guide to conquering the world of APIs in Flutter for a better ‘Future’.medium.com
“Handling Network Calls like a Pro in Flutter” by Sahil Kumar
Handling Network Calls like a Pro in Flutter
If you are already in love with Flutter, you must have created many apps as of now. Some of them are maybe small single…medium.com
Use Database persistence in Flutter
SQLite
Persist data with SQLite
If writing an app that needs to persist and query larger amounts of data onthe local device, consider using a database…flutter.dev
Data Persistence with SQLite | Flutter
To work with SQLite database in flutter, you will need sqflite pluginmedium.com
SharedPreferences
shared_preferences | Flutter Package
Wraps NSUserDefaults (on iOS) and SharedPreferences (on Android), providing a persistent store for simple data. Data is…pub.dev
Using SharedPreferences in Flutter
SharedPreferences is used for storing data key-value pair in the Android and iOS.medium.com
Store key-value data on disk
If you have a relatively small collection of key-valuesto save, you can use…flutter.dev
Working with firebase
Add Firebase to your Flutter app | Firebase
Follow this guide to add Firebase products to a Flutter app. Firebase supports frameworks like Flutter on a best-effort…firebase.google.com
Firebase for Flutter
If you’re familiar with object-oriented programming concepts, you should be able to complete this codelab. You don’t…codelabs.developers.google.com
Flutter Firebase by Raja Yogan
Other resources to learn Flutter
Here are some of the resources that other developers and the Flutter team have provided by giving their hearts-in to flutter:
Technical overview
What is Flutter?Flutter is an app SDK for building high-performance,high-fidelity apps for iOS, Android, and web([tech…flutter.dev
“Resources to learn Flutter” by Lara Martín
Resources to learn Flutter
Learn by reading, doing courses and watching videosmedium.com
“Free resources to learn and advance in Flutter” by Katarina Sheremet
Free resources to learn and advance in Flutter
Hey, this is my personal collection of free Flutter resources. If I missed some great resources, please add them in…medium.com
“Flutter Tutorial for Beginners using Dart: Develop Android and iOS mobile app ”by Smartherd
“Flutter Tutorials ” by M T E C H V I R A L
“Flutter ” by Raja Yogan
Flutter Community
Articles and Stories from the Flutter Communitymedium.com
“My Favourite List of Flutter Resources” by Andrea Bizzotto
My Favourite List of Flutter Resources
Flutter is awesome! Big thanks to the Flutter team and all the people in the wider community that keep pushing this…medium.com
Solido/awesome-flutter
Flutter is a mobile app SDK for building high-performance, high-fidelity, apps for iOS and Android, from a single…github.com
londonappbrewery/Flutter-Course-Resources
Learn to Code While Building Apps – The Complete Flutter Development Bootcamp …github.com
A Searchable List of Flutter Resources | FlutterX
A Searchable List of Flutter Resourcesflutterx.com
FlutterDevs
FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us…medium.com
Q/A regarding Flutter
FAQ
Flutter is Google’s portable UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and…flutter.dev
“Answering Questions on Flutter App Development” by Deven Joshi
Answering Questions on Flutter App Development
After interacting with a lot of students and developers personally and through my talks and workshops, I realised a lot…medium.com
Flutter Vs. React Native: FAQs for Every Developer
Two technologies that help create mobile apps are earning a lot of traction- for all the good reasons- React Native and…hackernoon.com
This article is only for beginners but I will be coming out with the new article with advanced resources in Flutter.
Thanks for reading this article ❤
If I got something wrong 🙈, Let me know in the comments. I would love to improve.
Connect with me on Linkedin and Github
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
