Nested routes in beamer with partial page load [Flutter] - flutter

Question

I'm using Beamer and Flutter to build an app
I've built logic for the default landing page of the application like a landing screen or a marketing page, then, once someone is logged in, a bottom navigator appears, I want this bottom nav to change the output of the middle of the screen (the Scaffold.body) but not refresh the browser or reload the bottom navbar itself, but I want the url to change
The routes will look something like this
- localhost
|-- /
|-- /login
|-- /dashboard
|-- /
|-- /account
|-- /history
There is example code for a nested router on the beamer repo that does what I want, with only a partial page update with animation but I can't figure out how the code works, i've been reading it for a few hours and I've made no progress
Here is a minimal reproduction of where I am stuck
import 'package:community_material_icon/community_material_icon.dart';
import 'package:flutter/material.dart';
import 'package:url_strategy/url_strategy.dart';
import 'package:beamer/beamer.dart';
void main() {
setPathUrlStrategy();
runApp(const MyApp());
}
class DefaultPage extends StatelessWidget {
const DefaultPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('app_title home page')),
body: Column(
children: [
const Text("Welcome to the app"),
TextButton(
onPressed: () {
Beamer.of(context).beamToNamed('/login');
},
child: const Text("Go to login page"),
),
],
),
);
}
}
class LoginPage extends StatelessWidget {
const LoginPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('app_title login page')),
body: Column(
children: [
const Text("Press button to login"),
TextButton(
onPressed: () {
Beamer.of(context).beamToNamed('/dashboard');
},
child: const Text("Login"),
),
],
),
);
}
}
class DashboardPage extends StatefulWidget {
const DashboardPage({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => _DashboardPageState();
}
class _DashboardPageState extends State<DashboardPage> {
final _beamerKey = GlobalKey<BeamerState>();
var _currentIndex = 0;
void _onTapUpdateIndex(index) {
setState(() {
_currentIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('app_title dashboard')),
body: Beamer(
key: _beamerKey,
routerDelegate: BeamerDelegate(
transitionDelegate: const NoAnimationTransitionDelegate(),
initialPath: '/dashboard',
locationBuilder: RoutesLocationBuilder(
routes: {
'/': (context, state, data) => const Text('Home'),
'/account': (context, state, data) => const Text('Account'),
},
),
),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(CommunityMaterialIcons.account), label: 'Account'),
],
onTap: (index) {
var pages = ['/dashboard', '/dashboard/account'];
_onTapUpdateIndex(index);
context.beamToNamed(pages[index]);
},
),
);
}
}
// The default router delegate handles logins, splash screen landings and redirects to the dashboard
// Once at the dashboard I want a new router to check all /dashboard/:page requests and update only partial amounts of the page
final _routerDelegate = BeamerDelegate(
initialPath: '/',
locationBuilder: RoutesLocationBuilder(
routes: {
'/': (context, state, data) => const DefaultPage(),
'/login': (context, state, data) => const LoginPage(),
'/dashboard': (context, state, data) => const DashboardPage(),
},
),
);
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp.router(
debugShowCheckedModeBanner: false,
title: 'app_title',
theme: ThemeData(),
routerDelegate: _routerDelegate,
routeInformationParser: BeamerParser(),
backButtonDispatcher: BeamerBackButtonDispatcher(delegate: _routerDelegate),
);
}
}
Currently the only way I've made any progress is by defining all of the routes in the main router and having no nested routing functionality then anytime someone clicks a new link the whole dashboard is reloaded