Дизайн интерфейса авторизации в FlutterFlow | Как добавить пользовательские шрифты и иконки | Уче...
Автор: PWH SERVICES
Загружено: 2026-01-15
Просмотров: 17
🎬 Дизайн интерфейса входа в систему FlutterFlow | Пользовательские шрифты и иконки | Урок для начинающих
Добро пожаловать обратно в нашу серию полных курсов по FlutterFlow!
В этом видео мы шаг за шагом, без написания кода, разработаем современный, чистый и адаптивный интерфейс экрана входа в систему на FlutterFlow.
Если вы новичок или UI/UX-дизайнер, желающий создавать реальные приложения FlutterFlow, этот урок поможет вам понять структуру макета, типографику, иконки и лучшие практики UI.
🔍 Что вы узнаете из этого урока по FlutterFlow
• Как разработать пользовательский интерфейс экрана входа в систему в FlutterFlow
• Как структурировать макеты с помощью столбцов и контейнеров
• Как импортировать и использовать пользовательские шрифты в FlutterFlow
• Как добавлять и настраивать иконки внутри текстовых полей
• Как создавать современные поля ввода и кнопки призыва к действию (CTA)
• Как создавать кнопки входа через социальные сети Google и Facebook
• Лучшие практики UI/UX для чистого и адаптивного дизайна приложений
⏱️ Ключевые моменты
0:24–0:37 — Обзор экрана входа в систему
1:04–1:24 — Создание страницы входа в систему в FlutterFlow
2:23–2:53 — Структура макета с помощью столбцов и контейнеров
2:56–5:22 — Дизайн и размер логотипа приложения
5:26–7:45 — Стилизация названия приложения и пользовательские шрифты
7:57–9:56 — Дизайн контейнера формы входа в систему
10:22–11:45 — «Подпись» Стилизация заголовка «В»
12:05–15:22 — Поля ввода электронной почты и пароля
16:10–20:17 — Добавление пользовательских значков
22:28–22:46 — Переключатель видимости пароля
23:09–24:27 — Переключатель «Запомнить меня»
25:27–26:21 — Ссылка «Забыли пароль»
26:28–31:16 — Дизайн кнопки «Войти»
31:19–36:20 — Пользовательский значок стрелки внутри кнопки
36:27–37:47 — Дизайн разделителя «ИЛИ»
37:48–43:08 — Кнопки входа через социальные сети
39:39–41:07 — Эффект фонового изображения
44:07–46:05 — Расширенный текст «Регистрация»
47:21–47:30 — Что дальше в серии
📚 Прогресс серии FlutterFlow
✅ Ранее рассмотрено:
Дизайн пользовательского интерфейса экрана адаптации в FlutterFlow
⏭️ Далее:
• Интерфейс экрана регистрации
• Интерфейс проверки и сброса пароля
🚀 Почему стоит посмотреть это видео?
Этот урок по FlutterFlow идеально подходит, если вы хотите:
✔ Изучить FlutterFlow с нуля
✔ Улучшить свои навыки дизайна мобильного UI/UX
✔ Создавать приложения быстрее без программирования
✔ Разрабатывать профессиональные экраны входа в систему
👉 Ставьте лайки, подписывайтесь и включайте уведомления, чтобы следить за полным курсом по FlutterFlow.
🔗 Свяжитесь с PWH Services
Instagram: /pwh_services
Facebook: /pwhservices
LinkedIn: /pwh-services
WhatsApp: https://whatsapp.com/channel/0029Vb49
...
Веб-сайт: https://pwhservices.tech/
Trustpilot: https://www.trustpilot.com/review/pwh
...
#FlutterFlow
#FlutterFlowTutorial
#FlutterFlowLoginUI
#NoCodeDevelopment
#MobileAppDesign
#UIUXDesign
#FlutterFlowBeginner
#AppUIDesign
#LoginScreenDesign
#FlutterFlowCourse
#NoCodeApps
#PWHServices
#FlutterFlowUI
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: