SchabanBo / qlevar_router

Manage you project Routes. Create nested routes. Simply navigation without context to your pages. Change only one sub widget in your page when navigating to new route.
MIT License
86 stars 22 forks source link

Add ability to create a separate navigator #126

Closed SchabanBo closed 2 months ago

SchabanBo commented 1 year ago

The idea is to add a new navigator with his own routes and then navigate in it using QR.navigatorOf(navigatorName).removeLast();

To clear:

Sample code

import 'package:flutter/material.dart';
import 'package:qlevar_router/qlevar_router.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final List<QRoute> router = [
      QRoute(
        path: '/',
        builder: () {
          return const HomePage();
        },
      ),
    ];
    return MaterialApp.router(
      routeInformationParser: const QRouteInformationParser(),
      routerDelegate: QRouterDelegate(router),
    );
  }
}

const navigatorName = 'bottom sheet';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: ElevatedButton(
        child: const Text("Open Login Bottom Sheet"),
        onPressed: () {
          showModalBottomSheet(
            context: context,
            builder: (context) {
              return QR.createNavigator(
                navigatorName,
                initPath: '/1',
                routes: [
                  QRoute(
                    path: '/1',
                    builder: () {
                      return const PageOne();
                    },
                  ),
                  QRoute(
                    path: '/2',
                    builder: () {
                      return const PageTow();
                    },
                  ),
                ],
              );
            },
          );
        },
      ),
    ));
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Page One"),
      ),
      body: Center(
        child: TextButton(
          child: const Text("Go to page 2"),
          onPressed: () {
            QR.navigatorOf(navigatorName).push('/2');
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Page One"),
        leading: BackButton(
          onPressed: () {
            QR.navigatorOf(navigatorName).removeLast();
          },
        ),
      ),
      body: const Center(
        child: Icon(Icons.home),
      ),
    );
  }
}
doteq commented 1 year ago

Aren't nested navigators possible at the moment? I created navigator in a main router with

FutureBuilder(
  future: QR.createNavigator('app', routes: ...),
  builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
    if (snapshot.hasData) {
      return snapshot.data!;
    } else {
      return const SizedBox();
    }
  },
),

and it kinda works. The only problem is when I removed navigator, routes stayed in treeInfo.namePath, and because of that I could not create navigator with same routes again.