Dart Flutter Article

Flutter Developer Roadmap

The path of transformation from a yellow-mouthed beginner to a seasoned expert is long and thorny. I put together a subjective roadmap broken down into milestones with the main points of interest on it. Apply perseverance, and you will reach the top of the mountain!
Plague Fox 6 min read
Flutter Developer Roadmap

The path of transformation from a yellow-mouthed beginner to a seasoned expert is long and thorny. I put together a subjective roadmap broken down into milestones with the main points of interest on it.

Apply perseverance, and you will reach the top of the mountain!

  • Required to study at this stage, highly recommended to read this material
  • Optional to study at this stage, but considered mandatory at subsequent stages

πŸ₯š

Basic

Dart

This is where you start your first steps. Learn the basics of syntax, structures, conditions and loops. It's a good idea to try starting with console applications.

Try to solve easy puzzles on the leetcode.

  • Data types and variables
  • Functions
  • Classes
  • Control flow statement
  • Primitive structures, literals (e.g. num, int, double, String, List)
  • print
  • A tour of the Dart language
  • Language cheatsheet


Flutter

Launch your first application. First introduction to widgets. You should be able to create a simple application with static screens.

Ideally, you should learn how to navigate between the two screens in a simple way.

  • runApp, MaterialApp, Scaffold
  • Align, Container, Flex, Expanded, Spacer, ListView, Text
  • Easy navigation between two screens
  • Difference between Stateless and Stateful Widgets


Other

Should be able to install IDE, dart and flutter. Set up and prepare your own environment for work. Learn the basics of version control. It is highly desirable to create an account on GitHub and upload everything you do to public repositories.

At this stage, you are prohibited from using third-party packages!

  • IDE Android Studio or Visual Studio Code or IDEA
  • Version control basics (e.g. git, status, push, pull, commit)
  • Hot reload and hot restart
  • Console dart
  • GitHub or GitLab
  • Flutter CLI
  • DartPad

🐣

Beginner

Dart

Learn the basics of object-oriented programming. Get to know asynchronous programming and async-await. It is highly desirable to reinforce practical knowledge with OOP theory.

  • var, final, const
  • Basic OOP (extends, implements, static)
  • Popular structures & classes (e.g. Map, DateTime)
  • Asynchronous programming (e.g. futures, async, await)
  • dart:math
  • Encapsulation, Polymorphism, Inheritance, Abstraction
  • Getters and setters
  • Operators
  • Immutability, side effects


Flutter

Managing the widget's local state with the setState method. You should continue to get acquainted with widgets, as well as learn how to interact with the user through buttons and gestures. Display modal routes.

  • Stateful state and updating with setState method
  • Padding, SizedBox, ColoredBox, DecoratedBox
  • SafeArea, GridView, Images, Placeholder
  • Builder, FutureBuilder, StatefulBuilder
  • Gestures, Buttons, Dialogs, BottomSheet
  • ValueNotifier, ChangeNotifier, Listenable
  • Material Widgets
  • Assets


Other

You must learn to interact with git through your IDE's interface. Simple HTTP requests (get and post). Converting objects to and from a string. From now on, you should definitely improve debugging, bug tracking with stack trace and breakpoints.

If you decide to use third-party packages from the pub - be warned, you should think twice, the pub is full of downright bad and deceitful solutions!

  • Using the version control system through the IDE interface
  • HTTP request, main status codes & headers
  • JSON and serialization
  • Debugger and breakpoints
  • Third-party packages
  • pubspec.yaml
  • Widget Inspector
  • Differentiate between ephemeral state and app state
  • Code Style

πŸ₯

Intermediate

Dart

Advance in the study of object-oriented programming. Understanding null safety and the dart type system. Familiarize yourself with the core libraries of Dart. Should start getting used to reactive programming.

  • Intermediate OOP (Interface, Abstract, Implementation)
  • Understanding null safety
  • Asynchronous programming: Streams
  • Error handling
  • dart:async, dart:collection, dart:convert
  • The Dart type system, Type inference, Never, Object, Null, dynamic
  • Error vs Exception
  • Visibility
  • Dart Define
  • Use code-generation
  • Pure functions
  • Closures
  • Assert


Flutter

