rui_admin 0.0.3

A flutter UI, for crossing platform APP, supporting mobile and windows, macos, web. 主要特点：admin布局，左侧菜单栏可展开收起，在宽度太小时自动切换为drawer。

RUI —— An APP Layout template / RUI —— 应用程序布局模板

A flutter UI, for crossing platform APP, supporting mobile and windows, macos, web. 一个 Flutter UI 框架，用于跨平台应用程序开发，支持移动端、Windows、macOS 和 Web。

Features / 功能特性

Main features / 主要特点：

• Cross-platform support / 跨平台支持： Supporting mobile (iOS/Android), desktop (Windows/macOS) and Web 支持移动端（iOS/Android）、桌面端（Windows/macOS）和 Web 端

• Responsive layout / 响应式布局： Adapts to different screen sizes, automatically switches to drawer navigation on narrow screens 自适应不同屏幕尺寸，在窄屏时自动切换为抽屉式导航

• Left sidebar / 左侧菜单栏：

  • Expandable multi-level menu system / 可展开收起的多级菜单系统
  • Customizable Logo and footer components / 支持自定义 Logo 和底部组件
  • Menu items with icons, titles and click events / 菜单项支持图标、标题和点击事件

• Top layout / 顶部布局：

  • Customizable header main panel / 可自定义的头部主面板
  • Built-in user information panel with avatar, username, phone and email / 内置用户信息面板，支持显示头像、用户名、电话和邮箱
  • Configurable toolbar / 可配置的工具栏

• Right features / 右侧功能：

  • Customizable right panel / 可自定义的右侧面板
  • Right menu buttons with shortcut support / 支持快捷键的右侧菜单按钮

• Bottom layout / 底部布局： Customizable footer component / 可自定义的页脚组件

• Routing system / 路由系统： Built-in route management with page navigation and custom transitions / 内置路由管理，支持页面导航和自定义转场动画

• Theme customization / 主题定制： Customizable app title, icons and overall style / 可自定义应用标题、图标和整体风格

Getting started / 开始使用

flutter pub add rui_admin

Usage / 使用方法

For examples, please refer to the /example folder. 示例代码请参考 /example 文件夹。

main.dart:

import 'package:example/main_frame.dart';
import 'package:example/providers/user_provider.dart';
import 'package:flutter/material.dart';

import 'package:rui_admin/components/rui_app.dart';
import 'package:provider/provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => UserProvider()),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  Future<bool> _initializeApp() async {
    // 模拟一些初始化操作
    await Future.delayed(const Duration(seconds: 2));

    //延迟弹出，等主界面显示后。
    Future.delayed(const Duration(milliseconds: 500), () {
      RuiApp.rootScaffoldMessengerKey.currentState?.showSnackBar(
        const SnackBar(
          content: Text('应用初始化成功'),
          duration: Duration(seconds: 2),
        ),
      );
    });

    return true;
  }

  @override
  Widget build(BuildContext context) {
    return RuiApp(
      title: "RUI APP",
      home: const MainFrame(),
      //异步 app初始化操作
      appInit: _initializeApp,
    );
  }
}

MyHomePage.dart:

