To modify the ripple effect of a text button in Flutter, or to eliminate it entirely, you can follow these steps:
First, create a custom Theme for your app, if you haven't already. This can be done by creating a new file named themes.dart, for example, and defining a new theme within it.
Within your theme, set the accentColor property to transparent to eliminate the ripple effect. Alternatively, you can set it to a specific color to customize the ripple effect.
Apply the custom Theme to your MaterialApp widget by setting the theme property to your defined theme.
Here's an example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
theme: ThemeData(
accentColor: Colors.transparent, // eliminate the ripple effect
// or use a specific color:
// accentColor: Colors.red,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: TextButton(
onPressed: () {},
child: Text('My Button'),
),
),
);
}
}
In this example, the TextButton widget will no longer have a ripple effect when pressed, because the accentColor is set to transparent.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2022-03-11 11:00:00 +0000
Seen: 11 times
Last updated: Mar 06 '23
How can zooming similar to desktop be achieved in HTML webview browser using Flutter?
In what way can the appleID signin be utilized in flutter?
How to maintain state across different pages using flutter?
How can I change a CameraImage Stream into bytes or a file in Flutter?
How can the current page context be obtained by a Flutter GetX controller?