Flutter Developer Roadmap 2023

What is Flutter?

Flutter is an SDK(Software Development Kit) developed by google that allows developer to build native cross-platform apps with just one programming langauage-Dart. From single codebase, it creates native app for ios, Android and web, that can be published to the stores later. view more

Table of Contents:

• Flutter Setup
• Sprint 1
• Sprint 2
• Sprint 3
• Sprint 4
• Sprint 5
• Sprint 6
• Key Topic

Flutter Setup

• Setup

Sprint 1:

Dart basics:

• Introduction to Dart
• Dart programming langauage

Practical 1.1

• Do all Practicles using Dartpad.

Practical 1.2

• Upload practical on gitlab or github.
  • You can create repository of practicals and upload practicals 1.1 on Gitlab.
  • You can create Gists from dartpad and upload practicals on github.

Flutter basics:

• introduction to Flutter
• Why flutter?
• Introduction to Declarative UI
• What is widget in flutter?
• Introduction to Widgets
• Layouts in flutter
• Building Layout
• View widget list

Practical 1.3

• create an app with this layout

Code style:

• Best practices and tips
• Effective Dart
• Flutter code formatting

Flutter Tools:

• Hot Reload
• Punspec file

Sprint 2:

Version control:

• Introduction to version control: What Is Version Control?
• How to use git
  • Version control with git
  • Git: The Beginner's Guide to Understanding Core Version Control Concepts
  • When to commit in version control

Practical 2.1

• create repository of practical 1.3

Supporting different devices

• Adaptive and Resposive apps

Packages & Plugins

• packages & Plugins in fluttter
• packages & plugins site

DelightFul User experience

• Intorduction to Material components
• How to Build Beautiful UIs with Flutter Widgets
  • Udemy Course 1 - Section 6

Practical 2.2

• Create given Responsive UI
  • You can use alternative images.

Navigation:

• Navigation in Flutter
• Navigation and Routing
• Introduction to Navigator 2.0
• Introduction to Go_Router

Practical 2.3

• Implement an app with a bottom bar that has 4 screens (home, setting, like, search).
  • Implement a route between screens.
  • Implement go_router for bottombar navigation or you can use indexedStack for bottombar navigation.

Sprint 3:

Json serialization:

• Json and serialization
  • Parsing Json in flutter
• Auto generate json serializable in flutter

Networking:

• Networking in flutter
• Retrofit
• Dio- powerful HTTP client of dart
• Chopper- HTTP client generator for Dart and Flutter using source_gen and inspired by Retrofit.

Practical 3.1

• Implement Food Application with following functionality

• Fetch food feeds from API

• User should be navigate to its detail page by clicking reciepe

• Add log click delete functionality on food click to delete food from local storage

• Implement pull to refresh functionality to refresh cached feeds in local storage.

  API - GET request - 'https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/food/ingredient

  headers: { 'X-RapidAPI-Key': '6991e41207mshaaf1e8dd61f03fdp17fbe9jsn3c96953146c7', 'X-RapidAPI-Host': 'spoonacular-recipe-food-nutrition-v1.p.rapidapi.com' }

  • Note:
    • Use http package for networking

Reference:

• Networking like a pro
• Flutter networking tutorial

Work in background

• Concurrency in Dart
• Asynchronous programming

Reference:

• Asynchronous in Dart
• WorkManager
• Thread and Isolate

Sprint 4:

App Architecture:

• Archtectural overview
• Flutter MVVM Architecture
• MVVM design pattern

State management:

• Interoduction to state management
• Conceptual types of state
• State management approaches
• Udemy Course 1: Section 16

Local storage:

• Store key-vaue pair
• Read and wirte files
• Sqlite database

Practical 4.1

• Create simple TODO app with CRUD operation with SQLite.
• Home screen should have list of task with add new task fab button.
• On the click of task it should be redirect to task status screen where it can be edit.
• On the cell swipe it shows delete option and on it's click that particular task should delete.
• Add option to active and inactive task.
  • Note
    • Use flutter bloc for state management
    • Use provider for state management

Reference:

• Database concepts in flutter
• Providerstate management in flutter
• BLoC state management in flutter

Sprint 5

Testing:

• Intruduction to testing flutter apps
• Unit testing
• Widget testing
• Integration testing
• Mock dependencies using Mockito
• Introduction to TDD

Package

• Test

Practical 5.1:

• Add Unit,widget and integration test in practical 4.1

Depenedecy Injection

• Introduction to dependency injection
• DI in flutter
• Package:
  • injectable
  • getIt

Reactive programming

• RxDart
• Introduction to RxDart

Dev Tools:

• Flutter Inspector
• Memory allocation
• Flutter performance best practices

Sprint 6:

Final Practocal:

1 Implement a shopping application

Screen one - Home screen

• On main screen show list of products - API

• Open product detail on it’s click - API

• Add option to search products by categories - API

• Add option to check out all product in cart

Screen two - Detail screen

• Show full detail with images and description
• Add option to add/remove the product from the cart ( Add/delete an item in local database)

Screen three - Show products from cart

• Fetch and show all cart item from local database
• Add option checkout and show total price of products
• Add option to remove from cart

Screen four - Login

• User must have to login before adding any item into cart - API
• Add option to logout

Use navigation 2.0 for routing. Add unit test for all viewmodel and helper classes

2 Make a calculator application. Save calculation history in the database. Users can view history and clear history.

Key Topic:

Advance UI:

• slivers
• Animation in flutter

Localization:

• add multi language support in flutter using localization

State Management:

• Provider
• BLoc
• Getx
  • You can do state management, dependency injection and navigation using getx
• riverpod
• Redux
• rxDart
  • how to use rxdart with bloc pattern

Navigation:

• Using Navigator key
• Navigator 2.0
  • navigation 2.0 with deep linking
  • navigation 2.0 with nested routes(bottombar routes)
• Go_Router

Networking:

• Http
• Dio

Databases:

• Local Database:

  • Shared Preferences
  • Sqflite
  • Hive

• Online Database:

  • Firebase
  • google sheet using app script
  • or any online database using API networking.

Dependency Injection:

• GetIt
• Injectable

Others:

• how to create web app using flutter
• how to develop an package or plugins in flutter
• CI/CD in gitlab