Navigating between pages in flutter web app with a persistent side menu and Top bar

Question

My Web app(Attendance Management System) contains a dashboard which opens after login. The dashboard contains some data on the right side, a menubar on the left side and a header container on the top. When a user clicks on each menu item, that relevant page should open (like employee page, department page etc.) on the right side of the dashboard, but keeping the left menu and top bar intact. How should I achieve this? By containers or with the help of any other methods or widgets?

This is going to be my first Flutter web app (I have developed mobile applications). It will be the backend application for the attendance app developed in Flutter. Is it recommended to use a responsive layout in such projects?

Answer 1

One possible solution base could be something like this, if I understood your question correctly.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String selectedSidebarItem = 'Home';

  void onSidebarItemSelected(String item) {
    setState(() {
      selectedSidebarItem = item;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fixed Sidebar Example'),
      ),
      body: Row(
        children: [
          // Sidebar
          Container(
            width: 200,
            child: Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  DrawerHeader(
                    decoration: BoxDecoration(
                      color: Colors.blue,
                    ),
                    child: Text(
                      'Sidebar',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                      ),
                    ),
                  ),
                  ListTile(
                    title: Text('Home'),
                    onTap: () => onSidebarItemSelected('Home'),
                  ),
                  ListTile(
                    title: Text('Settings'),
                    onTap: () => onSidebarItemSelected('Settings'),
                  ),
                ],
              ),
            ),
          ),
          // Content
          Expanded(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Selected Sidebar Item:',
                  ),
                  Text(
                    selectedSidebarItem,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

With Get lib

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(
    GetMaterialApp(
      initialBinding: BindingsBuilder(() {
        Get.put(MyController());
      }),
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(
      ),
    );
  }
}

class MyController extends GetxController {
  var selectedSidebarItem = 'Home'.obs;

  void updateSelectedSidebarItem(String item) {
    selectedSidebarItem.value = item;
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fixed Sidebar Example'),
      ),
      body: Row(
        children: [
          // Sidebar
          Container(
            width: 200,
            child: Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  DrawerHeader(
                    decoration: BoxDecoration(
                      color: Colors.blue,
                    ),
                    child: Text(
                      'Sidebar',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                      ),
                    ),
                  ),
                  ListTile(
                    title: Text('Home'),
                    onTap: () {
                      Get.find<MyController>().updateSelectedSidebarItem('Home');
                      Get.toNamed('/Home');
                    },
                  ),
                  ListTile(
                    title: Text('Settings'),
                    onTap: () {
                      Get.find<MyController>().updateSelectedSidebarItem('Settings');
                      Get.toNamed('/Settings');
                    },
                  ),
                ],
              ),
            ),
          ),
          // Content
          Expanded(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Selected Sidebar Item:',
                  ),
                  // Use Obx to listen for changes in selectedSidebarItem
                  Obx(() => Text(
                    Get.find<MyController>().selectedSidebarItem.value,
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20,
                    ),
                  )),
                  // Display content based on selectedSidebarItem
                  if (Get.find<MyController>().selectedSidebarItem.value == 'Home')
                    HomeContent()
                  else if (Get.find<MyController>().selectedSidebarItem.value == 'Settings')
                    SettingsContent(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Home Page Content');
  }
}

class SettingsContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Settings Page Content');
  }
}