How to make Images Box with Price in Flutter

Question

I am going to make an E-commerce application with price, image, discount view, but I have no idea to make this view. I have tried thousand ways but they gave me nothing.

Here are the preview:

Answer 1

Your question is too broad but it'll try to provide you with the necessary resources to achieve the layout you're looking for.

It all boils down to layout widgets (you can find the catalogue here: https://flutter.dev/docs/development/ui/widgets/layout ). There are single child and multiple children layout widgets. In order to create the discount tag effect you are going to need a Stack widget which as its name implies, it stacks its children on top of each other, you could then have and Image widget and the discount widget as children, effectively putting the discount label on top of the image. The layout for each card could be something like:

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

You'd need to implement DiscountWidget and RatingWidget of course, but that code provides a high level overview of how you could create the layout you're looking for.