Loose and tight constraints
Начинающим разработчикам знакома ситуация, когда виджет «игнорирует» переданные параметры — хотя размеры явно указаны. Вот мы указали явный размер для контейнера, ожидая получить квадрат 100х100:
Но контейнер всё же растянется на весь экран. В карточках разобрали, почему так происходит.
Ссылки на DartPad:
🔵 Пример из поста
🔵 Как узнать ограничения
🔵 Изменяем ограничения
🔵 Устанавливаем свои ограничения
Начинающим разработчикам знакома ситуация, когда виджет «игнорирует» переданные параметры — хотя размеры явно указаны. Вот мы указали явный размер для контейнера, ожидая получить квадрат 100х100:
MaterialApp(
home: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
Но контейнер всё же растянется на весь экран. В карточках разобрали, почему так происходит.
Ссылки на DartPad:
🔵 Пример из поста
🔵 Как узнать ограничения
🔵 Изменяем ограничения
🔵 Устанавливаем свои ограничения
👍40🔥10❤7❤🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Наш первый UI Quiz
Недавно во внутреннем чатике наш тимлид Артём предложил всем подумать над одной любопытной задачей по вёрстке.
Мы решили, что с ней можно попробовать новый формат в канале — UI-челлендж. Если понравится, то сделаем ещё!
Итак, условия:
🔵 Экран разделен пополам, верхняя часть либо закрашена, либо там находится картинка, как на скринкасте.
🔵 На экране находится список карточек с заголовком, который изначально немного перекрывает верхнюю половину.
🔵 Есть кнопки добавления / удаления элементов списка, минимальное количество карточек — одна.
🔵 Когда список достигает низа экрана, он начинает расти вверх и все больше перекрывает верхнюю половину экрана, но не полностью.
🔵 Когда список становится максимальной высоты, его элементы скроллятся внутри.
🔵 Главное — адаптивность списка. Анимация, рандомные иконки и прочее — для разнообразия.
🔵 Всё должно запускаться в DartPad.
Попробуй реализовать! Можешь что-нибудь накрутить, будет любопытно посмотреть 🏄♂️
На следующей неделе сделаем пост-разбор c решением.
P. S. Большая просьба не публиковать свои идеи и код в комментариях, попробуем сохранить интригу🙏 Но если есть вопросы — welcome!
Недавно во внутреннем чатике наш тимлид Артём предложил всем подумать над одной любопытной задачей по вёрстке.
Мы решили, что с ней можно попробовать новый формат в канале — UI-челлендж. Если понравится, то сделаем ещё!
Итак, условия:
Попробуй реализовать! Можешь что-нибудь накрутить, будет любопытно посмотреть 🏄♂️
На следующей неделе сделаем пост-разбор c решением.
P. S. Большая просьба не публиковать свои идеи и код в комментариях, попробуем сохранить интригу
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍9🎉4
Surf Flutter Team
Наш первый UI Quiz Недавно во внутреннем чатике наш тимлид Артём предложил всем подумать над одной любопытной задачей по вёрстке. Мы решили, что с ней можно попробовать новый формат в канале — UI-челлендж. Если понравится, то сделаем ещё! Итак, условия:…
Решение по Surf UI Quiz #1
Знакомься с нашим решением квиза. Мы использовали CustomMultiChildLayout виджет — с ним можно гибко ограничивать размеры child-виджетов и позиционировать их.
Дополнили код комментариями, но если остались вопросы — давай обсуждать в чате. Тема пересекается с предыдущим постом, рекомендуем почитать.
Ждём ссылки на DartPad в комментариях — особенно интересны иные способы реализации⬇️
Знакомься с нашим решением квиза. Мы использовали CustomMultiChildLayout виджет — с ним можно гибко ограничивать размеры child-виджетов и позиционировать их.
Дополнили код комментариями, но если остались вопросы — давай обсуждать в чате. Тема пересекается с предыдущим постом, рекомендуем почитать.
Ждём ссылки на DartPad в комментариях — особенно интересны иные способы реализации
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥5❤2⚡1
Получилось ли выполнить задание?
Anonymous Poll
23%
Да, и вышло хорошо
2%
Да, но не всё удалось реализовать
28%
Не получилось, но хотелось
46%
Не было интереса
Хочешь больше таких челленджей?
Anonymous Poll
83%
Да, давайте!
1%
Да, но есть предложения, напишу в комментах
15%
Мне и так хватает челленджей 🙃
❤6
Возможности пакета async — AsyncCache
Класс AsyncCache позволяет сохранять результат вызова асинхронной функции. При её повторном вызове вернётся сохранённое значение или создастся новый запрос.
Как ни странно, AsyncCache выполняет функцию… кэша!
Основная задача — оптимизация вызовов затратных вычислений, запросов или чтения больших файлов в том случае, если данные в них обновляются не часто.
На карточках Flutter-разработчик Самир рассказал об использовании AsyncCache с примером из практики Surf.
Класс AsyncCache позволяет сохранять результат вызова асинхронной функции. При её повторном вызове вернётся сохранённое значение или создастся новый запрос.
Как ни странно, AsyncCache выполняет функцию… кэша!
Основная задача — оптимизация вызовов затратных вычислений, запросов или чтения больших файлов в том случае, если данные в них обновляются не часто.
На карточках Flutter-разработчик Самир рассказал об использовании AsyncCache с примером из практики Surf.
🔥34👍6❤1⚡1🌚1🆒1