Make fullscreen image in Flutter

In modern UI, you see a lot of mobile apps with fullscreen image design style, and you should know how to do it it. I will show you how to make fullscreen image in Flutter through this post.

Fullscreen image in Flutter

To achieve this, you will need to apply the decoration property on Container.

Since there are many type of decoration, we will use BoxDecoration and apply a DecorationImage with a BoxFit.cover.

So the final code to make fullscreen image in Flutter looks pretty simple.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: FullScreenPage(),
  ));
}

class FullScreenPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage('https://images.unsplash.com/photo-1547665979-bb809517610d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80'),
          fit: BoxFit.cover
        ) ,
      ),
    );
  }
}

In the sample code above, I load image from an URL (credited to author at Unsplash), and display it. Certainly, you can load image from anywhere you want.

Rebuild the code or via hot-reloading, you will see:

Summary

Fairly simple and straight-forward, you have a fullscreen image page in Flutter with several lines of code.

The code demo for this post is here https://github.com/petehouston/flutter-tips/tree/master/make-fullscreen-image

Have fun 🙂