Flutter日期选择器插件spinner_date_picker的使用

允许用户通过选择日期选项来快速设置日期。

enum DateOptions { d, m, y }

可以设置一个初始日期给用户提供提示。如果未设置，则默认为当前日期。

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<DateTime> dateNotifier =
      ValueNotifier(DateTime(2020, MonthsOfYear.march.number, 12));

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ValueListenableBuilder(
        valueListenable: dateNotifier,
        builder: (context, date, _) {
          return Center(
            child: Column(
              children: [
                Text("${date.day} - ${date.month} - ${date.year}"),
                SpinnerDatePicker(
                  initialDate: date,
                  dateOptions: const [
                    DateOptions.d,
                    DateOptions.m,
                    DateOptions.y
                  ],
                  onDateChanged: (date) => dateNotifier.value = date,
                ),
              ],
            ),
          );
        },
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

• dateOptions 参数用于设置日期顺序（例如日期格式）以及可以选择更改的日期部分。
• onDateChanged 函数是一个回调函数，用于获取新日期。

完整示例代码

import 'package:spinner_date_picker/date_picker/date_picker.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Date Picker',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Date Picker'),
    );
  }
}

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> {
  ValueNotifier<DateTime> dateNotifier = ValueNotifier(
    DateTime(2020, MonthsOfYear.march.number, 12),
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ValueListenableBuilder(
          valueListenable: dateNotifier,
          builder: (context, date, _) {
            return Center(
              child: Column(
                children: [
                  Text("${date.day} - ${date.month} - ${date.year}"),
                  SpinnerDatePicker(
                    initialDate: date,
                    dateOptions: const [
                      DateOptions.d,
                      DateOptions.m,
                      DateOptions.y
                    ],
                    onDateChanged: (date) => dateNotifier.value = date,
                  ),
                ],
              ),
            );
          }), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}