Как сделать фото коробку с ценой во флаттере

Question

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

Вот предварительный просмотр:

Answer 1

Ваш вопрос слишком широкий, но он постарается предоставить вам необходимые ресурсы для создания макета, который вы ищете.

Все сводится к виджетам макета (каталог можно найти здесь: https://flutter.dev/docs/development/ui/widgets/layout). Есть один дочерний и несколько дочерних виджетов макета. Для создания эффекта тега скидки вам понадобится виджет Stack, который, как следует из его названия, накладывает свои дочерние элементы друг на друга, а затем вы можете использовать виджет Image и виджет скидок в качестве дочерних элементов, эффективно устанавливая скидку. метка в верхней части изображения. Макет для каждой карты может быть что-то вроде:

Container(
  child: Column(
    children: <Widget>[
      Stack(
        children: <Widget>[
          Image(),
          DiscountWidget(),
        ],
      ),
      Text('Shirt'),
      Row(
        Text('Rp.50000'),
        Text('345'),
      ),
      Row(
        RatingWidget(),
        Text('Ready stock'),
      ),
    ],
  ),
);

Конечно, вам нужно будет реализовать DiscountWidget и RatingWidget, но этот код обеспечивает общий обзор того, как вы можете создать макет, который вы ищете.