PlatformTabScaffold

[programmerElephant]

hello how to remove this line? thanks. ![Uploading 20231221-133624.jpeg…]()

[programmerElephant]

[programmerElephant]

Here is another question: when using PlatformTabScaffold to create four sub-pages, I found that the initState method of each sub-page is triggered simultaneously, rather than when I select a specific page. Every time I switch the tab bar, the initState of all four sub-pages is triggered at the same time. How can I manage to trigger the initState only for the selected tab and avoid redundant triggers when switching tabs? Thank you.

[JaidynBluesky]

You can set the colour of the background and the border (that line) using the cupertinoTabs field of the PlatformTabScaffold. You can't remove it directly I think, but you can change the colour so that it's invisible.

cupertinoTabs: (context, platform) => CupertinoTabBarData(
  backgroundColor: Colors.white,
  border: Border.all(
    color: Colors.white,
  ),
)

As for the state problem, that won't happen by default on iOS. On Android, you'll have to use a PageView for the bodyBuilder, and wrap each of your child tabs in a widget that uses the AutomaticKeepAliveClientMixin so that they retain their state.

Hope that helps.

[martin-braun]

I also would like to mention that the spacing is to narrow between icons and the line, that's probably the reason why OP want to hide the line, but it's the wrong approach.

I bypassed this issue by increasing the height overall, but then moving the icons themselves down by one unit, the result looks satisfying:

In your material ThemeData:

//...
cupertinoOverrideTheme: CupertinoThemeData(
  textTheme: CupertinoTextThemeData(
    //...
    tabLabelTextStyle: textTheme.labelSmall!.copyWith(height: -1), // color can't be set, -1 fixes some spacing
),
//...

In your PlatformTabScaffold within build:

//...
cupertinoTabs: (BuildContext context,
    PlatformTarget target) {
  final ThemeData theme = Theme.of(context);
  return CupertinoTabBarData(
    height: (theme.textTheme.labelMedium!.fontSize! +
            theme.textTheme.headlineMedium!.fontSize!) *
        2,
    iconSize: theme.textTheme.headlineMedium!.fontSize,
    activeColor: theme.colorScheme.onPrimary,
    inactiveColor: theme.primaryColorLight,
  );
},
//...

It's a bit annoying that CupertinoTabBarData is not part of the CupertinoThemeData, so it took me quite a while to figure this out.