dart 如何使Flutter应用的导航抽屉透明?

vsaztqbk  于 2023-02-27  发布在  Flutter
关注(0)|答案(6)|浏览(274)

我已经构建了一个带有透明导航抽屉的原生Android应用程序。我被要求使用Flutter构建相同的应用程序,我已经到了想要实现透明导航抽屉的地步。我一直在努力实现这一点,如何让Flutter应用程序的导航抽屉透明呢?我已经尝试过了

drawer: Drawer(
          child: Container(
            color: Colors.transparent,)),

导航抽屉仍然是白色的。我一直在寻找解决这个问题的方法,但找不到。任何帮助都将不胜感激。我已经附上了带有透明抽屉的原生应用程序和带有白色导航抽屉的Flutter版本的图片

w1e3prcc

w1e3prcc1#

我认为有一个更好的方法可以做到这一点,而不会弄乱整个画布上的应用程序。既然你想它专门为抽屉,尝试这种方法。

Scaffold(
   drawer: Theme(
      data: Theme.of(context).copyWith(
       // Set the transparency here
       canvasColor: Colors.transparent, //or any other color you want. e.g Colors.blue.withOpacity(0.5)
      ),
      child: Drawer(
          // All other codes goes here. 
       )
    )
 );
g6baxovj

g6baxovj2#

使用透明色就像你现在正在做的一样但是也在抽屉小部件中使用一个堆栈并且在它里面使第一个小部件成为backdropfilter,你将需要导入dart:ui.这里是一个例子

//import this library to use the gaussian blur background
import 'dart:ui';

Scaffold(
    appBar: AppBar(
        title: Text('Title'),
    ),
    drawer: Theme(
        data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
        child: sideNav()),
        body: Text('Hello Body'),
),

Drawer sideNav(){
    return Drawer(
        child: Stack(
            children: <Widget> [
                //first child be the blur background
                BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), //this is dependent on the import statment above
                    child: Container(
                        decoration: BoxDecoration(color: Color.grey.withOpacity(0.5))
                    )
                ),
                ListView(
                    padding: EdgeInsets.zero,
                    children: <Widget>[
                        DrawerHeader(
                            child: Text('Hello Drawer Title')
                        ),
                        ListTitle(
                            leading: Icon(Icons.dashboard, color: Colors.white)
                            title: "Dashboard"
                            onTap: (){

                            }
                        )
                    ]
                )
            ]
        )
    );
}
yiytaume

yiytaume3#

经过多次修改,我终于找到了一个解决方案。我编辑了ThemeData,并添加了画布颜色,如下所述

theme: new ThemeData(
   canvasColor: Colors.transparent
 ),

这不是最好的方法,它更多的是一种变通方法。
Visual Representation

bnl4lu3b

bnl4lu3b4#

Screenshot Of drawer top whitespace
如果你来到这里并找到了如何删除抽屉和状态栏上方的白色的解决方案,那么只需使用SingleChildScrollView ---〉Column()。因为如果你添加了类似ListView()的东西,那么空白将出现在你的抽屉上方,这是如此令人恼火。我知道这不是这个问题的实际解决方案,但它将帮助需要它的人。

vkc1a9a2

vkc1a9a25#

只需要用不透明度包裹抽屉,并给予不透明度一个值(介于0和1之间)

Opacity(
  opacity: 0.7,
  child: Drawer(//your drawer here),
),
2w3rbyxf

2w3rbyxf6#

drawer: Drawer(
backgroundColor: Colors.white.withOpacity(0.5), // or use Colors.transparent
),

相关问题