CODEWITHSUNDEEP
flutterflutter-layout
user39587
user39587

Reputation: 301

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

          ),
        );

  }
}

Upvotes: 4

Views: 7392

Answers (3)

Bensal
Bensal

Reputation: 4110

I use it this way:

  1. 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;

  2. Define your body like this:

    body: _tabItems[_activePage], //Customise it as you want.

  3. Then in your onTap:

    onTap: (index) {
   setState(() {
     _activePage = index;
   });
 },

Hope it helps! Happy Coding:)

Upvotes: 6

Viraj Dhanushka
Viraj Dhanushka

Reputation: 71

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.

Upvotes: 1

Pablo Barrera
Pablo Barrera

Reputation: 10963

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.

Upvotes: 1

Related Questions