I'm designing a drawer for the first time and the DrawerHeader apparently comes with a grey line as divider I want to get rid of, but I don't know how.
Code here (edited for readability), screenshot below:
return SizedBox(
width: 316.w,
child: Drawer(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 152.5,
child: DrawerHeader(
padding: EdgeInsets.fromLTRB(0, 74.h, 0, 0),
child: Column(
children: [
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
width: 67.w,
),
GestureDetector(
onTap: () {
toggleDevMode();
}, //selectPage(4),
child: Text(
'LOGO',
style: Provider.of<CustomTextStyle>(context)
.customTextStyle('Headline 3'),
),
),
],
),
),
],
),
),
),
//
SizedBox(height: 42.5.h),
//
navIcon(
labelText: 'HOME',
icon: Icon(Icons.home, size: 50.r),
index: 0),
//
SizedBox(height: 30.h),
//favorites
navIcon(
labelText: 'FAVORITES',
icon: Icon(Icons.favorite, size: 50.r),
index: 1),
//
SizedBox(height: 30.h),
//lookback
navIcon(
labelText: 'LOOKBACK',
icon: Icon(Icons.bar_chart, size: 50.r),
index: 2),
//
SizedBox(height: 30.h),
//info & support
navIcon(
labelText: 'INFO & SUPPORT',
icon: Icon(Icons.info, size: 50.r),
index: 3),
],
),
),
);
I couldn't find the solution by google; maybe one of you knows more? Also, there really isn't that much more to say. There is a grey line. How to get rid of it? But the algorythm won't let me post until I write more to have more text in relation to code. Sorry to make you read it.
You can easily modify it using the decoration. See the example:
DrawerHeader(
decoration: BoxDecoration(
border: Border(
bottom: Divider.createBorderSide(context,
color: Colors.red, width: 2.0),
),
),
child: Text('Hello World'),
)