Как сделать прозрачный Навигационный ящик моего приложения Flutter?

Question

Я создал собственное Android-приложение с прозрачным навигационным блоком.Меня попросили создать то же самое приложение, используя Flutter, и я дошел до того, что хотел бы реализовать прозрачный навигационный ящик.Как сделать прозрачный Навигационный ящик моего приложения Flutter, потому что я боролся с этим?Я уже пробовал

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

Панель навигации просто остается белой.Я искал решение для этого и не могу найти его.Любая помощь будет оценена.Я прикрепил изображения Native App с прозрачным ящиком и версию 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

используйте прозрачный цвет, как вы делаете сейчас, но также и в виджете ящика используйте стек и внутри него сделайте первый виджет фоновым фильтром, вам нужно будет импортировать 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: (){

                            }
                        )
                    ]
                )
            ]
        )
    );
}

Answer 3

После долгих раздумий мне удалось найти решение.Я отредактировал ThemeData и добавил цвет холста, как описано ниже

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

Это не лучший способ сделать это, это скорее обходной путь, чем что-либо.

Визуальное представление