CODEWITHSUNDEEP
flutterflutter-navigation
SIMMORSAL
SIMMORSAL

Reputation: 1674

Is it possible to keep a widget while navigating to a new page?

In flutter, you can for example have two pages with their own sets of widgets that when you navigate from one page to the other, the widgets on the screen will change to the other one.

But is it possible to have a completely seperate layer of widgets, that is drawn on top of all pages and it's widgets would remain when the navigation happens?

Upvotes: 1

Views: 3190

Answers (1)

Braden Bagby
Braden Bagby

Reputation: 293

Completely possible!

Method 1: Subnavigators
Make the widget you want to stay consistent be at the same level or higher up in the widget tree than the navigator. For example (MaterialApp widget creates navigator automatically at its level)

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Column(
      children: [
        Container(
          height: 100,
          color: Colors.red,
        ),
        Expanded(
          child: MaterialApp(
            home: PageOne(),
          ),
        ),
      ],
    ));
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      appBar: AppBar(
        title: Text("Page Two"),
      ),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: Text("Open Page Two"),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PageTwo()),
            );
          },
        ),
      ),
      appBar: AppBar(
        title: Text("Page One"),
      ),
    );
  }
}

This will keep a red container over any navigation. You could use a Stack instead of a Column if you wanted an overlay.
At this point we have two navigators because we have two MaterialApps. Calling navigator.of(context) retrieves the closest one in the widget tree, which will be the subnavigator, allowing our navigation to only affect everything under the second MaterialApp widget

To access the navigators higher up in the tree, you can provide a navigatorKey to MaterialPage() widget. You can then pass this key around or make it a static global variable if you like.

static final navigatorKey = GlobalKey<NavigatorState>();

and then

MaterialPage(navigatorKey: navigatorKey...)

When you want to get navigator from there

Navigator.of(navigatorKey.currentContext).push()

Method 2: Keys I won't go too in depth on these here. But keys are a way to identify widget across rebuilds. You can give the widget you want to stay consistent a key, and it will be considered the same widget on rebuilds. Check out more information on keys in flutter: https://medium.com/flutter/keys-what-are-they-good-for-13cb51742e7d

Upvotes: 2

Related Questions