Флаттер | Как сделать пользовательскую кнопку BottomNavigationBar во флаттере?
Я хочу сделать кнопку с текстом и значком внутри нее, с пользовательским цветом фона и пользовательской шириной. с фиксированной позицией (не прокручивается). не могли бы вы помочь мне, пожалуйста?
вот код:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
currentIndex: 0, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.red),
BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.yellow)
]
это только дает цвет для значка.
это то, что я хочу:
Попробуйте набрать BottomNavigationBarType.fixed
Куча ? может это фиксированное положение? Мистер @CopsOnRoad
Да, он будет в фиксированном положении.
хорошо, сэр, я попробую. значок кнопки обертывания в стеке, верно? @CopsOnRoad
Пожалуйста, дайте мне знать, если у вас есть какие-либо проблемы с предоставленным решением. Спасибо
Ответы 2
Вместо этого вы можете взглянуть на концепцию BottomAppBar.
Эта панель принимает любой виджет в качестве дочернего, а не только BottomNavigationBarItems.
Вы можете попробовать это:
BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: SizedBox(
height: 44,
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add, color: Colors.blue, size: 24),
Text("Add")
],
),
),
),
),
),
]
),
)
Расширенное на самом деле является началом одной из ваших пользовательских кнопок. Позвольте мне отредактировать мой ответ, чтобы он стал более ясным.
нет, это очень ясно и легко понять. спасибо за вашу доброту, чтобы помочь мне, сэр. благослови тебя бог :) @Robin Reiter
Ну вот
Widget build(context) {
return Scaffold(
bottomNavigationBar: Container(
height: 56,
margin: EdgeInsets.symmetric(vertical: 24, horizontal: 12),
child: Row(
children: <Widget>[
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.chat, color: Colors.white), Text("CHAT", style: TextStyle(color: Colors.white))],
),
),
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.notifications_active, color: Colors.white), Text("NOTIF", style: TextStyle(color: Colors.white))],
),
),
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.red,
child: Text("BUY NOW", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
),
),
],
),
),
);
}
Работайте красиво, сэр. это работает так хорошо. !! благослови вас господь. спасибо :) :) @CopsOnRoad
эй, сэр, @CopsOnRoad, я хочу спросить, может быть, это кажется тривиальным, но у меня действительно проблемы. У меня есть 2 виджета в строке, строка находится в столбце, а столбец находится в строке, как это ' row( ' ' column( ' ' row( ' ' text ' ' container ' Я хочу разделить текст и контейнеры, используя пробел между ними, но они все равно не хотят разделяться. есть предложения? вот скриншот: imgur.com/lyfTfk7
Вам придется использовать Expanded во втором Row.
ооо, я вижу .. так что, если я использую расширенный, они хотели бы разделить? ну спасибо большое за ответ на мой глупый вопрос. :))
Я думаю, что они должны работать так, как вы ищете, если вы не поделитесь скриншотом того, что вы хотите сделать, я постараюсь вам помочь.
а вот и SS imgur.com/uXJqyP5 . Спасибо за вашу доброту :)
Для этой функции лучше использовать
Stack.