Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass tap event to the child behind in Stack

Tags:

flutter

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.

like image 704
Thepeanut Avatar asked Nov 30 '25 14:11

Thepeanut


1 Answers

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.

like image 89
Thepeanut Avatar answered Dec 03 '25 08:12

Thepeanut



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!