直播app開發，flutter 狀態列 AppBar 設定透明和半透明

直播app開發，flutter 狀態列 AppBar 設定透明和半透明

一、設定AppBar 狀態列半透明

在AppBar 中，設定狀態列全透明需要設定兩個屬性：

透過設定 backgroundColor 屬性為完全透明 (Colors.transparent) 或半透明（不透明度小於 1 的顏色）

透過設定 elevation 屬性設定為零以移除陰影（預設情況下，Flutter 中的材質應用欄有陰影）

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

 

二、設定AppBar 狀態列透明

上面我們設定了狀態列為半透明的狀態，那麼要設定狀態列全透明的話，只有要把appbar 元件的 backgroundColor 設定為透明（transparent）就可以了。

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

三、帶有顏色漸變的半透明狀態列

前面記錄狀態列透明和半透明的設定，那麼如果產品突然抽風，需要帶有漸變色的透明狀態列，我們該怎麼辦呢？這裡我們就需要使用到 flexibleSpace 屬性的設定了，我們只需要自定義一個container 就可以實現。

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

 以上就是 直播app開發，flutter 狀態列 AppBar 設定透明和半透明，更多內容歡迎關注之後的文章