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

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

awesome_datepicker 是一个用于选择日期的插件。通过颜色选择器来输出日期。

awesome_datepicker插件的屏幕截图

特性

该插件可以：

  1. 显示一个颜色选择器以输出日期。
  2. 仅此而已。

使用方法

你可以使用异步函数 showAwesomeDatePicker 来触发日期选择对话框：

var selectedDate = DateTime.now();

await showAwesomeDatePicker(
  context: context, // 上下文
  mode: AwesomeDatePickerMode.hex, // 日期选择模式
  useAlpha: true, // 是否使用透明度
  initialDate: DateTime.now(), // 初始日期
  onChanged: (date) {
    if (kDebugMode) print('changed to $date'); // 打印选择的日期
    selectedDate = date; // 更新选中的日期
  },
);

你也可以直接在表单或对话框中使用 AwesomeDatePicker 小部件：

child: AwesomeDatePicker(
  initialDate: DateTime.now(), // 初始日期
  mode: AwesomeDatePickerMode.hex, // 日期选择模式
  colorPickerHeight: 250, // 颜色选择器的高度
  hueRingStrokeWidth: 20, // 色环的宽度
  onDateChanged: (date) {
    if (kDebugMode) print('changed to $date'); // 打印选择的日期
    selectedDate = date; // 更新选中的日期
  },
),

示例代码

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

import 'package:awesome_datepicker/awesome_datepicker.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

import 'constants.dart';
import 'results.dart';
import 'widgets/glow_text.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Awesome DatePicker Example App',
      home: const Home(),
      theme: appTheme,
      themeMode: ThemeMode.dark,
    );
  }
}

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

  void _selectBirthdate(BuildContext context) async {
    DateTime? selectedDate;
    final navigator = Navigator.of(context);

    await showAwesomeDatePicker(
      context: context,
      mode: AwesomeDatePickerMode.hex,
      useAlpha: true,
      initialDate: DateTime.now(),
      onChanged: (date) {
        if (kDebugMode) print('changed to $date');

        selectedDate = date;
      },
    );

    navigator.pushReplacement(MaterialPageRoute(
      builder: (_) => Results(birthdate: selectedDate ?? DateTime.now()),
    ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            InkWell(
              borderRadius: BorderRadius.circular(30),
              onTap: () => _selectBirthdate(context),
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: GlowText(
                  style: Theme.of(context).textTheme.headlineSmall,
                  textAlign: TextAlign.center,
                  glowColor: primary,
                  textSpan: const TextSpan(
                    children: [
                      TextSpan(text: "点击这里并 "),
                      TextSpan(
                        text: "选择您的出生日期",
                        style: TextStyle(
                          color: primary,
                          fontWeight: FontWeight.bold,
                          inherit: true,
                        ),
                      ),
                      TextSpan(text: "以解锁宇宙的秘密"),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


awesome_datepicker 是一个非常方便且易于使用的 Flutter 日期选择器插件，它允许你自定义日期选择器的外观和行为。以下是如何在 Flutter 项目中使用 awesome_datepicker 的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 awesome_datepicker 依赖：

dependencies:
  flutter:
    sdk: flutter
  awesome_datepicker: ^0.1.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 awesome_datepicker：

import 'package:awesome_datepicker/awesome_datepicker.dart';

3. 使用日期选择器

你可以通过调用 showAwesomeDatePicker 方法来显示日期选择器。下面是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DatePickerExample(),
    );
  }
}

class DatePickerExample extends StatefulWidget {
  [@override](/user/override)
  _DatePickerExampleState createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  DateTime selectedDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showAwesomeDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(2000),
      lastDate: DateTime(2101),
      accentColor: Colors.blue, // 自定义颜色
      fontFamily: 'Roboto', // 自定义字体
    );
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Awesome Date Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Selected Date: ${selectedDate.toLocal()}",
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部