flutter pub add flutter_admin_scaffold基于插件公开信息、社区数据与项目使用情况整理的选型参考。
一个 Flutter 包，提供可自定义的布局框架，带有响应式侧边栏和应用栏，专为管理仪表板和复杂导航布局设计。它支持抽屉和导航轨道两种模式，并能无缝适应移动、Web 和桌面平台。该布局框架确保 UI 结构一致，同时实现流畅的导航和布局管理。非常适合需要结构化、多级导航且具有清晰视觉层次的应用程序。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
A scaffold class with a sideBar that works with a appBar.
import 'package:flutter_admin_scaffold/admin_scaffold.dart';
You can add a sideBar as shown below. See example for details.
import 'package:flutter/material.dart';
import 'package:flutter_admin_scaffold/admin_scaffold.dart';
class SamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AdminScaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Sample'),
),
sideBar: SideBar(
items: const [
AdminMenuItem(
title: 'Dashboard',
route: '/',
icon: Icons.dashboard,
),
AdminMenuItem(
title: 'Top Level',
icon: Icons.file_copy,
children: [
AdminMenuItem(
title: 'Second Level Item 1',
route: '/secondLevelItem1',
),
AdminMenuItem(
title: 'Second Level Item 2',
route: '/secondLevelItem2',
),
AdminMenuItem(
title: 'Third Level',
children: [
AdminMenuItem(
title: 'Third Level Item 1',
route: '/thirdLevelItem1',
),
AdminMenuItem(
title: 'Third Level Item 2',
route: '/thirdLevelItem2',
),
],
),
],
),
],
selectedRoute: '/',
onSelected: (item) {
if (item.route != null) {
Navigator.of(context).pushNamed(item.route!);
}
},
header: Container(
height: 50,
width: double.infinity,
color: const Color(0xff444444),
child: const Center(
child: Text(
'header',
style: TextStyle(
color: Colors.white,
),
),
),
),
footer: Container(
height: 50,
width: double.infinity,
color: const Color(0xff444444),
child: const Center(
child: Text(
'footer',
style: TextStyle(
color: Colors.white,
),
),
),
),
),
body: SingleChildScrollView(
child: Container(
alignment: Alignment.topLeft,
padding: const EdgeInsets.all(10),
child: const Text(
'Dashboard',
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 36,
),
),
),
),
);
}
}
暂无相关数据。