stack_router 1.0.2 copy "stack_router: ^1.0.2" to clipboard
stack_router: ^1.0.2 copied to clipboard

outdated

A stack-based routing library using an IndexedStack to route between different widgets. A stack-based routing library using an IndexedStack to route between different widgets.

Stack router #

A stack-based routing library using an IndexedStack to route between different widgets. Includes its own Scaffold, App bar and Snack bar implementation.

Basic demo gif.

Usage #

import 'package:stack_router/stack_router.dart';

class ExampleStackRoutes {
  static const String firstRoute = 'firstRoute';
  static const String secondRoute = 'secondRoute';
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: StackRouter(
        initialRoute: ExampleStackRoutes.firstRoute,
        builder: (router) {
          return [
            StackRoute(
              route: ExampleStackRoutes.firstRoute,
              child: Center(
                child: ElevatedButton(
                  onPressed: () {
                    router.pushRoute(ExampleStackRoutes.secondRoute);
                  },
                  child: const Text(
                    "Go to second route",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
            StackRoute(
              route: ExampleStackRoutes.secondRoute,
              child: StackRouterScaffold(
                appBar: const StackRouterAppBar(
                  title: Text("I'm a Title", style: TextStyle(fontSize: 24)),
                ),
                child: Expanded(
                  child: Container(
                    color: Colors.blue,
                    alignment: Alignment.center,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Text(
                          "I'm the second route",
                          style: TextStyle(
                            color: Colors.white,
                          ),
                        ),
                        const Padding(padding: EdgeInsets.only(top: 16)),
                        ElevatedButton(
                          style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.white),
                          ),
                          onPressed: () {
                            router.showSnackBar(
                              snackBar: const StackRouterSnackBar(
                                title: Text(
                                  "I'm a snackbar!",
                                  style: TextStyle(color: Colors.white),
                                ),
                              ),
                            );
                          },
                          child: const Text(
                            "Show snack bar",
                            style: TextStyle(color: Colors.black),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ];
        },
      ),
    );
  }
}

To see it in action, try running the example.

Persist routes #

Stack routers are useful when you want to build flows with a pre-defined set of routes. It works by providing the widgets for your routes to an IndexedStack and switches the index to the current route. Because it uses an IndexedStack, it has some interesting properties like the ability to warm up and persist routes:

StackRoute(
  route: ExampleStackRoutes.secondRoute,
  persist: true,
  child: Center(
    child: const Text(
      "Second route",
      style: TextStyle(color: Colors.white),
    ),
  ),
);

By default a route in the stack router is not built until it has been pushed on. If you want to warm up a particular route that you know fetches data or takes time to build, you can specify persist=true on the route so that even if it hasn't been shown to the user yet, it will build itself ahead of time when the [StackRouter] builds and be ready for users when they later navigate to it.

By default, all routes in the current [StackRouter] history are persisted so that when you push on a 2nd route and pop back to the first, it is still the same widget and has maintained all the temporal state like any form data or changes the user may have made to the route before navigating away.

StackRouterActions #

Similarly to Flutter Material's ScaffoldMessenger, any child under a StackRouterScaffold can manipulate the stack router using the StackRouterActions made available by an InheritedWidget.

This makes it easy to show snack bars and change routes from your current route.

class SecondRoute extends StatelessWidget {
  @override
  build(context) {
    return StackRouterScaffold(
      child: Center(
        child: ElevatedButton(
          style: ButtonStyle(
            backgroundColor:
                MaterialStateProperty.all(Colors.white),
          ),
          onPressed: () {
            StackRouterActions.of(context).showSnackBar(
              snackBar: const StackRouterSnackBar(
                title: Text(
                  "I'm a snackbar!",
                  style: TextStyle(color: Colors.white),
                ),
              ),
              actions: [
                TextButton(
                  child: Text('Go back'),
                  onPressed: () {
                    StackRouterActions.of(context).popRoute();
                  }
                )
              ]
            );
          },
          child: const Text(
            "Show snack bar",
            style: TextStyle(color: Colors.black),
          ),
        ),
      ),
    );
  }
}

Snack bars #

Stack router snack bars are queued per route.

class SecondRoute extends StatelessWidget {
  @override
  build(context) {
    return StackRouterScaffold(
      child: Center(
        child: ElevatedButton(
          style: ButtonStyle(
            backgroundColor:
                MaterialStateProperty.all(Colors.white),
          ),
          onPressed: () {
            StackRouterActions.of(context).showSnackBar(
              snackBar: const StackRouterSnackBar(
                title: Text(
                  "I'm a snackbar!",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
            StackRouterActions.of(context).showSnackBar(
              snackBar: const StackRouterSnackBar(
                title: Text(
                  "I'm another snackbar!",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
          },
          child: const Text(
            "Show snack bar",
            style: TextStyle(color: Colors.black),
          ),
        ),
      ),
    );
  }
}

Snack bar demo gif.

You can also show snackbars on other routes from the current one:

class SecondRoute extends StatelessWidget {
  @override
  build(context) {
    return StackRouterScaffold(
      child: Center(
        child: ElevatedButton(
          style: ButtonStyle(
            backgroundColor:
                MaterialStateProperty.all(Colors.white),
          ),
          onPressed: () {
            StackRouterActions.of(context).showSnackBar(
              snackBar: const StackRouterSnackBar(
                title: Text(
                  "I'm a snackbar!",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
            StackRouterActions.of(context).showSnackBar(
              snackBar: const StackRouterSnackBar(
                route: ExampleStackRoutes.firstRoute,
                title: Text(
                  "I'm a snackbar for another route!",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
          },
          child: const Text(
            "Show snack bar",
            style: TextStyle(color: Colors.black),
          ),
        ),
      ),
    );
  }
}

Snack bar demo gif.

Building modal flows #

Stack routers can be useful for building modal flows and wizards like are common on large screen platforms like desktop web. To build modal flows with StackRouter, check out modal_stack_router.

3
likes
0
pub points
48%
popularity

Publisher

unverified uploader

A stack-based routing library using an IndexedStack to route between different widgets. A stack-based routing library using an IndexedStack to route between different widgets.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on stack_router