Programmaticlly Set Active Tab about convex_bottom_bar HOT 13 CLOSED

@Hossein-Kia The support for controller is still in beta version; Recently we've add the TabController to work with ConvexAppBar, but not PageController;

The TabBarView use PageView internal which support TabController; If you need to access index manually with PageView, you may need the ConvexAppBarState, just as @AlaaEldeenYsr suggested, the raw way.

How to

Update to 2.1.0-beta+1;

// define field instance
GlobalKey<ConvexAppBarState> _appBarKey = GlobalKey<ConvexAppBarState>();
// construct with key
ConvexAppBar(key: _appBarKey, /* ... */);
// change tab index in onPageChanged
_appBarKey.currentState.animateTo(2/* index*/);

from convex_bottom_bar.

So in your situation something like controller would help. However there is no such thing currently, and it wouldn't be easy to hack from outside the widget. Will work on it, keep an eye on this issue.

from convex_bottom_bar.

@roberteverman We've release a new version 2.1.0-beta which supports TabController;
Now you can change the index of AppBar similar as the TabBar way:

DefaultTabController(
  length: 5,
  child: Scaffold(
    appBar: AppBar(title: const Text('Custom ConvexAppBar')),
    body: TabBarView(
      children: ['A','B','C','D','E']
          .map((i) => Center(child: Text('$i')))
          .toList(growable: false),
    ),
    bottomNavigationBar: ConvexAppBar(/* some config*/),
  ),
);

Or if you are using PageView or TabController directly, just set the controller:

 Scaffold(
  appBar: AppBar(title: const Text('Custom ConvexAppBar')),
  body: TabBarView(
    controller: _tabController,
    children: ['A','B','C','D','E']
        .map((i) => Center(child: Text('$i')))
        .toList(growable: false),
  ),
  bottomNavigationBar: ConvexAppBar(controller: _tabController/* some config*/),
);

For more detail, please refer to
https://github.com/hacktons/convex_bottom_bar/blob/master/doc/issue-change-active-tab-index.md

from convex_bottom_bar.

@avenwu This is awesome. Thank you so much. Not all heroes wear capes!

from convex_bottom_bar.

@roberteverman Yes you can.
Try with initialActiveIndex:2
Duplicate of #26

from convex_bottom_bar.

The issue is closed, fell free to fire another one if you have any other question

from convex_bottom_bar.

Thank you for such a quick response! But sorry, I think I may not have explained what I'm trying to do correctly. I have a separate Carousel Slider widget that I'd like to use to control the Convex Bottom Bar. That is, when I swipe left on the Carousel Slider, I'd like it's onPageChange function to update the Convex Bottom Bar such that animates to the tab to the left. The initialActiveIndex seems to allow me set the active tab when the widget is first created but it doesn't let me animate and update the active tab during run time. Do you have any suggestions?

from convex_bottom_bar.

I made it just add this update method and change the state class name from _State to ConvexBottomBarState so the user can access it through GlobalKey

then you can use it as you want

from convex_bottom_bar.

@AlaaEldeenYsr Sure. You make any changes to satisfy you app；

from convex_bottom_bar.

@roberteverman Happy coding！ 😄
If you like this project, please support it by star and click like👍 on pub.dev

from convex_bottom_bar.

@avenwu But it's not compatible with rtl.
If you can just make the state class name and the _warpToCurrentIndex method without underscore so we can access it in a raw way it will be better

from convex_bottom_bar.

@AlaaEldeenYsr Well that's true, the package does not have internal RTL support;

The _State was not exposed to developer just because it would benefit to internal changes; However it's not a big deal to expose it, so you can access the raw way;

from convex_bottom_bar.

Thank you for This awesome library
i used the viewpager and it didn't worked
ConvexAppBar wont accept PageController. please help me.

what is difference between ViewPager and TabBarView?

from convex_bottom_bar.