Set background image to Flutter App

Applying a nice background image will help to give a unique brand identity as well as improve the look and feel of the app.

But when adding background image there will be some issue which you face.

As first lets discuss about how to add background image first and fix the common issue like resize image when input fields kind of stuff in later.

First create a folder in root heirarchy and name it as a images. Then add your image to that folder.

Next, open the pubspec.yaml file and specify the asset which you are going to use. Add assets under the flutter section and specify your image path.

    
        flutter:
          uses-material-design: true
        
          assets:
            - images/app_bg.jpg
    

Now you can use that image inside your flutter app.

To add the image as a background you can set the decoration for body container. When setting decoration you need to set fit type as a BoxFit.Cover and set constraints to expanding to cover the entire screen.

    
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Material App',
        home: Scaffold(
            appBar: AppBar(
              title: Text('Background'),
            ),
            body: Container(
                constraints: BoxConstraints.expand(),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("images/app_bg.jpg"),
                        fit: BoxFit.cover)),
                child: TextField(decoration: InputDecoration(fillColor: Colors.amber,filled: true),))));
  }
}
    
flutter background image

Set plain colour for background

You can set plain background by setting colour for backgroundColor property in Scaffold widget.

    
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Material App',
        home: Scaffold(
            backgroundColor: Colors.greenAccent ,
            resizeToAvoidBottomInset: false,
            appBar: AppBar(
              title: Text('Background'),
            ),
            body: Container()));
  }
}
    
set background colour flutter app

Background resize issue when the keyboard appears

Now you can add TextField widget inside the container. When to focus the input fields, you can see the background image get resize to available space. If you are cool with this behaviours there is no issue. If not there is a small hack to fix this issue.

flutter background resize issue fix

This happen because when keyboard appear it resize the element to make sure there is no overlapping element with keyboard. Otherwise user will not be able to see some input element when keyboards appear. 

But you can stop this behaviour by setting resizeToAvoidBottomInset property to the false inside scaffold. But You have to careful when setting this to false. After that the window not get resize and need to careful about the widget which is in the bottom. 

flutter background resize
    
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Material App',
        home: Scaffold(
            resizeToAvoidBottomInset: false,
            appBar: AppBar(
              title: Text('Background'),
            ),
            body: Container(
                constraints: BoxConstraints.expand(),
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("images/app_bg.jpg"),
                        fit: BoxFit.cover)),
                child: TextField(decoration: InputDecoration(fillColor: Colors.amber,filled: true),))));
  }
}
    
You Will Like Also