CODEWITHSUNDEEP
dartflutter
Inquisitor K
Inquisitor K

Reputation: 813

Remove highlight when Flutter's TabBar is tapped

I'm trying to implement my own TabBar design in flutter. I was able to get a pretty good result. However, when I tap another tab to change the tab, there is a highlight create by default as shown in the image here. I'm wondering if there is any way I can get rid of the square highlight on tapped. I've been looking around for like almost a day not and did not find any solution.

If anyone have any solution please let me know. Thanks.

Edited: as CopsOnRoad suggestion I wrapped the TabBar in the Container and set the color to Colors.transparent, but it does not really disappear so I tried to set the color to Theme.of(context).canvasColor for now.

    Container(
      color: Theme.of(context).canvasColor,
      child: TabBar(
        isScrollable: true,
        indicator: ShapeDecoration(
          color: Color(0xFFE6E6E6),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(99.0)
          )
        ),
        tabs: List<Widget>.generate(
          categories.length,
          (index) => Tab(
            child: Text(
              categories[index],
              style: TextStyle(
                fontFamily: 'Hiragino Sans',
                fontWeight: FontWeight.bold,
                fontSize: 18.0,
                color: Color(0xFF4D4D4D),
              ),
            ),
          )
        ),
      )
    )

Upvotes: 12

Views: 12243

Answers (5)

Ariful Haque
Ariful Haque

Reputation: 480

I had the similar issue. I tried to read the documentation and found it.

  ///
  /// If non-null, it is resolved against one of [MaterialState.focused],
  /// [MaterialState.hovered], and [MaterialState.pressed].
  ///
  /// [MaterialState.pressed] triggers a ripple (an ink splash), per
  /// the current Material Design spec.
  ///
  /// If the overlay color is null or resolves to null, then the default values
  /// for [InkResponse.focusColor], [InkResponse.hoverColor], [InkResponse.splashColor],
  /// and [InkResponse.highlightColor] will be used instead.
  final MaterialStateProperty<Color?>? overlayColor;

Finally just added overlayColor to transparent. It solved my issue.

overlayColor: MaterialStateProperty.all(Colors.transparent)

Upvotes: 15

WangJi
WangJi

Reputation: 388

you should set tabbar splashFactory: NoSplash.splashFactory as this post mentioned.

TabBar(splashFactory: NoSplash.splashFactory,)

How to disable default Widget splash effect in Flutter?

Upvotes: 15

Kyo Huu
Kyo Huu

Reputation: 578

Here is my custom solution from @Tempelriter

     Theme(
        data: Theme.of(context).copyWith(
          highlightColor: Colors.transparent,
          splashColor: Colors.transparent,
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.gray,
            border: Border.all(
              color: Colors.red
            ),
            borderRadius: BorderRadius.circular(50),
          ),
          child: TabBar(
            isScrollable: true,
            tabs: [
              Tab(text: 'comingSoon'),
              Tab(text: 'selling'),
            ],
          ),
        ),
      );

Upvotes: 0

Tempelritter
Tempelritter

Reputation: 543

You can also disable the ripple/highlight/splash effect with the code below. Add the Theme with the data of ThemeData where the hightlight and splash color is both transparent.

return Scaffold(
  appBar: PreferredSize(
    preferredSize: Size.fromHeight(70),
      child: Theme(
        data: ThemeData(
        highlightColor: Colors.transparent,
        splashColor: Colors.transparent,
      ),
      child: AppBar( ... )

Upvotes: 4

CopsOnRoad
CopsOnRoad

Reputation: 267684

That's the ripple effect. You can remove it by wrapping it in a Container and giving transparent color to it.

Upvotes: 4

Related Questions