Skip to content

CIS-Team/Flutter-Roadmap-2024

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 

Repository files navigation

Dart Flutter

Roadmap to becoming a Flutter Developer in 2024.



🗺️ Flutter Roadmap — 2024


There is no specific roadmap to learn Flutter So any sources included in this roadmap are personal recommendations. You can choose one or more sources if you wish, or you can search for other sources.


Content

Introduction

Install flutter and dart

Dart

Flutter

Others

Resources




Introduction


🚀 let's start our journey to learn flutter, I will divide the roadmap into different levels

  • If you know any one programming language like C#, or Java then you can grasp Dart within two to three days.
  • else you will need to study dart well and solve some problems then you will Learn.

🎯 What is Dart?

  • Dart is an object-oriented programming language with C-style syntax.
  • It is open-source developed by Google and released in 2011.
  • The purpose of Dart programming is to create frontend user interfaces for:
    • Mobile (Android & IOS) apps.
    • Web apps.
    • Desktop (Windows & MacOS & Linux) apps.

📌 What is flutter?

  • Flutter is a UI toolkit for creating fast, beautiful, natively compiled mobile applications with one programming language and a single codebase, This means you can use one programming language and one codebase to create two different apps (for iOS and Android).
  • It is an open-source development framework developed by Google and released in May 2017. Generally, Flutter is not a language; it is an SDK(Software Development Kit).
  • Flutter apps use Dart programming language for creating an app.
  • Flutter is mainly optimized for 2D mobile apps that can run on both Android and iOS platforms. We can also use it to build full-featured apps, including camera, storage, geolocation, network, third-party SDKs, and more.



Install flutter and dart

SDK

IDE

Work with anyone of them




Dart

1. Basics

  • Data types (int, Strings, List, Map, ...etc)
  • Control Flow Statement (conditions, loops)
  • Functions (parameters & their types)
  • Operators.
  • Comments.

2. Null safety

  • Principle.
  • Types.
  • Operators.

Arabic


3. Asynchronous programming

  • Future Vs. Stream
  • Keywords (async, await)


4. OOP

  • Object-Oriented Concepts (Encapsulation, Polymorphism, Abstraction, Inheritance).
  • Classes and objects
  • constructors
  • Getters & Setters
  • Keywords (static, super, this)
  • Class Modifiers

Note:

If you are a beginner, and you don’t know any OOP concepts watch Mosh video about OOP concepts in general : OOP in 7 minutes..


English

Arabic

Official docs

Note:

✅ After finishing dart and opp you can be able to start learning flutter. but it's important to learn


5. SOLID Principles

The SOLID Principles are five principles of Object-Oriented class design. They are a set of rules and best practices followed while designing a class structure.

  • Single Responsibility Principle. (SRP)
  • Open-closed principle. (OCP)
  • Liskov substitution principle. (LSP)
  • Interface segregation principle. (ISP)
  • Dependency inversion principle (DIP)

Arabic

Articles


6. Clean Code

A programmer can write code, a better programmer can write clean code

Why should you learn..?

  • To make your code readable
  • To make your code flexible
  • To make your code testable
  • To make your code maintainable

What will you Learn..?

  • How to tell the difference between good and bad code.
  • How to write good code and how to transform bad code into good code.
  • How to create good names, good functions, good objects, and good classes.
  • How to format code for maximum readability.
  • How to implement complete error handling without obscuring code logic.
  • How to unit test and practice test-driven development (TDD).

Arabic

Books




Flutter


1. Widgets & Ui

  • 1. Basics widgets:
    • Basic widgets like MaterialApp, Scaffold, AppBar, etc.
  • 2. Styling widgets:
    • Basic widgets to style a static UI like Text, Container, Row, Column, Asset Image, Network Image, Stack, etc.
  • 3. Use of Assets in pubspec.yaml:
    • Know how to use assets(image, video, SVG, images ) and how to add using pubspec.yaml file.
  • 4. Types Of Widgets (StatelessWidget vs StatefulWidget):
    • Know the difference between stateless and stateful widgets.
  • 5. Navigation & Route:
    • Know how to navigate to the next screen and back to the previous and how to create routes.

English

Arabic

Short Videos

Official docs


Note:

After finishing this level you can be able to create beautiful static user interfaces.

2. Database

  • Types of database
    • local || remote
    • SQL || NoSQL

Articles


1. SQL - Relational databases

2. NoSQL - nonrelational databases


3. API

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

  • how to call REST API’s
  • make a Model for the request and response
  • Parsing JSON data into dart objects
  • HTTP requests.(post, delete, get, put)

There are some packages that help you deal with APIs

  • Dio
  • HTTP
  • Retrofit

English

Arabic

Official docs

Article


4. State Management

The management and manipulation of data within an app to ensure that the user interface (UI) accurately reflects the current state of the application


1. Bloc & Cubit

2. Riverpod

3. GetX


5. Architecture pattern

Note: you can work with only one

Some of the prominent architectural patterns

  • Model-View-Presenter (MVP)
  • Model-View-Controller (MVC)
  • Model-View-Intent (MVI)
  • Model-View-ViewModel (MVVM)
  • Clean Architecture

Arabic

Article

6. Animation

Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience.

Arabic

Docs


7. Map

English

Arabic


8. Publish App

How To Publish Your App On Google Play Store and App Store?


English

Arabic




Others

1. Data Structures & Algorithms

Arabic

Books


2. Design Patterns

English

Arabic




Recources

Full Courses

Books

Free APIs You Can Use for Testing

Icons

Tools


What is next: 🧐

You will need to search and keep learning more and more..


Contact Me 📱