rui_admin 0.0.15

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

RUI Admin

English Version | 中文版

[LOGO]

RUI Admin is a modern admin management system template based on Flutter, providing a complete layout and component system.

Feature Preview

Responsive Layout

[Responsive Layout] [Responsive Layout]

Mobile Adaptive, Left Menu Changes to Drawer

[User Interface] [User Interface]

Theme Switching

[Theme Switching]

• Light/Dark theme support
• Customizable theme colors

Main Features

1. Layout System

• Cross-platform Support:
  • Mobile: Supports iOS and Android platforms with native experience
  • Desktop: Supports Windows and macOS platforms with desktop-level experience
  • Web: Supports modern browsers with responsive web experience
• Responsive Layout:
  • Adapts to different screen sizes with automatic layout adjustment
  • Automatically switches to drawer navigation on narrow screens
  • Supports custom breakpoint configuration for flexible layout switching
• Left Sidebar:
  • Expandable multi-level menu system with unlimited nesting
  • Customizable Logo and footer components for brand customization
  • Menu items with icons, titles, badges, and click events
  • Supports menu item permission control for dynamic menus
  • Supports menu collapse functionality for space optimization

2. Theme System

• Theme Switching:
  • One-click light/dark theme switching
  • Automatic theme switching based on system settings
  • Customizable theme color configuration
• Theme Customization:
  • Customizable theme colors, text colors, background colors
  • Customizable component styles (buttons, input fields, etc.)
  • Customizable fonts, spacing, border radius, and other styles
• Theme Persistence:
  • Automatic theme settings storage
  • Theme configuration import/export support
  • Multiple theme configuration management

3. Navigation System

• Route Management:
  • Named route support for simplified page navigation
  • Route parameter passing and retrieval
  • Route guards for permission control
• Page State:
  • Page state preservation to avoid reloading
  • Page data caching for improved user experience
  • Page lifecycle management
• Page Animation:
  • Customizable page transition animations
  • Multiple transition effect options
  • Animation duration and curve configuration
• Back Navigation:
  • Customizable back navigation behavior
  • Back navigation confirmation prompts
  • Navigation stack management

4. UI Components

• Login Status Panel:
  • Displays user avatar, name, role, and other information
  • Online status display
  • Quick action menu support
• User Information Display:
  • Basic user information display
  • User settings management
  • Message notification center
• Menu Button Components:
  • Icon and text combination support
  • Badge display
  • Disabled state support
• Custom Input Fields:
  • Multiple input type support
  • Validation and error message display
  • Customizable styles
• Loading Animation:
  • Multiple loading animation styles
  • Customizable loading text
  • Loading timeout handling

5. Global Features

• Application Initialization:
  • Asynchronous initialization process
  • Initialization progress display
  • Initialization failure handling
• Message Notifications:
  • Global SnackBar message support
  • Multiple message types (success, warning, error)
  • Message queue management
• State Management:
  • Theme state management
  • Session state management
  • User state management
• Storage Management:
  • Local data persistence
  • Data encryption storage
  • Data synchronization mechanism

6. Global Functions List

// Show global message notification
RuiApp.rootScaffoldMessengerKey.currentState?.showSnackBar(
  SnackBar(
    content: Text('Message content'),
    duration: Duration(seconds: 2),
  ),
);

// Load theme
RuiStorageManager.load().then((ThemeModel tm) {
  // Handle theme data
});

// Application initialization
RuiApp(
  appInit: () async {
    // Perform initialization operations
    return true; // Return initialization result
  },
);

Example Code

1. Basic Application Structure

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

  runApp(
    const MyApp(),
  );
}

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

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

    if (context != null) {
      // ignore: use_build_context_synchronously
      final provider = Provider.of<UserProvider>(context, listen: false);
      var res = await provider.load(); // 👈 初始化

      //延迟弹出，等主界面显示后。
      Future.delayed(const Duration(milliseconds: 500), () {
        RuiApp.rootScaffoldMessengerKey.currentState?.showSnackBar(
          SnackBar(
            content: Text("应用初始化成功 $res"),
            duration: const Duration(seconds: 2),
          ),
        );
      });
    }
    return true;
  }
  
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => UserProvider()),
      ],
      child: RuiApp(
        title: "RUI APP",
        home: const MainFrame(),
        //异步 app初始化操作
        appInit: _initializeApp,
      ),
    );
  }
}

2. Main Frame Structure

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

3. Menu Items Configuration

List<RuiMenuItem> genLeftMenuItems() {
  return [
    RuiMenuItem(
      id: "home",
      icon: Icons.home,
      title: 'Home',
      subItems: [],
      onPressed: () {
        RuiScaffold.navigatorKey.currentState?.pushReplacementNamed('/home');
      },
    ),
    RuiMenuItem(
      id: "settings",
      icon: Icons.settings,
      title: 'Settings',
      subItems: [],
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text('Settings feature coming soon'),
            duration: Duration(seconds: 2),
          ),
        );
      },
    ),
    // ... other menu items
  ];
}

Getting Started

1. Clone the project to your local machine
2. Install dependencies:

   flutter pub add rui_admin
   

3. Refer to the example directory for implementation details
4. Run the project:

   flutter run
   

Notes

1. Ensure Flutter SDK version compatibility
2. Wait for dependency installation on first run
3. Theme changes are automatically saved
4. Page state preservation requires proper route configuration