Stacking images in a column in Flutter

Question

In Flutter, I try to put 2 images in one column. At the same time, vertically they should occupy places in a ratio of 8: 1 and be stretched horizontally so that there is no empty space left. Tell me, please, what am I doing wrong?

what does it look like now

score 1 · Answer 1 · answered Jun 16 '22 at 05:17

Wrap the bigger image with SizedBox to cover the full width.

        Column(
          children: [
            Expanded(
              flex: 8,
              child: SizedBox(
                width: double.infinity, 
                child: Image.asset('...', fit: BoxFit.cover)
              ),
            ),
            Expanded(
              flex: 1,
              child: Image.network('...', fit: BoxFit.cover),
            )
          ]
        ),

score 0 · Answer 2 · answered Jun 16 '22 at 04:56

0

You Can Use Fit parameter from Image Widget.

Container(
width: MediaQuery.of(context).size.width,
  height: 100,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage("https://picsum.photos/250?image=9"),
    ),
  ),
)

check out this stackoverflow answer for this question.

answered Jun 16 '22 at 04:56

amit.flutter

883
9
27

Thanks a lot! It is convenient to use the screen extensity and its selection. I got an exception: No MediaQuery widget ancestor found. I need to figure out how MediaQuery works - then everything will work out – Vsevolod Rostovskiy Jun 16 '22 at 05:20

score 0 · Accepted Answer · answered Jun 16 '22 at 05:12

There are two option to load image fill width

Option 1:

Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              flex: 8,
                child: Image.network(
                    fit: BoxFit.fill,
                    "https://i.pinimg.com/736x/d5/c4/79/d5c47911f588344c0d8da2f1af722674.jpg")),
            Expanded(

              flex: 1,
                child: Image.network(
                  fit: BoxFit.fill,
                    "https://i.pinimg.com/originals/eb/50/fb/eb50fb8217202bb568d6c535724354c6.jpg")),
          ],
        ))

Option 2:

Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              flex: 8,
                child: Image.network(
                    fit: BoxFit.fitWidth,
                    "https://i.pinimg.com/736x/d5/c4/79/d5c47911f588344c0d8da2f1af722674.jpg")),
            Expanded(

              flex: 1,
                child: Image.network(
                  fit: BoxFit.fitWidth,
                    "https://i.pinimg.com/originals/eb/50/fb/eb50fb8217202bb568d6c535724354c6.jpg")),
          ],
        ))

Stacking images in a column in Flutter

3 Answers3