Bad behavior when used when tab controller about convex_bottom_bar HOT 8 CLOSED

the code looks fine, will check about the case you’ve mentioned. Would you provide a record video?

from convex_bottom_bar.

Sure... I created a screen test where you can see better the behaviour that I mentioned.... (attached the video)

When you move from step 3 to step 1, that means from right to left, (using the slide from the controller in the tab), you can see that it moves from one first and then to two... In the other way, this doesn't happen...

This bug is producing because the convex app bar is updating the icon when the change of the tab bar without paying attention to the bouncing of the slide movement (that goes first to one and then to three)

I guess the error is in this part of the code:

void _handleTabControllerAnimationTick({bool force = false}) {
if (!force && _tabController.indexIsChanging) {
return;
}
if (_tabController.index != _currentIndex) {
animateTo(_tabController.index);
}
}

I guess the issue could be fixed, checking first that the current page is already setting before moving the icon.

fails video.zip

In the meantime, I solve the issue in the following way... Instead of using a tab view, I use a page view. So instead to attach a controller to convex app bar, I move the icon in the onpage changed call back of the page view using the key and the recommendation you indicate in the support page (_bottomBarKey.currentState.animateTo(page))... as you can see as follow
body: PageView(
children: _pages,
controller: _pageController,
//change the icon of the bottom bar
onPageChanged: (page) {
_bottomBarKey.currentState.animateTo(page);
},
),

But I think it should be suitable to fix the issue of the bounding for other users.

from convex_bottom_bar.

According docs, take a look of indexIsChanging property:

True while we're animating from previousIndex to index as a consequence of calling animateTo.

This value is true during the animateTo animation that's triggered when the user taps a TabBar tab. It is false when offset is changing as a consequence of the user dragging (and "flinging") the TabBarView.

So that means in the following code (when the user is sliding the tab view), the index changing is false, so it won't enter to the check and it will allow to change the icon in the app bar (that is not a correct behavior):

void _handleTabControllerAnimationTick({bool force = false}) {
if (!force && _tabController.indexIsChanging) {
return;
}
if (_tabController.index != _currentIndex) {
animateTo(_tabController.index);
}
}

from convex_bottom_bar.

