OverflowBox can't be touched?

[huang]

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!

[huang]

this is my 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;

}

}

在 2018年9月2日星期日 UTC+8上午12:24:30，huang写道：

[maido...@gmail.com]

I had exactly the same issue and I opened this https://github.com/flutter/flutter/issues/20562

Even if you would get the touch working there are other issues like snackbar being shown behind the overflow.

I tried to solver this by doing a stupid hack where half of the button is in the bottom bar and the other half in the content, worked but ugly.

In the end I just decided to increase the height of the bottom bar and set opacity to zero where the content should be.

[huang]

Ťanks for your replay

在 2018年9月2日星期日 UTC+8下午9:14:44，maido...@gmail.com写道：

我有完全相同的问题，我打开了这个  https://github.com/ flutter / flutter / issues / 20562

即使你能够触摸工作，还有其他问题，比如在溢出后面显示小吃吧。

我尝试通过做一个愚蠢的黑客来解决这个问题，其中一半按钮位于底部栏中而另一半位于内容中，但工作却很难看。

最后，我决定增加底栏的高度，并将内容应该设置为不透明度为零。

周二，2018年9月1日19:24:30 UTC + 3，huang写道：

我需要构建一个带有垂直溢出TabBar项的bottomNavigationBar，

所以我尝试使用OverflowBox，看起来很有用。

但还有另一个问题，溢出的部分无法响应按钮。

那么我应该怎么做才能使GestureDetector生效？

或者你还有其他方法来构建这样的bottomNavigationBar？

非常感谢你！

[Olaide Nojeem Ekeolere]

Hi,

   So i looked at this was was able to achieve the desired result as shown below but without the bottomNavigation

So i just modified your code and used a stack widget as shown below

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;

  createState() => _MyHomePageState();

}

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  String _tip = "";

  PageController _pageController;
  int _currentIndex;
  var scaffoldKey = GlobalKey<ScaffoldState>();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _pageController = PageController();
    _currentIndex = 0;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    double width = MediaQuery.of(context).size.width/3.0;//because 3 tabs
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          _buildMainWidget(),
          Positioned(//bottomitem1
            bottom: 0.0,
            left: 0.0,
            child: _getBarItem(0),
          ),
          Positioned(//bottomitem2
            bottom: 0.0,
            left: width,
            child: _getBarItem(1),
          ),
          Positioned(//bottomitem3
            bottom: 0.0,
            right: 0.0,
            child: _getBarItem(2),
          ),
        ],
      ),
    );
  }

  Widget _buildMainWidget() {
    return Column(
      children: <Widget>[
        Expanded(
          child: PageView(
            controller: _pageController,
            onPageChanged: _onPageChanged,
            children: <Widget>[
              Center(child: Text("page 1")),
              Center(child: Text("page 2")),
              Center(child: Text("page 3")),
            ],
          ),
        ),
        Container(//widget to act as bottom navigation background
          height: 72.0,

          color: const Color.fromRGBO(45, 45, 45, 1.0),

        ),
      ],
    );
  }

  Widget _getBarItem(int idx) {
    double width = MediaQuery.of(context).size.width/3.0;//because 3 tabs
    if(idx==1) {
      return Container(
        width: width,
        //color: _currentIndex==idx? Colors.red : Colors.transparent,
        child: Center(
          child: GestureDetector(
            onTapDown: (x) => _navigationTapped(idx),
            child: Container(
              width: 80.0,
              height: 120.0,
              color: _colors[idx],
            ),
          ),
        ),
      );
    }
    else{
      return Container(
        width: width,
        //color: _currentIndex==idx? Colors.red : Colors.transparent,
        height: 72.0,
        child: Center(
          child: GestureDetector(
            onTapDown: (x) => _navigationTapped(idx),
            child: Container(
              width: 80.0,
              height: 50.0,
              color: _colors[idx],
            ),
          ),
        ),
      );
    }
  }

  void _onPageChanged(int currentIndex) {
    setState(() {
      _currentIndex = currentIndex;
    });
  }

  void _navigationTapped(int selectedIndex) {
    _pageController.animateToPage(selectedIndex,
        duration: const Duration(
          milliseconds: 300,
        ),
        curve: Curves.ease);
    setState(() {
      _currentIndex = selectedIndex;
    });
    showSnackBar('Clicked on Page ${selectedIndex+1} tab');
  }

  void showSnackBar(String message) {
    scaffoldKey.currentState.showSnackBar(SnackBar(
        content: Text(
          message,
        )));
  }
}

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Olaide Nojeem Ekeolere]

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Custom BottomBar'),

[huang]

thanks for your replay,this is a good suggestion.

在 2018年9月3日星期一 UTC+8下午7:01:36，Olaide Nojeem Ekeolere写道：

[Olaide Nojeem Ekeolere]

Glad i could help. I can see that the mail has messed up the code so i have attached the file for you