CODEWITHSUNDEEP
flutterflutter-layout
user2570135
user2570135

Reputation: 3009

Add background image in flutter

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

enter image description here

Upvotes: 6

Views: 16153

Answers (3)

Oprimus
Oprimus

Reputation: 1898

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.

Upvotes: 2

Tahseen Quraishi
Tahseen Quraishi

Reputation: 1553

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
            ),)),
            )
        );
      }
    }

enter image description here

Upvotes: 15

Akio Alex
Akio Alex

Reputation: 316

Try this;

Widget build(BuildContext context) {
return Scaffold(
  body: Stack(
    fit: StackFit.expand,
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
            image: new DecorationImage(
                image: new AssetImage("assets/splash.png"),
                fit: BoxFit.cover
            )
        ),
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.only(bottom: 150.0),
        child: JumpingDotsProgressIndicator(
          fontSize: 50.0,
          numberOfDots: 4,
          dotSpacing: 2.0,
          color: Colors.white,
          milliseconds: 400,
        ),
      ),

    ],
  ),
);
}

You can customize child section.

Upvotes: 0

Related Questions