Я могу предоставить вам некоторые методы реализации нижней навигации во Flutter, а также примеры кода. Вот несколько различных подходов, которые вы можете использовать:
Метод 1: использование свойства BottomNavigationBar Scaffold
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
static List<Widget> _widgetOptions = <Widget>[
HomeWidget(),
SearchWidget(),
FavoritesWidget(),
ProfileWidget(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation Example'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: 'Favorites',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped,
),
);
}
}
class HomeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Home'),
);
}
}
class SearchWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Search'),
);
}
}
class FavoritesWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Favorites'),
);
}
}
class ProfileWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text('Profile'),
);
}
}
Метод 2. Использование виджетов CupertinoTabScaffold и CupertinoTabBar (для нижней навигации в стиле iOS)
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
label: 'Favorites',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
tabBuilder: (BuildContext context, int index) {
return CupertinoTabView(
builder: (BuildContext context) {
switch (index) {
case 0:
return HomeWidget();
case 1:
return SearchWidget();
case 2:
return FavoritesWidget();
case 3:
return ProfileWidget();
default:
return Container();
}
},
);
},
);
}
}
// HomeWidget, SearchWidget, FavoritesWidget, and ProfileWidget classes remain the same as in Method 1
Это два часто используемых метода реализации нижней навигации во Flutter. Вы можете выбрать тот, который соответствует вашим требованиям.