Created
June 28, 2024 18:54
-
-
Save hectorAguero/0fde75863fed6ac781f1834e0b8b465d to your computer and use it in GitHub Desktop.
InkWell vs GestureDetector
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
/// Flutter code sample for [InkWell]. | |
void main() => runApp(InkWellExampleApp()); | |
class InkWellExampleApp extends StatefulWidget { | |
@override | |
State<InkWellExampleApp> createState() => _InkWellExampleAppState(); | |
} | |
class _InkWellExampleAppState extends State<InkWellExampleApp> { | |
final firstValue = ValueNotifier(false); | |
final secondValue = ValueNotifier(false); | |
final thirdValue = ValueNotifier(false); | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
home: Scaffold( | |
appBar: AppBar(title: const Text('InkWell Sample')), | |
body: Center( | |
child: Column( | |
crossAxisAlignment: CrossAxisAlignment.center, | |
children: [ | |
CheckboxTile( | |
onChanged: () { | |
setState(() { | |
firstValue.value = !firstValue.value; | |
}); | |
}, | |
value: firstValue.value), | |
SizedBox(height: 10), | |
CheckboxGestureDetector( | |
onChanged: () { | |
setState(() { | |
secondValue.value = !secondValue.value; | |
}); | |
}, | |
value: secondValue.value), | |
SizedBox(height: 10), | |
CheckboxInkWell( | |
onChanged: () { | |
setState(() { | |
thirdValue.value = !thirdValue.value; | |
}); | |
}, | |
value: thirdValue.value) | |
]), | |
)), | |
); | |
} | |
} | |
class CheckboxInkWell extends StatelessWidget { | |
const CheckboxInkWell( | |
{super.key, required this.onChanged, required this.value}); | |
final VoidCallback onChanged; | |
final bool value; | |
@override | |
Widget build(BuildContext context) { | |
return InkWell( | |
borderRadius: BorderRadius.circular(8.0), | |
onTap: onChanged, | |
child: CheckboxTile( | |
onChanged: onChanged, | |
value: value, | |
), | |
); | |
} | |
} | |
class CheckboxGestureDetector extends StatelessWidget { | |
const CheckboxGestureDetector( | |
{super.key, required this.onChanged, required this.value}); | |
final VoidCallback onChanged; | |
final bool value; | |
@override | |
Widget build(BuildContext context) { | |
return GestureDetector( | |
onTap: onChanged, | |
child: CheckboxTile( | |
onChanged: onChanged, | |
value: value, | |
), | |
); | |
} | |
} | |
class CheckboxTile extends StatelessWidget { | |
const CheckboxTile({super.key, required this.onChanged, required this.value}); | |
final VoidCallback onChanged; | |
final bool value; | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
padding: const EdgeInsets.all(8.0), | |
decoration: BoxDecoration( | |
borderRadius: BorderRadius.circular(8.0), | |
border: Border.all(color: Colors.red, width: 2.0), | |
), | |
child: Row( | |
children: [ | |
Checkbox( | |
value: value, | |
onChanged: (_) => onChanged.call(), | |
), | |
const Text('Checkbox'), | |
], | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment