脚手架的背景图像答案

【问题标题】：Background Image for Scaffold脚手架的背景图像
【发布时间】：2019-06-11 23:55:48
【问题描述】：

我想将图像设置为 Scaffold 的背景颜色。设置 AppBar 和底栏时，使用 Container 的装饰作为脚手架的 body 不会覆盖整个屏幕。

我想全屏显示背景。下面是我的脚手架代码：

Scaffold(
      backgroundColor: Image.asset('images/background.png').color,
      body: Container(
        decoration: defaultAppBoxDecoration(),
      ),
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        title: Text('Title here', style: TextStyle(color: Colors.teal),),
        leading: IconButton(
          icon: Image.asset('images/star.png'),
          onPressed: () {},
        ),
        actions: <Widget>[
          IconButton(icon: Image.asset('images/star.png')),
                  //  IconButton(icon: Image.asset('images/grid.png')),

        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        child:           IconButton(icon: Image.asset('images/star.png')),
      ),
      bottomNavigationBar: Container(
        padding: EdgeInsets.only(left: 4.0, right: 4.0),
        height: 44.0 + MediaQuery.of(context).padding.bottom,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
                      IconButton(icon: Image.asset('images/star.png')),
          IconButton(icon: Image.asset('images/star.png')),

          ],
        ),
      ),
    );

【问题讨论】：

标签： flutter scaffold

【解决方案1】：

设置backgroundColor:Colors.transparent 是您缺少的关键。

【讨论】：

【解决方案2】：

您可以将 Scaffold 放置在带有背景图像的 Container 中，并为 Scaffold 的主体使用透明颜色，如下所示：

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("assets/bg.jpg"),
      fit: BoxFit.cover,
    ),
  ),
  child: Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    backgroundColor: Colors.transparent,
    body: Container(),
),);

【讨论】：

【解决方案3】：

尝试使用Stack 检查以下示例：

  @override
    Widget build(BuildContext context) {
      return Stack(
        children: <Widget>[
          Image.asset(
            "resources/background.png",
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            fit: BoxFit.cover,
          ),
          Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                backgroundColor: Colors.transparent,
                elevation: 0.0,
              ),
              bottomNavigationBar: Container(
                padding: EdgeInsets.only(left: 4.0, right: 4.0),
                height: 44.0 + MediaQuery.of(context).padding.bottom,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    IconButton(icon: Icon(Icons.star)),
                    IconButton(icon: Icon(Icons.star)),
                  ],
                ),
              ),
              body: Text("Hello world"))
        ],
      );
    }

【讨论】：

Scaffold.backgroundColor 是我错过的。谢谢
它可以工作，但它会闪烁一会儿然后加载图像。