Trying to build an interface for different layouts. Learn how to rebuild the interface depending on various changes. Text input from the keyboard by the user. Building widgets in several layers. The simplest persistence of state on the client between sessions.

  • Creating responsive and adaptive apps
  • OrientationBuilder, LayoutBuilder, StreamBuilder, AnimatedBuilder, ValueListenableBuilder
  • EditableText, TextField, TextEditingController, InputDecorator
  • Stack & Positioned
  • ScaffoldMessenger, displaying non-blocking messages to the user
  • Local and Global keys
  • Lifting state up
  • Key-value storage (e.g. shared_preferences)
  • Core inherited widgets: MediaQuery, Theme
  • Imperative navigation (Route, push, pop)
  • Cupertino Widgets
  • Implicit animations
  • Skeleton & shimmers
  • Blur hash


Other

Advance in the study of theory and debugging. Improve your tools and workflows.

  • Core design patterns (Singleton, Observer, State)
  • Layout and Network Inspector
  • Linter rules, analyzer
  • Markdown
  • IDE extensions
  • Leaving issues for projects
  • RESTful
  • GraphQL
  • Flutter Version Manager

πŸ•ŠοΈ

Experienced

Dart

At this stage, you should know all the basic structures and language features. The language tour should be intuitive and relevant to practice.

  • Advanced structures (e.g. Set, SplayTreeMap, Linked List, UnmodifiableListView, Queue)
  • Generics
  • Extension methods
  • package:async, package:collection, package:convert
  • Asynchronous generators
  • runZonedGuarded
  • Compute
  • Ternary, Spread, Cascade operators
  • Callable
  • Literal and canonical objects
  • Meta and annotations
  • Business Logic Component


Flutter

At this stage, you should have no problem with most layouts. Responsive vs adaptive, creating responsive and adaptive apps. You know how to build a pixel-perfect interface.

  • Material, Hero, Slivers, Chip, IndexedStack, DropdownButton, RichText, Table
  • Understanding constraints
  • Creating responsive and adaptive layouts
  • Elements tree
  • Permissions
  • Image & file picker
  • SelectionArea
  • StatelessElement, StatefulElement, ProxyElement
  • Explicit animations
  • What is a BuildContext
  • Inherited Widget


Other

Expand your horizons. Regularly reflect on problems, bugs, code smells. Close knowledge gaps.

  • Semantic Versioning
  • Multitier architecture
  • Service locator
  • Contributing to projects and packages
  • JSON Web Tokens
  • JIRA, Confluence, Slack, etc
  • Declarative vs Imperative
  • Long polling
  • Unit & Widget tests
  • Avoid Premature Optimization
  • Creational / Structural / Behavioral Design Patterns
  • KISS, DRY, YAGNI
  • Creating your own library
  • Analytics
  • Crash Logging
  • WebSocket
  • Geolocation
  • build.yaml
  • Customizing static analysis, analysis_options.yaml
  • Human Interface Guideline
  • Material Design
  • Material You

πŸ¦‰

Advanced

Dart

Now you should not have any problems with either object-oriented or reactive programming.

  • Mixins, Diamond problem.
  • Pattern matching
  • All main classes and advanced structures from SDK (e.g. Expando, Stopwatch)
  • ReactiveX, debounce, throttle
  • dart:io
  • Mutex
  • Typedefs
  • Concurrency in Dart, dart:isolate
  • Interceptors and middlewares
  • Dealing with stack trace


Flutter

Get familiar with declarative navigation, learn how to build a navigation stack using a list of Pages. Optimize the widgets from unnecessary rebuilds. Starting to understand the inner workings of the flutter framework. You can build something that is not originally included in the framework.

  • Declarative navigator (Navigator 2.0 Pages API, without Router)
  • RepaintBoundary, Offstage, Visibility, Overlay, Flow, AbsorbPointer
  • WidgetBindingObserver, WidgetsBinding
  • Flutter Internals
  • Custom Painter
  • Flutter architectural overview
  • TextInputFormatter
  • Clipboard
  • Staggered animations
  • Deep Links and App Links
  • Inherited Model, Inherited Notifier
  • Method channels
  • Web View & Custom Tabs


Other

Expand your theoretical knowledge and improve the practices you already have. Learn how to write unit tests and analyze coverage.

  • Gang of Four Design Patterns
  • SOLID
  • Time complexity
  • Coverage, lcov
  • Dart VM and Dart Runtime, Ahead Of Time vs Just In Time
  • Widgets structure, Elements tree, Render tree, Scene
  • Bindings
  • BoxProtocol, Sliver Protocol
  • XML, DOM
  • Notifications bubbling up
  • Maintain a project
  • Bash
  • Instrumental tests
  • Native Icons & Splash screens
  • Performance & measurement profiling
  • Kotlin or Java basics
  • Swift or Object C basics
  • JavaScript basics
  • SQLite
  • Firebase

