Flutter后台管理界面插件flutter_admin_scaffold的使用
Flutter后台管理界面插件 flutter_admin_scaffold 的使用
flutter_admin_scaffold 是一个用于创建后台管理界面的 Flutter 插件。它提供了一个带有侧边栏的 Scaffold，可以与 AppBar 协同工作，方便地构建复杂的后台管理系统。
使用方法
1. 添加依赖
首先，在你的 pubspec.yaml 文件中添加 flutter_admin_scaffold 依赖：
dependencies:
flutter:
sdk: flutter
flutter_admin_scaffold: ^最新版本号
然后运行 flutter pub get 来安装依赖。
2. 导入库
在你的 Dart 文件中导入 flutter_admin_scaffold 库：
import 'package:flutter_admin_scaffold/admin_scaffold.dart';
3. 创建后台管理界面
以下是一个完整的示例代码，展示了如何使用 flutter_admin_scaffold 创建一个带有侧边栏和顶部导航栏的后台管理界面。
主应用入口
import 'package:flutter/material.dart';
import 'package:flutter_admin_scaffold/admin_scaffold.dart';
import 'package:flutter_admin_scaffold_example/sample_pages/dashboard_page.dart';
import 'package:flutter_admin_scaffold_example/sample_pages/second_level_item_1_page.dart';
import 'package:flutter_admin_scaffold_example/sample_pages/second_level_item_2_page.dart';
import 'package:flutter_admin_scaffold_example/sample_pages/third_level_item_1_page.dart';
import 'package:flutter_admin_scaffold_example/sample_pages/third_level_item_2_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
static const MaterialColor themeBlack = MaterialColor(
_themeBlackPrimaryValue,
<int, Color>{
50: Color(_themeBlackPrimaryValue),
100: Color(_themeBlackPrimaryValue),
200: Color(_themeBlackPrimaryValue),
300: Color(_themeBlackPrimaryValue),
400: Color(_themeBlackPrimaryValue),
500: Color(_themeBlackPrimaryValue),
600: Color(_themeBlackPrimaryValue),
700: Color(_themeBlackPrimaryValue),
800: Color(_themeBlackPrimaryValue),
900: Color(_themeBlackPrimaryValue),
},
);
static const int _themeBlackPrimaryValue = 0xFF222222;
static const Color themeTextPrimary = Color(0xFF9D9D9D);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Sample',
theme: ThemeData(
primarySwatch: themeBlack,
textTheme: Theme.of(context).textTheme.apply(
bodyColor: themeBlack,
),
primaryTextTheme: Theme.of(context).textTheme.apply(
bodyColor: themeTextPrimary,
),
primaryIconTheme: IconThemeData(
color: themeTextPrimary,
),
visualDensity: VisualDensity.adaptivePlatformDensity,
),
onGenerateRoute: (settings) {
final page = _getPageWidget(settings);
if (page != null) {
return PageRouteBuilder(
settings: settings,
pageBuilder: (_, __, ___) => page,
transitionsBuilder: (_, anim, __, child) {
return FadeTransition(
opacity: anim,
child: child,
);
});
}
return null;
},
);
}
Widget? _getPageWidget(RouteSettings settings) {
if (settings.name == null) {
return null;
}
final uri = Uri.parse(settings.name!);
switch (uri.path) {
case '/':
return DashboardPage();
case '/secondLevelItem1':
return SecondLevelItem1Page();
case '/secondLevelItem2':
return SecondLevelItem2Page();
case '/thirdLevelItem1':
return ThirdLevelItem1Page();
case '/thirdLevelItem2':
return ThirdLevelItem2Page();
}
return null;
}
}
自定义 Scaffold
class MyScaffold extends StatelessWidget {
const MyScaffold({
Key? key,
required this.route,
required this.body,
}) : super(key: key);
final Widget body;
final String route;
final List<AdminMenuItem> _sideBarItems = 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',
icon: Icons.image,
),
],
),
],
),
];
final List<AdminMenuItem> _adminMenuItems = const [
AdminMenuItem(
title: 'User Profile',
icon: Icons.account_circle,
route: '/',
),
AdminMenuItem(
title: 'Settings',
icon: Icons.settings,
route: '/',
),
AdminMenuItem(
title: 'Logout',
icon: Icons.logout,
route: '/',
),
];
@override
Widget build(BuildContext context) {
return AdminScaffold(
backgroundColor: Colors.white,
leadingIcon: Icon(Icons.menu),
appBar: AppBar(
title: const Text('Sample'),
actions: [
PopupMenuButton<AdminMenuItem>(
child: const Icon(Icons.account_circle),
itemBuilder: (context) {
return _adminMenuItems.map((AdminMenuItem item) {
return PopupMenuItem<AdminMenuItem>(
value: item,
child: Row(
children: [
Icon(item.icon),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
item.title,
style: const TextStyle(
fontSize: 14,
),
),
),
],
),
);
}).toList();
},
onSelected: (item) {
print(
'actions: onSelected(): title = ${item.title}, route = ${item.route}');
Navigator.of(context).pushNamed(item.route!);
},
),
],
),
sideBar: SideBar(
backgroundColor: const Color(0xFFEEEEEE),
activeBackgroundColor: Colors.black26,
borderColor: const Color(0xFFE7E7E7),
iconColor: Colors.black87,
activeIconColor: Colors.blue,
textStyle: const TextStyle(
color: Color(0xFF337ab7),
fontSize: 13,
),
activeTextStyle: const TextStyle(
color: Colors.white,
fontSize: 13,
),
items: _sideBarItems,
selectedRoute: route,
onSelected: (item) {
print(
'sideBar: onTap(): title = ${item.title}, route = ${item.route}');
if (item.route != null && item.route != route) {
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: body,
),
);
}
}
示例页面
// sample_pages/dashboard_page.dart
import 'package:flutter/material.dart';
class DashboardPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Dashboard',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
);
}
}
// sample_pages/second_level_item_1_page.dart
import 'package:flutter/material.dart';
class SecondLevelItem1Page extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Second Level Item 1',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
);
}
}
// sample_pages/second_level_item_2_page.dart
import 'package:flutter/material.dart';
class SecondLevelItem2Page extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Second Level Item 2',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
);
}
}
// sample_pages/third_level_item_1_page.dart
import 'package:flutter/material.dart';
class ThirdLevelItem1Page extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Third Level Item 1',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
);
}
}
// sample_pages/third_level_item_2_page.dart
import 'package:flutter/material.dart';
class ThirdLevelItem2Page extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Third Level Item 2',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
);
}
}
运行应用
将上述代码保存到相应的文件中，并运行你的 Flutter 应用。你将看到一个带有侧边栏和顶部导航栏的后台管理界面，可以点击不同的菜单项进行导航。
希望这个示例对你有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。
更多关于Flutter后台管理界面插件flutter_admin_scaffold的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter后台管理界面插件flutter_admin_scaffold的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个使用 flutter_admin_scaffold 插件来创建 Flutter 后台管理界面的简单示例代码。flutter_admin_scaffold 是一个 Flutter 包，它提供了一个快速搭建后台管理界面的基础框架。
首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_admin_scaffold 依赖：
dependencies:
flutter:
sdk: flutter
flutter_admin_scaffold: ^最新版本号 # 请替换为最新版本号
然后运行 flutter pub get 来获取依赖。
接下来，创建一个 Flutter 应用并使用 flutter_admin_scaffold 来搭建后台管理界面。以下是一个简单的示例代码：
import 'package:flutter/material.dart';
import 'package:flutter_admin_scaffold/flutter_admin_scaffold.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Admin Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AdminScaffold(
appBar: AppBar(
title: Text('Flutter Admin Demo'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
Navigator.pop(context); // Close drawer
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
// Handle settings tap
Navigator.pop(context); // Close drawer
},
),
],
),
),
body: Center(
child: Text('Welcome to the Admin Dashboard!'),
),
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
],
currentIndex: 0,
onTap: (index) {
// Handle bottom navigation tap
},
),
),
);
}
}
在这个示例中，我们创建了一个 MyApp 小部件，它使用 MaterialApp 作为根小部件。在 home 属性中，我们使用了 AdminScaffold 小部件来构建后台管理界面的基本结构。
appBar属性用于定义应用栏。drawer属性用于定义导航抽屉，这里我们添加了两个列表项：Home 和 Settings。body属性用于定义界面的主要内容区域，这里我们简单地显示了一个欢迎文本。bottomNavigationBar属性用于定义底部导航栏，这里我们添加了两个导航项：Home 和 Settings。
你可以根据需要进一步自定义和扩展这个基础结构，例如添加更多的页面、功能组件和样式。
请确保你查阅 flutter_admin_scaffold 的官方文档以获取更多详细信息和高级用法。
