I want to hide one widget and display other widget it is possible in home page where i am calling them but not possible in drawer in flutter

Question

If i use given code and use icon button in app bar then it hide one widget and display other

 return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.red,
          centerTitle: true,
          title: const Text("Home Page"),
          actions: [
            IconButton(
                onPressed: () {
                  setState(() {
                    isvisible = !isvisible;
                    isvisibles = !isvisibles;
                  });
                },
                icon: const Icon(Icons.hide_source))
          ]),
      drawer: const DrawerWidget(),
      body: Stack(
        children: [
          Visibility(
            visible: isvisible,
            child: const MapInitialization(),
          ),
          Visibility(
            visible: isvisibles,
            child: const DonorMap(),
          ),
        ],
      ),
    );

But i use a button in drawer then it does not work but it show in the console that it is working it change the state but screen will not change. Is there is a way to implement it in the drawer. I am building a app for two users and user has a choice to switch between user (Like app for Driver and Passenger user has choice to become passenger or Driver). This is my drawer widget code

class DrawerWidget extends StatefulWidget {
  const DrawerWidget({super.key});

  @override
  State<DrawerWidget> createState() => _DrawerWidgetState();
}

class _DrawerWidgetState extends State<DrawerWidget> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            decoration: const BoxDecoration(color: Colors.red),
            accountName: Text(
              "${gfname.toString()} ${glname.toString()}",
              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            accountEmail: Text(
              gnumber.toString(),
              style: const TextStyle(fontSize: 18),
            ),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(
                child: Image.asset(
                  'assets/user.png',
                  width: 80,
                  height: 80,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          ListTile(
            leading: const Icon(
              Icons.home,
              size: 25,
            ),
            title: const Text(
              "Home",
              style: TextStyle(
                fontSize: 18,
              ),
            ),
            onTap: () {
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(
                  builder: (context) => const HomePage(),
                ),
              );
            },
          ),
          const UpdateButton(),
          const ThemeServices(),
          const LogoutButton(),
          // i am using a button to hide but its not working
          ElevatedButton(
            onPressed: () {
              setState(() {
                isvisible = !isvisible;
                isvisibles = !isvisibles;
              });
            },
            child: const Text("Hide"),
          ),
        ],
      ),
    );
  }
}

Answer 1

You need to pass VoidCallBack function as a parameter to your DrawerWidget.

class DrawerWidget extends StatelessWidget {

  final VoidCallback onPressed; //this VoidCallBack

  const DrawerWidget({Key? key,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Center(
        child: MaterialButton(
          color: Colors.teal,
          onPressed: onPressed, //is used here
          child: const Text("Hide/Show"),
        ),
      ),
    );
  }
}

When calling this Class you need pass a CallBackFunction:

return Scaffold(
      drawer: DrawerWidget(
        onPressed: (){
          setState(() {
            isVisible = !isVisible; //no need to use two booleans
          });
        },
      ),
      appBar: AppBar(),
      body: Wrap(
        children: [
          Center(
            child: Visibility(
              visible: isVisible,
              child: Container(...),
            ),
          ),
          Center(
            child: Visibility(
              visible: !isVisible,
              child: Container(...),
            ),
          ),
        ],
      )
    );

Full Demo Code: Here