Flutter Web Dashboard Content – Best Practice?

Issue

I am creating an admin dashboard, I currently have two view widgets in a row:

• A side bar – 300px (not drawer, because I want it to show permanently) – which has a list.
• A content widget – expanded.

Admin Dashboard View

Here is the code for the page:

import 'package:flutter/material.dart';
import 'package:webenrol/widgets/dashboard_admin.dart';
import 'package:webenrol/widgets/drawer.dart';

//TODO: add flappy_search_bar package and add to appBar

class AdminDashboard extends StatelessWidget {
  //TODO: Add title
  static String id = '/admin_dashboard';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Admin Dashboard - Overview'),),
      body: Container(child: Row(
        children: <Widget>[
          //Sidebar
          DashboardSideBar(),
          //Main Dashboard Content
          DashboardAdmin(),
        ],
      )),
    );
  }
}

I am going to create other content widgets for the links in the sidebar, what I preferably would like, is have the content widget update to what is clicked on the menu, and also have the ListTile selected as active without the page needing to reload.

Is this possible and is my WebApp laid out correctly for this, or do I need to change it?

Solution

So I found a solution, I needed to use a TabController and TabView.

When I setup my TabController, I setup a Listener to listen for any events on its index.

class _State extends State<AdminDashboard> with SingleTickerProviderStateMixin{
  int active = 0;
//TODO: Add title
  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 5, vsync: this, initialIndex: 0)
    ..addListener(() {
      setState(() {
        active = tabController.index;
      });
    });
  }

Then I modified my menu to animate to the correct page onTap and also be selected if the page I was on was true.

Widget adminMenu() {
  return ListView(
    shrinkWrap: true,
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.home),
        title: Text('Home'),
        selected: tabController.index == 0 ? true : false,
        onTap: () {
          tabController.animateTo(0);
        },
      ),
      ListTile(
        leading: Icon(Icons.add),
        title: Text('Add New Centre'),
        selected: tabController.index == 1 ? true : false,
        onTap: () {
          tabController.animateTo(1);
        },
      ),
      ListTile(
        leading: Icon(Icons.list),
        title: Text('List Centres'),
        selected: tabController.index == 2 ? true : false,
        onTap: () {
          tabController.animateTo(2);
        },
      ),
      ListTile(
        leading: Icon(Icons.people),
        title: Text('Users'),
        selected: tabController.index == 3 ? true : false,
        onTap: () {
          tabController.animateTo(3);
        },
      ),
      ListTile(
        leading: Icon(Icons.exit_to_app),
        title: Text('Logout'),
        selected: tabController.index == 4 ? true : false,
        onTap: () {
          tabController.animateTo(4);
        },
      ),
    ],
  );
}

Then I had to simply setup my TabBarView in the content area:

return Scaffold(
      appBar: AppBar(
        //TODO: Make title dynamic to page using tabController.index turnkey operator
        title: Text('Admin Dashboard - Overview'),
      ),
      body: Container(
          child: Row(
        children: <Widget>[
          //Responsive Sidebar
          DashboardSideBar(),
          //Main Dashboard Content
          Expanded(
            child: TabBarView(controller: tabController,
            children: <Widget>[
              DashboardAdmin(),
              Container(child: Text('Hello World!'),),
              Container(child: Text('Page 3'),),
              Container(child: Text('Page 4'),),
              Container(child: Text('Page 5'),),
            ],),
          ),
        ],
      )),
    );

I still need to refactor my code and clean it up, but for anyone wanting to create a clean dynamic Web Dashboard this is how 🙂

Answered By – JobsyNZ

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)