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