Флаттер | Как сделать пользовательскую кнопку BottomNavigationBar во флаттере?

Question

Флаттер | Как сделать пользовательскую кнопку BottomNavigationBar во флаттере?

1

Я хочу сделать кнопку с текстом и значком внутри, с собственным цветом фона и шириной. с фиксированным положением (не прокручивается). Не могли бы вы помочь мне, пожалуйста?

вот код:

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

его только дать цвет для значка.

вот чего я хочу:

Roman Traversine 10 апр. 2019, в 12:22

Источник

Теги:

android

flutter

2 ответа

Ещё вопросы

CopsOnRoad · Answer 1 · 2019-04-10T11-05-00.000Z

Ну вот

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 в вашей 2-й Row .
ооо я вижу .. так что если я использую расширенный они хотели бы отделить? хорошо, большое спасибо за ответ на мой глупый вопрос. :))
Я думаю, что они должны работать так, как вы ищете, если вы не поделитесь снимком экрана с тем, что вы хотите сделать, я постараюсь вам помочь.
и вот SS imgur.com/uXJqyP5 . Спасибо за вашу доброту :)

Robin Reiter · Answer 2 · 2019-04-10T08-22-00.000Z

Вы можете вместо этого взглянуть на концепцию 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")
                    ],
                  ),
                ),
              ),
            ),
          ),
          ]
      ),
    )

Ок, я попробую. поместить Expanded внутри BottomAppBar?
Раскрытое на самом деле начало одной из ваших пользовательских кнопок. Позвольте мне отредактировать мой ответ, чтобы он стал немного понятнее.
нет, это очень ясно и легко понять. спасибо за вашу доброту, чтобы помочь мне, сэр. Бог благословит вас :) @ Робин Рейтер