使AppBar透明并显示设置为全屏的背景图像

Question

我在Flutter应用程序中添加了AppBar。我的屏幕已经具有背景图像，我不想在其中设置appBar颜色或不想为appBar设置单独的背景图像。

我也想向appBar显示相同的屏幕背景图像。

我已经尝试过将appBar颜色设置为透明，但是它显示的颜色像灰色。

示例代码：

appBar: new AppBar(
        centerTitle: true,
//        backgroundColor: Color(0xFF0077ED),
        elevation: 0.0,
        title: new Text(
            "DASHBOARD",
            style: const TextStyle(
                color:  const Color(0xffffffff),
                fontWeight: FontWeight.w500,
                fontFamily: "Roboto",
                fontStyle:  FontStyle.normal,
                fontSize: 19.0
            )),
      )

Answer 1

这现在由 Scaffold 支持（稳定版 - v1.12.13+hotfix.5）。

• 将 Scaffold 设置extendBodyBehindAppBar为 true，
• 将 AppBar 设置elevation为 0 以消除阴影，
• backgroundColor根据需要设置 AppBar透明度。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: Colors.red,
      appBar: AppBar(
//        backgroundColor: Colors.transparent,
        backgroundColor: Color(0x44000000),
        elevation: 0,
        title: Text("Title"),
      ),
      body: Center(child: Text("Content")),
    );
  }

Answer 2

您可以使用 Scaffold 的属性“ extendBodyBehindAppBar : true ” 不要忘记用 SafeArea 包裹孩子

  @Override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
          style: TextStyle(color: Colors.black),
        ),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/background/home.png'),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
            child: Center(
          child: Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Center(child: Text('Test')),
          ),
        )),
      ),
    );
  }

Answer 3

您可以使用Stack小部件来执行此操作。请遵循以下示例。

import 'package:flutter/material.dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context)
  {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
      ),
      home: new Home(),
      builder: (BuildContext context,Widget child){
        return Padding(
          child: child,
          padding: EdgeInsets.only(bottom: 50.0),
        );
      },
    );
  }
}


class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        new Container(
          height: double.infinity,
          width: double.infinity,
          decoration:new BoxDecoration(
            image: new DecorationImage(
              image: new AssetImage("images/jocker.jpg"),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: new AppBar(
            title: new Text("csd"),
            backgroundColor: Colors.transparent,
            elevation: 0.0,
          ),
          body: new Container(
            color: Colors.transparent,
          ),
        ),
      ],
    );
  }
}

Answer 4

可能有很多情况，比如你想保留AppBar还是不保留，是否想让状态栏可见，为此，你可以换行Scaffold.body，SafeArea如果你不想AppBar有任何阴影（不像红色）我在示例 2) 中提供，您可以将其颜色设置为Colors.transparent：

• 完整图像（无AppBar）

  

  Scaffold(
    extendBodyBehindAppBar: true,
    body: SizedBox.expand(
      child: Image.network(
        'https://wallpaperaccess.com/full/3770388.jpg',
        fit: BoxFit.cover,
      ),
    ),
  )
  

• 完整图像（带有AppBar）

  

  Scaffold(
    extendBodyBehindAppBar: true,
    appBar: AppBar(
      backgroundColor: Colors.transparent,
      shadowColor: Colors.red,
      title: Text('MyApp'),
    ),
    body: SizedBox.expand(
      child: Image.network(
        'https://wallpaperaccess.com/full/3770388.jpg',
        fit: BoxFit.cover,
      ),
    ),
  )
  

Answer 5

这些似乎都不适合我，我的事情是这样的：

return Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    backgroundColor: Colors.transparent,
    iconTheme: IconThemeData(color: Colors.white),
    elevation: 0.0,
    brightness: Brightness.dark,
  ),
  body: Stack(
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
                'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
            fit: BoxFit.cover,
          ),
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0, 100, 0, 0),
          child:
          // Column of widgets here...
        ),
       ),
     ],
   ),
 );

Answer 6

输出：

很多答案，但没有人解释为什么extendBodyBehindAppBar有效？之所以有效，是因为当我们指定extendBodyBehindAppBar为 true 时，小部件的主体的高度为AppBar，并且我们会看到覆盖该AppBar区域的图像。

简单示例：

Size size = MediaQuery.of(context).size;
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Container(
        // height: size.height * 0.3,
        child: Image.asset(
          'shopping_assets/images/Fruits/pineapple.png',
          fit: BoxFit.cover,
          height: size.height * 0.4,
          width: size.width,
        ),
      ),
    );

Answer 7

Scaffold(extendBodyBehindAppBar: true);

Answer 8

这就是我所做的并且正在起作用

这现在由 Scaffold 支持（稳定版 - v1.12.13+hotfix.5）。

将 Scaffold extendBodyBehindAppBar 设置为 true，将 AppBar 高度设置为 0 以消除阴影，根据需要设置 AppBar backgroundColor 透明度。

此致