I split the screen in 2. The menus are on the left and the menu contents are on the right. How can I display the content on the right screen when I click on the left menu? That is, I want the menu contents to be displayed on the right of the screen without going to the new page.

SideMenu.dart

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

  @override
  State<SideMenu> createState() => _SideMenuState();
}

class _SideMenuState extends State<SideMenu> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: SingleChildScrollView(
        child: Column(
          children: [
            DrawerHeader(
                child: Image.asset(
              'images/Logomail4.png',
            )),
            DrawerListTile(
              title: 'Home',
              svgSrc: 'assets/icons/home.svg',
              press: () {
               
              },
            ),
            DrawerListTile(
              title: 'Home1',
              svgSrc: 'assets/icons/Contour.svg',
              press: () {
               
              },
            ),
            DrawerListTile(
              title: 'Home2',
              svgSrc: 'assets/icons/business.svg',
              press: () {},
            ),
            DrawerListTile(
              title: 'Home3',
              svgSrc: 'assets/icons/positions.svg',
              press: () {},
            ),
            DrawerListTile(
              title: 'Exit',
              svgSrc: 'assets/icons/exit.svg',
              press: () async {
                final shouldLogOut = await showLogOutDialog(context);
                if (shouldLogOut) {
                  await AuthService.firebase().loguOut();
                  // ignore: use_build_context_synchronously
                  Navigator.of(context)
                      .pushNamedAndRemoveUntil(loginRoute, (route) => false);
                }
              },
            )
          ],
        ),
      ),
    );
  }
}

class DrawerListTile extends StatelessWidget {
  const DrawerListTile({
    Key? key,
    required this.title,
    required this.svgSrc,
    required this.press,
  }) : super(key: key);

  final String title, svgSrc;
  final VoidCallback press;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      horizontalTitleGap: 0.0,
      onTap: press,
      leading: SvgPicture.asset(
        svgSrc,
        color: Colors.grey,
        height: 16,
      ),
      title: Text(title, style: const TextStyle(color: Colors.grey)),
    );
  }
}

Future<bool> showLogOutDialog(BuildContext context) {
  return showDialog<bool>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text('Sign out'),
        content: const Text('Are you sure you want to sign out?'),
        actions: [
          TextButton(
              onPressed: () {
                Navigator.of(context).pop(false);
              },
              child: const Text('Cancel')),
          TextButton(
              onPressed: () {
                Navigator.of(context).pop(true);
              },
              child: const Text('Log out')),
        ],
      );
    },
  ).then((value) => value ?? false);
}

MainScreen.dart

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const SideMenu(),
      body: SafeArea(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Expanded(
              // default flex = 1
              // and it takes 1/6 part of the screen
              child: SideMenu(),
            ),
            const Expanded(
              // It takes 5/6 part of the screen
              flex: 5,
              child: DashboardPage(),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

You can declare a global ValueNotifier<int> to store index and use ValueListenableBuilder<int> to listen for index changes in your DashboardPage screen.

ValueNotifier<int> currentIndex = ValueNotifier<int>(0);

class DashboardPage extends StatelessWidget {

  const DashboardPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ValueListenableBuilder<int>(valueListenable: currentIndex, builder: (ctx, currentIndex, child) {
        if (currentIndex == 0) {
          return Home1();
        }

        return Home3(); // default case
      }),
    );
  }
}

In each press method you can update the currentIndex like that:

DrawerListTile(
      ...
      ...
      press: () {
       currentIndex.value = 0; // tile index
      },
);