How to Set Image as Background for a Screen in Flutter

As a mobile app developer, I always want to make each screen of my apps beautiful. In some cases, I prefer to set an image as background to screens such as splash screen. In this Flutter tutorial, let’s check how to set image background in flutter.

Here, I am explaining two ways to set an image background. The first way is by using the Stack widget. The Stack widget helps us to create multiple layers of widgets which overlay each other in a given order.

Stack(
  children: <Widget>[
    Bottom(),
    Middle(),
    Top(),
  ],
),

Here, the Bottom widget will be the bottom most widget. The Middle widget overlays over Bottom widget. The Top widget appears over both Bottom and Middle widgets.

The trick is to use image as the bottom widget of the Stack. Place other widgets in the screen over the image widget. Go through the example given below for full idea.

import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Image Background Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  FlutterExample({Key key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: <Widget>[
        Image.network(
          'https://cdn.pixabay.com/photo/2015/03/26/09/41/phone-690091_960_720.jpg',
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          fit: BoxFit.cover,
        ),
        Center(
          child: Text("This is a Flutter Example",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 28.0,
                    color: Colors.red)),
          ),
      ],
    ));
}

}

Following is the output of the example.

Another way to make image as background is by using Container and BoxDecoration widgets. The following is an example of adding image background in flutter using BoxDecoration widget.

import 'package:flutter/material.dart';
void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Image Background Example',
      home: FlutterExample(),
    );
  }
}

class FlutterExample extends StatelessWidget {
  FlutterExample({Key key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          constraints: BoxConstraints.expand(),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
          'https://cdn.pixabay.com/photo/2015/03/26/09/41/phone-690091_960_720.jpg',
        ),
              fit: BoxFit.cover,),),
        child: Center(
          child:Text("Flutter Example",
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 28.0,
                    color: Colors.red)),)
          
    ));
}

}

Following is the output of this Flutter example.

I hope these tutorials will help you. Stay tuned for more flutter tutorials.

Leave a Comment

Your email address will not be published. Required fields are marked *