Add background image in flutter

Question

I am trying to create the attached screen in Flutter. How do I add a background image and add the text at the specific location (ignore the white text box).

Thanks for your help

Answer 1

To add background image you have to use DecorationImage class and inside BoxDecoration.

 class Home extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return Scaffold(
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(image: AssetImage("assets/image1.jpg"), fit: BoxFit.cover),
            ),
            child: Center(child: Text('Welcome To',style: TextStyle(
              color: Colors.white,
              fontSize: 40.0
            ),)),
            )
        );
      }
    }

Answer 2

Also make sure to create an assets directory and add your image asset(s) to it, then update your pubspec.yaml file under "flutter:" as below with:

flutter:
  assets:
    - assets/splash.png

Where splash.png is your image asset. Or just use:

flutter:
  assets:
    - assets/

if you want the whole directory. If not, you'll just render a blank container.