Flutter日期时间选择器插件ola_style_datetime_picker的使用

Flutter日期时间选择器插件ola_style_datetime_picker的使用

Ola Style Datetime Picker

Ola Style Datetime Picker 是一个设计风格类似于流行的打车应用 Ola 的日期时间选择器。

作者

• @Nagaraj K

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ola_style_datetime_picker: ^版本号

然后在你的 Dart 文件中导入：

import 'package:ola_style_datetime_picker/ola_style_datetime_picker.dart';

使用示例

下面是一个完整的示例代码，展示了如何使用 OlaStyleDateTimePicker 插件来选择日期和时间。

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:ola_style_datetime_picker/ola_style_datetime_picker.dart';

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

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

  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ola Style datetime Picker'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDateTime;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Align(
              alignment: Alignment.center,
              child: Text('A Ola Style Date Picker'),
            ),
            SizedBox(height: 40),

            Container(
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
                boxShadow: const [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 10,
                    spreadRadius: 2,
                  ),
                ],
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Selected Date time:',
                    style: TextStyle(fontSize: 14),
                  ),
                  SizedBox(height: 10),
                  Text(
                    selectedDateTime != null
                        ? DateFormat('dd MMM, hh:mm a').format(selectedDateTime!)
                        : '滚动以更改',
                    style: TextStyle(fontSize: 14, color: Colors.grey),
                  ),
                  SizedBox(height: 20),
                  OlaStyleDateTimePicker(
                    startDate: DateTime.now(),
                    endDate: DateTime.now().add(Duration(days: 365 * 2)),
                    selectedDate: DateTime.now(),
                    onChanged: (dateTime) {
                      setState(() {
                        selectedDateTime = dateTime;
                      });
                    },
                  ),
                ],
              ),
            ),
            SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}