如何在Flutter应用中添加背景图片？

Question

我正在尝试为我的Flutter应用程序添加背景图像，并且已经查看了所有类似的SO问题。 应用程序正常运行，但图像没有显示。

这是我的小部件代码：

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
        actions: <Widget>[
          new IconButton(icon: const Icon(Icons.list), onPressed: _loadWeb)
        ],
      ),
      body: new Stack(
        children: <Widget>[
          Container(
            child: new DecoratedBox(
              decoration: new BoxDecoration(
                image: new DecorationImage(
                  image: new AssetImage("images/logo.png"),
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ),
          Center(
            child: _authList(),
          )
        ],
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: getFile,
        tooltip: 'Select file',
        child: Icon(Icons.sd_storage),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    ));
  }

这个应用程序正常运行，堆栈上的第二个小部件是一个 listView，工作正常，但图像未显示。

有什么想法吗？

- fccoelho

Answer 1

Scaffold 不支持背景图像的概念。您可以给 Scaffold 设置透明颜色，将其放在一个 Container 中，并使用 decoration 属性来引入所需的背景图像。应用栏也是透明的。

Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("images/logo.png"), fit: BoxFit.cover)),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.transparent,
            title: Text('My App'),
            centerTitle: true,
            leading: IconButton(
                icon: Icon(
                  Icons.list,
                  color: Colors.white,
                ),
                onPressed: () {}),
          ),
        ),
      ),
    );
  }

- flutter

---

谢谢！它运行得很好。我还向容器添加了颜色，以避免我的图像放置在黑色背景上。 - fccoelho

Answer 2

将BoxDecoration作为Container的decoration属性：

  Container(
    decoration: new BoxDecoration(
      image: new DecorationImage(
        image: new AssetImage("images/logo.png"),
        fit: BoxFit.fill,
      ),
    ),
  ),

- Vinicius Pinto

Answer 3

    return MaterialApp(
      title: "MoonLight",
      home: Container(
        decoration:new BoxDecoration(
            image:  new DecorationImage(
              image: new AssetImage("graphics/moon.jpg"),
              fit: BoxFit.cover,)
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
        ),
      ),
    ),

- Yassine Laaskri

---

欢迎来到 Stack Overflow！请考虑格式化您的回答，并添加解释，以便观众可以理解您的代码是如何解决问题的。 - Kevin

请编辑您的答案并提供简要描述，因为StackOverflow会将没有简要说明的答案放在低质量帖子审核队列中，以确定是否应该删除...原因是成千上万的人匆忙浏览答案，以找到最好的解决方案，如果他们不得不花费大量时间研究答案，才能弄清楚它是否真正是他们需要的答案，并且必须阅读问题、反向工程您的答案并可能阅读语言文档，以确定您的修复解决了什么问题或如何运作。 - clearlight

Answer 4

Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      decoration: BoxDecoration(
          color: Colors.white,
          image: DecorationImage(
              image: AssetImage("asset/images/image.png"),
              fit: BoxFit.cover)),
      child: Scaffold(
        backgroundColor: Colors.transparent,
      ),
    );
  }

使用此选项将不会有黑色背景，而是透明的背景。

- Vaibhav Pathak

Answer 5

使用 DecoratedBox：

@override
Widget build(BuildContext context) {
  return DecoratedBox(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("your_asset"),
        fit: BoxFit.cover,
      ),
    ),
    child: //...,
  );
}

- CopsOnRoad