Flutter日期选择器插件flutter_appbar

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

flutter_appbar_datepicker 是一个包含日历选择器（日选择器、周选择器和月选择器）的新插件。

获取开始

请参阅以下简短且实用的例子以了解如何使用此包。更多详细示例，请查看 /example 文件夹。

日选择器

DateTime daySelected = DateTime.now();
String dayFormatted = DateFormat('yyyy/MM/dd').format(DateTime.now());

Text(
  'Day：$dayFormatted',
  style: TextStyle(
    fontSize: 16.sp,
  ),
),

onPressed: () async {
  CustomDayPickerDialog(
    context: context,
    primaryColor: Colors.black,
    secondaryColor: Colors.white,
    initialDate: daySelected,
    onConfirm: (DateTime newSelectedDate) {
      setState(() {
        daySelected = newSelectedDate;
        dayFormatted = DateFormat('yyyy/MM/dd')
            .format(newSelectedDate);
      });
    },
  ).show();
},

周选择器

List<DateTime?> _dateRangePickerValue = [
  DateTime.now(),
  DateTime.now().add(const Duration(days: 6)),
];
String formatDate(List<DateTime?> dateRange) {
  final startDate = DateFormat('yyyy/MM/dd').format(dateRange[0]!);
  final endDate = DateFormat('yyyy/MM/dd').format(dateRange[1]!);
  return '$startDate - $endDate';
}

Text(
  'Week：${formatDate(_dateRangePickerValue)}',
  style: TextStyle(
    fontSize: 16.sp,
  ),
),

IconButton(
  icon: Icon(
    Icons.keyboard_arrow_down_outlined,
    size: 24.sp,
  ),
  onPressed: () async {
    CustomWeekPickerDialog(
      context: context,
      primaryColor: Colors.black,
      secondaryColor: Colors.white,
      startDate: _dateRangePickerValue[0]!,
      endDate: _dateRangePickerValue[1]!,
      onConfirm: (DateTime startDate, DateTime endDate) {
        setState(() {
          _dateRangePickerValue = [
            startDate,
            endDate,
          ];
        });
      },
    ).show();
  },
),

月选择器

DateTime monthSelected = DateTime.now();
String monthFormatted = DateFormat('yyyy/MM').format(DateTime.now());

Text(
  'Month：$monthFormatted',
  style: TextStyle(
    fontSize: 16.sp,
  ),
),

onPressed: () async {
  CustomMonthPickerDialog(
    context: context,
    primaryColor: Colors.black,
    secondaryColor: Colors.white,
    initialDate: monthSelected,
    onConfirm: (DateTime newSelectedDate) {
      setState(() {
        monthSelected = newSelectedDate;
        monthFormatted = DateFormat('yyyy/MM').format(newSelectedDate);
      });
    },
  ).show();
},

示例代码

