Flutter Web Dashboard Content - Best Practice?

Question

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 :)

Comments

[Sabbu]

Can we have router along with tab controller? To have different routes for different menu item for deep linking. Please help me. I am new to flutter. I am trying to build a SPA web app using flutter web. My web app should have a fixed menu and each menu item should have a deep link. When menu item is clicked, it should not refresh the menu widget but current menu item must be selected with the content view to load the content based on selected menu item. Please point me to good reference.

[Jackson Lee]

Yes you can, you wouldn't have a router as per say, more link to the tab you want to view. Create a question with your current code, and I will help you out today

[Nzadibe]

How do I add deep linking using default router or fluro_router? Thanks, saved my bacon

[SalahAdDin]

did you linked it with a PageView?

[Zohaib Tariq]

Thanks. very helpful. :)