直播app开发，flutter 状态栏 AppBar 设置透明和半透明

一、设置AppBar 状态栏半透明

在AppBar 中，设置状态栏全透明需要设置两个属性：

通过设置 backgroundColor 属性为完全透明 (Colors.transparent) 或半透明（不透明度小于 1 的颜色）

通过设置 elevation 属性设置为零以移除阴影（默认情况下，Flutter 中的材质应用栏有阴影）

Widget build(BuildContext context) {<br>    return Scaffold(<br>      appBar: AppBar(<br>        title: Text("tiger"),<br>        backgroundColor: Colors.green.withOpacity(0.6),<br>        elevation: 0.0,<br>      ),<br>      body: Image.asset("assets/images/back_img.png"),<br>    );<br>  }

二、设置AppBar 状态栏透明

上面我们设置了状态栏为半透明的状态，那么要设置状态栏全透明的话，只有要把appbar 组件的 backgroundColor 设置为透明（transparent）就可以了。

<br>Widget build(BuildContext context) {<br>    return Scaffold(<br>      extendBodyBehindAppBar: true,<br>      appBar: AppBar(<br>        title: Text("tiger"),<br>        backgroundColor: Colors.transparent,<br>        elevation: 0.0,<br>      ),<br>      body: Image.asset("assets/images/back_img.png"),<br>    );<br>  }<br> 

三、带有颜色渐变的半透明状态栏

前面记录状态栏透明和半透明的设置，那么如果产品突然抽风，需要带有渐变色的透明状态栏，我们该怎么办呢？这里我们就需要使用到 flexibleSpace 属性的设置了，我们只需要自定义一个container 就可以实现。

<br>Widget build(BuildContext context) {<br>    return Scaffold(<br>      extendBodyBehindAppBar: true,<br>      appBar: AppBar(<br>        title: Text("tiger"),<br>        actions: [<br>          TextButton.icon(<br>            onPressed: () {},<br>            icon: Icon(<br>              Icons.settings,<br>              color: Colors.white,<br>            ),<br>            label: Text(<br>              "设置",<br>              style: TextStyle(color: Colors.white),<br>            ),<br>          ),<br>        ],<br>        backgroundColor: Colors.transparent,<br>        elevation: 0.0,<br>        flexibleSpace: Container(<br>          decoration: BoxDecoration(<br>            gradient: LinearGradient(<br>              begin: Alignment.centerLeft,<br>              end: Alignment.centerRight,<br>              colors: [<br>                Colors.green.withOpacity(0.5),<br>                Colors.yellow.withOpacity(0.7),<br>                Colors.blue.withOpacity(0.6),<br>              ],<br>            ),<br>          ),<br>        ),<br>      ),<br>      body: Image.asset("assets/images/back_img.png"),<br>    );