Flutter时间选择插件time_of_day_widget的使用

time_of_day_widget 是一个基于 TimeOfDay 的状态变化小部件。它可以用来展示一天中的不同时间段，并且可以根据当前时间自动切换不同的显示效果。

完整示例代码

import 'package:flutter/material.dart';
import 'package:time_of_day_widget/models/time_of_day_range.dart';
import 'package:time_of_day_widget/time_of_day_widget.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Time Of Day Widget Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Column(
          children: [
            Text('Time Of Day Widget'),
            _buildTimeOfDayWidget(),
            Text('Time Of Day Range Widget'),
            _buildTimeOfDayRangesWidget()
          ],
        ));
  }

  // 构建一个TimeOfDayWidget实例
  TimeOfDayWidget _buildTimeOfDayWidget() {
    return TimeOfDayWidget(
      timeOfDayWidgetBuilders: [
        (context, timeOfDay, child) {
          return _TimeOfDaySampleWidget(
            imageAssetPath: "assets/images/twilight.png",
            timeOfDay: timeOfDay,
          );
        },
        (context, timeOfDay, child) {
          return _TimeOfDaySampleWidget(
            imageAssetPath: "assets/images/sunrise.png",
            timeOfDay: timeOfDay,
          );
        },
        (context, timeOfDay, child) {
          return _TimeOfDaySampleWidget(
            imageAssetPath: "assets/images/midday.png",
            timeOfDay: timeOfDay,
          );
        },
        (context, timeOfDay, child) {
          return _TimeOfDaySampleWidget(
            imageAssetPath: "assets/images/sunglow.png",
            timeOfDay: timeOfDay,
          );
        },
        (context, timeOfDay, child) {
          return _TimeOfDaySampleWidget(
            imageAssetPath: "assets/images/nightfall.png",
            timeOfDay: timeOfDay,
          );
        }
      ],
    );
  }

  // 构建一个TimeOfDayRangedWidget实例
  Widget _buildTimeOfDayRangesWidget() {
    return TimeOfDayRangedWidget(
      timeOfDayRanges: [
        TimeOfDayRange(
            from: TimeOfDay(hour: 1, minute: 0),
            to: TimeOfDay(hour: 5, minute: 0),
            builder: (context, timeOfDay, child) {
              return _TimeOfDaySampleWidget(
                imageAssetPath: "assets/images/twilight.png",
                timeOfDay: timeOfDay,
              );
            }),
        TimeOfDayRange(
            from: TimeOfDay(hour: 5, minute: 0),
            to: TimeOfDay(hour: 9, minute: 0),
            builder: (context, timeOfDay, child) {
              return _TimeOfDaySampleWidget(
                imageAssetPath: "assets/images/sunrise.png",
                timeOfDay: timeOfDay,
              );
            }),
        TimeOfDayRange(
            from: TimeOfDay(hour: 9, minute: 0),
            to: TimeOfDay(hour: 15, minute: 0),
            builder: (context, timeOfDay, child) {
              return _TimeOfDaySampleWidget(
                imageAssetPath: "assets/images/midday.png",
                timeOfDay: timeOfDay,
              );
            }),
        TimeOfDayRange(
            from: TimeOfDay(hour: 15, minute: 0),
            to: TimeOfDay(hour: 19, minute: 0),
            builder: (context, timeOfDay, child) {
              return _TimeOfDaySampleWidget(
                imageAssetPath: "assets/images/sunglow.png",
                timeOfDay: timeOfDay,
              );
            }),
        TimeOfDayRange(
            from: TimeOfDay(hour: 19, minute: 0),
            to: TimeOfDay(hour: 24, minute: 0),
            builder: (context, timeOfDay, child) {
              return _TimeOfDaySampleWidget(
                imageAssetPath: "assets/images/nightfall.png",
                timeOfDay: timeOfDay,
              );
            })
      ],
    );
  }
}

// 用于展示时间的样例小部件
class _TimeOfDaySampleWidget extends StatelessWidget {
  final TimeOfDay timeOfDay;
  final String imageAssetPath;

  const _TimeOfDaySampleWidget(
      {Key? key, required this.timeOfDay, required this.imageAssetPath})
      : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 200,
        width: 300,
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(imageAssetPath), fit: BoxFit.cover)),
        child: Text(timeOfDay.format(context),
            style:
                Theme.of(context).textTheme.headline1!.copyWith(fontSize: 12)),
      ),
    );
  }
}