Flutter DrawerHeader // 如何去掉分隔符

Question

我是第一次设计抽屉，DrawerHeader 显然带有一条灰线作为分隔线，我想摆脱它，但我不知道如何摆脱它。

代码在这里（为便于阅读而编辑），截图如下：

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),
      ],
    ),
  ),
);

我无法通过 google 找到解决方案；也许你们中有人知道更多？另外，真的没有那么多要说的了。有一条灰线。如何摆脱它？但是算法不会让我 post 直到我写更多与代码相关的文本。不好意思让你看了。

Answer 1

我建议您完全删除该小部件。毕竟，如果您不想要分隔线，那么拥有它就没有意义。请改用 Padding 小部件（如果您想保留该填充）

Answer 2

您可以使用装饰轻松修改它。看例子：

DrawerHeader(
        decoration: BoxDecoration(
          border: Border(
            bottom: Divider.createBorderSide(context,
                color: Colors.red, width: 2.0),
          ),
        ),
        child: Text('Hello World'),
      )

Answer 3

有一个名为 dividerColor 的主题属性，将其分配给抽屉（下面代码中的示例），然后他们在 Material 主题数据中更改它。

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

这里是如何改变 dividerColor 属性值：

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

Flutter DrawerHeader // 如何去掉分隔符

Flutter DrawerHeader // How to get rid of divider

drawer

navigation-drawer

flutter

flutter-layout