Содержимое Flutter Web Dashboard - лучшая практика? - PullRequest
Новая
       126

Содержимое Flutter Web Dashboard - лучшая практика?

0 голосов
/ 08 марта 2020

Я создаю панель администратора, в настоящее время у меня есть два виджета подряд:

  • Боковая панель - 300 пикселей (не выдвижная панель, потому что я хочу, чтобы она отображалась постоянно) - которая имеет list.
  • Виджет содержимого - расширен.

Представление панели администратора

Вот код страницы: 

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(),
        ],
      )),
    );
  }
}

Я собираюсь создать другие виджеты контента для ссылок на боковой панели, что я бы предпочел, чтобы обновление виджета контента соответствовало тому, что нажималось в меню, а также чтобы ListTile был выбран как активный без страница должна быть перезагружена.

Возможно ли это, и правильно ли выложено мое WebApp для этого, или мне нужно изменить его?

1 Ответ

0 голосов
/ 10 марта 2020

Итак, я нашел решение, мне нужно было использовать TabController и TabView.

Когда я настраиваю свой TabController, я настраиваю прослушиватель для прослушивания любых событий в его индексе. 

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;
      });
    });
  }

Затем я изменил свое меню, чтобы анимировать на нужную страницу на вкладке, а также быть выбранным, если страница, на которой я был, была истинной. 

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);
        },
      ),
    ],
  );
}

Затем мне пришлось просто настроить свою TabBarView в области содержимого: 

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'),),
            ],),
          ),
        ],
      )),
    );

Мне все еще нужно реорганизовать мой код и очистить его, но для любого, кто хочет создать чистую динамическую c Веб-панель инструментов, это так :)

...