如何将背景图像添加到颤振应用程序？答案

【问题标题】：How do I add a background image to flutter app?如何将背景图像添加到颤振应用程序？
【发布时间】：2019-05-27 03:01:15
【问题描述】：

我正在尝试将背景图片添加到我的 Flutter 应用程序中，并且我已经解决了关于 SO 的所有类似问题。应用程序 m 运行良好，但图像没有出现。

这是我的小部件代码：

  @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 正常工作，但图像未显示。

有什么想法吗？

【问题讨论】：

标签： dart flutter

【解决方案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: () {}),
          ),
        ),
      ),
    );
  }

【讨论】：

谢谢！它工作得很好。我还为容器添加了颜色以避免我的图像被放置在黑色背景上

【解决方案2】：

使用BoxDecoration 作为Container 的decoration 属性：

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

【讨论】：

【解决方案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,
        ),
      ),
    ),

【讨论】：

欢迎来到 Stack Overflow！请考虑格式化您的回复，并添加解释，以便查看者了解您的代码的作用以及它如何解决问题中提出的问题。
请编辑您的答案并提供简要说明，因为 StackOverflow 将没有简要说明的答案放在低质量帖子审核队列中，以查看是否应该删除它们...原因是成千上万的人浏览了答案急于找到最能解决他们问题的问题，如果他们必须花费大量时间研究答案以确定它是否真的是他们需要的答案，并且必须阅读问题，这会浪费很多人的时间，对您的答案进行逆向工程，并可能阅读语言文档以了解您的修复解决了什么问题或它是如何工作的。

【解决方案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,
      ),
    );
  }

使用这个它不会有黑色意味着透明背景。

【讨论】：

【解决方案5】：

使用DecoratedBox：

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

【讨论】：