I am creating an app in flutter, I have got some issue in drawer. I want to change the color of the selected drawer item.Here is my full code it looks fine to me but its not working for me... please help me find out what i am doing wrong

class _DrawerClassState extends State<DrawerClass> {

Here is my full code it looks fine to me but its not working for me... please help me find out what i am doing wrong

  List<String> menuStrings = [
    'HOME',
    'NOTIFICATIONS',
    'PARTNERS',
    'LOCATIONS',
    'FEEDBACK',
    'CONTACT US',
    'AWARDS'
  ];
Here is my full code it looks fine to me but its not working for me... please help me find out what i am doing wrong 

  List menuScreens = [
    HomeScreen(),
    Notifications(),
    Partners(),
    Locations(),
    FeedbackScreen(),
    const ContactUs(),
    Awards()
  ];
Here is my full code it looks fine to me but its not working for me... please help me find out what i am doing wrong 

  List<bool> isHighlighted = [false, false, false, false, true, false, false];

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        canvasColor: Colors.black,
      ),
      child: Drawer(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            drawerTop("HI USER"),
            ListView.builder(
              shrinkWrap: true,
              itemCount: menuScreens.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    for (int i = 0; i < isHighlighted.length; i  ) {
                      setState(() {
                        if (index == i) {
                          isHighlighted[index] = true;
                        } else {
                          //the condition to change the highlighted item
                          isHighlighted[i] = false;
                        }
                      });
                    }
                  },
                  child: drawerItems(
                    context,
                    menuStrings[index],
                    menuScreens[index],
                    isHighlighted[index] ? Colors.amber : Colors.white,
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Here is the method drawerItems() to build drawer items

  drawerItems(BuildContext context, String title, path, Color color) {
      return Padding(
          padding: EdgeInsets.only(
              top: 0.0, left: MediaQuery.of(context).size.width * 0.1),
          child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
            GestureDetector(
              onTap: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: ((context) => path)));
              },
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: Text(
                  title,
                  style: TextStyle(
                      color: color,
                      fontFamily: "Raleway Reg",
                      fontSize: 23,
                      letterSpacing: 2),
                ),
              ),
            ),
            SizedBox(
              width: MediaQuery.of(context).size.width * 0.5,
              child: const Divider(
                thickness: 1,
                color: Colors.white,
                height: 3,
              ),
            ),
          ]));
    }

CodePudding user response：

Update your drawerItems

drawerItems(BuildContext context, String title, path, Color color) {
  return Container(
      color: color,
      padding: EdgeInsets.only(
          top: 0.0, left: MediaQuery.of(context).size.width * 0.1),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        GestureDetector(
          onTap: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: ((context) => path)));
          },
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text(
              title,
              style: TextStyle(
                  color: color,
                  fontFamily: "Raleway Reg",
                  fontSize: 23,
                  letterSpacing: 2),
            ),
          ),
        ),
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.5,
          child: const Divider(
            thickness: 1,
            color: Colors.white,
            height: 3,
          ),
        ),
      ]));
}

the root widget that is returned from the method, change it from Padding to Container and give it a color

CodePudding user response：

I think it's a very complex solution to solve this simple task in Flutter.

I suggest my solution: Publish it on my git: https://github.com/igdmitrov/flutter-drawer

1. Create a new Abstract Page State:

abstract class MyPageState<T extends StatefulWidget> extends State {
  List<Widget> drawerItems(BuildContext context) {
    return menuItems
        .map(
          (item) => ListTile(
            leading: const Icon(Icons.my_library_books),
            title: Text(
              item['menuName'] as String,
              style: TextStyle(
                  color: isHighlighted[menuItems.toList().indexOf(item)]
                      ? Colors.amber
                      : Colors.grey),
            ),
            onTap: () {
              isHighlighted = isHighlighted.map((mark) => false).toList();
              isHighlighted[menuItems.toList().indexOf(item)] = true;
              Navigator.of(context).push(MaterialPageRoute(
                  builder: ((context) => item['route'] as Widget)));
            },
          ),
        )
        .toList();
  }
}

Create drawer.dart file with code:

final menuItems = {
  {'menuName': 'HOME', 'route': const HomeScreen()},
  {'menuName': 'NOTIFICATIONS', 'route': const Notifications()},
};

List<bool> isHighlighted = [false, false];

And create pages:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  MyPageState<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends MyPageState<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Main page'),
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            const Text("HI USER"),
            ...drawerItems(context),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'New app',
            ),
          ],
        ),
      ),
    );
  }
}

And Notifications page:

class Notifications extends StatefulWidget {
  static String routeName = '/notifications';
  const Notifications({Key? key}) : super(key: key);

  @override
  MyPageState<Notifications> createState() => _NotificationsState();
}

class _NotificationsState extends MyPageState<Notifications> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Notifications'),
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            const Text("HI USER"),
            ...drawerItems(context),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'Notifications page',
            ),
          ],
        ),
      ),
    );
  }
}