qr_middlware_example.dart

import 'dart:math';

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ///Define your custom 404 view
    QR.settings.notFoundPage = QRoute(
      path: '/404',
      builder: () => NotFound404View(),
    );
    MaterialApp.router(
      routeInformationParser: QRouteInformationParser(),
      routerDelegate: QRouterDelegate(routes, initPath: '/home'),
      theme: ThemeData.dark(),
    );
  }
}

class HomePage extends StatefulWidget {
  final QRouter router;
  HomePage(this.router);
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    // We need to add listener here so the bottomNavigationBar
    // get updated (the selected tab) when we navigate to new page
    //call setState only in the home section and if mounted
    //feel free to handle it the way that suite you
    // this just a demo.
    QR.navigator.addListener(() {
      if (QR.navigator.currentRoute.path.contains('home')) {
        if (mounted) {
          setState(() {});
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('QR - Nested Child')),

      ///the body is the `child` widget that been passed to the father(`HomePage`)
      body: widget.router,

      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.people), label: 'profile'),
          BottomNavigationBarItem(icon: Icon(Icons.store), label: 'store'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings')
        ],
        currentIndex: tabs.indexWhere(
          (element) => element == widget.router.routeName,
        ),
        onTap: (v) => QR.toName(tabs[v]),
      ),
    );
  }
}

class Tab extends StatelessWidget {
  final String name;
  final Color color;
  Tab(this.name, this.color);
  @override
  Widget build(BuildContext context) => Container(
        color: color,
        child: Center(
          child: Text(
            name,
            style: TextStyle(fontSize: 20),
          ),
        ),
      );
}

class NotFound404View extends StatelessWidget {
  const NotFound404View({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Center(
        child: Text(
          '404',
          style: TextStyle(fontSize: 40),
        ),
      ),
    );
  }
}

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Please Login'),
          const SizedBox(height: 30),
          TextButton(
            onPressed: () {
              isAuthed = true;
              QR.toName('/home');
            },
            child: Text('Login'),
          )
        ],
      ),
    );
  }
}

const List<String> tabs = [
  "Profile Page",
  "Store Page",
  "Settings Page",
];

bool isAuthed = false;
List<QRoute> get routes => [
      QRoute(
        path: '/login',
        builder: () => LoginPage(),
      ),
      QRoute.withChild(
        path: '/home',

        ///set the initRoute (choose the Child  that will be passed up in other words)
        initRoute: '/store',
        builderChild: (c) => HomePage(c),
        middleware: [
          QMiddlewareBuilder(
            redirectGuardFunc: (_) async => isAuthed ? null : '/login',
          )
        ],
        children: [
          QRoute(
            name: tabs[0],
            path: '/profile',
            builder: () => Tab('Profile', Colors.blueGrey.shade900),
          ),
          QRoute(
            name: tabs[1],
            path: '/store',
            builder: () => Tab('Store', Colors.blueGrey.shade700),
          ),
          QRoute(
            name: tabs[2],
            path: '/settings',
            builder: () => Tab('Settings', Colors.blueGrey.shade500),
          ),
        ],
      ),
    ];