Remove Flutter TabBar bottom border

Things get nasty if you use Material3 in your app:

ThemeData(
    useMaterial3: true,
    ...
)

then all mentioned solutions do not work. If we read a documentation for TabBar:

  /// The color of the divider.
  ///
  /// If null and [ThemeData.useMaterial3] is true, [TabBarTheme.dividerColor]
  /// color is used. If that is null and [ThemeData.useMaterial3] is true,
  /// [ColorScheme.surfaceVariant] will be used, otherwise divider will not be drawn.
  final Color? dividerColor;

So even if we do some tricks, the app choses TabBarTheme.dividerColor. I have tried setting that to null or to Colors.Transparent, but it did not work. Hence, it led me to try with ColorScheme.surfaceVariant.

One of the solutions is to create this theme wrapper (parent Widget) for your Widget:

@override
Widget build(BuildContext context) {
  var theme = Theme.of(context);
  return Theme(
      data: theme.copyWith(
        colorScheme: theme.colorScheme.copyWith(
          surfaceVariant: Colors.transparent,
        ),
      ),
      child: TabBar(
           ...
      )
    );
}

And voila: