Flutter平台集成插件sunday_platform的使用

Sunday Platform

一个为Flutter提供的通用UI组件包，支持自定义样式、Material Design和Cupertino设计选项。

特性

• 可定制的UI组件
• 支持Material和Cupertino设计语言
• 在不同平台上保持一致的外观和感觉
• 易于集成到现有的Flutter项目中
• 响应式和适应性布局

开始使用

要使用此插件，首先在pubspec.yaml文件中添加sunday_platform作为依赖项：

dependencies:
  sunday_platform: ^版本号

然后运行以下命令以安装依赖项：

flutter pub get

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter项目中集成和使用sunday_platform插件。

示例代码

// 导入必要的库
import 'package:color_theme_provider/color_theme_provider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:macos_ui/macos_ui.dart';
import 'package:sunday_platform/MainComponents/sunday_layout/sidebar_layout/sidebar/sunday_sidebar.dart';
import 'package:sunday_platform/MainComponents/sunday_layout/sidebar_layout/sidebar_item/sunday_sidebar_item.dart';
import 'package:sunday_platform/sunday_platform.dart';
import './theme_data.dart';

// 主应用入口
void main() {
  runApp(
    // 使用颜色主题提供器来管理主题切换
    ColorThemeProvider(
      theme: LightMyTheme(),       // 默认亮色主题
      darkTheme: DarkMyTheme(),    // 暗色主题
      child: const MyApp(),
    ),
  );
}

// 自定义主应用类
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Style currentStyle = Style.macos; // 当前UI风格，默认为macOS风格

  // 切换UI风格的方法
  void _toggleStyle() {
    setState(() {
      currentStyle = currentStyle == Style.material
          ? Style.latestIOS // 切换到最新的iOS风格
          : Style.material; // 切换回Material风格
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SundayApp(
      theme: MacosThemeData.dark(), // 设置默认主题
      home: SundayScaffold(
        style: currentStyle, // 当前风格
        child: MyHomePage(
          currentStyle: currentStyle, // 当前风格
          onStyleToggle: _toggleStyle, // 切换风格的回调
        ),
      ),
      title: "Sunday Platform", // 应用标题
      uiStyle: currentStyle, // 当前UI风格
    );
  }
}

// 主页面
class MyHomePage extends StatefulWidget {
  final Style currentStyle; // 当前风格
  final VoidCallback onStyleToggle; // 切换风格的回调

  const MyHomePage({
    super.key,
    required this.currentStyle,
    required this.onStyleToggle,
  });

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0; // 当前选中的底部导航栏索引
  String selectedIndex = "library"; // 当前选中的侧边栏项

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SundayLayout(
      style: widget.currentStyle, // 当前风格
      mobileLayoutStyle: SundayBottomBar(
        items: [
          SundayNavigationBarItem(
            icon: const Icon(CupertinoIcons.chat_bubble_2), // 图标
            label: "Messages", // 文本标签
            style: widget.currentStyle, // 当前风格
          ),
          SundayNavigationBarItem(
            icon: const Icon(CupertinoIcons.gear), // 图标
            label: "Settings", // 文本标签
            style: widget.currentStyle, // 当前风格
          ),
        ],
        currentIndex: 0, // 当前选中的索引
        onTap: (index) {}, // 点击事件回调
        style: widget.currentStyle, // 当前风格
        tabBuilder: (BuildContext context, int index) {
          return SundayScaffold(
            style: widget.currentStyle, // 当前风格
            child: Center(child: Text("Tab $index")), // 显示内容
          );
        },
      ),
      mainView: SundayScaffold(
        appBar: SundayAppBar(
          middle: const Text("Sunday Platform App Bar"), // 中间标题
          title: const Text("Sunday Platform AppBar"), // 左侧标题
          titleWidth: 200, // 标题宽度
          padding: const EdgeInsets.all(0), // 内边距
          style: widget.currentStyle, // 当前风格
          leading: const ToggleSidebarButton( // 侧边栏按钮
            keyCollapsed: 'desktop-sidebar-layout',
          ),
        ),
        style: widget.currentStyle, // 当前风格
        child: Center(child: Text("Tab $selectedIndex")), // 显示内容
      ),
      desktopLayoutStyle: SundaySidebarView(
        style: widget.currentStyle, // 当前风格
        title: "Sunday Platform", // 侧边栏标题
        keyCollapsed: "desktop-sidebar-layout", // 键值用于折叠状态
        children: [
          SundaySideBarItemGroup(
            style: widget.currentStyle, // 当前风格
            isCollapsed: false, // 是否折叠
            showAndHide: false, // 是否显示隐藏
            title: "Photo Library", // 组标题
            children: [
              SundaySidebarItem(
                style: widget.currentStyle, // 当前风格
                keyIndex: "item1", // 键值
                selectedIndex: selectedIndex, // 当前选中的项
                onTap: () {
                  setState(() {
                    selectedIndex = "item1"; // 更新选中项
                  });
                },
                icon: const Icon(CupertinoIcons.airplane), // 图标
                text: "Sunday Sidebar Item 1", // 文本
              ),
              SundaySidebarItem(
                style: widget.currentStyle, // 当前风格
                keyIndex: "item2", // 键值
                selectedIndex: selectedIndex, // 当前选中的项
                onTap: () {
                  setState(() {
                    selectedIndex = "item2"; // 更新选中项
                  });
                },
                icon: const Icon(CupertinoIcons.photo_on_rectangle), // 图标
                text: "Sunday Sidebar Item 2", // 文本
              ),
            ],
          ),
        ],
      ),
    );
  }
}