Flutter Web Dashboard Content - Best Practice? - flutter

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?

Answer 1

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