import 'package:example/providers/user_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:rui_admin/components/rui_scaffold.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text(
            "${Provider.of<UserProvider>(context).count}",
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          ElevatedButton(
            onPressed: () {
              //need to user RuiScaffold.navigatorKey to jump
              RuiScaffold.navigatorKey.currentState?.pushNamed('/login');
            },
            child: const Text("Goto login"),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed:
            Provider.of<UserProvider>(context, listen: false).increaseCount,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

main_frame.dart:

import 'package:example/pages/home.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:rui_admin/components/menu/rui_menu_item.dart';
import 'package:rui_admin/components/panels/user/rui_login_status_panel.dart';
import 'package:rui_admin/components/panels/rui_footer.dart';
import 'package:rui_admin/components/rui_scaffold.dart';
import 'package:rui_admin/pages/about_page.dart';
import 'package:rui_admin/pages/contact_page.dart';
import 'package:rui_admin/pages/login_page.dart';

class MainFrame extends StatefulWidget {
  const MainFrame({super.key});

  @override
  State<MainFrame> createState() => _MainFrameState();
}

class _MainFrameState extends State<MainFrame> {
  @override
  Widget build(BuildContext context) {
    return RuiScaffold(
      initialRoute: '/home',
      routes: {
        '/home': (context) => const MyHomePage(title: 'Flutter Demo Home Page'),
        '/login': (context) => const LoginPage(),
        '/about': (context) => const AboutPage(),
        '/contact': (context) => const ContactPage(),
      },
      body: const MyHomePage(title: "Home"),
      headerMainPanel: const Text("Demo of Rui"),
      headerToolsPanel: _buildHeaderToolbar(),
      appName: 'RUI',
      headerUserPanel: _buildHeaderUserPanel(),
      logo: Icons.apple,
      leftMenuButtons: genLeftMenuItems(),
      leftFooterWidget: _buildLeftFooterPanel(),
      footerPanel: _buildFooter(),
      rightMenuButtons: _buildRightMenuButtons(),
      rightPanel: _buildRightPanel(),
    );
  }

  Widget _buildHeaderToolbar() {
    return Row(
      children: [
        IconButton(
          onPressed: () {},
          icon: const Icon(Icons.check),
        ),
      ],
    );
  }

  Widget _buildHeaderUserPanel() {
    return Row(
      children: [
        RuiLoginStatusPanel(
          userName: "张三",
          userPhone: "18000000000",
          userImage:
              "https://th.bing.com/th?id=OSK.f7f4e9af4e9ca9ea2585e5df12ff1c5f&w=80&h=80&c=7&o=6&dpr=2&pid=SANGAM",
          userEmail: "[e-mail]",
        ),
      ],
    );
  }

  Widget _buildFooter() {
    return const RuiFooter();
  }

  Widget _buildLeftFooterPanel() {
    return const Icon(Icons.abc);
  }

  List<RuiMenuItem> genLeftMenuItems() {
    return [
      RuiMenuItem(
        id: "home",
        icon: Icons.home,
        title: 'Home',
        subItems: [],
        onPressed: () {
          //need to user RuiScaffold.navigatorKey to jump
          RuiScaffold.navigatorKey.currentState?.pushNamed('/home');
        },
      ),
      RuiMenuItem(
        id: "settings",
        icon: Icons.settings,
        title: 'settings',
        subItems: [],
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: const Text('设置功能即将推出'),
              action: SnackBarAction(
                label: '知道了',
                onPressed: () {
                  // 点击操作
                },
              ),
              duration: const Duration(seconds: 2),
            ),
          );
        },
      ),
      RuiMenuItem(
        id: "About",
        icon: Icons.info,
        title: 'About',
        subItems: [
          RuiMenuItem(
            id: "AboutUs",
            icon: Icons.person,
            title: 'About Us',
            subItems: [],
            onPressed: () {
              //need to user RuiScaffold.navigatorKey to jump
              RuiScaffold.navigatorKey.currentState?.pushNamed('/about');
            },
          ),
          RuiMenuItem(
            id: "ContactUs",
            icon: Icons.email,
            title: 'Contact Us',
            onPressed: () {
              //need to user RuiScaffold.navigatorKey to jump
              RuiScaffold.navigatorKey.currentState?.pushNamed('/contact');
            },
          ),
        ],
      ),
      RuiMenuItem(
        id: "Logout",
        icon: Icons.logout,
        title: 'Logout',
        onPressed: () {
          RuiScaffold.pushNamed('/login');
        },
      ),
    ];
  }

  List<MenuItemButton> _buildRightMenuButtons() {
    return [
      MenuItemButton(
        shortcut: const SingleActivator(LogicalKeyboardKey.keyO, control: true),
        onPressed: () {
          if (kDebugMode) {
            print("======打开==========");
          }
        },
        child: const Text('打开'),
      ),
      MenuItemButton(
        shortcut: const SingleActivator(LogicalKeyboardKey.keyE, meta: true),
        onPressed: () {
          if (kDebugMode) {
            print("======print==========");
          }
        },
        child: const Text('print'),
      ),
      MenuItemButton(
        onPressed: () {
          if (kDebugMode) {
            print("======exit==========");
          }
        },
        child: const Text('Exit'),
      ),
    ];
  }

  Widget _buildRightPanel() {
    return const Text("Right Panel");
  }
}