11

I have a Container widget and an IconButton. When I press on the IconButton, ripple effect shows behind the Container. Is there a way to fix this?

Here is the full class as Github Gist.

enter image description here

Container(
  height: height,
  decoration: _cardBoxDecoration(Colors.white),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(
              FontAwesomeIcons.checkCircle,
              color: _checkGrey,
              size: 20,
            ),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(
              Icons.more_horiz,
              color: _grey,
              size: 20,
            ),
            onPressed: () {},
          )
        ],
      ),
    ]
  )
);
3
  • do you want to completely remove ripple effect? Commented Feb 4, 2020 at 4:52
  • 1
    @VirenVVarasadiya obviously, he wants to see the ripple effect within Container bounds, not outside of it. Commented Feb 4, 2020 at 5:11
  • I want to see the ripple effect within Container bounds, as @AndreyGordeev said.
    – Burak
    Commented Feb 4, 2020 at 5:20

1 Answer 1

10

You can use the Material widget to get the output you want. Replace the Container Widget with Material Widget.

class _AppointmentsCart extends StatelessWidget {
  final double height;

  _AppointmentsCart({this.height});

  @override
  Widget build(BuildContext context) {
    return Material( // replace container widget
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20))),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(
                  FontAwesomeIcons.checkCircle,
                  color: _grey,
                  size: 20,
                ),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(
                  Icons.more_horiz,
                  color: Colors.grey,
                  size: 20,
                ),
                onPressed: () {},
              )
            ],
          ),
          Padding(
            padding: EdgeInsets.only(left: 15),
            child: Text(
              'Today',
              style: TextStyle(fontSize: 18),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(15),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text(
                  '5',
                  style: TextStyle(fontSize: 24, color: _titleGrey),
                ),
                Text(
                  'Appoinemts',
                  style: TextStyle(fontSize: 12, color: _subtitleGrey),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.