Erfan
Reputation: 3353
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,
),
),
),
],
),
),
],),)
);
}
}
Upvotes: 0
Views: 68
Answers (1)
ayman omara
Reputation: 344
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,
),
),
),
],
),
),
],
),
),
);
}
}
Upvotes: 1