qlevar_router icon indicating copy to clipboard operation
qlevar_router copied to clipboard

Add ability to create a separate navigator

Open SchabanBo opened this issue 1 year ago • 1 comments

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

To clear:

  • should the URL changed?

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),
      ),
    );
  }
}

SchabanBo avatar Apr 11 '23 11:04 SchabanBo

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.

doteq avatar Jul 13 '23 13:07 doteq