Sorry for answering you a lot... but I'm still concerning why this is happening... I
I add one animation listener to the controller and this is happening:
(from step 1 to 2 that corresponds to index 0 to 1, you can see the bouncing but returning to 1):
I/flutter (16214): index: 0 animation: 0.0013888888888888493
I/flutter (16214): index: 0 animation: 0.0027777777777776985
I/flutter (16214): index: 0 animation: 0.022222222222222143
I/flutter (16214): index: 0 animation: 0.08888888888888885
I/flutter (16214): index: 0 animation: 0.173611111111111
I/flutter (16214): index: 0 animation: 0.24999999999999994
I/flutter (16214): index: 0 animation: 0.32638888888888884
I/flutter (16214): index: 0 animation: 0.4041666666666666
I/flutter (16214): index: 0 animation: 0.4805555555555555
I/flutter (16214): index: 0 animation: 0.5638888888888888
I/flutter (16214): index: 0 animation: 0.6569444444444442
I/flutter (16214): index: 0 animation: 0.7611111111111108
I/flutter (16214): index: 0 animation: 0.8958333333333331
I/flutter (16214): index: 0 animation: 0.909722222222222
D/ViewRootImpl@6fc5dd2MainActivity: ViewPostIme pointer 1
I/flutter (16214): index: 1 animation: 1.0
I/flutter (16214): index: 1 animation: 1.0585358392705204
I/flutter (16214): index: 1 animation: 1.2083422421302152
I/flutter (16214): index: 1 animation: 1.21046411795013
I/flutter (16214): index: 1 animation: 1.2026545830528463
I/flutter (16214): index: 1 animation: 1.1892680097578558
I/flutter (16214): index: 1 animation: 1.1731358428442404
I/flutter (16214): index: 1 animation: 1.1560633837034557
I/flutter (16214): index: 1 animation: 1.1391735386124284
I/flutter (16214): index: 1 animation: 1.1230979817506908
I/flutter (16214): index: 1 animation: 1.1082373920602941
I/flutter (16214): index: 1 animation: 1.0947153819307638
I/flutter (16214): index: 1 animation: 1.0825802119802224
I/flutter (16214): index: 1 animation: 1.071792309774977
I/flutter (16214): index: 1 animation: 1.062274339931578
I/flutter (16214): index: 1 animation: 1.0539202851584388
I/flutter (16214): index: 1 animation: 1.0466210235884266
I/flutter (16214): index: 1 animation: 1.0402639138591614
I/flutter (16214): index: 1 animation: 1.034743150902313
I/flutter (16214): index: 1 animation: 1.0299574384611558
I/flutter (16214): index: 1 animation: 1.0258155228381167
I/flutter (16214): index: 1 animation: 1.0222357393784662
I/flutter (16214): index: 1 animation: 1.0191457337691132
I/flutter (16214): index: 1 animation: 1.0164803463111964
I/flutter (16214): index: 1 animation: 1.0141786430668085
I/flutter (16214): index: 1 animation: 1.012201324212323
I/flutter (16214): index: 1 animation: 1.010496417936446
I/flutter (16214): index: 1 animation: 1.0090284455451732
I/flutter (16214): index: 1 animation: 1.0077652032740783
I/flutter (16214): index: 1 animation: 1.0066788344301696
I/flutter (16214): index: 1 animation: 1.0057434512145602
I/flutter (16214): index: 1 animation: 1.0049383623365202
I/flutter (16214): index: 1 animation: 1.004246215969918
I/flutter (16214): index: 1 animation: 1.0036509208696287
I/flutter (16214): index: 1 animation: 1.0031391670757772
I/flutter (16214): index: 1 animation: 1.0026977648129156
I/flutter (16214): index: 1 animation: 1.0023195229965334
I/flutter (16214): index: 1 animation: 1.001994971770719
I/flutter (16214): index: 1 animation: 1.0017152054134884
I/flutter (16214): index: 1 animation: 1.0014745916172059
I/flutter (16214): index: 1 animation: 1.0

