Ripple-effect programmaticaly for InkWell or InkResponse or RadioListTile

Question

What we can do to call ripple effect programmaticaly?

Example of my code:

return RadioListTile(
          key: _radioKey,
          focusNode: focusNode,
          value: radioValue,
          groupValue: radioGroupValue,
          activeColor: AppColors.underlineColor,
          toggleable: true,
          enableFeedback: true,
          onChanged: (int? value) {
            _onSelectItem();
          },
          dense: false,
          title: Padding(
            padding: EdgeInsets.only(bottom: 5),
            child: Text(
              widget.title,
              textAlign: TextAlign.left,
              style: TextStyle(
                color: Theme.of(context).textTheme.headline6?.color,
                fontSize: 16
              ),
          )),
          Text(
            widget.subtitle,
            textAlign: TextAlign.left,
            style: TextStyle(
              color: Theme.of(context).textTheme.subtitle1?.color,
              fontSize: 14
            ),
          )

the problem is when i click on the circle of RadioListTile there is no ripple-effect, can i do it programmaticaly?

Answer 1

You can use the IgnorePointer to make the radio invisible to hit testing. So, only the InkResponse behind it is going to receive the taps. BTW, only InkResponse or only InkWell is enough. InkWell is a specialized InkResponse that doesn't clip splashes and is always rectangular.

Check out the result below and the live demo on DartPad:

The code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool radioValue = false;
  bool? radioGroupValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkResponse(
          onTap: () {
            setState(() {
              radioGroupValue =
                  radioGroupValue == null ? true : !radioGroupValue!;
            });
          },
          highlightShape: BoxShape.rectangle,
          splashColor: Colors.grey.withOpacity(0.15),
          highlightColor: Colors.grey.withOpacity(0.15),
          hoverColor: Colors.grey.withOpacity(0.15),
          containedInkWell: true,
          child: IgnorePointer(
            child: RadioListTile(
              controlAffinity: ListTileControlAffinity.platform,
              value: true,
              groupValue: radioGroupValue,
              // activeColor: AppColors.underlineColor,
              toggleable: true,
              enableFeedback: true,
              onChanged: (_) {},
              dense: false,
              title: Padding(
                  padding: const EdgeInsets.only(bottom: 5),
                  child: Text(
                    widget.title,
                    textAlign: TextAlign.left,
                    style: TextStyle(
                        color: Theme.of(context).textTheme.headline6?.color,
                        fontSize: 16),
                  )),
              subtitle: Text(
                'subtitleLang',
                textAlign: TextAlign.left,
                style: TextStyle(
                    color: Theme.of(context).textTheme.subtitle1?.color,
                    fontSize: 14),
              ),
            ),
          ),
        ),
      ),
    );
  }
}