Сёрф Flutter-разработка

Решение по Surf UI Quiz #1

Знакомься с нашим решением квиза. Мы использовали CustomMultiChildLayout виджет — с ним можно гибко ограничивать размеры child-виджетов и позиционировать их.

Дополнили код комментариями, но если остались вопросы — давай обсуждать в чате. Тема пересекается с предыдущим постом, рекомендуем почитать.

Ждём ссылки на DartPad в комментариях — особенно интересны иные способы реализации ⬇️

Наш первый UI Quiz

Недавно во внутреннем чатике наш тимлид Артём предложил всем подумать над одной любопытной задачей по вёрстке.

Мы решили, что с ней можно попробовать новый формат в канале — UI-челлендж. Если понравится, то сделаем ещё!

Итак, условия:

🔵 Экран разделен пополам, верхняя часть либо закрашена, либо там находится картинка, как на скринкасте.
🔵 На экране находится список карточек с заголовком, который изначально немного перекрывает верхнюю половину.
🔵 Есть кнопки добавления / удаления элементов списка, минимальное количество карточек — одна.
🔵 Когда список достигает низа экрана, он начинает расти вверх и все больше перекрывает верхнюю половину экрана, но не полностью.
🔵 Когда список становится максимальной высоты, его элементы скроллятся внутри.
🔵 Главное — адаптивность списка. Анимация, рандомные иконки и прочее — для разнообразия.
🔵 Всё должно запускаться в DartPad.

Попробуй реализовать! Можешь что-нибудь накрутить, будет любопытно посмотреть 🏄‍♂️

На следующей неделе сделаем пост-разбор c решением.

P. S. Большая просьба не публиковать свои идеи и код в комментариях, попробуем сохранить интригу 🙏 Но если есть вопросы — welcome!

Loose and tight constraints

Начинающим разработчикам знакома ситуация, когда виджет «игнорирует» переданные параметры — хотя размеры явно указаны. Вот мы указали явный размер для контейнера, ожидая получить квадрат 100х100:

MaterialApp(
  home: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
), 

Но контейнер всё же растянется на весь экран. В карточках разобрали, почему так происходит.

Ссылки на DartPad:
🔵 Пример из поста
🔵 Как узнать ограничения
🔵 Изменяем ограничения
🔵 Устанавливаем свои ограничения

Возможности dart:async — Completer

Мы все хотим писать лаконичный асинхронный код, используя Future. Но иногда обстоятельства не на нашей стороне: нужно интегрировать плагин/библиотеку, которые предоставляют callback-based API.

К счастью, мы можем взять ситуацию в свои руки и очень просто преобразовать неудобные вызовы method((result) { … }) к привычным final result = await method().

Поможет в этом Completer. В карточках рассказываем, как это реализовать.

➡️ Документация по Completer

#экспертный

Добраться до строк

Продолжаем тему локализации. Сегодня рассмотрим три случая работы с локализованными строками в приложении:

→ Локализации ещё нет, и вы используете хардкод.

Расскажем, как сделать так, чтобы при подключении локализации ничего не забыть.

→ Локализация настроена.

Посмотрим, как удобнее всего добраться до неё через контекст.

→ Локализация вне контекста.

Покажем, как получить локализованные строки, если доступа к контексту нет.

#экспертный