(from step 3 to 2 that corresponds to index 2 to 1, you can see at different behavior, but here you can see the index arrive to 1 and then it goes to 0 directly and then bouncing from 0 to 1, that is the reason of the bouncing in the icons too):
this is happening only in the reverse
I/flutter (16214): index: 2 animation: 1.994444444444444
I/flutter (16214): index: 2 animation: 1.9624999999999997
I/flutter (16214): index: 2 animation: 1.9027777777777775
I/flutter (16214): index: 2 animation: 1.8499999999999999
I/flutter (16214): index: 2 animation: 1.7888888888888888
I/flutter (16214): index: 2 animation: 1.715277777777778
I/flutter (16214): index: 2 animation: 1.6347222222222224
I/flutter (16214): index: 2 animation: 1.5486111111111112
I/flutter (16214): index: 2 animation: 1.4458333333333333
I/flutter (16214): index: 2 animation: 1.3347222222222221
I/flutter (16214): index: 2 animation: 1.234722222222222
I/flutter (16214): index: 2 animation: 1.1486111111111108
D/ViewRootImpl@6fc5dd2MainActivity: ViewPostIme pointer 1
I/flutter (16214): index: 0 animation: 0.0
I/flutter (16214): index: 0 animation: 0.9638144491427167
I/flutter (16214): index: 0 animation: 0.7708841029774125
I/flutter (16214): index: 0 animation: 0.7652670529478768
I/flutter (16214): index: 0 animation: 0.772039811418947
I/flutter (16214): index: 0 animation: 0.7858980537214127
I/flutter (16214): index: 0 animation: 0.8033780710016339
I/flutter (16214): index: 0 animation: 0.8222807555756833
I/flutter (16214): index: 0 animation: 0.8411817702503172
I/flutter (16214): index: 0 animation: 0.8592984460432557
I/flutter (16214): index: 0 animation: 0.8761401122742563
I/flutter (16214): index: 0 animation: 0.8915119068895435
I/flutter (16214): index: 0 animation: 0.9053442431229741
I/flutter (16214): index: 0 animation: 0.9176609647473531
I/flutter (16214): index: 0 animation: 0.9285464681876467
I/flutter (16214): index: 0 animation: 0.9381142779514391
I/flutter (16214): index: 0 animation: 0.9464730403417269
I/flutter (16214): index: 0 animation: 0.9537610296265894
I/flutter (16214): index: 0 animation: 0.960094603199474
I/flutter (16214): index: 0 animation: 0.9655867562316218
I/flutter (16214): index: 0 animation: 0.9703413184457955
I/flutter (16214): index: 0 animation: 0.974451207322978
I/flutter (16214): index: 0 animation: 0.9780005752893352
I/flutter (16214): index: 0 animation: 0.981062113733283
I/flutter (16214): index: 0 animation: 0.9837020017657119
I/flutter (16214): index: 0 animation: 0.9859767431599058
I/flutter (16214): index: 0 animation: 0.9879359645502882
I/flutter (16214): index: 0 animation: 0.9896228221161438
I/flutter (16214): index: 0 animation: 0.9910748390374634
I/flutter (16214): index: 0 animation: 0.9923241289496368
I/flutter (16214): index: 0 animation: 0.9933990631465195
I/flutter (16214): index: 0 animation: 0.9943238791329803
I/flutter (16214): index: 0 animation: 0.995119120804971
I/flutter (16214): index: 0 animation: 0.9958032872949727
I/flutter (16214): index: 0 animation: 0.996391590966471
I/flutter (16214): index: 0 animation: 0.9968973001823853
I/flutter (16214): index: 0 animation: 0.9973325484827813
I/flutter (16214): index: 0 animation: 0.9977066081325857
I/flutter (16214): index: 0 animation: 0.9980280580619723
I/flutter (16214): index: 0 animation: 0.9983047613023256
I/flutter (16214): index: 0 animation: 0.9985424506441456
I/flutter (16214): index: 0 animation: 1.0
I/flutter (16214): index: 1 animation: 1.0

from convex_bottom_bar.

Wow🤣, thank you for the feedback. That's really amazing analyzation. I was not able to reproduce it until you mentioned the fling motion. On Android device the left to right fling can easily cause the wired behavior. It should be fixed😅.

from convex_bottom_bar.

Thank you... yesterday I have analyzed a little bit the strategy to solve it... so if you need any additional help, please just let me know... Regards,

from convex_bottom_bar.

After some research, I have to say the index is updated unexpected because of TabBarView's internal implementation.
When we've use TabBar with TabBarView, the listener is also fired similarly, given you first 0 then 1, when we has three tabs and slide from third one with a fling gesture.

controller = new TabController(length: 3, vsync: this);
controller.addListener(() {
  debugPrint(
      "===> value ${controller.animation.value}  offset ${controller.offset}");
  debugPrint(
      "===> index ${controller?.index} pre ${controller?.previousIndex}, animation=${controller.animation.value} ,isChanging=${controller?.indexIsChanging}");
});

I/flutter (13893): ===> value 0.0  offset 0.0
I/flutter (13893): ===> index 0 pre 2, animation=0.0 ,isChanging=false
I/flutter (13893): ===> value 1.0  offset 0.0
I/flutter (13893): ===> index 1 pre 0, animation=1.0 ,isChanging=false

However the TabBar is updated instantly when we slide the view, but AppBar is only animated after slide, so it's quite different.
Will keep work on it. If you have any suggestion, PR is appreciated

from convex_bottom_bar.

Hello. I've already created the pull request. I don't have too much experience providing PR or adding contributions, so please be free to provide any comments you consider.

from convex_bottom_bar.