Touch effect (touch ripples) on long touches, with Inkwell

Question

We can create a button with a Container, so leave it as we wish.

My doubt, is in the touch effect with the InkWell, that a color is added to the Container, the same "stops working" as in the example:

Code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'InkWell Demo';

    return MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(child: MyButton()),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // The InkWell wraps the custom flat button widget.
    return InkWell(
      // When the user taps the button, show a snackbar.
      onTap: () {
        Scaffold.of(context).removeCurrentSnackBar();
        Scaffold.of(context).showSnackBar(SnackBar(
          content: Text('Tap'),
        ));
      },
      child: Container(
        padding: EdgeInsets.all(12.0),
        child: Text('Flat Button'),
        color: Colors.blue,
      ),
    );
  }
}

---

Source: ripples

---

Doubts

• How can I "fix" this problem?
• What other alternatives are widgets for buttom customized?

Answer 1

How can I "fix" this problem?

To do what you want, you need to use the Widget Material and set the color directly on it instead of putting on the Container, do so:

Material(
  color: Colors.blue,
  child: InkWell(
    onTap: () {
      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text('Tap'),
      ));
    },
    child: Container(
      padding: EdgeInsets.all(12.0),
      child: Text('Flat Button'),
    ),
  )
);

Explanation

This "problem" occurs because the Container is "above" the InkWell and when set a color to it, it ceases to be transparent, so then covering the effects of InkWell

What other widgets alternatives to custom Buttons?

To create your custom buttons using the Container is one of the best alternatives, because it supports several customizations, it would be kind of a "neutral" Widget. You can also use the AnimatedContainer that can bring cool effects to your customizations.