Search code examples
flutterdrop-down-menunavigation-drawerflutter-dropdownbutton

dropdown button in Drawer flutter


I try to add dropdown button in drawer header but I face issue

dropdown button

1

this is my code

import 'package:flutter/material.dart';
import 'package:test/Screens/change_password_screen.dart';
import 'package:test/Screens/login_screen.dart';

class MainDrawer extends StatelessWidget {
  const MainDrawer({super.key});
  

  @override
  Widget build(BuildContext context) {

 
    return Drawer(
      
      width: 250,
      child: ListView(
        children: <Widget>[
          
          DrawerHeader(
            decoration: BoxDecoration(
                border: Border.all(color: Colors.white),
                image: const DecorationImage(
                  image: AssetImage("assets/images/logo.png"),
                )),
            child: const Align(
              alignment: Alignment.bottomCenter,
              child: Text(
                "[email protected]",
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 14.0,
                  fontWeight: FontWeight.normal,
                ),
              ),
            ),
            
          ),
     
          const Divider(
            color: Colors.black, //color of divider
            height: 10, //height spacing of divider
            thickness: 1, //thickness of divier line
          ),
          ListTile(
            leading: Image.asset(
              "assets/images/exampla.png",
            ),
            title: const Text(
              'exampla',
              style: TextStyle(
                color: Colors.black,
                fontSize: 14.0,
                fontWeight: FontWeight.normal,
              ),
            ),
            onTap: null,
          ),
          const Divider(
            color: Colors.black, //color of divider
            height: 10, //height spacing of divider
            thickness: 1, //thickness of divier line
          ),
          ListTile(
            leading: Image.asset(
              "assets/images/examplb.png",
            ),
            title: const Text(
              'examplb',
              style: TextStyle(
                color: Colors.black,
                fontSize: 14.0,
                fontWeight: FontWeight.normal,
              ),
            ),
            onTap: null,
          ),
          const Divider(
            color: Colors.black, //color of divider
            height: 10, //height spacing of divider
            thickness: 1, //thickness of divier line
          ),
          ListTile(
            leading: Image.asset(
              "assets/images/examplc.png",
            ),
            title: const Text(
              'examplc',
              style: TextStyle(
                color: Colors.black,
                fontSize: 14.0,
                fontWeight: FontWeight.normal,
              ),
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => const ExamplzScreen()),
              );
            },
          ),
          const Divider(
            color: Colors.black, //color of divider
            height: 10, //height spacing of divider
            thickness: 1, //thickness of divier line
          ),
          ListTile(
            leading: Image.asset(
              "assets/images/logout.png",
            ),
            title: const Text(
              'Log out',
              style: TextStyle(
                color: Colors.black,
                fontSize: 14.0,
                fontWeight: FontWeight.normal,
              ),
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const LoginScreen()),
              );
            },
          ),
          const Divider(
            color: Colors.black, //color of divider
            height: 10, //height spacing of divider
            thickness: 1, //thickness of divier line
          ),
        ],
      ),
    );
    
  }
}

I try to add dropdown but I face error in setState

List<String> itemsList = [
    '1',
    '2'
  ];
  String? selectedItem = '1';

 Container(
      
             padding: const EdgeInsets.symmetric(
                        horizontal: 25.0, vertical: 0.0),
             child: SizedBox(
                  height: 40,
    
                  child: DropdownButtonFormField<String>(
                      decoration: const InputDecoration(
                          enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                        width: 1,
                        color: Colors.grey,
                      ))),
                      value: selectedItem,
                      items: itemsList
                          .map((item) => DropdownMenuItem(
                                value: item,
                                child: Text(
                                  item,
                                ),
                              ))
                          .toList(),
                      onChanged: (item) => setState(() => selectedItem = item)),
                ),
           ),

Solution

  • your MainDrawer widget is Statelesswidget you will need to update it to Statefulwidget so state can be changed with SetState method. and also share the error if it's still gives error.