fixes #2: 'Nested ScaleTap widget animates both ScaleTap widgets'

[rupinderjeet]

Fixes #2: 'Nested ScaleTap widget animates both ScaleTap widgets'

Events were propagating from 'inner' ScaleTap to 'outer' ScaleTap widget. This made both widgets to react with touch animation. To fix this, I needed a value that could be checked by all of ScaleTap widgets in nested tree to form a source-of-truth. To do this, I created ScaleTapInfo class whose value can be, optionally, passed from outside. When same instance of this class is sent to all nested ScaleTap widgets, they act as if they were stitched with same thread.

I mark the tap-event as consumed in inner ScaleTap widget, which is later on used by parent ScaleTap widget to consume the event only if it wasn't consumed before.

The issue is fixed by default, and the developers do not need to change their code. This is because ScaleTapInfo has a default instance included.

If you have any queries, or feedback, please let me know.

Credit: https://stackoverflow.com/a/73481203/3682535

[rupinderjeet]

Here's a way to test this:

import 'package:flutter/material.dart';
import 'package:flutter_scale_tap/flutter_scale_tap.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final needle = ScaleTapInfo(tag: "playback-list-item");

    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(title: const Text('Welcome to Flutter')),
        body: ScaleTap(
          info: needle,
          onPressed: () => print("tapped-outer"),
          child: Container(
            alignment: Alignment.center,
            width: 200,
            height: 200,
            color: Colors.red,
            child: ScaleTap(
              info: needle,
              onPressed: () => print("tapped-inner"),
              child: Container(
                alignment: Alignment.center,
                width: 140,
                height: 140,
                color: Colors.blue,
                child: ScaleTap(
                  info: needle,
                  onPressed: () => print("tapped-innermost"),
                  child: Container(
                    alignment: Alignment.center,
                    width: 80,
                    height: 80,
                    color: Colors.green,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}