qr_nested_example.dart

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) => 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
    QR.navigator.addListener(() => 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),
          ),
        ),
      );
}

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

List<QRoute> get routes => [
      QRoute.withChild(
        path: '/home',
        ///set the initRoute (choose the Child that will be passed up to the father in other words)
        initRoute: '/profile',
        builderChild: (child) => HomePage(child),
        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),
          ),
        ],
      ),
    ];