FLUTTER: How to stack images for voting app

Question

I am doing a voting app and I have a problem, I want to stack images as many time there is votes(1 stack per vote). This is a picture of what I want to do. I tried to use Listview like this

ListView(
  children: <Widget>[
    Image(
      image: AssetImage('assets/images/results/green.png'),
    ),
    Image(
      image: AssetImage('assets/images/results/green.png'),
    ),
  ],
),

The problem is that there is so much space between the 2 images. Can you help me ?

There's no space between the images. It only looks like there is because of the forced perspective illusion created by the difference between the green and white sections of the image. What you want instead is for the images to _overlap a bit_. — Abion47, Jan 21 '20 at 09:11
Easiest way to do this would be with two images: one that is clipped at the top for being a chip that another chip is above, and one to use for the topmost chip. — Abion47, Jan 21 '20 at 09:17
The image in the post is what I want to do ! I didn't do that ! — luc, Jan 21 '20 at 09:19
It's nice to know what you want it to do, but it's hard to help if we don't know what it's currently doing. — Abion47, Jan 21 '20 at 09:29

score 1 · Accepted Answer · answered Jan 21 '20 at 09:21

1

Try to wrap the image with:

Align(
  alignment: Alignment.topLeft,
  heightFactor: 0.94/*change this value until you are satisfied (between 0 and 1)*/,
  child: //your image
),

answered Jan 21 '20 at 09:21

Edin

758
6
18

Thank you it works ! Do you know how can I have one child per vote ? – luc Jan 21 '20 at 09:51
I dont understand what you mean can you describe it a little more please? – Edin Jan 21 '20 at 09:54
On the screen there are 6 "green plates", it is for 6 votes. I want to pass a number as argument and it will display the number of image I passed. Example: There is 5 vote so I want to add 5 images in Listview – luc Jan 21 '20 at 10:04
@LucaMathevet use `ListView.builder` – pskink Jan 21 '20 at 10:07
1

just use this: ListView.builder( itemCount: /*put the number of items here*/, itemBuilder: (BuildContext context,int index) { return: Align( alignment: Alignment.topLeft, heightFactor: 0.94/*change this value until you are satisfied (between 0 and 1)*/, child: //your image ); } ) – Edin Jan 21 '20 at 10:11

FLUTTER: How to stack images for voting app

1 Answers1