UI : Container length of TabStatefulScaffold in "Cupertino style" changes when switching tabs #60

Closed
opened 2025-10-31 17:04:52 -05:00 by GiteaMirror · 4 comments
Owner

Originally created by @van-8 on GitHub (Jul 12, 2020).

For example, in the Github Notificiations_Screen, the word "Participating" is long. When the tab is selected, it expands the entire Tab widget. This is mostly likely because the selected state has a heavier fontweight, thus expanding the entire parent Container Widget. This occurs in Cupertino style only.

gittouch UI tab issue

Possible fix: When tab is active, do not change the fontweight.
I only started learning coding and Flutter a few months ago, so if I figure it out I'll submit a merge.

Originally created by @van-8 on GitHub (Jul 12, 2020). For example, in the Github `Notificiations_Screen`, the word "Participating" is long. When the tab is `selected`, it expands the entire Tab widget. This is mostly likely because the `selected` state has a heavier `fontweight`, thus expanding the entire parent Container Widget. This occurs in Cupertino style only. ![gittouch UI tab issue](https://user-images.githubusercontent.com/28463475/87246161-11b1a680-c47e-11ea-8415-4418c005e4a8.gif) Possible fix: When tab is active, do not change the `fontweight`. I only started learning coding and Flutter a few months ago, so if I figure it out I'll submit a merge.
Author
Owner

@pd4d10 commented on GitHub (Jul 12, 2020):

Nice catch!

How about expanding the tabbar to full width? Then it would have enough space.

@pd4d10 commented on GitHub (Jul 12, 2020): Nice catch! How about expanding the tabbar to full width? Then it would have enough space.
Author
Owner

@van-8 commented on GitHub (Jul 14, 2020):

Perfect.

In the Apple Human Interface Guidelines, the Segmented Controls are always full width. It seems this might be Flutter not updating their widget to iOS13 standards? Maybe we can submit this fix to the main Flutter branch?

Seems like in lib/scaffolds/tab.dart you can just do a quick change of line 64 from DefaultTabController() to a CupertinoSlidingSegmentedControl() .

I'm so bad at coding. You have CupertinoSlidingSegmentedControl() on line 32. I don't know how to fix. 😅

Here's an example for 2 segments, which would apply to the GitTouch trending_screen.

segmented controls screenshot

@van-8 commented on GitHub (Jul 14, 2020): Perfect. In the Apple Human Interface Guidelines, the [Segmented Controls ](https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/)are always full width. ~It seems this might be Flutter not updating their widget to iOS13 standards? Maybe we can submit this fix to the main Flutter branch?~ ~Seems like in `lib/scaffolds/tab.dart` you can just do a quick change of line 64 from `DefaultTabController()` to a `CupertinoSlidingSegmentedControl()` .~ I'm so bad at coding. You have `CupertinoSlidingSegmentedControl()` on line 32. I don't know how to fix. 😅 Here's an example for 2 segments, which would apply to the GitTouch `trending_screen`. ![segmented controls screenshot](https://user-images.githubusercontent.com/28463475/87426869-7bfb5000-c612-11ea-809f-d381b1b7a027.png)
Author
Owner

@pd4d10 commented on GitHub (Jul 15, 2020):

Would Row > Expanded > CupertinoSlidingSegmentedControl work for this case?

@pd4d10 commented on GitHub (Jul 15, 2020): Would `Row > Expanded > CupertinoSlidingSegmentedControl` work for this case?
Author
Owner

@shreyas1599 commented on GitHub (Aug 17, 2020):

Would Row > Expanded > CupertinoSlidingSegmentedControl work for this case?

This didn't work. I changed the padding to 12 and it seemed to work on iphone se2 and 11 pro. Guess it should work for all devices. Shall I open a pr? Or @van-8 would you like to?

@shreyas1599 commented on GitHub (Aug 17, 2020): > Would `Row > Expanded > CupertinoSlidingSegmentedControl` work for this case? ~~This didn't work. I changed the [padding](https://github.com/git-touch/git-touch/blob/1276957b2d14ad93b3762bb109a457711085d978/lib/scaffolds/tab.dart#L38) to 12 and it seemed to work on iphone se2 and 11 pro. Guess it should work for all devices. Shall I open a pr? Or @van-8 would you like to?~~
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/git-touch#60