3

I have a container with two columns. When you click on the OPTIONS button, the screen animates half a width to the left and shows additional (clickable!) options.

enter image description here

I'm currently doing this with a Row containing two containers where the second container lives in a Stack that overlays a translated-to-the-right container with the options. Something along those lines:

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
    Expanded(
      child: Container(
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.orange
            ),
            Transform.translate(
              offset: const Offset(170.0, 0.0),
              child: Container(
                color: Colors.green,
                child: Column(
                  children: const <Widget>[
                    FlatButton(child: Text("Option 1")),
                    FlatButton(child: Text("Option 2")),
                    FlatButton(child: Text("Option 3")),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    )
  ],
);

Now, since the green container is outside its parent stack, the option buttons won't get any gesture events and hence not work. There is a similar question here and even a GitHub issue. What neither provides is a solution.

Is there way to make gestures outside the stack work, and if not, what are my options for this use case? In a way what I'm trying to achieve is similar to a tab view but with two tab views displayed at the same time.

phreezie
  • 324
  • 2
  • 8
  • 1
    I've finally kept the current layout but moved the links outside of the stack to a new [Overlay](https://docs.flutter.io/flutter/widgets/Overlay-class.html). I'm keeping this open in case someone finds a solution to titled problem. – phreezie Oct 26 '18 at 15:33

0 Answers0