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.
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.