Stacking images in a column in Flutter-CodePudding

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?

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")),
          ],
        ))

CodePudding user response：

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.

CodePudding user response：

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),
            )
          ]
        ),