Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IconButton's ripple effect appears under the widget

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: () {},
          )
        ],
      ),
    ]
  )
);
like image 326
Burak Avatar asked Feb 04 '20 04:02

Burak


People also ask

How do you get the ripple effect in flutter?

Flutter provides the InkWell widget to perform this effect. Create a ripple effect using the following steps: Create a widget that supports tap. Wrap it in an InkWell widget to manage tap callbacks and ripple animations.

How do you add splash color in flutter?

To do so, open the Flutter app's Xcode project by typing open ios/Runner. xcworkspace from the root of your app directory. Then select Runner/Assets. xcassets from the Project Navigator and drop in the desired images to the LaunchImage image set.


1 Answers

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),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
like image 199
Amit Jangid Avatar answered Nov 16 '22 04:11

Amit Jangid