How do I make the Navigation Drawer of my Flutter app transparent?
I think there's a better way of doing this without messing up the entire canvases on the app. Since you want it specifically for the drawer, try this approach.
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.
)
)
);
After much tinkering around I managed to find a solution. I edited the ThemeData and added a canvas color as described below
theme: new ThemeData(
canvasColor: Colors.transparent
),
This isn't the best way to do this, it is more of a workaround than anything.
Visual Representation
use the transparent color like you are currently doing but also in the drawer widget use a stack and inside it make the first widget a backdropfilter, you will need to import dart:ui. here is an example
//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: (){
}
)
]
)
]
)
);
}