It's possible to make the navigator adapt to the size of the child?

Viewed 472

I have a navigator and a map nested in a Stack, the children of the navigator have a dynamic size. Only the navigator forces himself to take all the space he can and cover the map behind him. It is therefore impossible to move the map. It's possible to make the navigator adapt to the size of the child?

class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          StreamProvider(
            create: (context) => LocationService().locationStream,
            child: MapView()
          ),
          Positioned(
            width: MediaQuery.of(context).size.width * 1,
            bottom: 0,
            child: ConstrainedBox(
              constraints: BoxConstraints(
                maxHeight: MediaQuery.of(context).size.height * 1,
                maxWidth: MediaQuery.of(context).size.width * 1
              ),
              child: navigator(),
            )
          ),
        ],
      )
    );
  }

  navigator() {
    return Navigator(
      initialRoute: 'anyview',
      onGenerateRoute: (settings) {
        Widget view;
        switch (settings.name) {
          case 'anyview':
            view = AnyViewDraggableScrollableSheet();
            break;
          case 'otheranyview':
            view = OtherAnyViewDraggableScrollableSheet();
            break;
        }
        var builder = (BuildContext _) {
          return view;
        };
        return MaterialPageRoute(builder: builder, settings: settings);
      },
    );
  }
}

Here's a demo of the problem, the navigator takes all the available space and therefore blocks it by tapping on the red block. https://dartpad.dev/cd1c4d8f1067db0cc65ea2f62c2cbaad

1 Answers

Navigator manages a stack of routes from which you can either push routes to pages into or pop routes from. If you are trying to have a certain container in the same page above your Map , I don't think that the Navigator is the right widget to use unless you actually want to have a page above it.

I propose that you use a sliding up panel that can be placed at the bottom of the page above your map and the user can just slide it up to use or view any information or buttons that you wish to play on it.

If you do not wish to create one yourself , I have had success by using this package in the past in a same case scenario.

Sliding up panel package

Also , I believe that the easier way to use Navigator is simply Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => MyPage())); if you wish to route to a different Page from the one you are currently at and Navigator.pop(context); if you wish to go back to a previous page. There are many other more specific methods for pushing and popping that you can look up in the detailed Flutter documentation.

Related