remove ripple splash effect on tabbing tabbar flutter
I try Remove ripple effect on tab bar when tab or click on TabBar
this answer :
remove background for normal status but still show effect when click or tap on tab bar
i also try this answers : How to disable default Widget splash effect in Flutter?
but that answers i think only work on buttons or another widgets ... not working on TabBar
here is my code and as you see i try all ways but still show tab effect when click :
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
title: "App",
home: Sample(),
),
);
class Sample extends StatefulWidget {
@override
_StackOverState createState() => _StackOverState();
}
class _StackOverState extends State<Sample>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
final yourTheme = ThemeData.light();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Tab bar',
),
),
body:
Theme(
data: yourTheme.copyWith(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
splashFactory: NoSplash.splashFactory,
),
child: Column(
children: [
// give the tab bar a height [can change hheight to preferred height]
Container(
width: MediaQuery.of(context).size.width/2,
height: 45,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
25.0,
),
),
child:
Container(
color:Colors.transparent,
child:
TabBar(
splashFactory: NoSplash.splashFactory,
labelPadding: EdgeInsets.zero,
controller: _tabController,
// give the indicator a decoration (color and border radius)
indicator:
BoxDecoration(
borderRadius: BorderRadius.circular(
25.0,
),
color: Colors.green,
),
indicatorColor: Colors.transparent,
dividerColor: Colors.transparent,
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
tabs: [
// first tab [you can add an icon using the icon property]
Tab(
child:
Container(
// width: MediaQuery.of(context).size.width,
child:
Align(
alignment: Alignment.center,
child:Text("Place Bid"),
)
),
),
// second tab [you can add an icon using the icon property]
Tab(
child:
Container(
// width: MediaQuery.of(context).size.width,
child:
Align(
alignment: Alignment.center,
child: Text("buy now"),
)
),
),
],
),
)
),
// tab bar view here
Expanded(
child: TabBarView(
controller: _tabController,
children: [
// first tab bar view widget
Center(
child: Text(
'Place Bid',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
// second tab bar view widget
Center(
child: Text(
'Buy Now',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],),)
);
}
}
Solution
To achieve a transparent ripple effect in a TabBar, you need to override the tabBarTheme in your app's ThemeData. Specifically:
Set the splashFactory: Use InkRipple.splashFactory or any other desired splash factory to define the ripple behavior. Provide an overlayColor: The overlayColor property determines the ripple and hover effects. Returning null for all states effectively disables the color overlay while keeping the splash animation intact.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(
const MaterialApp(
title: "App",
home: Sample(),
),
);
class Sample extends StatefulWidget {
const Sample({super.key});
@override
_StackOverState createState() => _StackOverState();
}
class _StackOverState extends State<Sample>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
_tabController = TabController(
length: 2,
vsync: this,
);
super.initState();
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
final yourTheme = ThemeData.light();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Tab bar',
),
),
body: Theme(
data: yourTheme.copyWith(
tabBarTheme: TabBarTheme(
overlayColor: WidgetStateProperty.resolveWith<Color?>(
(states) {
return Colors.transparent; // Default
},
),
splashFactory: InkRipple.splashFactory, // Ripple effect for TabBar
),
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
splashFactory: NoSplash.splashFactory,
),
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width / 2,
height: 45,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(
25.0,
),
),
child: Container(
color: Colors.transparent,
child: TabBar(
onTap: (index) {
_tabController.animateTo(
index,
duration: Duration.zero, // Disables animation
curve: Curves.linear,
);
},
labelPadding: EdgeInsets.zero,
controller: _tabController,
// give the indicator a decoration (color and border radius)
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
25.0,
),
color: Colors.green,
),
indicatorColor: Colors.transparent,
dividerColor: Colors.transparent,
labelColor: Colors.white,
unselectedLabelColor: Colors.black,
tabs: [
// first tab [you can add an icon using the icon property]
Tab(
child: Container(
// width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.center,
child: Text("Place Bid"),
),
),
),
// second tab [you can add an icon using the icon property]
Tab(
child: Container(
// width: MediaQuery.of(context).size.width,
child: Align(
alignment: Alignment.center,
child: Text("buy now"),
),
),
),
],
),
),
),
// tab bar view here
Expanded(
child: TabBarView(
controller: _tabController,
children: [
// first tab bar view widget
Center(
child: Text(
'Place Bid',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
// second tab bar view widget
Center(
child: Text(
'Buy Now',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
),
],
),
),
],
),
),
);
}
}
- Flutter error: Execution failed for task ':app:compileDebugJavaWithJavac'
- Children that overflow their parents don't receive tap detection
- Flutter auto fill Assists suggestions not working
- Convert a String to enum value in Dart
- How to use the flutter native splash screen
- Where is flutter.compileSdkVersion?
- Execution failed for task ':app:checkDebugDuplicateClasses'. due to Duplicate class com.mapbox.android.core.permissions.PermissionsListener
- Why does Flutter fail to compile as soon as any package is added to the pubspec.yaml in Android Studio?
- How to check the flutter version of a project
- Flutter - Unhandled Exception: FormatException: Unexpected character (at character 1) | Instance of Response
- Android Studio device list stuck on loading
- The image I tried to display via Flutter NetworkImage is not displayed correctly
- How to load Flutter assets in Android
- App must target Android 14 (API level 34) or higher is showing even after update to API level 34
- How to collapse the ExpansionTile on button click? - Flutter
- Flutter: Unhandled Exception: ServicesBinding.defaultBinaryMessenger was accessed before the binding was initialized
- Flutter Firebase Google Sign In not working. Stops after account selection
- How to create a 3D house in Flutter with rotation, highlighting, and control?
- Flutter build error for the first time :Could not open settings remapped class cache for 7yvt6la2007dno98lt3rzbguf
- ModalBottomSheet with images from the gallery
- Create a page transition animation from a DraggableScrollableSheet
- Flutter/Dart: Customize Bottom Navigation Bar height
- How Do I Use KeyCloak in Flutter
- Flutter Solve: 'Offset is outside the bounds of the DataView' error only on Firebase Hosting
- Stripe terminal Wisepad 3 reader not get detected in android Flutter
- Flutter z-index in Column
- How to remove trailing zeros using Dart
- Opening Location Permission from the inside of App flutter
- Dart/Flutter check if value is an integer/whole number
- Could not find package "flutter_native_splash". Did you forget to add a dependency?