Pass tap event to the child behind in Stack

Question

After watching a tutorial video about creating a custom PageView in Flutter, I've come across a problem. In order to achieve a custom PageView's page positions, I've used a stack of items that swipe left/right depending on the PageView that is placed in a Stack.fill() above every other element in the Stack.

Here's the example of the code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Test')),
      body: Container(
        height: 200.0,
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.blueGrey,
              width: double.infinity,
              height: double.infinity,
              child: Material(
                type: MaterialType.transparency,
                child: InkWell(
                  onTap: () {
                    print('InkWell tapped');
                  },
                ),
              ),
            ),
            Positioned.fill(
              child: PageView.builder(
                itemBuilder: (context, index) {
                  return Container(
                    child: Center(
                      child: Text(
                        '$index',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 25.0,
                        ),
                      ),
                    ),
                  );
                },
                itemCount: 4,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The problem is that I want to trigger a Tap event on the InkWell behind the PageView, while still be able to swipe the PageView.

Is it possible to pass the tap event to the element behind the PageView? Thanks.

---

EDIT:

Since you should not extend widgets in flutter, I've just made a copy of Scrollable class that uses a HitTestBehavior.translucent instead of HitTestBehavior.opaque. After that you create a copy of PageView using this new Scrollable.

With such modification - the children behind the PageView start receiving gestures.

Answer 1

You can use transparent_pointer package to achieve that:

https://pub.dev/packages/transparent_pointer

Answer 2

SOLUTION:

Since you should not extend widgets in flutter, I've just made a copy of Scrollable class that uses a HitTestBehavior.translucent instead of HitTestBehavior.opaque. After that you create a copy of PageView using this new Scrollable.

With such modification - the children behind the PageView start receiving gestures.

Answer 3

This one is without using a stack,

   Scaffold(
            appBar: AppBar(title: Text('Test')),
            body: Container(
              color: Colors.red,
              height: 200.0,
              child: InkWell(
                onTap: () {
                  print('InkWell tapped');
                },
                child: PageView.builder(
                  itemCount: 4,
                  itemBuilder: (context, index) {
                    return Container(
                      child: Center(
                        child: Text(
                          '$index',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 25.0,
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ),
          ),