Rippple effect su GestureDetector in Flutter

GestureDetector ed InkWell svolgono praticamente la stessa funzione, cioè quella di eseguire un'azione su un widget.

InkWell ha un effetto ripple, ma GestureDetector è più flessibile e ci permette di fare più cose.

Quindi, come fare per ottenere un effetto ripple su GestureDetector?

Qui sotto un esempio in cui vi ho messo tre esempi:

• un classico InkWell
• un classico GestureDetector
• un esempio in cui li usiamo entrambi per ottenere l'effetto desiderato

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("TEST"),
      ),
      body: Column(
        children: [
          InkWell(
            onTap: () {
              print('INKWELL');
            },
            child: const Icon(
              Icons.fingerprint,
              size: 100,
            ),
          ),
          GestureDetector(
            onTap: () {
              print('GESTURE');
            },
            child: Container(
              color: Colors.yellow.shade600,
              padding: const EdgeInsets.all(8),
              child: Text('GESTURE'),
            ),
          ),
          InkWell(
            onTap: () {},
            child: GestureDetector(
              onLongPress: () {
                print('RIPPLE');
              },
              child: const Padding(
                padding: EdgeInsets.all(12.0),
                child: Text('RIPPLE'),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Come potete vedere nel terzo esempio per ottenere il print ho messo un onLongPress per fare distinzione.

Enjoy!