CODEWITHSUNDEEP
flutter
SABDAR SHAIK
SABDAR SHAIK

Reputation: 671

Flutter Usage of Drawer with Routing and check the current active route to hight light in drawer?

Need example with Flutter drawer using routes with current route to be highlighted in menu and also return to homepage route from any other route, app exit from homepage only

Upvotes: 2

Views: 3594

Answers (1)

Oleksii Shovhenia
Oleksii Shovhenia

Reputation: 3702

This is something that I have came up with:

import 'package:myapp/blocs/provider.dart';
import 'package:myapp/routes.dart';
import 'package:flutter/material.dart';

class DrawerItemList extends StatelessWidget {
  String getCurrentRouteName(context) {
    String currentRouteName;

    Navigator.popUntil(context, (route) {
      currentRouteName = route.settings.name;
      return true;
    });

    return currentRouteName;
  }

  @override
  Widget build(BuildContext context) {
    final bloc = Provider.of(context);
    String currentRoute = getCurrentRouteName(context);

    return Column(
      children: <Widget>[
        AppBar(
          automaticallyImplyLeading: false,
          title: Text('MyAppTitle'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.exit_to_app),
              tooltip: 'Log Out',
              onPressed: () {
                bloc.logOut();
                Navigator.pushReplacementNamed(
                  context,
                  AppRoutes.home,
                );
              },
            ),
          ],
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('Home'),
          selected: currentRoute == AppRoutes.home,
          onTap: () {
            if (currentRoute == AppRoutes.home) return;

            Navigator.pushReplacementNamed(
              context,
              AppRoutes.home,
            );
          },
        ),
        ListTile(
          leading: Icon(Icons.list),
          title: Text('Records'),
          selected: currentRoute == AppRoutes.records,
          onTap: () {
            if (currentRoute == AppRoutes.records) return;

            Navigator.pushReplacementNamed(
              context,
              AppRoutes.records,
            );
          },
        ),
        ListTile(
          title: Text('Planning'),
          leading: Icon(Icons.graphic_eq),
          selected: currentRoute == AppRoutes.planning,
          onTap: () {
            if (currentRoute == AppRoutes.planning) return;

            Navigator.pushReplacementNamed(
              context,
              AppRoutes.planning,
            );
          },
        ),
      ],
    );
  }
}

Upvotes: 1

Related Questions