如何在 flutter 中添加背景图片？

Question

我正在尝试将背景图片添加到我的主题数据，但我无法管理添加它的位置，我的代码看起来像这样。请帮忙。谢谢！

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

Answer 1

据我所知，目前没有使用 themeData 设置默认背景图像的方法。由于 backgroundImage 不是 themeData 的构造函数值，因此它目前不可用。您可以设置 backgroundColor 或 scaffoldBackgroundColor，但这对您没有帮助。我建议制作一个带有背景图像的自定义脚手架小部件，并将其应用于所有需要的情况。如果您愿意，您甚至可以将它包裹在路由中每个页面的小部件周围，但不建议这样做。

如果您不知道该怎么做，那么我会在这里查看类似的答案：

我还会看看 Flutter 组合文档。

Answer 2

我在 ThemeData 中找不到任何可以设置默认背景图像的属性，我认为 Material 库没有提供这样的功能。现在您可以做的是创建自己的容器包装器以获得预期的结果。

下面是没有图片的默认代码：

下面是添加了包装器小部件 (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),),),
    );
  }
}

这里直接返回Page1。现在要给它添加一个主题，我们可以用另一个小部件将其包装起来，该小部件将为您的页面定义背景图像。

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

这样您不仅可以添加背景图像，还可以添加 BoxDecoration 提供的其他额外功能，如渐变等。这可以充当主题包装器，而不是每次都在每个页面上定义图像，您可以只需用您的主题包装器小部件包装该页面即可。

如何在 flutter 中添加背景图片？

how to add a background image in flutter?

flutter

flutter-layout

flutter-design