8. Финал: Базовые виджеты на flutter и верстка UI (Часть 1)

22 Просмотры

  • Спасибо! Поделитесь с друзьями!

    Вам не понравилось видео. Спасибо за то что поделились своим мнением!

admin
Издатель
Донат: https://www.donationalerts.com/r/ruslan_uxui

Разбираем дизайн и настраиваем проект первые 45 минут, а дальше вёрстка. Вышло сумбурно, но я предупреждал заранее и в теории и после, что тут важно натренировать понимание сложности разработки, а оно хорошо прощупывается когда видишь как изнутри всё делается или из чего состоит. Это всё же не курс по flutter и разработке, но на любые вопросы я с радостью отвечу. Не стесняйтесь их задавать по поводу вёрстки/кода.

Таймкоды:
00:00:00 - про макет
00:08:40 - подготовка к вёрстке с объяснением
00:11:18 - пишем home screen
00:13:40 - немного про структуру папок
00:14:46 - themedata, fontfamily, visualdensity, ассеты
00:20:28 - добавляем ассеты
00:24:04 - установка svgpicture
00:25:27 - про базовую структуру
00:28:22 - как работают ассеты х2, х3
00:31:00 - про базовые виджеты для табов
00:32:50 - про то как организованы токены
00:34:15 - про то как организованы данные
00:37:08 - немного про организацию папок и деление на компоненты и экраны
00:38:33 - вёрстка табов
00:56:48 - вёрстка блока с фильмом и кнопками
01:23:41 - вёрстка списков
02:11:13 - выводы

- Файл курса обновлен: https://www.figma.com/community/file/1191142843406925181
Если вы хотите повторить код:
- Редактор кода VScode: https://code.visualstudio.com/
Расширения (можно во вкладке внутри редактора VSCode найти):
- Dart расширение: https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code
- Flutter расширение: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
Установка флаттер и симуляторов android/ios:
- Инструкция для windows: https://docs.flutter.dev/get-started/install/windows
- Для windows/macOs(опционально) Android Studio: https://developer.android.com/studio
- Инструкция для macOS: https://docs.flutter.dev/get-started/install/macos
- Для macOS XCode: https://developer.apple.com/xcode/resources/
- SVGPicture пакет для использования svg файлов: https://pub.dev/packages/flutter_svg/install
- Готовый код и ассеты: https://drive.google.com/drive/folders/10eM6okF8y0ME6P8upgaQ9acB7vtcJrwy?usp=share_link
- Плагин для цветов и кода из фигмы: https://www.figma.com/community/plugin/842128343887142055
Категория
iMac
Комментарии выключены


Следующее