Programmaticlly Set Active Tab

[roberteverman]

Would it be possible to add a method to set the active tab programmatically (without tapping)?

[avenwu]

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

[avenwu]

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

[roberteverman]

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?

[avenwu]

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.

[AlaaEldeenYsr]

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

[avenwu]

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

[avenwu]

@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

[roberteverman]

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

[avenwu]

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

[AlaaEldeenYsr]

@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

[avenwu]

@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;

[Hossein-Kia]

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?

[avenwu]

@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*/);