Нижняя панель навигации – это распространенный элемент пользовательского интерфейса при разработке мобильных приложений, позволяющий пользователям перемещаться между различными разделами или экранами приложения. Хотя традиционные нижние панели навигации содержат метки для каждой вкладки, могут быть случаи, когда вам захочется создать нижнюю панель навигации без меток. В этой статье мы рассмотрим шесть различных методов достижения этой цели во Flutter, а также приведем примеры кода.

BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: SizedBox.shrink(), // Empty-sized widget
    ),
    // Add more BottomNavigationBarItems as needed
  ],
)

BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Opacity(
        opacity: 0.0,
        child: Text(''), // Empty text widget
      ),
    ),
    // Add more BottomNavigationBarItems as needed
  ],
)

BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Container(), // Empty container
      // Add a custom widget instead of title
      label: 'Home',
    ),
    // Add more BottomNavigationBarItems as needed
  ],
)

Метод 4. Настройка стилей выбранных и невыбранных элементов

BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text(''),
    ),
    // Add more BottomNavigationBarItems as needed
  ],
  selectedItemColor: Colors.blue, // Customize selected item color
  unselectedItemColor: Colors.grey, // Customize unselected item color
)

Метод 5. Использование свойства floatActionButtonLocation

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text(''),
      ),
      // Add more BottomNavigationBarItems as needed
    ],
  ),
)

Метод 6. Настройка виджета нижней панели навигации

BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text(''), // Empty text widget
    ),
    // Add more BottomNavigationBarItems as needed
  ],
  showSelectedLabels: false, // Hide selected item label
  showUnselectedLabels: false, // Hide unselected item labels
)

В этой статье мы рассмотрели шесть различных методов создания нижней панели навигации Flutter без меток. Каждый метод обеспечивает уникальный подход для достижения желаемого эффекта пользовательского интерфейса. Если вы хотите полностью скрыть метки или настроить их внешний вид, эти методы должны соответствовать вашим требованиям. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует дизайну вашего приложения и пользовательскому опыту.