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;
      }
    }

Dup of https://stackoverflow.com/questions/51366761/in-flutter-how-can-a-positioned-widget-feel-taps-outside-of-its-parent-stack-ar ? — Günter Zöchbauer, Sep 02 '18 at 08:58

score 1 · Answer 1 · answered Sep 02 '18 at 08:57

1

Try to make your GestureDetector wrap your OverflowBox

answered Sep 02 '18 at 08:57

Shady Aziza

50,824
20
115
113

1

thanks for your replay. I tried it, but it didn't work. – 黄彧钊 Sep 03 '18 at 06:48

score 1 · Answer 2 · answered Apr 11 '22 at 20:11

1

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

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

)

answered Apr 11 '22 at 20:11

dev.bojack

753
5
9

score 1 · Answer 3 · answered Oct 28 '22 at 14:49

1

You should use a Stack with a Positioned widget instead of an OverflowBox.

PS: Using functions that return widget should be avoided.

answered Oct 28 '22 at 14:49

TheManuz

31
1
5

张海标 · Answer 4 · 2022-11-15T06:33:08.040

1

I can tell you the reason. OverflowBox widget layout is sizedByParent, so the size is 72. When hit test will ingore the pointer out the size. so the child widget overflowed part cannot respond to the button.

edited Nov 15 '22 at 06:33

answered Nov 15 '22 at 03:49

张海标

21
2

OverflowBox,the overflowed part cannot respond to the button?

4 Answers4