Open in app

Sign in

Write

Sign in

📱Flutter Roadmap & Resource Guide — 2023

Harisbashir
11 min readApr 14, 2021

--

  • Flutter is booming after the arrival of Flutter 2.0 ,announced in Flutter Engage held 0n March 03 2021 in which Flutter team announced that web version and desktop versions of the Windows, Linux and MacOS were promoted to the stable channel. It means you can create desktop ,web and mobile apps using single codebase .

Let’s discuss in detail the roadmap that I am following in order to efficiently learn flutter development .

***************** 🎯DART BASICS **************

To understand which things are important to learn in this section lets first look at the nature and programming paradigms of dart .

what is dart ?

  • Dart is a ‘‘programming language’’ designed for client development, such as for the web and mobile apps.
  • It is developed by Google and can also be used to build server and desktop applications.
  • Dart is an object-oriented, class-based, garbage-collected language with C-style syntax.

We can do dart programming mainly in 3 paradigms/ways:

1.Functional programming :

Functional programming is a programming paradigm where programs are constructed by applying and composing functions.

A function is nothing but a block of organized, reusable code that is used to perform a single, related action.

2.Object Oriented programming

Object Oriented programming (OOP) is a programming paradigm that relies on the concept of classes and objects.

It is used to structure a software program into simple, reusable pieces of code blueprints (usually called classes), which are used to create individual instances of objects.

There are many object-oriented programming languages including JavaScript, C++,C#,JAVA, Dart and Python.

The four pillars of object-oriented programming are:

  • Abstraction.
  • Encapsulation.
  • Inheritance.
  • Polymorphism.

If you are beginner and you don’t know any OOP concepts watch Mosh video about OOP concepts in general :

OOP in 7 minutes (YouTube tutorial)

3.Asynchronous programming :

In sequential programming, synchronous operations tasks are performed one at a time and only when one is completed, the following is unblocked. In other words, you need to wait for a task to finish to move to the next one.

In asynchronous operations, on the other hand, you can move to another task before the previous one finishes.

we will discuss in detail in networking section .

⚡Confusion Regarding Dart

If you are new to programming world then you have to learn some basics concepts of dart like

Basics:

  • variables and data types
  • Operators
  • Comments
  • Control flow statements
  • switch statements
  • Null safety
  • Functions ,parameters & its types ,anonymous functions, fat arrow(=>) functions .

Object Oriented basics :

  • Classes and objects
  • constructors
  • Getters setters
  • Encapsulation, Polymorphism, Abstraction, Inheritance
  • Mixins
  • Abstract classes and interfaces etc.

If you know any one programming language like C# , Java then you can grasp dart with within two to three days.

Learning Resources:

**************🌈 FLUTTER BASICS***************

After some know how of Dart it’s time to dive into world of Flutter .you should learn these things at this stage.

1) Basics styling widgets:

Basic widgets to style a static UI like Text, Container, Row, Column, Asset Image, Network Image, Stack etc.

Learning Resources:

2) Use of Assets:

knowledge of how to use assets(image, video, SVG, images ) and how to add using pubspec.yaml file.

Learning Resources:

3) Types Of Widgets:

Know the difference between stateless and state full widgets .Knowledge of inherited widget and data passing through inherited widgets.

Learning Resources:

4) Navigation and Routing:

How to navigate to next screen and back top previous using navigator.push( ) and navigator.pop( ).How to create routes.

Learning Resources:

5) Design Guide lines:

As flutter is a Google’s UI kit it follows Google’s material design guidelines so its good if you have a sound knowledge of material design guidelines as well as Flat design guidelines by Apple inc for iOS apps .

Learning Resources:

At this point you can to create beautiful static user interfaces ✨😇

***********🚉 DYNAMIC INTERFACES ************

Up to previous stage you can create beautiful static user interfaces but as you can see in famous apps like Facebook ,Instagram they have a splash screen with loader, dynamic lists, lazy loading ,cool headers and navigator right?

You can create dynamic lists with ListView widget, create grids using GridView widget ,flex widgets etc.

Learning Resources:

*****************🎭 ANIMATIONS **************

At this point you can create beautiful dynamic UIs but great mobile app stands out in both appearance, ease of use and features. The use of animation adds subtle beauty, functional ease and elements of user-friendliness to the app. Animations are a great option to respond to users’ actions. They are a great way to draw users’ attention towards the essential elements of an app.

1) Animated Widgets:

Flutter gives us Animations widgets like AnimatedContainer,Hero widget,Aniimated Crossfade etc.

Learning Resources:

Flutter aims to provide 60 frames per second (fps) performance, or 120 fps performance on devices capable of 120Hz updates.

2) Animation Tool:

Using tools like Rive and flare we can create cool animations and ship on any platform.

Learning Resources:

****** 🤳RESPONSIVE AND ADAPTIVE UI *********

At this point you can create beautiful dynamic prototype of app but as know flutter is a portable framework and your can run your app on different devices and platforms.

So first up, what are the key differences between responsive and adaptive design?

Put simply,

  • responsive is fluid and adapts to the size of the screen no matter what the target device
  • It means re-laying out the UI if the user resizes the window, or changes the device’s orientation. This is especially necessary when the same app can run on a variety of devices, from a watch, phone, tablet, to a laptop or desktop computer.

while adaptive means :

  • Managing different behaviors of app based on which platform it is running.
  • There are different expectations about the app’s visual density depending on platform(i.e. mobile, web, desktop ).

There are two basic approaches to creating Flutter apps with responsive design:

Other useful widgets and classes for creating a responsive UI:

Resources To learn:

