Question

我已经构建了一个本机Android应用程序，该应用程序具有透明的导航抽屉。我被要求使用Flutter构建相同的应用程序，而现在我想要实现一个透明的导航抽屉。因为一直为此而努力，如何使Flutter应用程序的导航抽屉透明？我已经尝试过

[1] 54003   994

导航抽屉仅保持白色。我一直在寻找解决方案，但找不到。任何帮助，将不胜感激。我已经将Native App的图像附加到透明抽屉中，并将Flutter版本的图像附加到白色导航抽屉中

Native

Flutter

Answer 1

我认为有一种更好的方法，而不会弄乱应用程序上的整个画布。由于您要专门用于抽屉，因此请尝试这种方法。

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. 
       )
    )
 );

Answer 2

经过反复修改后，我设法找到了解决方案。我编辑了ThemeData并添加了如下所述的画布颜色

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

这不是执行此操作的最佳方法，它比任何方法都更可行。

Visual Representation

Answer 3

像现在一样使用透明颜色，但是在抽屉小部件中使用堆栈，并在其中使第一个小部件成为背景过滤器，您将需要导入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: (){

                            }
                        )
                    ]
                )
            ]
        )
    );
}

如何使Flutter应用程序的导航抽屉透明？

3 个答案: