Как создать пользовательскую нижнюю навигационную панель во flutter с центрированной кнопкой?

#flutter #flutter-widget #flutter-bottomnavigation

#flutter #flutter-виджет #flutter-bottomnavigation

Вопрос:

Я так много пытался создать эту нижнюю панель навигации с кривой и пробелом между значками. Не могу понять это.

Ответ №1:

  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
        elevation: 2.0,
      ),
      bottomNavigationBar: BottomAppBar(
        clipBehavior: Clip.antiAlias,
        notchMargin: 5,
        shape: CircularNotchedRectangle(),
        child: Wrap(
          children: [
            BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              currentIndex: 0,
              onTap: (int index) {},
              items: [
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
                BottomNavigationBarItem(icon: Icon(Icons.radio), label: 'A'),
              ],
            ),
          ],
        ),
      ),

Проверьте этот код.

Ответ №2:

Взгляните на этот пакет: convex_bottom_bar .

Форму выреза можно настроить, написав класс, который расширяет NotchedShape и реализует getOuterPath , содержащий логику для кривой выреза. Проверьте это, чтобы узнать точную реализацию convex_shape.dart

Чтобы внизу был зеленый значок:

 import 'package:convex_bottom_bar/convex_bottom_bar.dart';

Scaffold(
  bottomNavigationBar: ConvexAppBar(
    items: [
      TabItem(icon: Icons.home, title: 'Left'),
      TabItem(icon: new Icon(Icons.add, color: Colors.green,), activeIcon: new Icon(Icons.add, color: Colors.green,) title: 'Middle'),
      TabItem(icon: Icons.message, title: 'Right'),
    ],
    initialActiveIndex: 2,//optional, default as 0
    onTap: (int i) => print('click index=$i'),
  )
);

1. Проблема в том, что вы не можете задать цвет по умолчанию для середины, независимо от того, активен он или нет! Мне нужно, чтобы средняя кнопка все время оставалась зеленой

2. Почему бы вам не указать цвет для значка и не установить этот значок в TabItem для средней вкладки. Чтобы сохранить ее такой же, когда она активна или нет, просто передайте тот же значок, что и activeIcon

3. Обновлено фрагментом. Надеюсь, это то, что вы ожидаете. Обратите внимание, что в соответствии с реализацией пакета, по умолчанию activeIcon равно icon , если оно не указано. Таким образом, вы должны быть в состоянии достичь того, чего хотите (фиксированный зеленый цвет) без activeIcon