BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '', // Empty label
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: '',
),
// Add more items as needed
],
// Add additional properties and event handlers
)
Метод 2: настройка BottomNavigationBar
Если вам нужны дополнительные параметры настройки, вы можете создать собственную нижнюю панель навигации с помощью виджетов Flutter InkWell и InkResponse. Создав виджет с отслеживанием состояния, вы можете управлять выбранной вкладкой и динамически изменять внешний вид значков в зависимости от взаимодействия с пользователем.
class CustomBottomNavigationBar extends StatefulWidget {
@override
_CustomBottomNavigationBarState createState() =>
_CustomBottomNavigationBarState();
}
class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
buildNavItem(Icons.home, 0),
buildNavItem(Icons.search, 1),
// Add more items as needed
],
);
}
Widget buildNavItem(IconData icon, int index) {
return InkWell(
onTap: () {
setState(() {
_selectedIndex = index;
});
},
child: InkResponse(
child: Icon(
icon,
color: _selectedIndex == index ? Colors.blue : Colors.grey,
),
),
);
}
}
TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.home)),
Tab(icon: Icon(Icons.search)),
// Add more tabs as needed
],
labelColor: Colors.blue,
unselectedLabelColor: Colors.grey,
),
TabBarView(
children: <Widget>[
// Contents for the home tab
// Contents for the search tab
// Add more tab contents as needed
],
)
Реализуя эти методы, вы можете создать изящную и интуитивно понятную нижнюю панель навигации в своих приложениях Flutter без необходимости использования заголовков.