rui_admin 0.0.1

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 文件夹。

// Example code showing how to use RUI
// 展示如何使用 RUI 的示例代码

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp()); 
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RuiApp(
      title: "RUI APP", 
      // Define initial route / 定义初始路由
      initialRoute: '/home',
      routes: {
        // Define route mapping / 定义路由映射
        '/home': (context) => MyHomePage(
              title: 'Flutter Demo Home Page',
            ),
        '/login': (context) => LoginPage(),
        '/about': (context) => AboutPage(),
        '/contact': (context) => ContactPage(),
      },
      headerMainPanel: _buildHeader(context),
      headerToolsPanel: const RuiHeadToolsBar(),
      headerUserPanel: _buildHeaderUserPanel(context),
      logo: Icons.apple,
      appName: "RUI",
      leftFooterWidget: _buildLeftFooterPanel(context),
      footerPanel: _buildFooter(context),
      rightMenuButtons: _buildRightMenuButtons(context),
      rightPanel: _buildRightPanel(context),
      onLogoPressed: () {
        print("logo");
      },
      onGenLeftMenuButtons: (BuildContext context) {
        return genLeftMenuItems(context);
      }, 
    );
  }

  Widget _buildHeader(BuildContext context) {
    return Container(
      // color: Colors.blue,
      child: Text("Demo of Rui"),
    );
  }

  Widget _buildHeaderUserPanel(BuildContext context) {
    return Container(
      child: 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(BuildContext context) {
    return const WebFooter();
  }
 

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

  List<RuiMenuItem> genLeftMenuItems(BuildContext context) {
    return [
      RuiMenuItem(
        id: "home",
        icon: Icons.home,
        title: 'Home',
        subItems: [],
      ),
      RuiMenuItem(
        id: "settings",
        icon: Icons.settings,
        title: 'settings',
        subItems: [
          RuiMenuItem(
            id: "setting 1",
            icon: Icons.music_note,
            title: 'setting 1',
            subItems: [
              RuiMenuItem(
                id: "sound",
                icon: Icons.speaker,
                title: 'sound',
              ),
              RuiMenuItem(
                  id: "vibrate",
                  icon: Icons.vibration,
                  title: 'vibrate',
                  subItems: [
                    RuiMenuItem(
                        id: "vibrate1",
                        icon: Icons.vibration,
                        title: 'vibrate 1',
                        onPressed: () {
                          print("vibrate1");
                        }),
                    RuiMenuItem(
                      id: "vibrate2",
                      icon: Icons.vibration,
                      title: 'vibrate 2',
                    ),
                  ]),
            ],
          ),
        ],
      ),
      RuiMenuItem(
        id: "About",
        icon: Icons.info,
        title: 'About',
        subItems: [
          RuiMenuItem(
            id: "AboutUs",
            icon: Icons.person,
            title: 'About Us',
            subItems: [],
          ),
          RuiMenuItem(
            id: "ContactUs",
            icon: Icons.email,
            title: 'Contact Us Now',
            onPressed: () {
              test(context, "[e-mail]");
            },
          ),
        ],
      ),
      RuiMenuItem(
        id: "Logout",
        icon: Icons.logout,
        title: 'Logout',
      ),
    ];
  }

  void test(BuildContext context, String msg) { 
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text(msg),
    )); 
  }

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

  Widget _buildRightPanel(BuildContext context) {
    return Container(
      // color: Colors.purple,
      child: Text("Right Panel"),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() { 
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      body: Column(
        children: [
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          ElevatedButton(
            onPressed: () {
              // Navigator.pushNamed(context, "/login");
              Navigator.push(context, CustomPageRoute(child: LoginPage()));
            },
            child: Text("Goto login"),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}