How to change active drawer text color in Flutter?

user_17780441 0
Viewed 174
import 'package:flutter/material.dart';
import './screens/recents_screen.dart';
import './screens/favourites_screen.dart';

class MainDrawer extends StatefulWidget {
  const MainDrawer({Key? key}) : super(key: key);

  @override
  State<MainDrawer> createState() => _MainDrawerState();
}

class _MainDrawerState extends State<MainDrawer> {
  var texts = [
    {
      'title': 'Home',
      'path': '/',
    },
    {
      'title': 'Favourite',
      'path': FavouritesScreen.routeName,
    },
    {
      'title': 'Recent Search',
      'path': RecentsScreen.routeName,
    },
  ];

  int _currentSelected = 0;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Padding(
        padding: const EdgeInsets.only(top: 30, left: 20),
        child: Column(children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: texts.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(
                    texts[index]['title'] as String,
                    style: TextStyle(
                        fontSize: 16,
                        letterSpacing: 0.5,
                        height: 0.36,
                        color: _currentSelected == index
                            ? Colors.black
                            : Colors.grey,
                        fontFamily: 'Roboto Regular'),
                  ),
                  onTap: () {
                    setState(() {
                      _currentSelected = index;
                    });
                    Navigator.of(context)
                        .pushReplacementNamed(texts[index]['path'] as String);
                  },
                );
              },
            ),
          ),
        ]),
      ),
    );
  }
}

I want to set the active drawer text color to black and inactive screens to grey.

When I open the drawer the text colour of 'Home' is black and all other screen titles are grey always. It works fine when tapped, that is the tapped screen title is set to black and others to grey. But when opened a drawer it always shows Home screen as active. How to correct it?

flutter
1 Answers

It is actually what I would expect to happen given your code. In your state, you set

int _currentSelected = 0;

Which means that the first item in the drawer (in this case, Home, will be selected by default, until you tap another item. If, for instance, you'd initialize it to -1, all options should be grey by default.

int _currentSelected = -1; // not an index, so no item will be black

Perhaps even better, is if you would tell your drawer which item is active, given the parent widget. Say something like:

// in the parent state
String routePath = '/';

Widget build(BuildContext context) {
  return Scaffold(
    ...
    drawer: MainDrawer(
      path: routePath,  // pass the route path to the drawer
    ),
  );
}

Then in your drawer, you can use this path to select the correct index:

class MainDrawer extends StatefulWidget {
  final String path;

  // Add path to the arguments, with home as default
  const MainDrawer({Key? key, String path = '/'}) : super(key: key);

  @override
  State<MainDrawer> createState() => _MainDrawerState();
}

class _MainDrawerState extends State<MainDrawer> {
  var texts = [
    {
      'title': 'Home',
      'path': '/',
    },
    {
      'title': 'Favourite',
      'path': FavouritesScreen.routeName,
    },
    {
      'title': 'Recent Search',
      'path': RecentsScreen.routeName,
    },
  ];

  int _currentSelected = -1;

  @override
  void initState() {
    super.initState();

    // Select the item that is currently selected (given the parent)
    var currentText = texts.firstWhere((element) => element.path == widget.path);
    // Put that in the state (to nicely select the current index)
    _currentSelected = texts.indexOf(currentText);
  }

  ...
}

I hope this puts you on the right track. You could even try to access the current route name using the context to automatically get the current route name and use that to highlight the current item. You can use ModalRoute.of(context) https://api.flutter.dev/flutter/widgets/ModalRoute/of.html

user_154695370
Related