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

问题

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);
             });
            },

          ),
        );

  }
}

回答1:

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.

回答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.

来源：https://stackoverflow.com/questions/58480722/how-to-navigate-different-pages-by-curved-navigation-bar-in-flutter

标签

Flutter

flutter-layout