OverflowBox,the overflowed part cannot respond to the button?

Question

I need to build a bottomNavigationBar with a vertical overflow TabBar item， so I tried to use OverflowBox,it looks like useful. but there is another problew，the overflowed part cannot respond to the button.

so what should I do make the GestureDetector effective？ or you have other ways to build a bottomNavigationBar like this? thank you very much!

this is screen capture

this is main.dart:

    import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new MyHomePage(title: 'OverflowBox touch test'),
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);

      final String title;

      @override
      _MyHomePageState createState() => new _MyHomePageState();
    }

    List<Color> _colors = [
      Colors.blue,
      Colors.green,
      Colors.yellow,
    ];

    class _MyHomePageState extends State<MyHomePage>  with SingleTickerProviderStateMixin{
      String _tip = "";
      TabController controller;
      @override
      Widget build(BuildContext context) {

        return new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new TabBarView(
                controller: controller,
                children: <Widget>[
                  new Center(child: new Text("page 1")),
                  new Center(child: new Text("page 2")),
                  new Center(child: new Text("page 3")),
                ],
              ),
          bottomNavigationBar: new Container(
            height: 72.0,
            alignment: Alignment.bottomCenter,
            color: const Color.fromRGBO(45, 45, 45, 1.0),
            child: new TabBar(
              controller: controller,
              indicatorWeight: 0.01,
              tabs: <Widget>[
                _getBarItem(0),
                _getBarItem(1),
                _getBarItem(2),
              ],
            ),
          ),
        );
      }
      @override
      void initState() {
        super.initState();
        controller = new TabController(length: 3, vsync: this);
      }

      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }
      Widget _getBarItem(int idx){
        Widget ret = new Container(
          width: 80.0,
          height: idx==1?120.0:50.0,
          color: _colors[idx],
        );
        if(idx==1){
          ret = new OverflowBox(
            maxHeight: double.infinity,
            alignment: Alignment.bottomCenter,
            child: new Container(
              color: Colors.black,
              child: new GestureDetector(
                onTapDown: (x){
                  controller.animateTo(idx);
                },
                child: ret,
              ),
            ),
          );
        }
        return ret;
      }
    }

Answer 1

Try to make your GestureDetector wrap your OverflowBox

Answer 2

Use this behavior on the Gesture Detector and then wrap your overflow with it.

GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap(){..

)