Flutter DrawerHeader // How to get rid of divider-CodePudding

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.

CodePudding user response：

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'),
      )

CodePudding user response：

I suggest you remove the widget altogether. After all, there is no point in having it if you don't want the divider. Use a Padding widget instead (if you want to keep that padding there)

CodePudding user response：

There is a Theme property wit the name dividerColor, assing it to the Drawer (example in code below) and them change it in the Material theme data.

DrawerHeader(
        padding: const EdgeInsets.fromLTRB(0, 74, 0, 0),
        decoration: BoxDecoration(
          color: const Color(0xFF303030),
          border: Border(bottom: BorderSide(color: Theme.of(context).dividerColor)) // <--- use the global theme to change the dividerColor property 
        ),
        child: Column(
          children: [
            Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const SizedBox(
                    width: 67,
                  ),
                  GestureDetector(
                    onTap: () {
//                       toggleDevMode();
                    }, //selectPage(4),
                    child: const Text(
                      'LOGO',
                      style: TextStyle( color: Colors.green )
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

Here how to change the dividerColor property value:

MaterialApp(
        theme: ThemeData(
          dividerColor: Color(0xFF303030) // change it with the background color
        ),
      ),