I'm trying to mount BottomNavigationBar
to TabBarView
. How to set the index
of TabBarView
so I can display 2nd item (search page)? should I use Ontap
and switch case
? still how to set the index?
body: SafeArea(
// child: (pages[currentIndex1]),
child: TabBarView(
children: <Widget>[
Home(),
Search(),
].toList(),
// controller: ,
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentIndex1,
type: BottomNavigationBarType.shifting,
showUnselectedLabels: false,
showSelectedLabels: false,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.blue),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
backgroundColor: Colors.blue),
],
you need to provide TabController
on TabBarView
, then you can switch tabItems using this controller.
you can check this example
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text("home"),
);
}
}
class Search extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text("Search"),
);
}
}
class NavTest extends StatefulWidget {
NavTest({Key? key}) : super(key: key);
@override
_NavTestState createState() => _NavTestState();
}
class _NavTestState extends State<NavTest> with SingleTickerProviderStateMixin {
final widgets = [
Home(),
Search(),
];
int currentIndex1 = 0;
late TabController controller;
@override
void initState() {
super.initState();
controller = TabController(length: widgets.length, vsync: this);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
// child: (pages[currentIndex1]),
child: TabBarView(
children: widgets,
controller: controller,
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentIndex1,
type: BottomNavigationBarType.shifting,
showUnselectedLabels: false,
showSelectedLabels: false,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.blue,
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
backgroundColor: Colors.blue,
),
],
onTap: (value) {
setState(() {
// currentIndex1 = value;
controller.index = value;
});
},
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.