How to adjust image to width and hide vertical overflow in flutter

March 8, 2022

I’m trying to put together a simple template as a learning exercise. I want the image width to occupy the screen side to side, and the height to be clipped at 200px hiding everything in excess.

code:

Image _buildJournalHeaderImage(context) {
    return Image.network(
      "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Salto_del_Angel-Canaima-Venezuela08.JPG/1200px-Salto_del_Angel-Canaima-Venezuela08.JPG",
      // fit: BoxFit.cover,
      fit: BoxFit.fitWidth,
      height: MediaQuery.of(context).size.width / 2,
    );
  }

this method is placed as a column child.

>Solution :

You should not need anything more complex than this to have the image fill the width and have a fixed-height of 200:

import 'package:flutter/material.dart';

class FitToWidthExample extends StatelessWidget {
  const FitToWidthExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: [
          Image.network(
            "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Salto_del_Angel-Canaima-Venezuela08.JPG/1200px-Salto_del_Angel-Canaima-Venezuela08.JPG",
            fit: BoxFit.fitWidth,
            alignment: Alignment.center, // If you don't want the image center aligned modify this.
            width: MediaQuery.of(context).size.width,
            height: 200,
          )
      ]
    );
  }
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => const MaterialApp(
      home: Scaffold(body: FitToWidthExample()),
  );
}

void main() => runApp(const App());