InkWell vs GestureDetector

main.dart

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