This repository contains a comprehensive learning roadmap for Flutter, covering everything from environment setup to advanced animations and local storage. Each topic includes a breakdown of what it is and where to use it, designed to guide beginners and intermediate learners through the development process.
- Phase 1: Environment Setup & Architecture
- Phase 2: Dart & Widget Basics
- Phase 3: Layouts & Lists
- Phase 4: Styling & Inputs
- Phase 5: Advanced Layouts & State
- Phase 6: Navigation & Projects
- Phase 7: Animations & UI Polish
- Phase 8: Data Persistence
- What is it? Google’s UI toolkit for building natively compiled apps for mobile, web, and desktop from a single codebase.
- Where to use it? When you need fast, cross-platform apps with beautiful UI and native performance.
- What is it? A three-layer architecture: Framework (Dart), Engine (C++ Skia), and Embedder (Platform-specific).
- Where to use it? Understanding internal rendering and platform channels.
Detailed guides for setting up your machine.
| OS | Tool | Description |
|---|---|---|
| Windows | SDK Setup | Setting up Flutter SDK & PATH variables. |
| Windows | VS Code | Installing Flutter/Dart plugins for a lightweight editor. |
| macOS | SDK Setup | Configuring SDK and PATH for Mac. |
| macOS | Android Studio | Required for Android SDK tools and Emulators. |
| macOS | VS Code | Setup for coding and debugging on Mac. |
| macOS | Xcode | Required for iOS development and simulators. |
- CLI Command:
flutter create project_name - VS Code: Command Palette → "Flutter: New Project" (Faster, UI-based).
- What is it? Overview of
/lib(code),/android,/ios,/web, andpubspec.yaml(dependencies). - Where to use it? Essential for understanding project structure.
- Use: Setting up an emulator via Android Studio for testing without a physical phone.
| Platform | Command | Usage |
|---|---|---|
| Emulator | flutter run -d emulator-id |
Android testing |
| Real Device | (USB Debugging) | Real hardware performance |
| iOS Simulator | Xcode → Run | iOS testing |
| Web | flutter run -d chrome |
Browser apps |
| Desktop | flutter run -d macos/windows |
Desktop apps |
- Covers: Variables, Types, Functions, Classes, Lists, Maps, Loops.
- Usage: The foundational logic used everywhere in Flutter.
- What is it? A versatile box model widget for styling, sizing, margin, and padding.
- Where to use it? Designing backgrounds, shapes, and wrapping content.
- Use: Displaying text with specific fonts, colors, and decorations.
- Use: Centers a child widget within the available space.
- Widgets:
ElevatedButton,TextButton,IconButton,OutlinedButton. - Use: Handling user clicks and interactions.
- Methods:
Image.asset(local) orImage.network(remote). - Use: Displaying logos, photos, and graphics.
- Use: Arranging widgets vertically (Column) or horizontally (Row).
- Use: Adds a ripple effect on tap; makes any widget clickable.
- What is it? Makes UI scrollable.
- Where to use it? When content exceeds screen height (e.g., chats, feeds, contact lists).
- Use: Adding rounded corners, shadows, and gradients to Containers.
- Use: Fills available flex space; crucial for responsive Row/Column layouts.
- Use: Adding spacing around or outside widgets.
- Use: A pre-designed row with a title, subtitle, leading icon, and trailing icon.
- Use: Circular images or initials, standard for profile screens.
- Custom Font: Loading fonts via
pubspec.yaml. - Themes: Managing global styles (Light/Dark mode) for the app.
- Use: A Material Design card with elevation and rounded corners.
- Use: capturing user text input.
- Logic: Using
DateTimeandintlpackage. - UI: Using
DatePickerdialogs for calendar selection.
- Use: Displaying items in a 2D grid array (like a photo gallery).
- Use: Sending data "up" from a child widget to a parent widget.
- Concept: Splitting complex code into smaller, reusable widget components.
- Stack: Overlays widgets on top of each other.
- Positioned: Controls exactly where a child sits inside a Stack.
- Use: Wraps children to the next line when space runs out (like tags/chips).
- Use: Adding fixed spacing or defining specific dimensions.
- Use: Displaying a single paragraph with multiple styles (e.g., "Terms & Conditions").
- Widgets:
Icon(native) andFontAwesome(third-party library).
- Stateless: Static UI that doesn't change.
- Stateful: Dynamic UI that updates via
setState().
- Technique: Using
.map()to generate UI widgets dynamically from data lists.
- Use: Applying minimum or maximum size constraints to widgets.
A practice project combining:
- User Input & Calculations
- UI Styling
- Conditional Logic
- Methods:
Navigator.push(go to new screen) &Navigator.pop(go back).
- Use: An intro screen shown while the app initializes.
- Technique: Sending arguments through Widget Constructors during navigation.
- Use: Selecting a value range between two numbers.
- Use: Creating smooth color transitions using
BoxDecoration.
- Use: Clipping a rectangular widget (like an image) with rounded corners.
- AnimatedContainer: Easy animation for size/color changes.
- AnimatedOpacity: Fade in/out effects.
- CrossFade: Smooth switching between two widgets.
- Hero: Shared element transitions between screens.
- Use: A 3D cylindrical scroll view (iOS style picker).
- Use: Explicit, controlled animations using
AnimationController.
- Use: Custom animations like a growing circle/pulse.
- What is it? A plugin for storing simple key-value data locally on the device.
- Where to use it? Persisting small amounts of data even after the app closes.
- ✅ Saving User Name/Profile
- ✅ Storing Login Tokens (Session persistence)
- ✅ Saving Theme Mode (Light/Dark)
- ✅ Saving App Language
- ✅ Checking "First Run" (to show onboarding)
Feel free to fork this repository and submit pull requests to add more topics or improve examples!
Happy Coding! 🚀