Flutter : Fill the image over the body

Question

I am working on a flutter project. I have loaded an image and I want it to fill up the body. After reading the documentation I came up with this:

void main() => runApp(MaterialApp(
  home : Scaffold(
      appBar: AppBar(
        title: Center(
           child: Text("I am rich"),
        ),
        backgroundColor: Colors.amberAccent,
      ),
      backgroundColor: Colors.purple,
      body: Image(
        fit: BoxFit.cover, 
        image: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD-hdba-3Zk_ttQQw&usqp=CAU'),
      ),
    )
  )
);

But it does not seem to work. Please help

score 2 · Accepted Answer · answered Oct 13 '20 at 06:46

2

You can copy paste run full code below
You can directly set width and height to window.physicalSize.width and window.physicalSize.height
And you can use BoxFit.fill, see effect below

Image(
    fit: BoxFit.fill,
    width: window.physicalSize.width,
    height: window.physicalSize.height,

working demo

full code

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text("I am rich"),
        ),
        backgroundColor: Colors.amberAccent,
      ),
      backgroundColor: Colors.purple,
      body: Image(
        fit: BoxFit.fill,
        width: window.physicalSize.width,
        height: window.physicalSize.height,
        image: NetworkImage(
            'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD-hdba-3Zk_ttQQw&usqp=CAU'),
      ),
    )));

answered Oct 13 '20 at 06:46

chunhunghan

51,087
5
102
120

Exactly what I needed. Thought only boxfit was enough and I was doing it wrong. Thanks for this! – shankyyyyyyy Oct 13 '20 at 09:53
Hey looks like there is no "window" class. It is not getting recognised in mine – shankyyyyyyy Oct 13 '20 at 10:00
1

@shankyyyyyyy, did you import dart:ui, what is your flutter version? – chunhunghan Oct 15 '20 at 00:39
Omg my bad. Did not import dart.ui. It is working now – shankyyyyyyy Oct 15 '20 at 08:02

Akif · Answer 2 · 2020-10-13T06:11:56.387

You can use Image.network instead Image widget, as mentioned in official document. Or, you can add height property to image.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
       body: Image(
        height: double.infinity,
        fit: BoxFit.cover,
        image: NetworkImage(
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD-hdba-3Zk_ttQQw&usqp=CAU',
        ),
      ),
      ),
    );
  }
}

score 1 · Answer 3 · answered Oct 13 '20 at 06:18

Use MediaQuery for this,it will set the image based on the screensize of phone

body: Center(
        child: Image.network(
          'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWqFc0Y7fRegMPpHoqNmD- hdba-          3Zk_ttQQw&usqp=CAU',
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          fit: BoxFit.fill,
        ),
      ),

Flutter : Fill the image over the body

3 Answers3