CODEWITHSUNDEEP
dartflutter
黄彧钊
黄彧钊

Reputation: 151

OverflowBox,the overflowed part cannot respond to the button?

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

Upvotes: 14

Views: 1673

Answers (4)

张海标
张海标

Reputation: 21

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.

Upvotes: 1

TheManuz
TheManuz

Reputation: 31

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

PS: Using functions that return widget should be avoided.

Upvotes: 1

Justus Lolwerikoi
Justus Lolwerikoi

Reputation: 873

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

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

)

Upvotes: 1

Shady Aziza
Shady Aziza

Reputation: 53317

Try to make your GestureDetector wrap your OverflowBox

Upvotes: 1

Related Questions