************** 🌌Local Data storage ************

Flutter is just a UI tool kit but if you want to create full-fledged mobile application with backend you have to store data some where right?

If you want to save data offline on a device or caching data you can use shared preferences and light weight databases.

Shared Preferences:

shared preferences package saves small primitive data in the form of key-value pair locally on a device.

Resources To learn:

Hive:

Hive lightweight key-value database written in Dart for Flutter applications used for caching data or storing data locally on device .

Other options are SqfLite(wrapper of SQLite database ), moor etc.

Resources To learn:

If you have large critical data you need a full fledged databases like

*SQL server

* MySQL

*Firebase

*PostgreSQL etc.

with/without remote servers which we will discuss later in databases section.

*************** 🌠Networking ******************

If you want to use data live from internet within your app you need to learn

  • How to consume REST API’s
  • Parsing JSON data into dart objects
  • asynchronous programming concepts in dart.
  • HTTP requests.(post, delete, get, put).

Resources To learn:

***************🐱‍👓Fire Base ******************

Storage

Firebase is a Backend-as-a-Service (Baas). It provides developers with a variety of tools and services to help them develop quality apps, grow their user base, and earn profit.

It is built on Google’s infrastructure. Firebase is categorized as a NoSQL database program, which stores data in JSON-like documents. Its storage platforms comes in two flavors.

1) Firebase Realtime Database is a cloud-hosted database in which data is stored as JSON.

* The data is synchronized in real-time to every connected client.

*It is the original database of Firebase.

2) Cloud Firestore is a flexible as well as scalable NoSQL cloud database more advance and better query options than real-time data base .

* It is used to store and sync data for client and server-side development.

* It is used for mobile, web, and server development from Google Cloud Platform and Firebase.

Push Notifications:

A push notification is a message that pops up on a mobile device. App publishers can send them at any time; users don’t have to be in the app or using their devices to receive them

you should have sound knowledge of how to send push notifications using firebase cloud messaging service .

Firebase- Authentication:

  • Firebase Authentication provides backend services & easy-to-use SDKs to authenticate users to your app.
  • It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.

Learning Resources :

***********🛫 State management *************

As a beginner you handle simple states using setState( ) method but in large scale apps you need proper state management in order to reduce complexity and increasing robustness of app.

Famous flutter state management libraries :

  • Provider
  • Riverpod(successor of provider)
  • Redux
  • Mobx
  • Get_it and more.

Learning Resources :

*********🚨 BACK-END FRAMEWORK ***********

In the world of mobile development, there are typically two terms that are like a common language within the field: Frontend and backend.

Backend is the important part of a mobile app that is responsible for data storage, security, and business logic. An app backend is much like a server for mobile apps, as it stores and sorts the important information that the end user does not see.

Its not a good approach to directly connect front end to database .we need API and other protocols of server to increase security, simplicity and performance .

We have two types of servers:

  1. Cloud servers: AWS, Microsoft Azure..

Learning Resources :

  1. Custom servers: Built using backend frameworks and technologies .

**************🚨 Databases ********************

There are two main types of databases used in mobile application development mainly in flutter

SQL databases: Databases that used SQL(structure query language) .Mostly SQL databases use table architecture(store data in the form rows and columns)

No-SQL databases: Databases that don’t used SQL for query data .Most popular No SQL database is mongo dB .It stores data in the form of documents.

Learning Resources:

**********Architectural Patterns*****************

.Design patterns play a significant role in developing an application as best practices

  • Formalize them that are loosely combined,
  • Easier to test & maintain and facilitate reusable object-oriented development.

There are three types of most commonly used architectural UI design patterns such as MVC, MVP, and MVVM

Learning Resources:

***********🔭Native Features and plugins *******

Although Flutter is a cross platform framework using single codebase but you have to write some platform specific code for some native features mainly for android using kotlin or java and objective C or swift for iOS.

you have to learn the usage of image picker plugin, camera access ,usage of Google map API, file upload and pick from device etc. ….

Learning Resources:

***************Testing **********************

To build user friendly, high quality & bug free app testing is a essential phase after development of app. If your app have many features so its very hard to test each feature manually. Here comes automated testing.

Automated tests help ensure that your app performs correctly before you publish it.

Automated testing falls into a few categories:

CI/CD:

  • Continuous Integration is the practice of testing each change done to your codebase automatically and as early as possible.
  • Continuous Deployment follows the testing that happens during Continuous Integration and pushes changes to a staging or production system.

Learning Resources:

***************Deployment *********************

After development and testing phase its time to deploy your app .So you need to have a knowledge of Google play store and Apple store for mobile apps and for web application deployment/hosting you should know about firebase hosting, digital ocean hosting and GitHub pages .

Learning Resources:

Roadmap :

🎇 Other Resources🎇

Below are the resources which I am following to lean dart and flutter

GitHub Repos:

Medium

YouTube Channels

This article is inspired from an awesome article Flutter Roadmap and resource guide in 2020 written by by Muhammad Hamza. Kindly follow him.

What’s Next?

Congratulations🙌🎉✌ Now you are flutter developer and you can create beautiful and seamless application for almost any platform but learning never ends explore new technologies .Do open source contribution create a nice portfolio, linked profile and GitHub profile and never stop learning because life never stop teaching……

That’s all from my side. If you like my article give Give Some Claps!! 👏

Happy coding 😊✌⚔

Flutter
Dart
Cross Platform
Flutter Engage
Flutter Roadmap

--

--

Harisbashir
Harisbashir

Written by Harisbashir

92 Followers
125 Following

Flutter Enthusiast

Responses (5)

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams