5

I want to fit a child image to the width of the column father.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Image.network("Some image url"),
    Text("Fitted image"),
  ],
),
José Lozano Hernández
  • 1,813
  • 1
  • 17
  • 21

3 Answers3

12

I suggest the following chenges

Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Image.network("Your image url",
          width: double.infinity, 
          fit: BoxFit.fitWidth,
        ),
        Text("Fitted image"),
      ],
    )
B--rian
  • 5,578
  • 10
  • 38
  • 89
Pradeep
  • 164
  • 1
  • 10
5

Well, I resolved my problem using MediaQuery.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(
        child: Image.network("Some image url", fit: BoxFit.fill,), 
        width: MediaQuery.of(context).size.width,
    ),
    Text("Fitted image"),
  ],
),
José Lozano Hernández
  • 1,813
  • 1
  • 17
  • 21
0

Maybe wrapping your Image with an Expanded Widget and give it BoxFit.fitWidth would also be useful. Or in case the times when you can't use MediaQuery.

     Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            flex: 5,
            child: Image.network(
              "Some Image Url",
              fit: BoxFit.fitWidth,
            ),
          ),
          Text("Fitted image"),
        ],
      ),

If you need to control the size of elements in the column try to wrap all your widgets inside column with expanded widget and adjust elements sizes with flex value.

Ali Türkay Avci
  • 1,038
  • 12
  • 12
  • Your solution is not bad, but Expand expands through the main axis, so it will grow vertically (column), it works because the image keeps his aspect ratio and grows his width also ;-) – José Lozano Hernández Dec 16 '19 at 20:38