Flutter DrawerHeader // Как избавиться от разделителя
Я впервые проектирую ящик, и 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; может кто из вас знает больше? Кроме того, на самом деле больше нечего сказать. Есть серая полоса. Как избавиться от этого? Но алгоритм не позволит мне публиковать, пока я не напишу больше, чтобы иметь больше текста по отношению к коду. Извините, что заставил вас прочитать это.
Ответы 3
Я предлагаю вам удалить виджет вообще. В конце концов, нет смысла иметь его, если вам не нужен разделитель. Вместо этого используйте виджет заполнения (если вы хотите сохранить это дополнение)
Нет, я не думаю, что есть способ сделать это. Если хотите, можете взглянуть на документацию по нему: api.flutter.dev/flutter/material/DrawerHeader-class.html
Вы можете легко изменить его с помощью украшения. См. пример:
DrawerHeader(
decoration: BoxDecoration(
border: Border(
bottom: Divider.createBorderSide(context,
color: Colors.red, width: 2.0),
),
),
child: Text('Hello World'),
)
Существует свойство Theme с именемdivirColor, присваивая его ящику (пример в коде ниже), и они изменяют его в данных темы материала.
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 )
),
),
],
),
),
],
),
),
Вот как изменить значение свойстваdivirColor:
MaterialApp(
theme: ThemeData(
dividerColor: Color(0xFF303030) // change it with the background color
),
),
Эй, в конце концов я хочу использовать разделитель, а не тот, который указан в заголовке. Я думаю, что знаю, как добиться результата, вообще не используя заголовок, но это скорее объект обучения, чем все остальное. Есть ли способ стилизовать разделитель, с которым идет заголовок?