如何在颤动中添加背景图像？答案

【问题标题】：how to add a background image in flutter?如何在颤动中添加背景图像？
【发布时间】：2021-06-22 07:47:29
【问题描述】：

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

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

【问题讨论】：

您是否想知道一般如何添加图片背景或如何将图片背景添加为应用的默认主题？
您好！我正在尝试将图像背景添加为默认主题
检查我为此提供的解决方案。

标签： flutter flutter-layout flutter-design

【解决方案1】：

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

如果您不知道该怎么做，那么我会在这里查看类似的答案：How do I Set Background image in Flutter?

我还会查看 Flutter 组合文档。

【讨论】：

【解决方案2】：

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

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

以下是添加了包装小部件 (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 提供的其他额外功能，例如渐变等。这可以充当主题包装器，而不是每次在每个页面上都定义图像，您可以简单地包装带有您的主题包装小部件的页面。

【讨论】：