import 'package:flutter_appbar_datepicker/day_picker.dart';
import 'package:flutter_appbar_datepicker/month_picker.dart';
import 'package:flutter_appbar_datepicker/week_picker.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:intl/intl.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (_, child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'appbar_datepicker_ui',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
            useMaterial3: true,
          ),
          home: const MyHomePage(
            title: 'appbar_datepicker_ui',
          ),
        );
      },
    );
  }
}

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> {
  // day
  DateTime daySelected = DateTime.now();
  String dayFormatted = DateFormat('yyyy/MM/dd').format(DateTime.now());

  // week
  List<DateTime?> _dateRangePickerValue = [
    DateTime.now(),
    DateTime.now().add(const Duration(days: 6)),
  ];

  String formatDate(List<DateTime?> dateRange) {
    final startDate = DateFormat('yyyy/MM/dd').format(dateRange[0]!);
    final endDate = DateFormat('yyyy/MM/dd').format(dateRange[1]!);
    return '$startDate - $endDate';
  }

  // month
  DateTime monthSelected = DateTime.now();
  String monthFormatted = DateFormat('yyyy/MM').format(DateTime.now());

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 26.w, vertical: 2.h),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    'Day：$dayFormatted',
                    style: TextStyle(
                      fontSize: 16.sp,
                    ),
                  ),
                  IconButton(
                    icon: Icon(
                      Icons.keyboard_arrow_down_outlined,
                      size: 24.sp,
                    ),
                    onPressed: () async {
                      CustomDayPickerDialog(
                        context: context,
                        primaryColor: Colors.black,
                        secondaryColor: Colors.white,
                        initialDate: daySelected,
                        onConfirm: (DateTime newSelectedDate) {
                          setState(() {
                            daySelected = newSelectedDate;
                            dayFormatted = DateFormat('yyyy/MM/dd')
                                .format(newSelectedDate);
                          });
                        },
                      ).show();
                    },
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 26.w, vertical: 2.h),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    'Week：${formatDate(_dateRangePickerValue)}',
                    style: TextStyle(
                      fontSize: 16.sp,
                    ),
                  ),
                  IconButton(
                    icon: Icon(
                      Icons.keyboard_arrow_down_outlined,
                      size: 24.sp,
                    ),
                    onPressed: () async {
                      CustomWeekPickerDialog(
                        context: context,
                        primaryColor: Colors.black,
                        secondaryColor: Colors.white,
                        startDate: _dateRangePickerValue[0]!,
                        endDate: _dateRangePickerValue[1]!,
                        onConfirm: (DateTime startDate, DateTime endDate) {
                          setState(() {
                            _dateRangePickerValue = [
                              startDate,
                              endDate,
                            ];
                          });
                        },
                      ).show();
                    },
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 26.w, vertical: 2.h),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    'Month：$monthFormatted',
                    style: TextStyle(
                      fontSize: 16.sp,
                    ),
                  ),
                  IconButton(
                    icon: Icon(
                      Icons.keyboard_arrow_down_outlined,
                      size: 24.sp,
                    ),
                    onPressed: () async {
                      CustomMonthPickerDialog(
                        context: context,
                        primaryColor: Colors.black,
                        secondaryColor: Colors.white,
                        initialDate: monthSelected,
                        onConfirm: (DateTime newSelectedDate) {
                          setState(() {
                            monthSelected = newSelectedDate;
                            monthFormatted =
                                DateFormat('yyyy/MM').format(newSelectedDate);
                          });
                        },
                      ).show();
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter日期选择器插件flutter_appbar_datepicker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

更多关于Flutter日期选择器插件flutter_appbar_datepicker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter应用中使用flutter_appbar_datepicker插件的一个简单示例。这个插件允许你在应用的顶部栏（AppBar）中添加一个日期选择器。

首先，确保你的pubspec.yaml文件中已经添加了flutter_appbar_datepicker依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_appbar_datepicker: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤使用flutter_appbar_datepicker插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Date Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime _selectedDate = DateTime.now();

  void _selectDate(BuildContext context, DateTime picked) {
    setState(() {
      _selectedDate = picked;
    });
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Date'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.date_range),
            onPressed: () {
              showDatePicker(
                context: context,
                initialDate: _selectedDate,
                firstDate: DateTime(2000),
                lastDate: DateTime(2101),
                builder: (BuildContext context, Widget child) {
                  return Theme(
                    data: ThemeData.light().copyWith(
                      primaryColor: Colors.blue,
                      primaryColorDark: Colors.blueDark,
                      accentColor: Colors.blueAccent,
                    ),
                    child: AppBarDatePicker(
                      child: child,
                      onSelected: (DateTime date) {
                        _selectDate(context, date);
                      },
                    ),
                  );
                },
              );
            },
          ),
        ],
      ),
      body: Center(
        child: Text(
          'Selected Date: ${_selectedDate.toLocal()}',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

在pubspec.yaml中添加了flutter_appbar_datepicker依赖。
创建了一个简单的Flutter应用，其中包含一个AppBar和一个居中的文本显示选中的日期。
在AppBar的actions中添加了一个IconButton，点击它会打开一个日期选择器。
使用showDatePicker函数显示日期选择器，并通过builder参数将其包装在AppBarDatePicker中。
当用户选择日期时，通过_selectDate方法更新状态并关闭日期选择器。

注意：flutter_appbar_datepicker插件的实际用法可能因版本而异，上述代码是基于插件提供的一个基本示例。如果插件的API有变化，请参考最新的官方文档进行调整。此外，由于flutter_appbar_datepicker在撰写此回答时可能不是Flutter社区广泛使用的插件，因此建议检查其活跃度和维护状态，或者考虑使用更流行的日期选择器插件，如flutter_datetime_picker。