Hướng dẫn và ví dụ Flutter InkWell

InkWell(
  child: Container(
    width: 300,
    height: 180,
    decoration: BoxDecoration(color: Colors.indigo.withAlpha(40)),
    child: const Text("I am a Container"),
  ),
  onTap: () {
    print("Tap");
  },
)

InkWell({
  Key? key,
  Widget? child,
  void Function()? onTap,
  void Function()? onDoubleTap,
  void Function()? onLongPress,
  void Function(TapDownDetails)? onTapDown,
  void Function(TapUpDetails)? onTapUp,
  void Function()? onTapCancel,
  void Function()? onSecondaryTap,
  void Function(TapUpDetails)? onSecondaryTapUp,
  void Function(TapDownDetails)? onSecondaryTapDown,
  void Function()? onSecondaryTapCancel,
  void Function(bool)? onHighlightChanged,
  void Function(bool)? onHover,
  MouseCursor? mouseCursor,
  Color? focusColor,
  Color? hoverColor,
  Color? highlightColor,
  MaterialStateProperty<Color?>? overlayColor,
  Color? splashColor,
  InteractiveInkFeatureFactory? splashFactory,
  double? radius,
  BorderRadius? borderRadius,
  ShapeBorder? customBorder,
  bool? enableFeedback = true,
  bool excludeFromSemantics = false,
  FocusNode? focusNode,
  bool canRequestFocus = true,
  void Function(bool)? onFocusChange,
  bool autofocus = false,
  MaterialStatesController? statesController,
  Duration? hoverDuration,
});

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  double sideLength = 80;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text("InkWell and Animated Container"),
      ),
      body: Center(
        child: AnimatedContainer(
          height: sideLength,
          width: sideLength,
          duration: const Duration(seconds: 2),
          curve: Curves.easeIn,
          child: Material(
            color: Colors.yellow,
            child: InkWell(
              onTap: () {
                setState(() {
                  sideLength == 80 ? sideLength = 240 : sideLength = 80;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}