Flutter, material, remove faint line under DrawerHeader

user_4642520 0
Viewed 376

The DrawerHeader widget produces a faint line below the DrawerHeader widget. How can I remove this? I've tried the decoration options and the only way I've found so far is to switch from a DrawerHeader to a custom widget, which I'd like to avoid if possible.

The following is code from the Flutter.dev guide, with the DrawerHeader color set to white, so the line is visible.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: const Center(
        child: Text('My Page!'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.white,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Item 1'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('Item 2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}

EDIT: It seems to be added from this line in the drawer_header.dart (std lib) file. Line 85. I don't see anyway to disable it.

        border: Border(
          bottom: Divider.createBorderSide(context),
        ),
flutter
3 Answers

EDIT: simplified the following answer after finding out about the Theme widget, which can be used to apply themes granularly to a sub-part of the UI.

Problem Statement

A DrawerHeader is just a Container with a child AnimatedContainer. Both of those have a decoration property.

We can modify the decoration property of the child (since it receives the decoration we set to our DrawerHeader), but not that of the parent, inside of which the faint line is actually added as a Divider widget with a bottom border.

However, both the color & width of that border uses the context's DividerTheme or Theme (in that order), which we can set via global or local themes.

Solution

See this answer.

user_35597240

to make the divider invisible, perhaps make the decoration transparent:

decoration: BoxDecoration(
    color: Colors.transparent
)

May want to make sure you're on the latest version also.

user_2353540

Remove the DrawerHeader and place a container instead. It works the same way but without a line.

drawer: Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  Container(
                    decoration: const BoxDecoration(
                      color: Colors.white,
                    ),
                    child: const Text('Drawer Header'),
                    height: 220,

                  ),

                  ListTile(
                    title: const Text('Item 1'),
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                  ListTile(
                    title: const Text('Item 2'),
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                ],
              ),
            ),

(I don't recommend it though. Try a different user interface widget. (Not Drawer)).

user_166735570
Related