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

Question

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.

Answer 1

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());

Answer 2

Create like this

   Container(
                height: 200,
                child: Row(
                  children: [
                    Expanded(
                      child: 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,
                      ),
                    ),
                  ],
                ),
              )

SampleCode dartpad livecode

    import 'package:flutter/material.dart';



Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MyApp());
}


class MyApp extends StatefulWidget {
  MyApp({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  void initState() {
    super.initState();
 
  }


  @override
  Widget build(BuildContext context) {
 
    var column = Column(
            children: [
              Container(
                height: 200,
                child: Row(
                  children: [
                    Expanded(
                      child: 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,
                      ),
                    ),
                  ],
                ),
              )
            ],
          );
    return MaterialApp(
      // theme: theme(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(),
          body:               Container(
            height: 200,
            child: Row(
              children: [
                Expanded(
                  child: 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,
                  ),
                ),
              ],
            ),
          )
      ),
    );
  }
}