Revision history [back]

To modify the ripple effect of a text button in Flutter, or to eliminate it entirely, you can follow these steps:

1. 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.

2. 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.

3. 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.