how to add a background image in flutter?

Question

I am trying to add a background image to my themedata, but i cant manage where to add it, my code looks like this. Please help. Thank you!

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Q App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xff145C9E),
        scaffoldBackgroundColor: Color(0xff1F1F1F),
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: Home.id,
      routes: {
        Home.id: (context) => Home(),
        Login.id: (context) => Login(),
        SignUp.id: (context) => SignUp(),
        RegisterAgree.id: (context) => RegisterAgree(),
        HomeInApp.id: (context) => HomeInApp(),
      },
      //home: Home(),
    );
  }
}

Do you wan't to know how to add an image background in general or how to add an image background as a default theme of your app ? — Sarvesh Dalvi, Mar 25 '21 at 13:48
Hello! I am trying to add an image background as default theme — power941, Mar 25 '21 at 13:51

score 0 · Accepted Answer · answered Mar 25 '21 at 13:57

To my knowledge, there is no current way to set a default background image using themeData. As backgroundImage is not a constructor value for themeData, it is currently not available. You can set a backgroundColor or scaffoldBackgroundColor, but that won't help you. I would suggest making a custom Scaffold Widget with a background image and apply it in all needed cases. If you'd like you can even wrap this around each page's widget in the routes, but this is not suggested.

If you don't know how to do this, then I would look at a similar answer here: How do I Set Background image in Flutter?

I would also look at the Flutter composition documentation.

score 0 · Answer 2 · edited Mar 25 '21 at 14:18

I was not able to find any property in ThemeData which can set a default background image and I don't think Material library provides a feature like that. Now what you can do is you can create your own Container wrapper to get the expected result.

Below is the default code without image :

Below is the same code with added wrapper widget (BodyWithBackgroundImage)

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child:  Page1(),
    );
  }
}



class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text("Hello World",style: TextStyle(color: Colors.yellowAccent),),),
    );
  }
}

Here Page1 is directly returned. Now to add a theme to it we can wrap it with another widget which will define the background image for your page.

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child:  BodyWithBackgroundImage(child: Page1()),
    );
  }
}



class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(child: Text("Hello World",style: TextStyle(color: Colors.yellowAccent),),),
    );
  }
}




class BodyWithBackgroundImage extends StatelessWidget {

  final Widget child;

  BodyWithBackgroundImage({this.child});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(image: AssetImage('assets/dota.png'),fit: BoxFit.cover),
      ),
      child: child,
    );
  }
}

This way you can not only add a background image but can also add other extra features provided by BoxDecoration like Gradient etc. This can act as a Theme wrapper as instead of defining the image every time on each page, your can simply wrap that page with your theme wrapper widget.

how to add a background image in flutter?

2 Answers2