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?

Are you looking to add effect for the circle or the radio tile? — Kaushik Chandru, Jul 19 '22 at 11:29
Does this solve your question? https://stackoverflow.com/questions/49373396/trigger-inkwell-without-tapping-on-it — lepsch, Jul 19 '22 at 11:41
@lepsch thx, i try to use RenderBox with hitTest, but it not working for radio tile — Rostyslav N, Jul 20 '22 at 07:44
@KaushikChandru, looking to add effect for radio tile, cause then i tap on circle (of this radio tile) there no effect. So i want to add this effect programmaticaly and want to know how to add ripple effects without tapping. — Rostyslav N, Jul 20 '22 at 07:46

lepsch · Accepted Answer · 2022-07-20T08:27:00.717

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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Ripple-effect programmaticaly for InkWell or InkResponse or RadioListTile

1 Answers1