Flutter UI组件库插件sunday_ui的使用

Sunday UI 是一个为 Flutter 提供通用 UI 组件的包，支持自定义样式、Material 和 Cupertino 设计语言。它可以帮助开发者在不同平台上实现一致的外观和感觉，并且易于集成到现有的 Flutter 项目中。

特性

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

开始使用

要使用此插件，只需将 sunday_ui 添加为你的 pubspec.yaml 文件中的依赖项：

dependencies:
  sunday_ui: ^版本号

然后运行 flutter pub get 来获取依赖项。

示例代码

下面是一个完整的示例代码，展示了如何使用 sunday_ui 插件来创建一个简单的应用。

import 'package:color_theme_provider/color_theme_provider.dart';
import 'package:flutter/cupertino.dart';
import 'package:sunday_ui/sunday_ui.dart';
import 'package:sunday_ui_library/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.latestIOS;

  void _toggleStyle() {
    setState(() {
      _currentStyle = _currentStyle == Style.material ? Style.latestIOS : Style.material;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SundayApp(
      home: MyHomePage(
        currentStyle: _currentStyle,
        onStyleToggle: _toggleStyle,
      ),
      title: "Style Switcher Demo",
      uiStyle: _currentStyle,
    );
  }
}

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(
        style: widget.currentStyle,
        child: Center(child: Text("Tab $selectedIndex")),
      ),
      desktopLayoutStyle: SideBarLayout(
        title: "Title",
        keyCollapsed: "desktop-sidebar-layout",
        children: [
          SideBarItemGroup(
            isCollapsed: false,
            showAndHide: false,
            title: "Photo Library",
            children: [
              SidebarItem(
                  keyIndex: "library",
                  selectedIndex: selectedIndex,
                  onTap: () {
                    setState(() {
                      selectedIndex = "library";
                    });
                  },
                  icon: const Icon(CupertinoIcons.photo_on_rectangle),
                  text: "Photo Library"),
              SidebarItem(
                  keyIndex: "liked",
                  selectedIndex: selectedIndex,
                  onTap: () {
                    setState(() {
                      selectedIndex = "liked";
                    });
                  },
                  icon: const Icon(CupertinoIcons.heart),
                  text: "Liked Photos"),
              SidebarItem(
                  keyIndex: "recent",
                  selectedIndex: selectedIndex,
                  onTap: () {
                    setState(() {
                      selectedIndex = "recent";
                    });
                  },
                  icon: const Icon(CupertinoIcons.clock),
                  text: "Recent"),
            ],
          ),
          SideBarItemGroup(
            isCollapsed: false,
            showAndHide: true,
            title: "Albums",
            children: [
              SidebarItem(
                  keyIndex: "albums",
                  selectedIndex: selectedIndex,
                  onTap: () {
                    setState(() {
                      selectedIndex = "albums";
                    });
                  },
                  icon: const Icon(CupertinoIcons.square_stack),
                  text: "Albums"),
              SidebarItem(
                  keyIndex: "4",
                  selectedIndex: selectedIndex,
                  onTap: () {
                    setState(() {
                      selectedIndex = "4";
                    });
                  },
                  icon: const Icon(CupertinoIcons.heart),
                  text: "Liked Photos"),
              SidebarItem(
                  keyIndex: "5",
                  selectedIndex: selectedIndex,
                  onTap: () {
                    setState(() {
                      selectedIndex = "5";
                    });
                  },
                  icon: const Icon(CupertinoIcons.heart),
                  text: "Liked Photos"),
            ],
          )
        ],
      ),
    );
  }
}