Flutter Add Set Full Screen Background Image to Scaffold Container

Background image is used in many mobile applications to make the View beautiful. As we have already seen social apps is giving us the option to configure us background using your own images. In flutter the Scaffold widget directly dose not support background image customization but using Container widget as Root Parent widget we can easily put background image in activity screen. We have to use Box Decoration property with Decoration Image to put background image on whole layout screen. So in this tutorial we would Flutter Add Set Full Screen Background Image to Scaffold Container Widget Android iOS Example tutorial.

Contents in this project Flutter Add Set Full Screen Background Image to Scaffold Container Widget Android iOS Example:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() inbuilt method and here we would call our main MyApp class.

3. Create our main MyApp class extends with State less widget.

4. Creating Widget Build area in MyApp class. Now we would make Scaffold widget and put a Center Widget in it.

5. Creating a Container Widget in Center widget as Child. We would use this Container widget as Root Parent Widget and put all the widgets in its child.

  • constraints: BoxConstraints.expand() : is used to create container full screen with filled content.
  • BoxDecoration : Used to decorate the Container widget. We would use the image property of box decoration to set background image from URL resource.

6. Complete source code for main.dart file:

Screenshot:

Flutter Add Set Full Screen Background Image to Scaffold Container

One Comment

  1. Thanks for the solution to implement this!

Leave a Reply

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