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

特性

此插件提供了一个具有控制器的Cupertino风格日期选择器。

控制器

允许通过动画改变日期。

自定义化

允许自定义日期选择器。

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中使用cupertino_date_picker_w_controller插件。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late CustomDatePickerController controller;
  String date = DateTime.now().toString();

  @override
  void initState() {
    super.initState();
    // 初始化控制器
    controller = CustomDatePickerController(
      // 设置最小日期为1900年
      minimumDate: DateTime(1900),
      // 设置最大日期为2100年
      maximumDate: DateTime(2100),
      // 初始日期为当前日期
      initialDateTime: DateTime.now(),
    );
  }

  @override
  void dispose() {
    // 释放控制器资源
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示当前日期
            Text(date),
            SizedBox(
              height: 300.0,
              width: MediaQuery.of(context).size.width - 40.0,
              // 使用自定义日期选择器
              child: CustomDatePicker(
                controller: controller,
                // 日期变化时更新UI
                onDateTimeChange: (newDate) {
                  setState(() {
                    date = newDate.toString();
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入库:

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

2. 初始化应用:

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

3. 创建应用:

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

4. 创建主页面:

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

5. 实现主页面状态管理:

   class _MyHomePageState extends State<MyHomePage> {
     late CustomDatePickerController controller;
     String date = DateTime.now().toString();
   
     @override
     void initState() {
       super.initState();
       controller = CustomDatePickerController(
         minimumDate: DateTime(1900),
         maximumDate: DateTime(2100),
         initialDateTime: DateTime.now(),
       );
     }
   
     @override
     void dispose() {
       controller.dispose();
       super.dispose();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text(date),
               SizedBox(
                 height: 300.0,
                 width: MediaQuery.of(context).size.width - 40.0,
                 child: CustomDatePicker(
                   controller: controller,
                   onDateTimeChange: (newDate) {
                     setState(() {
                       date = newDate.toString();
                     });
                   },
                 ),
               ),
             ],
           ),
         ),
       );
     }
   }