Перейти к содержимому

Slivers, SliverList, SliverAppBar, декомпозиция | Приложение на Flutter с нуля №4

Стас Ильин

0:00 / 0:00

Slivers, SliverList, SliverAppBar, декомпозиция | Приложение на Flutter с нуля №4

10 930 просмотров · 3 года назад
Стас Ильин
12,9 тыс. подписчиков
10 930 просмотров · 3 года назад
Подписывайся на мой: 💬 Telegram https://t.me/frezycode 👨‍💻 GitHub https://github.com/Frezyx (Куча кода на dart / Flutter) 🚀 Boosty https://boosty.to/frezycode 📸 Instagram   / frezycode   Мой курс по Flutter на YouTube:    • Flutter Уроки с нуля до профи 2023   Три года назад я решил сделать приложение для поиска рифм на Flutter. Опубликовал это как Android приложение в GooglePlay (PlayMarket) Этот проект я сделал очень быстро, однако приложение начало обретать успех среди пользователей. В один месяц число загрузок перевалило за 60000 скачиваний. И сейчас, спустя несколько лет, я решил вернуться к этому проекту и переписать его с нуля! В пересборке нас ожидает весь фарш настоящей разработки приложения. От создания проекта до публикации приложения в GooglePlay и AppStore. Контент ожидает быть интересным, ведь помимо обычного создания приложения на камеру я хочу встроить и обучающие моменты. Ну все прямо как в Flutter с нуля до профи уроки для начинающих) В этом видео мы продолжим верстать экраны приложения по нашему дизайн-концепту. И в основном затронем тему Sliver'ов, декомпозиции и переиспользования виджетов. Slivers - невероятно мощный инструмент Flutter для построения красивых и перформансных списков в приложении. SliverAppBar, SliverList.builder, SliverPadding, SliverToBoxAdapter и другие встретятся вам в этом видео) А теперь к делу... Погнали смотреть! 00:00 - 00:59 Вступление 00:59 - 01:50 Зачем нужны Sliver’ы ? 01:50 - 02:25 Виджет CustomScrollView 02:25 - 02:37 Что такое Sliver виджеты? 02:37 - 03:37 Зачем нужен SliverAppBar ? 03:37 - 04:25 Кастомизация SliverAppBar 04:25 - 05:31 Добавлем bottom PrefferedSize 05:31 - 06:42 Кастомизация скрола SliverAppBar (pinned, snap, floating) 06:42 - 07:36 Меняем цвет AppBar при скроле (surfaceTintColor) 07:36 - 12:36 Верстаем красивую кнопку формы ввода 12:36 - 13:17 Выносим кнопку в отдельный виджет 13:17 - 13:46 Переходим к дизайну и ищем другие Sliver’ы 13:46 - 14:11 Что такое SliverList ? 14:11 - 15:05 Добавляем SliverList.builder для списка карточек 15:05 - 15:24 Почему лучше использовать Sliver’ы ? 15:24 - 16:12 Дорабатываем карточки под рифмы 16:12 - 16:27 2 Варианта как сделать отступ в CustomScrollView 16:27 - 17:01 Отступ через SliverPadding 17:01 - 17:33 Отступ через SliverToBoxAdapter 17:33 - 18:00 Какой подход использовать ? 18:00 - 18:24 Перформанс Sliver’ов 18:24 - 22:11 Дорабатываем виджет карточки рифмы 22:11 - 24:03 Как добавить горизонтальный скрол в вертикальный CustomScrollView ? 24:03 - 25:50 Пример декомпозиции и переиспользования виджетов 25:50 - 26:54 Переиспользуем контейнер в горизонтальной карусели 26:54 - 29:20 Кастомизируем свои базовые компоненты 29:20 - 29:41 Значения по-умолчанию в виджетах 29:41 - 30:06 Дорабатываем горизонтальный скрол 30:06 - 30:43 ListView.separated 30:43 - 34:08 Верстаем карточки истории в горизонтальном скроле 34:08 - 35:11 Применить отступ ко всем элементам списка 35:11 - 35:51 Рефакторим код, чтобы он был более читаемый 35:51 - 36:26 List.generate для быстрой генерации списков 36:26 - 36:44 Продолжаем улучшать код 36:44 - 37:46 Декомпозируем виджеты 37:46 - 38:33 Обзор итогов и ещё про Sliver’s 38:33 - 39:35 Что будет в следующих сериях ? #программирование #flutter #войтивайти