Flutter: Is it possible to substitute widget itself? - layout

Question

I have the following situation:
The main widget with Row 1,2,3
In Row 2, I initially set the Widget A
What I want:
replace the Widget A with Widget B once I have a state change in Widget A
handle the replacement in Widget A and not in the main Widget (so I don't want to use callbacks from Widget A or observing a global state and react on it in the main Widget)
Replacement means: Widget B is still a child of the main Widget (in my case stays in the second row and doesn't go fullscreen as it is the case when you use routes/Navigator?)
My reasoning for what I want:
in each row of the main widget the user can interact with a sub menue which e.g. in row 2 consists of WidgetA -> [user interaction] -> WidgetB [user interaction] -> WidgetC
I don't want to manage all this different states from the main widget
What I tried:
//in Widget A -> in order to switch to Widget B
Navigator.push(context, new MaterialPageRoute(
builder: (_) => new WidgetB(),
));
This doesn't do the job because the Widget B doesn't stay in the WidgetTree of the main Widget
If this is not possible I would like to know what is the flutter way of achieving what I want :-)

Answer 1

You need to have some parent that knows of this subnavigation. You can't really replace a view by itself, its parent is what has the reference to that widget in the tree, so the parent is what needs to convey this to flutter.
That said, you can make a custom widget whose job is to listen for child events, and change the child accordingly.
App
/ \
Row Row
|
WidgetParent
|
WidgetA
Here WidgetParent could keep e.g. a Listenable and pass a ChangeNotifier to WidgetA. When WidgetA decides WidgetX should come to screen it can emit that to the parent.
class WidgetParent extends AnimatedWidget {
WidgetParent() : super(listenable: ValueNotifier<Widget>(null));
ValueNotifier<Widget> get notifier => listenable as ValueNotifier<Widget>;
Widget build(BuildContext context) {
return new Center(child: notifier.value ?? WidgetA(notifier));
}
}
Now child widgets can notify who's next.
class WidgetA extends StatelessWidget {
WidgetA(this.notifier);
final ValueNotifier<Widget> notifier;
#override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () => notifier.value = WidgetB(notifier),
child: Text("This is A, go to B"),
);
}
}
class WidgetB extends StatelessWidget {
WidgetB(this.notifier);
final ValueNotifier<Widget> notifier;
#override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () => notifier.value = WidgetA(notifier),
child: Text("This is B, go to A"),
);
}
}

Answer 2

I am fairly new to Flutter but one workaround I could think is - You use State with the widget. For example, if you want to display two rows depending on what use does then you set height of one row what you desire and set height of second row to zero. And swap it on demand.
Of course, you need to empty the contents as well. e.g. setting text to '' etc.
This may not be the ideal solution but could work.