how to navigate different pages by curved navigation bar in flutter? - flutter

Question

i can't able to use curved navigation bar in flutter, when i slide screen so buttons of curved navigation bar are also moving but when i tap on buttons of curved navigation bar nothing happens . i think onTap() didn't work properly. how to navigate pages when i tap buttons?
here is the code of my program=>
static final String id = 'profile_page';
#override
_PagesState createState() => _PagesState();
}
class _PagesState extends State<Pages> {
PageController _pageController;
int _Page=0;
#override
void initState() {
super.initState();
_pageController = PageController();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _pageController,
children: <Widget>[
Search(),
Trending(),
Friends(),
Profile(),
],
onPageChanged: (int index) {
setState(() {
_pageController.jumpToPage(index);
});
}
),
bottomNavigationBar: CurvedNavigationBar(
animationCurve: Curves.easeInOutBack,
index:3,
items: <Widget>[
Icon(Icons.search, size: 30, color: Colors.white, ),
Icon(Icons.trending_up, size: 30, color: Colors.white),
Icon(Icons.group, size: 30, color: Colors.white),
Icon(Icons.person, size: 30, color: Colors.white)
],
color: Colors.blueAccent,
backgroundColor: Colors.white,
height: 60.0,
onTap: (int index) {
setState(() {
_pageController.jumpToPage(index);
});
},
),
);
}
}

Answer 1

I use it this way:
Create a list and a variable that holds current Page no. Here 3 classes can be stateless or statefull widgets.
final List<Widget> _tabItems = [Class1(), Class2(), Class3()];
int _activePage = 0;
Define your body like this:
body: _tabItems[_activePage], //Customise it as you want.
Then in your onTap:
onTap: (index) {
setState(() {
_activePage = index;
});
},
Hope it helps! Happy Coding:)

Answer 2

If you change the page of the PageView, you are telling the CurvedNavigationBar to change its page. But when you change the page of the CurvedNavigationBar you aren't telling the PageView to change its page.
You need to add a PageController to the PageView, like this:
final _pageController = PageController();
PageView(
controller: _pageController,
...
Then you should be able to do this:
_pageController.jumpToPage(index);
But make sure when you tell one to change the page of the other, the other doesn't tell again the first one to change its page, because it will be an infinite loop.

Answer 3

Simply replace
_pageController = PageController(); with
final _pageController = PageController();
and remove _pageController = PageController(); in the void initState() method.
No use of int _Page=0;
You will be fine.