qlevar_router
qlevar_router copied to clipboard
Add ability to create a separate navigator
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),
),
);
}
}
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.