🦒

Senior

Dart

By the time you get to this stage, you should know pretty much everything a developer needs to know to solve day-to-day tasks. You should also be aware of isolates and event loops.

  • Tree structure
  • Stream transformers
  • Event loop
  • Microtasks
  • Conditional import
  • Synchronous generators
  • package: crypto
  • Write your own code-generation
  • Benchmark harness


Flutter

You should be able to create absolutely any regular CRUD application. When interacting with a native, there should be no big problems.

  • Push notifications
  • Framework Architecture and Inside Flutter
  • Platform-specific behaviors and adaptations
  • Localizations & internationalizing, intl
  • Router & Advanced navigation
  • ThemeExtension
  • Social authentication
  • Maps
  • Dealing with camera
  • Typography
  • Iconography
  • Focus system
  • Gesture system
  • package:flutter/animation.dart, package:flutter/foundation.dart
  • Action, Intent, Shortcut
  • Scrollable, ViewPort
  • Rive, Lottie
  • Creating icon packs through fonts
  • Haptic feedback
  • Tooltips


Other

Coverage of the application and packages with tests. Distribution of the application on the sites you need. e.g. App Store, Google Play, Xiaomi Market, AppGallery, Samsung Galaxy Store, Microsoft Store, Snap Store, Firebase Hosting.

  • App deployment and distribution
  • Migrations between application and database versions
  • Performance, CPU, Memory, Battery monitoring
  • App size tools
  • Transactions
  • Fake & mocks
  • OAuth 2
  • Test-driven development
  • Common Front-end Engine
  • The Open Systems Interconnection model (OSI)
  • Dart doc
  • Garbage collector
  • VS Code or AS/IDEA snippets
  • Cross-Origin Resource Sharing
  • Worker manager, Foreground service
  • Gradle & CocoaPods
  • Git hooks
  • Big Design Up Front
  • Advanced SQL, e.g. joins, unions, keys, constraints, vacuum
  • GRASP
  • SKIA
  • Flutter threads: UI, Platform, IO, Raster
  • Deferred components

πŸ¦…

Expert

Dart

Advance in the internal structure of the language and tooling depending on your tasks. Create something that the community lacks. Continue expanding Dart to new platforms.

  • dart:developer
  • Zones
  • TCP & UDP Sockets
  • JS Iterops: dart:html, dart:js, dart:js_util, package:js
  • Web & Service workers
  • Foreign Function Interface, dart:ffi
  • Server-side dart
  • gRPC


Flutter

If you are here, then there should be no impossible tasks. It's a good idea to start contributing to the SDK, solving serious problems that arise.

  • CompositedTransformFollower, Draggable, Intrinsic, KeyboardListener, ListWheelViewport, ImplicitlyAnimatedWidget, InteractiveViewer, KeepAlive
  • DisplayFeature
  • UiKitView, AndroidView
  • dart:ui, SingletonFlutterWindow, FlutterView, SceneBuilder, PluginUtilities, IsolateNameServer
  • Accessibility & Semantics
  • Fragment Shaders
  • package:flutter/physics.dart, package:flutter/rendering.dart, package:flutter/semantics.dart, package:flutter/scheduler.dart, package:flutter/services.dart
  • Progressive Web App
  • Licenses


Other

If you are here, you do not need my advice, just continue your education in related expertise.

  • CAP theorem, ACID
  • GitHub Actions or GitLab CI
  • Reduce shader animation jank on mobile
  • Golden tests
  • Graph structure & Dijkstra's algorithm
  • Machine Learning, Machine Vision, Augmented Reality
  • Other platforms
  • Docker, Docker registry
  • Grafana
  • SonarQube
  • Fastlane
  • Cloud providers
  • Artifactory, CI Cache
  • WebAssembly
  • Shelf & Functions Framework

* Whatever is optional at one stage becomes mandatory at the next.

Share
Comments
More from Plague Fox
Microbenchmarks are experiments
Dart Flutter Article

Microbenchmarks are experiments

Benchmarks are not just about numbersβ€”they are experiments that need interpretation. This post dissects a Dart vs JavaScript microbenchmark, illustrating why cool animations often mask the real value: insightful analysis. Numbers without context are just as meaningful as numerology
Vyacheslav Egorov 12 min read

Plague Fox

Engineer by day, fox by night. Talks about Flutter & Dart.

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to Plague Fox.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.