Приложение на Flutter с нуля | ОЧЕНЬ МНОГО ВЕРСТКИ | ПЕРЕСБОРКА #7
Подписывайся на мой:
🕺 Telegram
👨💻 GitHub (Куча кода на Dart Flutter)
📸 Instagram
Мой курс по Flutter на YouTube:
-----------------------------------------------
В этом видео мы будем верстать очень много виджетов и экранов на Flutter. А конкретно - добавим SliverList с карточками избранных рифм. Добавим SliverGrid для показа карточек истории поиска, а так же качественный и понятный интерфейс настроек.
В рамках видео мы поговорим о том, как создавать и где хранить библиотеку компонентов в проекте на Flutter.
Так же много будем говорить про UI/UX дизайн, пользовательское поведение, декомпозицию виджетов и грамотное составление библиотеки компонентов.
А теперь к делу... Погнали смотреть!
-----------------------------------------------
Пересборка - это что?
Три года назад я решил сделать приложение на flutter для поиска рифм на Flutter. Опубликовал это как Android приложение в GooglePlay (PlayMarket)
Этот проект я сделал очень быстро, однако приложение начало обретать успех среди пользователей. В один месяц число загрузок перевалило за 60000 скачиваний. И сейчас, спустя несколько лет, я решил вернуться к этому проекту и переписать его с нуля!
В пересборке нас ожидает весь фарш настоящей разработки приложения. От создания проекта до публикации приложения в GooglePlay и AppStore.
Контент ожидает быть интересным, ведь помимо обычного создания приложения на камеру я хочу встроить и обучающие моменты. Ну все прямо как в Flutter уроки с нуля до профи для начинающих, только теперь мы пишем приложение реально)
-----------------------------------------------
00:00 - 00:12 Вступление
00:12 - 00:32 Что будет в этом ролике ? Куча верстки!
00:32 - 01:35 Начинаем верстать страницу Избранное
01:35 - 02:12 Учим VsCode исправлять ошибки самостоятельно
02:12 - 03:37 VSCode настройки для проекта
03:37 - 06:07 Верстка страницы Избранное
06:07 - 09:12 Создаем папку виджетов / UI Kit
09:12 - 11:11 Выносим widgets внутри одной feature / UI Kit
11:11 - 12:27 Использование одного виджеты на разных экранах
12:27 - 13:14 Как организовать библиотеку компонентов в проекте ?
13:14 - 15:37 Как кастомизировать общие виджеты ?
15:37 - 16:03 Как ещё улучшить дизайн избранных ?
16:03 - 17:17 Начинаем верстать экран Истории поиска
17:17 - 17:39 Как изменить имя переменной во всех файлах ?
17:39 - 17:49 Меняю название фичи на history
17:49 - 18:16 Вспоминаю как хорошо было в Java
18:16 - 19:17 Завершаем переезд фичи и генерируем AutoRoute
18:17 - 20:00 Верстаем экран истории поиска
20:00 - 20:18 Как экран истории поиска выглядел раньше?
20:18 - 21:07 Придумываем дизайн находу
21:07 - 21:17 Новый покемон SliverGrid
21:17 - 22:19 Что такое SliverGrid ?
22:19 - 23:15 Добавляем SliverGrid на экран Истории поиска
23:15 - 25:09 Адаптируем SliverGrid под экран (childAspectRatio)
25:09 - 30:05 Адаптируем карточки внутри SliverGrid
30:05 - 33:42 Придумываем и верстаем экран настроек
33:42 - 36:19 Работа с Theme textTheme, добавляем стили
36:19 - 36:32 Продумываем карточку для настроек
36:32 - 37:08 CupertinoSwitch
37:08 - 37:58 Верстаем карточку настроек
37:58 - 39:34 Кастомим карточку настроек в отдельном компоненте
39:34 - 40:00 Как запрещать нажатие на кнопки в Flutter
40:00 - 40:45 Добавляем все нужные настройки
40:45 - 41:08 Про App Tracking Transparency
41:08 - 46:47 Продолжаем верстать экран Настроек
46:47 - 48:05 Вечность выбираю подходящую иконку
48:05 - 51:07 Добавляем остающиеся элементы на экран настроек
51:07 - 51:35 Разговоры про психологию цвета
51:35 - 52:54 Делаем не враждебный цвет иконок в настройках
52:54 - 53:22 Проверяем все готовые экраны
53:22 - 55:11 Меняем показ карточки рифмы (Бархатный custom)
55:11 - 55:20 Построение виджетов по условию if
55:20 - 56:49 Каскадное добавление списка в список Flutter (Замена addAll)
56:49 - 57:26 Засовываем Row в другой Row
57:26 - 58:26 Дорабатываем UI карточки рифмы
58:26 - 59:28 Пробую задвигать про UX-дизайн и психологию пользователя
59:28 - 01:00:07 Обновляем дизайн карточки истории
01:00:07 - 01:00:51 Кастим List в Map используя метод asMap
01:00:51 - 01:02:22 Используем StringBuffer для построения строк (Как StringBuilder в Java)
01:02:22 - 01:02:40 Накосячил в логике и исправил
01:02:40 - 01:03:03 Слегка причесываем стиль текста
01:03:03 - 01:03:20 Что мы сделали в видео ?
01:03:20 - 01:03:55 Что будет в следующем выпуске ?
#программирование #flutter #войтивайти