The right way to add background image in flutter

Hi Guy’s Welcome to Proto Coder Point. In this flutter article let’s learn how to set background image in flutter.

Preventing moving background image in flutter

If you have a TextField that open a keyboard then the background image will auto resize and move a bit above keyboard which don’t look good, so to solve it we can wrap Scaffold widget with container & in then container widget by using decoration we can add background image (Refer: As done in below snippet code), & then In scaffold widget make sure to set background color to transparent(so that background image is visible).

Note: I have used NetworkImage, but in real time app, it better to make use of AssetImage if your background in flutter app is static.

Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
            'https://images.pixexid.com/green-silhouette-mobile-wallpaper-hd-scpc9x4o.jpeg'
          ),
          fit: BoxFit.cover
        )
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
          appBar: AppBar(
             title: Text('Add Background image flutter'),
          ),
        body: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.all(30),
          child: Column(
            children: const [
              TextField(
                decoration: InputDecoration(
                  hintText: 'Enter Email',
                  filled: true,
                  fillColor: Colors.white
                ),
              ),
              SizedBox(height: 20,),
              TextField(
                decoration: InputDecoration(
                    hintText: 'Enter Password',
                    filled: true,
                    fillColor: Colors.white
                ),
              ),
              SizedBox(height: 20,),
              ElevatedButton(
                onPressed: null,
                child: Text("Submit"),
              )
            ],
          ),
        ),
      ),
    );

Complete Source Code

The Below Code (Complete Source Code) will set a background image in flutter & darken the background image and apply gradient effect on top of flutter background image.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
            'https://images.pixexid.com/green-silhouette-mobile-wallpaper-hd-scpc9x4o.jpeg'
          ),
          fit: BoxFit.cover
        )
      ),
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.center,
            end: Alignment.bottomCenter,
            colors: [
              Colors.black12,
              Colors.red.shade100
            ]
          )
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
            appBar: AppBar(
               title: Text('Add Background image flutter'),
            ),
          body: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(30),
            child: Column(
              children: const [
                TextField(
                  decoration: InputDecoration(
                    hintText: 'Enter Email',
                    filled: true,
                    fillColor: Colors.white
                  ),
                ),
                SizedBox(height: 20,),
                TextField(
                  decoration: InputDecoration(
                      hintText: 'Enter Password',
                      filled: true,
                      fillColor: Colors.white
                  ),
                ),
                SizedBox(height: 20,),
                ElevatedButton(
                  onPressed: null,
                  child: Text("Submit"),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}