Embedded MapBox Navigation

Question

I'm making an flutter app for my electric vehicle's smart display. So the idea is to have 2 MaterialApps: one for the whole app, and another one only for navigation so that I can push different pages only inside a part of the screen that is responsible for navigation (i.e. prepareRide screen, homeScreen, turnByTurnScreen ...) as you can see bellow. So, everything looks fine, I can select starting and endpoint address but THE PROBLEM IS THAT NAVIGATION IMMEDIATELY GOES FULL SCREEN, but I need it to stay embedded on the right part of the screen. mainScreen

ANYBODY HAS AN IDEA HOW TO SOLVE THIS ISSUE ?

Relevant code is given bellow (I did not put "Future _onRouteEvent(e) async {}" function here because it is standard, nothing special there). As you can see I used SizedBox for CircularProgressIndicator while the map is loading. I would like that my navigation also can fit that or similiar box.

import 'package:evo_app_nav/helpers/shared_prefs.dart';
import 'package:flutter/material.dart';

import 'package:mapbox_gl/mapbox_gl.dart';
import 'package:flutter_mapbox_navigation/library.dart';


class TurnByTurn extends StatefulWidget {
  const TurnByTurn({Key? key}) : super(key: key);

  @override
  State<TurnByTurn> createState() => _TurnByTurnState();
}

class _TurnByTurnState extends State<TurnByTurn> {
  // Waypoints to mark trip start and end
  LatLng source = getTripLatLngFromSharedPrefs('source');
  LatLng destination = getTripLatLngFromSharedPrefs('destination');
  late WayPoint sourceWaypoint, destinationWaypoint;
  var waypoints = <WayPoint>[];

  // Config variables for Mapbox Navigation
  late MapBoxNavigation directions;
  late MapBoxOptions _options;
  late double distanceRemaining, durationRemaining;
  late MapBoxNavigationViewController _controller;

  final bool isMultipleStop = false;
  String instruction = "";
  bool arrived = false;
  bool routeBuilt = false;
  bool isNavigating = false;

  @override
  void initState() {
    super.initState();
    initialize();
  }

  Future<void> initialize() async {
    if (!mounted) return;

    // Setup directions and options
    directions = MapBoxNavigation(onRouteEvent: _onRouteEvent);
    _options = MapBoxOptions(
      zoom: 18,
      voiceInstructionsEnabled: true,
      bannerInstructionsEnabled: true,
      mode: MapBoxNavigationMode.drivingWithTraffic,
      isOptimized: true,
      units: VoiceUnits.metric,
      simulateRoute: true,
      language: 'en',
    );
    // Configure waypoints
    sourceWaypoint = WayPoint(
        name: "Source", latitude: source.latitude, longitude: source.longitude);
    destinationWaypoint = WayPoint(
        name: "Destination",
        latitude: destination.latitude,
        longitude: destination.longitude);
    waypoints.add(sourceWaypoint);
    waypoints.add(destinationWaypoint);
    // Start the trip
    await directions.startNavigation(wayPoints: waypoints, options: _options);
  }

  @override
  Widget build(BuildContext context) {
    //return const RateRide();
    return SizedBox(
        width: 300, height: 400, child: const CircularProgressIndicator());
  }