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.
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
What make dart so quintessential and why flutter use it?
Why Flutter Uses Dart?
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:
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.
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.
Some common issues while installing flutter.
Set up an editor for Flutter
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.
Run your first app
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.
Basically, everything you see in your flutter app is a widget.
I find this explanation very accurate about “What is a Widget in Flutter”
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
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.
“Build a Flutter app from scratch” by
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.
There's also a great article on “Flutter layout Cheat Sheet” by
.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.
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.
JSON Parsing in Flutter
“Parsing complex JSON in Flutter ” by
“Working with APIs in Flutter” by
“Handling Network Calls like a Pro in Flutter” by
Use Database persistence in Flutter
SQLite
SharedPreferences
Working with firebase
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:
“Resources to learn Flutter” by
“Free resources to learn and advance in Flutter” by
“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
“My Favourite List of Flutter Resources” by
Q/A regarding Flutter
“Answering Questions on Flutter App Development” by
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 ❤
Comments
Post a Comment