Flutter: using nested navigator - flutter

Question

I have a page that divides the screen into left (CheckOutPage) and right (MyFoodOrder()):
class TakeOrderPage extends StatefulWidget {
#override
_TakeOrderPageState createState() => _TakeOrderPageState();
}
class _TakeOrderPageState extends State<TakeOrderPage> {
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(flex: 4, child: CheckOutPage()),
VerticalDivider(),
Expanded(flex: 6, child: MyFoodOrder()),
],
);
}
}
In MyFoodOrder, I have a widget that builds the food items using FoodCard:
Widget buildFoodList() {
return Expanded(
child: GridView.count(
//itemCount: foods.length,
childAspectRatio: 3.0,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
crossAxisCount: 2,
controller: _controller,
physics: BouncingScrollPhysics(),
//children: foods.map((food) {
// return FoodCard(food);
//}).toList(),
children: [for (var food in Level1) if ((food.foodType == MyFoodTypes[value])) FoodCard(food)].toList(),
),
);
}
Inside FoodCard, I have a widget that has an InkWell that can move to another page when tapped for selecting options. At the moment, the new page ChooseOptions() will occupy the whole screen:
Widget buildPriceInfo() {
ConfirmAction action;
return Padding(
padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
'\$ ${food.price}',
style: titleStyle,
),
Card(
margin: EdgeInsets.only(right: 0),
shape: roundedRectangle4,
color: mainColor,
child: InkWell(
onTap: IsAvailable() ? () async {
remark = ''; //cancel any selected taste
if (food.options.length != 0) {
if (food.options.containsKey('2')) {
action = await _showTasteDialog(food.index);
}
if (food.options.containsKey('1')) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ChooseOptions(food)),
);
}
else
addItemToCard();
}
else
addItemToCard();
} : (){},
splashColor: Colors.white70,
customBorder: roundedRectangle4,
child: Icon(Icons.add, size: 30,),
),
)
],
),
);
}
I want to modify it so that the new page of ChooseOptions only occupies the area of MyFoodOrder() instead of the whole screen. I read that nested navigator is the solution but I couldn't work it out after reading some of the examples online. Grateful if more explicit guidance or help can be provided.
Many thanks!

Answer 1

Wrap your MyFoodOrder with Navigator, set the routes, and assign a Navigation Key to it.
static final navigatorKey = GlobalKey<NavigatorState>();
Then use the Navigation Key to changing the routing.
navigatorKey.currentState.pushNamed("Your route");