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

Решение по Surf UI Quiz #1 Знакомься с нашим решением квиза. Мы использовали CustomMultiChildLayout виджет — с ним можно гибко ограничивать размеры child-виджетов и позиционировать их. Дополнили код комментариями, но если остались вопросы — давай обсуждать в чате. Тема пересекается с предыдущим постом, рекомендуем почитать. Ждём ссылки на DartPad в комментариях — особенно интересны иные способы реализации.

Наш первый UI Quiz Недавно во внутреннем чатике наш тимлид Артём предложил всем подумать над одной любопытной задачкой по вёрстке. Мы решили, что можно её оформить и попробовать новый формат в канале — UI-челлендж. Если понравится, то сделаем ещё! Итак, условия: 🔵 Экран разделен пополам, верхняя часть либо закрашена, либо там находится картинка, как на скринкасте. 🔵 На экране находится список карточек с заголовком, который изначально немного перекрывает верхнюю половину. 🔵 Есть кнопки добавления / удаления элементов списка, минимальное количество карточек — одна. 🔵 Когда список достигает низа экрана, он начинает расти вверх и все больше перекрывает верхнюю половину экрана, но не полностью. 🔵 Когда список становится максимальной высоты, его элементы скроллятся внутри. 🔵 Всё это должно запускаться в DartPad. 🔵 Главное — адаптивность списка. Анимация, рандомные иконки и прочее — это для разнообразия 😊 Пробуй! Можешь ещё что-нибудь накрутить, это будет даже любопытно 🏄‍♂️ На следующей неделе сделаем пост-разбор c решением. P. S. Большая просьба не публиковать свои идеи и код в комментариях, попробуем сохранить интригу 🙏 Но если есть вопросы — welcome!

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

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

Но контейнер всё же растянется на весь экран. В карточках разобрали, почему так происходит. Ссылки на DartPad: 🔵 Пример из поста 🔵 Как узнать ограничения 🔵 Изменяем ограничения 🔵 Устанавливаем свои ограничения #экспертный