Flutter营业时间展示插件opening_hour_display_widget的使用

Flutter营业时间展示插件opening_hour_display_widget的使用

opening_hour_display_widget 是一个用于在 Flutter 应用中展示企业营业时间的插件。通过该插件，您可以自定义界面的各种样式，从前景文字颜色到背景颜色。此插件会从移动终端获取系统时间，并据此显示相应的消息。

安装

首先，您需要将 opening_hour_display_widget 添加到您的项目中。打开命令行工具并进入项目的根目录，然后运行以下命令：

flutter pub add opening_hour_display_widget

可定制选项

该插件提供了多种可定制的选项，包括：

• openTitle: 营业时的标题。
• closeTitle: 关闭时的标题。
• openDescription: 营业时的描述信息。
• closeDescription: 关闭时的描述信息。
• openColor: 营业时的文本颜色。
• closeColor: 关闭时的文本颜色。
• boxWidth: 小部件的宽度。
• iconSize: 时钟图标的大小。
• textSize: 文本大小。
• openHour: 营业开始小时数（整数）。
• closeHour: 营业结束小时数（整数）。
• openHourBackgroundColor: 营业时的背景颜色。
• closeHourBackgroundColor: 关闭时的背景颜色。

示例

在完成上述安装步骤后，您可以在 pubspec.yaml 文件中看到如下内容：

接下来，您需要在项目中导入 opening_hour_display_widget 包：

最后，在您的应用中使用 OpeningHourDisplayWidget：

以下是使用 OpeningHourDisplayWidget 的完整示例代码：

import 'package:flutter/material.dart';
import 'package:opening_hour_display_widget/opening_hour_display_widget.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Open Hour Display Widget Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueAccent),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Open Hour Display Widget Example Home Page'),
    );
  }
}

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(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Find out if the store is open or closed',
            ),
            SizedBox(
              width: 220,
              child: OpeningHourDisplayWidget(
                boxWidth: 210,
                openTitle: "Open",
                closeTitle: "Closed",
                openDescription: "We'll be closed on 6:00 PM",
                closeDescription: "We'll be open on 9:00 AM",
                openHour: 9,
                closeHour: 18,
                iconSize: 20,
                openColor: Colors.green,
                closeColor: Colors.red,
              ),
            )
          ],
        ),
      ),
    );
  }
}