Flutter日期时间选择器插件daymoonpicker的使用

daymoonpicker 是一个简单的日期和时间选择器插件。以下是其使用方法及完整的示例代码。

使用方法

引入依赖

首先，在你的 pubspec.yaml 文件中添加 daymoonpicker 依赖：

dependencies:
  daymoonpicker: ^x.x.x

然后运行 flutter pub get 来安装依赖。

示例代码

import 'package:daymoonpicker/lib/constants.dart';
import 'package:daymoonpicker/lib/daynight_timepicker.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '时间选择器',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  // ignore: library_private_types_in_public_api
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  TimeOfDay _time = TimeOfDay.now().replacing(hour: 11, minute: 30);
  bool iosStyle = true;

  void onTimeChanged(TimeOfDay newTime) {
    setState(() {
      _time = newTime;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "弹出式选择器样式",
                  style: Theme.of(context).textTheme.headline6,
                ),
                Text(
                  _time.format(context),
                  textAlign: TextAlign.center,
                  style: Theme.of(context).textTheme.headline1,
                ),
                const SizedBox(height: 10),
                TextButton(
                  style: TextButton.styleFrom(
                    backgroundColor: Theme.of(context).colorScheme.secondary,
                  ),
                  onPressed: () {
                    Navigator.of(context).push(
                      showPicker(
                        context: context,
                        value: _time,
                        onChange: onTimeChanged,
                        minuteInterval: MinuteInterval.FIVE,
                        // 可选参数，接收DateTime值
                        onChangeDateTime: (DateTime dateTime) {
                          // print(dateTime);
                          debugPrint("[调试日期时间]:  $dateTime");
                        },
                      ),
                    );
                  },
                  child: const Text(
                    "打开时间选择器",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                const SizedBox(height: 10),
                const Divider(),
                const SizedBox(height: 10),
                Text(
                  "内联选择器样式",
                  style: Theme.of(context).textTheme.headline6,
                ),
                // 渲染内联组件
                createInlinePicker(
                  elevation: 1,
                  value: _time,
                  onChange: onTimeChanged,
                  minuteInterval: MinuteInterval.FIVE,
                  iosStylePicker: iosStyle,
                  minHour: 9,
                  maxHour: 21,
                  is24HrFormat: false,
                ),
                Text(
                  "iOS样式",
                  style: Theme.of(context).textTheme.bodyText1,
                ),
                Switch(
                  value: iosStyle,
                  onChanged: (newVal) {
                    setState(() {
                      iosStyle = newVal;
                    });
                  },
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}