Search code examples
flutterflutter-layoutflutter-design

how to add a background image in flutter?


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

Solution

  • 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.