daniil/obsidian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
obsidian/Dev/Flutter/Roadmap.md

27 KiB
Raw Permalink Blame History

title, date, tags, description
title date tags description
Flutter & Dart Roadmap 2026-03-26
flutter
dart
mobile
roadmap
learning
Подробный план изучения Flutter и Dart для опытного разработчика (C#, Go, JS)

🚀 Flutter & Dart Roadmap

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

📋 Оглавление

  1. #Этап 1 — Dart за 1 неделю
  2. #Этап 2 — Flutter основы
  3. #Этап 3 — Навигация и архитектура
  4. #Этап 4 — State Management
  5. #Этап 5 — Работа с данными
  6. #Этап 6 — UI мастерство
  7. #Этап 7 — Нативные возможности
  8. #Этап 8 — Тестирование и CI/CD
  9. #Этап 9 — Публикация
  10. #Этап 10 — Реальный проект
  11. #Ресурсы — Каталог

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

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

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

Что изучить

  • Синтаксис: переменные, типы, final/const, late ✅ 2026-03-26
  • Null safety (?, !, ??, ?.) ✅ 2026-03-26
  • Классы, наследование, 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

Ресурсы

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

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

Ресурсы

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

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

  • Главный экран с аватаром, именем, описанием
  • Страница с контактами (ссылки, 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 с параметрами
  • 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

Ресурсы

🛠 Пет-проект: 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 — офиц. плагины

Ресурсы

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

  • Запрос к 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 поддержка

Ресурсы

🛠 Пет-проект: Клон 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

Ресурсы

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

  • Показать текущее местоположение на карте
  • Добавление маркеров / 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

Ресурсы

🛠 Практика

  • Написать тесты для 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 Мокирование

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

  1. Не читай — делай. С опытом в C#/Go/JS ты быстро схватишь синтаксис. Открывай DartPad, пиши код.

  2. Flutter ≠ React Native. Здесь нет DOM. Всё — виджеты. Widget tree пересоздаётся каждый кадр (Flutter рендерит как игровой движок).

  3. const everywhere. Flutter использует const конструкторы для оптимизации rebuilds. Привыкай.

  4. Riverpod > Provider для новых проектов. Provider legacy, Riverpod — его автор переосмыслил подход.

  5. Не бойся кодогенерации. build_runner — это норма. freezed + json_serializable сэкономят тонны boilerplate.

  6. Декомпозиция виджетов. Если build() больше 50 строк — разбивай. Extract widget > extract method.

  7. DevTools — твой друг. Widget Inspector, Performance, Network — используй с первого дня.

  8. 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

Reference in New Issue View Git Blame Copy Permalink