Flutter月份选择插件flutter_month_select的使用

Flutter月份选择插件flutter_month_select的使用

特性

flutter_month_select 是一个帮助在 Android 和 iOS 上轻松选择年份月份的 Flutter 插件。

开始使用

flutter_month_select 基本上是用来选择月份的。

使用示例

DateTime? picker = await showMonthYearPicker(
  context: context, 
  initialDate: DateTime(2023), 
  firstDate: DateTime(2022), 
  lastDate: DateTime.now()
);

完整示例代码

以下是一个完整的示例代码，展示了如何使用 flutter_month_select 插件来选择月份：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_month_select/flutter_month_select.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 DemoMonthSelector(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter 月份选择器"),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () async {
            // 显示月份选择对话框
            DateTime? picker = await showMonthYearPicker(
              context: context, 
              initialDate: DateTime(2023), 
              firstDate: DateTime(2022), 
              lastDate: DateTime(2050)
            );

            /// 我们可以从 picker 中获取所选的月份
            /// 注意 picker 可能为 null
          },
          child: const Text("点击这里打开月份选择器"),
        ),
      ),
    );
  }
}

说明

1. 导入必要的包：

   import 'package:flutter/cupertino.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter_month_select/flutter_month_select.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 DemoMonthSelector(),
       );
     }
   }
   

4. 定义用于选择月份的界面：

   class DemoMonthSelector extends StatelessWidget {
     const DemoMonthSelector({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: const Text("Flutter 月份选择器"),
         ),
         body: Center(
           child: GestureDetector(
             onTap: () async {
               // 显示月份选择对话框
               DateTime? picker = await showMonthYearPicker(
                 context: context, 
                 initialDate: DateTime(2023), 
                 firstDate: DateTime(2022), 
                 lastDate: DateTime(2050)
               );
   
               /// 我们可以从 picker 中获取所选的月份
               /// 注意 picker 可能为 null
             },
             child: const Text("点击这里打开月份选择器"),
           ),
         ),
       );
     }
   }