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:

to be honest i do nothing because I can't find tutorial to make 1 of them I only found how to insert text above images and make the align to right. i'm so sorry coz I'm really new with this framework — Roman Traversine, Apr 02 '19 at 07:08
You said tried 1,000 ways but then nothing. do more research everything is there — stuckedunderflow, Apr 05 '19 at 06:46
then tell me what research I've to search here if IDK what to do with my problem ? don't be Mr. Know-it-All just like you know my case :) — Roman Traversine, Apr 05 '19 at 09:15

Mariano Uvalle · Accepted Answer · 2019-07-22T13:38:34.417

0

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.

edited Jul 22 '19 at 13:38

answered Apr 02 '19 at 07:29

Mariano Uvalle

705
4
10

oalah.. so its a high level right ? I'm walking so deep. with my low level skill its look like gonna be a hard homework for me. but once again thank you for your explanation. i'll try your advice and implement it to my worksheet. thank you so much mr, @Mariano Uvalle – Roman Traversine Apr 02 '19 at 07:37
but could you teach me how to make 2 boxes side to side with an image inside the box ? I still find nothing how to do that. – Roman Traversine Apr 02 '19 at 07:38
1

Once again, it boils down to layout widgets. If you want to have 2 cards side by side then you'd need another Row widget which would contain them. But I suspect that what you're actually looking for is a GridView which can show multiple cards in a scrollable fashion. – Mariano Uvalle Apr 02 '19 at 07:49
oke thank you so much for the advice. i've looking for gridview tutorial in web,but i still confused about the concept. could gridview show 3 columns side by side ? i mean like this: box- -box- -box- first row contain 3 columns ---box--- ---box--- second one contain 2 columns i mean did gridview makes them real ?? btw sorry for my bad english – Roman Traversine Apr 02 '19 at 11:07

score 0 · Answer 2 · answered Oct 12 '20 at 13:59

0

For line throuh

          style: TextStyle(decoration: TextDecoration.lineThrough),

answered Oct 12 '20 at 13:59

Jewel Rana

2,397
1
19
28

How to make Images Box with Price in Flutter

2 Answers2