Flutter中的日夜时间选择器

day_night_time_picker是一个日夜时间选择器，用于flutter、美丽的日夜动画以及太阳和月亮资产。我们不需要添加显式资产。下面给出了一个示例视频，以了解我们将在本文中做什么。

特性

下面给出了 day_night_time_picker 的一些属性。

Name	Description
value	Required Display value. It takes in [TimeOfDay].
onChange	Required Return the new time the user picked as [TimeOfDay].
onChangeDateTime	Optional Return the new time the user picked as [DateTime].
is24HrFormat	Show the time in TimePicker in 24-hour format.
accentColor	Accent color of the TimePicker. Theme.of(context).accentColor
unselectedColor	Color applied unselected options (am/pm, hour/minute). Colors.grey
cancelText	Text displayed for the Cancel button. cancel
okText	Text displayed for the Ok button. ok
sunAsset	Image asset used for the Sun. Asset provided
moonAsset	Image asset used for the Moon. Asset provided
iosStylePicker	Whether to display a IOS style picker (Not exactly the same). false

示例项目

将插件添加到 pubspec.yaml 依赖项

Dart

dependencies:
  day_night_time_picker:

用法

要使用插件，只需导入包

Dart

import 'package:day_night_time_picker/day_night_time_picker.dart';

代码

创建时间变量：

Dart

TimeofDay _time  = TimeofDay.now();

更改时更新时间变量：

Dart

void onTimeChanged(TimeOfDay time) {
   setState(() {
     _timeOfDay = time;
   });
 }

导航到显示选择器：

Dart

Navigator.of(context).push(
                     showPicker(
                       context: context,
                       value: _timeOfDay,
                       onChange: onTimeChanged,
                       minuteInterval: MinuteInterval.FIVE,
                       is24HrFormat: false,
                     ),
                   );

最终代码将是：

Dart

import 'package:day_night_time_picker/lib/constants.dart';
import 'package:day_night_time_picker/lib/daynight_timepicker.dart';
import 'package:flutter/material.dart';
  
void main() {
  runApp(const DayNight());
}
  
class DayNight extends StatefulWidget {
  const DayNight({Key? key}) : super(key: key);
  
  @override
  State createState() => _DayNightState();
}
  
class _DayNightState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "DayNight",
      theme: ThemeData(primaryColor: Color.fromARGB(255, 25, 71, 133)),
      debugShowCheckedModeBanner: false,
      home: const Home(),
    );
  }
}
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);
  
  @override
  State createState() => _HomeState();
}
  
class _HomeState extends State {
  TimeOfDay _timeOfDay = TimeOfDay.now();
  void onTimeChanged(TimeOfDay time) {
    setState(() {
      _timeOfDay = time;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Day Night Picker"),
      ),
      body: SafeArea(
          child: Center(
        child: SingleChildScrollView(
          // controller: controller,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                _timeOfDay.format(
                  context,
                ),
                style: Theme.of(context).textTheme.headlineLarge,
              ),
              const SizedBox(
                height: 10,
              ),
              TextButton(
                  onPressed: () {
                    Navigator.of(context).push(
                      showPicker(
                        context: context,
                        value: _timeOfDay,
                        onChange: onTimeChanged,
                        minuteInterval: MinuteInterval.FIVE,
                        is24HrFormat: false,
                      ),
                    );
                  },
                  child: const Text("Pick Time "))
            ],
          ),
        ),
      )),
    );
  }
}

代码说明

• main 是加载程序后调用的主要方法。
• 加载程序后，runApp 将运行并调用我们的有状态小部件 DayNight。
• 由于Flutter基于小部件，因此构建了小部件。
• 创建 MaterailApp 允许我们设置应用标题，以脚手架为家。
• 创建初始化为当前时间的 TimeDay 类型的变量 _time。
• Scaffold 允许我们设置 AppBar 和页面的正文。
• 作为 AppBar，它是一个简单的标题。
• 作为一个主体，它需要一个中心列。
• 第一个孩子获取一个文本，其当前时间值存储在变量 _time 中。
• 其次，拿一个有高度的大小盒子。
• 第三个按钮，按下它以显示白天选择器对话框。
• 创建方法 onTimeChanged 将更改的时间放入变量 time 并将其存储到我们的变量 _time 中，以便它可以在用户屏幕上查看。

输出