Flutter商店调度管理插件rashail_store_schedular的使用

Flutter商店调度管理插件rashail_store_schedular的使用

rashail_store_schedular 是一个用于 Flutter 的一周调度包，允许你为每一天选择预定时间。你可以根据需求完全自定义其用户界面。

截图

以下是一些示例截图：

示例图像 1

示例图像 2

示例图像 3

预览

以下是 rashail_store_schedular 的用法示例代码：

StoreScheduler(
  borderRadius: 4, // 设置圆角大小
  borderWidth: 0, // 设置边框宽度
  showBorder: false, // 是否显示边框
  borderColor: Colors.black, // 边框颜色
  buttonColor: Colors.black, // 按钮颜色
  pickerColor: Colors.black.withOpacity(0.05), // 选择器背景颜色
  dayStyle: const TextStyle(
    fontWeight: FontWeight.w600,
    fontFamily: "Times New Roman", // 字体样式
  ),
  buttonTextStyle: const TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.bold,
    fontFamily: "Times New Roman", // 按钮文字样式
  ),
  fontFamily: "Times New Roman", // 全局字体
  fontColor: Colors.black.withOpacity(0.8), // 文字颜色
  pickerFontSize: 18, // 选择器字体大小
  pickerFontWeight: FontWeight.w500, // 选择器字体粗细
  submitButtonText: "Save Store Settings", // 提交按钮文字
  onChangeValue: (value) { // 监听值变化
    print(value); // 打印选中的值
  },
)

功能特性

• 允许为每周的每一天设置开始时间和结束时间。
• 支持部分天数关闭店铺的功能。
• 输出结果以 JSON 格式生成。

开始使用

在你的项目中添加以下依赖到 pubspec.yaml 文件中：

dependencies:
  rashail_store_schedular: ^0.0.1

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

flutter pub get

示例代码

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 rashail_store_schedular：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:rashail_store_schedular/rashail_store_schedular.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Example',
      theme: ThemeData.light(useMaterial3: true),
      home: const MyHomePage(title: 'Example App'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
          'Schedule Time',
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            fontFamily: "Times New Roman",
          ),
        ),
      ),
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          SizedBox(
            width: MediaQuery.of(context).size.width / 3,
            child: StoreScheduler(
              borderRadius: 4, // 圆角
              borderWidth: 0, // 边框宽度
              showBorder: false, // 是否显示边框
              borderColor: Colors.black, // 边框颜色
              buttonColor: Colors.black, // 按钮颜色
              pickerColor: Colors.black.withOpacity(0.05), // 选择器背景色
              dayStyle: const TextStyle(
                fontWeight: FontWeight.w600,
                fontFamily: "Times New Roman", // 星期样式
              ),
              buttonTextStyle: const TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontFamily: "Times New Roman", // 按钮文字样式
              ),
              fontFamily: "Times New Roman", // 全局字体
              fontColor: Colors.black.withOpacity(0.8), // 文字颜色
              pickerFontSize: 18, // 选择器字体大小
              pickerFontWeight: FontWeight.w500, // 选择器字体粗细
              submitButtonText: "Save Store Settings", // 提交按钮文字
              onChangeValue: (value) { // 值变化回调
                if (kDebugMode) {
                  print(value); // 打印选中的值
                }
              },
            ),
          ),
        ],
      ),
    );
  }
}