将背景图片扩展至应用栏 Flutter app答案

【问题标题】：Extend the background image to the app bar Fluuter app将背景图片扩展至应用栏 Flutter app
【发布时间】：2020-12-09 15:15:39
【问题描述】：

我想知道如何将背景图像扩展到应用栏。现在背景照片在应用栏附近停止，应用栏是透明的。

        appBar: new AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          iconTheme: new IconThemeData(color: Color(0xFF18D191)),
        ),
    body: Container(
    decoration: BoxDecoration(
    image: DecorationImage(
    image: AssetImage('images/surf.jpg'),
    fit: BoxFit.cover,
    ),
    ),```

【问题讨论】：

为什么appbar 是透明的，而且里面没有任何内容？
只有后退箭头，抱歉我还在学习中

标签： flutter flutter-layout appbar

【解决方案1】：

很遗憾，我做不到:(

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0.0,
          iconTheme: new IconThemeData(color: Color(0xFF18D191)),
        ),
    body: Container(
    decoration: BoxDecoration(
    image: DecorationImage(
    image: AssetImage('images/surf.jpg'),
    fit: BoxFit.cover,
    ),
    ),
        child: Container(
          width: double.infinity,
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              new StakedIcons(),
              new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 8.0, bottom: 80.0),
                    child: new Text(
                      "Surf Spots",
                      style: new TextStyle(fontSize: 30.0),
                    ),
                  ),
                ],
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
                child: new TextField(
                  decoration: new InputDecoration(labelText: 'Email'),
                ),
              ),
              new SizedBox(
                height: 25.0,
              ),
              Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
                child: new TextField(
                  obscureText: true,
                  decoration: new InputDecoration(labelText: 'Password'),
                ),
              ),
              new Row(
                children: <Widget>[
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 20.0, right: 5.0, top: 10.0),
                      child: GestureDetector(
                        onTap: () {
                        Navigator.push(context, MaterialPageRoute(
                          builder: (context) => HomePage ()
                        ));
                        },
                        child: new Container(
                          alignment: Alignment.center,
                          height: 60.0,
                          decoration: new BoxDecoration(
                              color: Color(0xFF18D191),
                              borderRadius: new BorderRadius.circular(10.0)),
                          child: new Text("Login",
                              style: new TextStyle(
                                  fontSize: 20.0, color: Colors.white)),
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 10.0, right: 10.0, top: 10.0),
                      child: new Container(
                        alignment: Alignment.center,
                        height: 60.0,
                        child: new Text("Forgot Password",
                            style: new TextStyle(
                                fontSize: 17.0, color: Color(0xFF18D191))),
                      ),
                    ),
                  )
                ],
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(bottom: 50.0),
                      child: new Text("Create a New Account", style: new TextStyle(
                          fontSize: 17.0, color: Color(0xFF18D191), fontWeight: FontWeight.bold)),
                     ),
                    ],
                    ),
                  ),
                  ],
                ),
              ),
    ),
          );
  }
}```

【讨论】：

【解决方案2】：

从脚手架的appBar参数中移除AppBar。

用Stack包裹脚手架的主体，并在底部放置相同的AppBar

body:Stack(
children:<Widget>[
  Container(
     decoration: BoxDecoration(
     image: DecorationImage(
            image: AssetImage('images/surf.jpg'),
            fit: BoxFit.cover,
     ),
  ),
  
 Positioned(
  top: 0.0,
  left: 0.0,
  right: 0.0,
  child:AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0.0,
      iconTheme: new IconThemeData(color: Color(0xFF18D191)),
    )
  )
  ]
 )

【讨论】：