Мастер-класс по анимации во Flutter. Видео-курс

Освойте анимацию Flutter и узнайте, как создавать приложения, которые ярко выделяются!

Содержание курса

Этот бесплатный курс на русском языке состоит из 10 независимых модулей, каждый из которых имеет определенную цель обучения тонкостям работы с анимацией во Флаттер (Flutter).

Рассматриваемые темы и концепции

1. Введение и неявная анимация (Implicit Animations)

1. План курса и ресурсы
2. Введение в анимацию
3. Загрузите проект анимационной игровой площадки
4. Неявная анимация с помощью AnimatedContainer
5. [Упражнение] AnimatedOpacity
6. Кривые анимации
7. Введение в TweenAnimationBuilder
8. Анимация цветов HSV с помощью TweenAnimationBuilder
9. Подведение итогов по неявным анимациям

2. Проблема пользовательского интерфейса: приложение для секундомера

1. Введение в модуль
2. Начальный проект для приложения Секундомер (Stopwatch app)
3. Темный режим и пользовательское наложение пользовательского интерфейса системы
4. Создание периодического таймера
5. Ticker и TickerProvider
6. Создание отдельного StopwatchRenderer виджета
7. Настройка пользовательского интерфейса секундомера с помощью AspectRatio
8. Матричные преобразования
9. Получение радиуса окружности из LayoutBuilder
10. Реализация анимированной часовой стрелки
11. Завершение интерфейса секундомера (часть 1)
12. Завершение пользовательского интерфейса секундомера (часть 2)
13. Добавление функций запуска / остановки / сброса (часть 1)
14. Добавление функций запуска / остановки / сброса (часть 2)
15. Соображения по производительности и тестированию при работе с тикерами!

3. Обзор приложения для отслеживания привычек

1. Приложение для отслеживания привычек: введение (Habit Tracker app)
2. Загрузите начальный проект
3. Правила линтинга
4. Пошаговое руководство по коду: ресурсы проекта
5. Пошаговое руководство по коду: цвета и тематизация

4. Явная анимация

1. Вводный модуль и начальный проект
2. Кольцо завершения задачи: техническое планирование
3. Введение в CustomPainter
4. Рисование кольца завершения задачи с помощью холста
5. Введение в явную анимацию (Explicit Animations) с AnimationController
6. Анимированное кольцо завершения задачи с AnimationController и AnimatedBuilder
7. Управление анимацией с помощью GestureDetector
8. Добавление значка SVG по центру к анимированной задаче
9. Настройки пользовательского интерфейса для завершения задачи
10. Состояние завершения задачи и окончательные настройки
11. Исправлена ошибка: обработка жестов отмены нажатия
12. Добавление имени задачи
13. Организация нескольких задач внутри GridView
14. Законченный проект и подведение итогов

5. Сохранение локальных данных с помощью Hive

1. Введение модуля
2. Техническое планирование: локальное (Local Data) или удаленное хранилище
3. Обзор начального проекта
4. Введение в Hive
5. Создание классов моделей с помощью Hive
6. Создание адаптера типов с генерацией кода
7. Создание HiveDataStore
8. Создание демонстрационных задач внутри main()
9. Создание уникальных идентификаторов задач с помощью пакета uuid
10. Чтение заданий с ValueListenableBuilder
11. Подведение итогов

6. Управление состоянием с помощью Riverpod

1. Вводный модуль и начальный проект
2. Знакомство с Riverpod
3. Создание и использование хранилища данных Provider с помощью Consumer
4. Зависимость переопределяется с помощью ProviderScope
5. TaskState моделирование данных
6. Создание и использование TaskState класса модели Hive
7. Добавление onCompleted обратного вызова к AnimatedTask виджету
8. Создание TaskWithNameLoader
9. Завершение + использование инспектора виджетов

7. Анимация перелистывания страницы

1. Введение модуля: переход с переворота страницы
2. Начальный проект и пошаговое руководство
3. Разработка API-интерфейса виджета Page Flip с помощью WidgetBuilders
4. Использование a GlobalKey для изменения состояния дочернего виджета
5. AnimationController настройка
6. AnimatedBuilder против AnimatedWidget
7. Код поворота с Transform и Matrix4
8. Интерактивный переход с одной страницы на другую
9. Виджеты, элементы и клавиши
10. Дополнительная задача: игра с переворачиванием карт

8. Расширенная тематизация

1. Введение к модулю: Расширенная тематизация (Theming)
2. Начальный проект и пошаговое руководство
3. Показ нижних панелей
4. Создание SlidingPanelAnimator
5. Использование SlidingPanelAnimator
6. Анимация раздвижных панелей
7. Управление изменениями состояния темы приложения: обзор
8. Реализация класса AppThemeManager с помощью StateNotifier
9. Создание и использование поставщиков AppThemeManager
10. Применение настроек AppThemeSettings
11. Расширенное анимированное тематическое оформление с помощью ImplicitlyAnimatedWidget

9. Более явная анимация

1. Вводный модуль
2. Начальный проект и пошаговое руководство
3. Управление анимацией в виджете TasksGrid
4. Добавление подкласса AnimatedWidget для масштабирования виджетов
5. Пошаговая анимация
6. Добавление виджета AddTaskItem
7. Анимация плавного перехода с помощью виджета непрозрачности
8. Явная анимация с переходом на затухание и масштабированием
9. Обзор: встроенный переход против неявно анимированных виджетов во Flutter
10. Исправлена ошибка: отключение завершения задачи в режиме редактирования

10. Добавление и редактирование задач

1. Введение в модуль: Добавление и редактирование задач
2. Переход к страницам добавления задачи и редактирования задачи
3. Обзор: AddTaskPage с помощью slivers
4. Обзор: TaskDetailsPage и SelectIconPage
5. Обзор: адаптация
6. Заключение и следующие шаги

Дополнительные ресурсы

Полезные ресурсы из документации Flutter

• Введение в анимацию | Flutter.dev
  • Обзор анимации
  • Учебное пособие по анимации
  • Неявные анимации
  • Анимация героев
  • Пошаговая анимация
• Неявная анимация Codelab | Flutter.dev
• Учебное пособие по анимации | Flutter.dev
• Виджеты анимации и движения | Flutter.dev
• Уменьшить скачок компиляции шейдеров на мобильных устройствах | Flutter.dev

Смотреть видео-курс

Часть 1:

Часть 2:

Часть 3:

Часть 4:

Часть 5:

Часть 6:

Часть 7:

Скачать материалы и код курса