daniil/obsidian

Fork 0

Files

Cosmo 5919c0123e 📱 Add Flutter & Dart learning roadmap

2026-03-26 08:18:44 +00:00

27 KiB

Raw Blame History

title, date, tags, description

title

date

🚀 Flutter & Dart Roadmap

Цель: Самостоятельно создавать мобильные приложения (iOS + Android) Опыт: C#, Go, JavaScript — базовые концепции ООП, async, типизация уже знакомы Общая оценка: ~120–160 часов / 3–4 месяца при 8–10 ч/неделю

📋 Оглавление

Этап 1 — Dart за 1 неделю

⏱ ~8–12 часов | С опытом в C# и JS пойдёт быстро

Dart — типизированный язык, похожий на гибрид C# и TypeScript. Основные отличия: null safety, mixins, extensions, Futures/Streams (аналог Task/Promise).

Что изучить

Синтаксис: переменные, типы, final/const, late
Null safety (?, !, ??, ?.)
Классы, наследование, mixins, abstract classes
Extensions (привет, C# extension methods)
Enums (enhanced enums с методами — Dart 3)
Generics (знакомо из C#)
Collections: List, Map, Set + spread operator
async/await, Future, Stream
Pattern matching и sealed classes (Dart 3) — аналог switch expressions в C#
Records (аналог tuples/анонимных типов)
Error handling: try/catch/on

Ресурсы

📖 Dart Language Tour — главный ресурс, пробежать за 3–4 часа
📖 Dart Codelabs — интерактивные упражнения
🎮 DartPad — онлайн-песочница для экспериментов
📹 Dart in 100 Seconds — Fireship — быстрый обзор
📖 Effective Dart — стайл-гайд и идиомы

🛠 Мини-проект

CLI-утилита на Dart — парсер JSON/CSV, конвертер валют через API, или простой todo-list в терминале. Цель: потрогать язык руками.

dart create my_cli_app

Этап 2 — Flutter основы

⏱ ~16–20 часов / 2 недели

Что изучить

Установка Flutter SDK + настройка IDE (VS Code / Android Studio)
Эмуляторы: Android (AVD) + iOS Simulator (если есть Mac)
Структура проекта Flutter: lib/, pubspec.yaml, assets/
Widget tree — всё является виджетом
StatelessWidget vs StatefulWidget + setState()
BuildContext и жизненный цикл виджетов
Основные виджеты: Text, Container, Column, Row, Stack, ListView, GridView
Scaffold, AppBar, BottomNavigationBar, Drawer
Layout: Expanded, Flexible, SizedBox, Padding, Align
Input: TextField, Form, FormField, валидация
Кнопки: ElevatedButton, TextButton, IconButton, FloatingActionButton
Image, Icon, работа с assets
Material Design 3 и ThemeData
Hot Reload — главная суперсила Flutter

Ресурсы

📖 Flutter Get Started — офиц. туториал установки
📖 Flutter Widget Catalog — каталог виджетов с примерами
📖 Flutter Codelabs — пошаговые лабы от Google
📹 Flutter Crash Course for Beginners — Traversy Media — 1 час, быстрый старт
📹 Flutter Full Course — Mitch Koko — от начала до продвинутого
📹 Flutter Widget of the Week — Google — короткие видео по виджетам
📖 Flutter Layout Cheat Sheet

🛠 Пет-проект: Визитка / Портфолио

Простое приложение-визитка с несколькими экранами:

Главный экран с аватаром, именем, описанием
Страница с контактами (ссылки, email)
Тёмная/светлая тема

Этап 3 — Навигация и архитектура

⏱ ~12–15 часов / 1.5 недели

Что изучить

Navigator 1.0: push, pop, named routes
Navigator 2.0 и декларативная навигация
go_router — стандарт навигации в 2025+ (рекомендован Google)
Deep links и параметры в маршрутах
Вложенная навигация (Shell routes, tab navigation)
Передача данных между экранами
Структура проекта:
- Feature-first vs Layer-first
- Рекомендуемая: lib/features/<name>/{data, domain, presentation}/
Dependency Injection: get_it + injectable
Repository pattern (знакомо из C#)

Ресурсы

📖 go_router docs — офиц. документация
📖 Flutter Navigation Guide — гайд от Google
📹 go_router Tutorial — Andrea Bizzotto — подробный разбор
📖 Flutter App Architecture — Andrea Bizzotto — feature-first структура
📹 Flutter Project Structure — Reso Coder

🛠 Пет-проект: Мульти-экранное приложение

Приложение-справочник (рецепты / заметки / фильмы):

Список элементов → детальный экран
go_router с параметрами
Bottom navigation с 3+ табами
Поиск и фильтрация

Этап 4 — State Management

⏱ ~16–20 часов / 2 недели | Самая важная тема

Подходы (от простого к сложному)

setState — для локального состояния
InheritedWidget — как работает "магия" под капотом
Provider — простой и понятный (хорош для старта)
Riverpod ⭐ — эволюция Provider, рекомендация 2025+
- Compile-safe, testable, не зависит от BuildContext
- ref.watch, ref.read, ref.listen
- Providers: Provider, StateProvider, NotifierProvider, AsyncNotifierProvider, FutureProvider, StreamProvider
BLoC — для больших enterprise-приложений
- Events → BLoC → States
- Знакомый паттерн если работал с Redux/MediatR
Когда что использовать:
- Маленькое приложение → Riverpod
- Большое/командное → BLoC
- Прототип → setState + Provider

Ресурсы

📖 Flutter State Management Guide — офиц. обзор
📖 Riverpod Documentation — начни с этого
📹 Riverpod 2.0 — Complete Guide — Andrea Bizzotto — лучший гайд
📹 Flutter Riverpod Tutorial — Vandad Nahavandipoor
📖 BLoC Library — офиц. сайт с туториалами
📹 BLoC Tutorial — Reso Coder
📖 Provider Package — документация

🛠 Пет-проект: Todo App (с архитектурой)

CRUD задач с Riverpod
Фильтры: все / активные / завершённые
Persistence (SharedPreferences или Hive)
Clean Architecture: Data → Domain → Presentation
Unit-тесты для бизнес-логики

Этап 5 — Работа с данными

⏱ ~16–20 часов / 2 недели

HTTP и API

Пакет http — базовые запросы
Dio — продвинутый HTTP-клиент (interceptors, retry, cancel)
Сериализация JSON: json_serializable + build_runner
Freezed — генерация data-классов и union types
Обработка ошибок сети: Result pattern, Either
Retrofit (знакомо из .NET!) — генерация API-клиента

Локальное хранение

SharedPreferences — key-value (как LocalStorage)
Hive — быстрая NoSQL база
Drift (бывший Moor) — type-safe SQLite ORM
sqflite — SQLite напрямую
flutter_secure_storage — для токенов/паролей

Firebase (бесплатный tier)

Firebase Auth — аутентификация
Cloud Firestore — NoSQL база
Firebase Storage — файлы
Firebase Messaging (FCM) — push-нотификации
FlutterFire — офиц. плагины

Ресурсы

📖 Flutter Networking Guide
📖 Dio Package — документация
📖 Freezed Package — генерация моделей
📖 FlutterFire Docs — Firebase для Flutter
📹 Flutter REST API Tutorial — Vandad
📹 Firebase Flutter Course — freeCodeCamp — 5+ часов
📖 Drift Documentation

🛠 Пет-проект: Погодное приложение

Запрос к Open-Meteo или OpenWeatherMap API
Модели через freezed + json_serializable
Поиск города, текущая погода + прогноз на 5 дней
Кэширование последнего запроса в Hive
Pull-to-refresh
Красивый UI с анимациями погоды

Этап 6 — UI мастерство

⏱ ~12–15 часов / 1.5 недели

Что изучить

Animations: implicit (AnimatedContainer, AnimatedOpacity) и explicit (AnimationController, Tween)
Hero animations (переходы между экранами)
Custom Paint — рисование кастомных элементов
Sliver виджеты: CustomScrollView, SliverAppBar, SliverList, SliverGrid
Responsive design: LayoutBuilder, MediaQuery, OrientationBuilder
Adaptive UI: Material (Android) + Cupertino (iOS)
Custom widgets: composition vs inheritance
Themes и дизайн-система (typography, color schemes, spacing)
Пакеты для UI:
- flutter_animate — декларативные анимации
- shimmer — loading placeholders
- cached_network_image — кэширование картинок
- flutter_svg — SVG поддержка

Ресурсы

📖 Flutter Animations Guide
📹 Flutter Animations Course — Flutter Official
📖 Flutter Adaptive Design
📹 Sliver Widgets — Flutter
📖 Material 3 in Flutter

🛠 Пет-проект: Клон UI известного приложения

Выбери и воспроизведи UI (без бэкенда):

Spotify / Netflix / Twitter — карточки, списки, анимации
Кастомные анимации переходов
Адаптивный дизайн под разные размеры экрана
Тёмная и светлая темы

Этап 7 — Нативные возможности

⏱ ~8–10 часов / 1 неделя

Что изучить

Platform channels — вызов нативного кода (Swift/Kotlin)
Камера: camera, image_picker
Геолокация: geolocator, geocoding
Карты: google_maps_flutter или flutter_map (OpenStreetMap)
Push-уведомления: firebase_messaging + flutter_local_notifications
Permissions: permission_handler
Biometrics: local_auth
Deep links и Universal links
Sharing: share_plus
URL launcher: url_launcher

Ресурсы

📖 Flutter Platform Integration
📖 pub.dev — поиск пакетов, проверяй likes и pub points
📹 Google Maps in Flutter — Johannes Milke
📖 Flutter Camera Plugin

🛠 Мини-проект: Приложение с картой

Показать текущее местоположение на карте
Добавление маркеров / POI
Поиск мест
Разрешения runtime

Этап 8 — Тестирование и CI/CD

⏱ ~8–10 часов / 1 неделя

Что изучить

Unit tests — тестирование бизнес-логики и репозиториев
Widget tests — тестирование UI-компонентов
Integration tests — E2E тестирование на устройстве/эмуляторе
Mocking: mocktail или mockito
Golden tests — скриншот-тесты UI
Code coverage: flutter test --coverage
CI/CD:
- GitHub Actions / Codemagic / Fastlane
- Автоматическая сборка APK/IPA
- Автоматическая публикация в stores

Ресурсы

📖 Flutter Testing Guide — офиц. документация
📹 Flutter Testing Tutorial — Reso Coder
📖 Codemagic CI/CD — бесплатный tier для Flutter
📖 Mocktail Package

🛠 Практика

Написать тесты для Todo App из Этапа 4
Unit tests для API-слоя (mock HTTP)
Widget tests для ключевых экранов
Настроить CI pipeline (GitHub Actions)

Этап 9 — Публикация

⏱ ~6–8 часов / 1 неделя

Google Play Store

Создать аккаунт разработчика ($25 одноразово)
Подписать APK/AAB (keystore)
Скриншоты, описание, иконка
Privacy Policy (можно сгенерировать)
Загрузить в Google Play Console
Internal testing → Closed testing → Production

Apple App Store

Apple Developer Program ($99/год)
Certificates, Identifiers, Profiles
Archive и загрузка через Xcode / Transporter
App Store Connect: метаданные, скриншоты
TestFlight для бета-тестирования
Ревью Apple (строгие правила)

Ресурсы

Этап 10 — Реальный проект

⏱ ~40–60 часов / 4–6 недель | Всё вместе

План создания реального приложения

Пример: Personal Finance Tracker (или любое приложение по интересу)

Фаза 1: Планирование (2–3 дня)

Определить MVP: 3–5 ключевых фич
Wireframes (можно в Figma — бесплатно)
Выбрать стек: Riverpod + go_router + Dio + Drift/Hive
Спроектировать data models

Фаза 2: Скелет (1 неделя)

Настроить проект с правильной структурой (feature-first)
Настроить DI (get_it + injectable)
Навигация (go_router)
Базовый UI каждого экрана (placeholder)
Тема и дизайн-система

Фаза 3: Core Features (2–3 недели)

Реализовать основную бизнес-логику
Подключить API / базу данных
State management для каждой фичи
Обработка ошибок и loading states
Offline-first: локальный кэш + синхронизация

Фаза 4: Polish (1 неделя)

Анимации и micro-interactions
Responsive дизайн
Обработка edge-cases
Performance: profiling с DevTools
Accessibility (семантика для screen readers)

Фаза 5: Launch (3–5 дней)

Написать unit + widget тесты (coverage >60%)
CI/CD pipeline
Подготовить store listing
Бета-тест через TestFlight / Internal Testing
Релиз 🚀

Идеи для реальных проектов

Проект	Чему научит
💰 Финансовый трекер	CRUD, графики, локальная БД, экспорт
📝 Заметки/Markdown	Редактор, файловая система, синхронизация
🏋️ Трекер тренировок	Таймеры, анимации, статистика
🍕 Доставка еды (клон)	Карты, API, корзина, навигация
📰 Новостной агрегатор	RSS, API, кэширование, push
🎵 Музыкальный плеер	Аудио, фоновое воспроизведение, UI

Ресурсы — Каталог

📖 Документация (читать первым делом)

Ресурс	Описание
dart.dev	Официальная документация Dart
docs.flutter.dev	Официальная документация Flutter
pub.dev	Репозиторий пакетов (как npm/nuget)
Flutter API Reference	Полный API reference
Material 3 Guidelines	Гайдлайны Material Design

📹 YouTube каналы

Канал	Описание
Flutter Official	Widget of the Week, Decoding Flutter
Fireship	Быстрые обзоры, "in 100 seconds"
Vandad Nahavandipoor	Google Developer Expert, подробные курсы
Reso Coder	Clean Architecture, TDD, BLoC
Mitch Koko	Практичные проекты от 0 до деплоя
Code With Andrea	Riverpod, архитектура, best practices
The Flutter Way	Красивые UI клоны
dbestech	Полные проекты с бэкендом
Johannes Milke	Короткие туториалы по конкретным фичам
freeCodeCamp	Длинные полные курсы (37+ часов)

📚 Бесплатные курсы и туториалы

Ресурс	Описание
Flutter Codelabs	Пошаговые лабы от Google
Dart Codelabs	Интерактивные упражнения по Dart
Flutter Apprentice (raywenderlich)	Бесплатные статьи и туториалы
Flutter Gems	Каталог полезных пакетов по категориям
Awesome Flutter	Кураторский список ресурсов на GitHub
Flutter Examples	Сотни примеров кода
It's All Widgets	Галерея Flutter-приложений с исходниками

🧰 Инструменты

Инструмент	Описание
DartPad	Онлайн-песочница
Flutter DevTools	Профилирование, отладка, инспектор
Very Good CLI	Генератор проектов с best practices
Mason	Шаблоны кода (как Yeoman)
Widgetbook	Storybook для Flutter виджетов

📦 Must-have пакеты

Пакет	Категория	Описание
`riverpod`	State Management	Реактивное управление состоянием
`go_router`	Навигация	Декларативный роутинг
`dio`	Networking	HTTP-клиент
`freezed`	Code Generation	Immutable модели
`json_serializable`	Serialization	JSON ↔ Dart
`hive`	Storage	NoSQL БД
`drift`	Storage	SQLite ORM
`get_it`	DI	Service locator
`injectable`	DI	Кодогенерация для get_it
`flutter_hooks`	UI	React-style hooks
`cached_network_image`	UI	Кэширование картинок
`flutter_svg`	UI	SVG поддержка
`intl`	i18n	Локализация
`mocktail`	Testing	Мокирование

💡 Советы от опытного разработчика к опытному

Не читай — делай. С опытом в C#/Go/JS ты быстро схватишь синтаксис. Открывай DartPad, пиши код.
Flutter ≠ React Native. Здесь нет DOM. Всё — виджеты. Widget tree пересоздаётся каждый кадр (Flutter рендерит как игровой движок).
const everywhere. Flutter использует const конструкторы для оптимизации rebuilds. Привыкай.
Riverpod > Provider для новых проектов. Provider legacy, Riverpod — его автор переосмыслил подход.
Не бойся кодогенерации. build_runner — это норма. freezed + json_serializable сэкономят тонны boilerplate.
Декомпозиция виджетов. Если build() больше 50 строк — разбивай. Extract widget > extract method.
DevTools — твой друг. Widget Inspector, Performance, Network — используй с первого дня.
Dart — это не JavaScript. Null safety строгий. Sound typing. Не борись с системой типов — используй её.

📊 Timeline Summary

Этап	Тема	Часы	Недели
1	Dart	8–12	1
2	Flutter основы	16–20	2
3	Навигация и архитектура	12–15	1.5
4	State Management	16–20	2
5	Работа с данными	16–20	2
6	UI мастерство	12–15	1.5
7	Нативные возможности	8–10	1
8	Тестирование	8–10	1
9	Публикация	6–8	1
10	Реальный проект	40–60	4–6
Итого		~140–190	~17–19

При 8–10 часах в неделю = ~4–5 месяцев до первого приложения в store 🎯

Создано: 2026-03-26 | Автор: Cosmo ✨ Последнее обновление: 2026-03-26

27 KiB Raw Blame History Unescape Escape

🚀 Flutter & Dart Roadmap

📋 Оглавление

Этап 1 — Dart за 1 неделю

Что изучить

Ресурсы

🛠 Мини-проект

Этап 2 — Flutter основы

Что изучить

Ресурсы

🛠 Пет-проект: Визитка / Портфолио

Этап 3 — Навигация и архитектура

Что изучить

Ресурсы

🛠 Пет-проект: Мульти-экранное приложение

Этап 4 — State Management

Подходы (от простого к сложному)

Ресурсы

🛠 Пет-проект: Todo App (с архитектурой)

Этап 5 — Работа с данными

HTTP и API

Локальное хранение

Firebase (бесплатный tier)

Ресурсы

🛠 Пет-проект: Погодное приложение

Этап 6 — UI мастерство

Что изучить

Ресурсы

🛠 Пет-проект: Клон UI известного приложения

Этап 7 — Нативные возможности

Что изучить

Ресурсы

🛠 Мини-проект: Приложение с картой

Этап 8 — Тестирование и CI/CD

Что изучить

Ресурсы

🛠 Практика

Этап 9 — Публикация

Google Play Store

Apple App Store

Ресурсы

Этап 10 — Реальный проект

План создания реального приложения

Фаза 1: Планирование (2–3 дня)

Фаза 2: Скелет (1 неделя)

Фаза 3: Core Features (2–3 недели)

Фаза 4: Polish (1 неделя)

Фаза 5: Launch (3–5 дней)

Идеи для реальных проектов

Ресурсы — Каталог

📖 Документация (читать первым делом)

📹 YouTube каналы

📚 Бесплатные курсы и туториалы

🧰 Инструменты

📦 Must-have пакеты

💡 Советы от опытного разработчика к опытному

📊 Timeline Summary

27 KiB

Raw Blame History