Flutter Date & Time Pickers

最新推荐文章于 2024-06-28 15:03:04 发布

吴光亮

最新推荐文章于 2024-06-28 15:03:04 发布

阅读量368

点赞数

分类专栏： Flutter 文章标签： flutter html html5

本文链接：https://blog.csdn.net/m0_38013946/article/details/120865981

版权

Flutter 专栏收录该内容

57 篇文章 6 订阅

订阅专栏

这篇博客展示了如何在Flutter应用中使用`showDatePicker`和`showTimePicker`函数来实现日期和时间的选择功能。通过设置初始日期、时间范围以及初始化显示模式，用户可以方便地在应用中选择日期和时间，并在选择后打印出来。

摘要由CSDN通过智能技术生成

时间选择是一个函数而不是一个控件

initialDate 初始化时间
firstDate 开始时间，时间控件选择器从这个时间开始
lastDate 结束时间
initialDatePickerMode day：初始化显示天，year：初始化先选择年
textDirection 文本方向

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

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("DatePicker and TimePicker")),
      body: BodyContent(),
    );
  }
}
class BodyContent extends StatelessWidget {
  const BodyContent({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ElevatedButton(
            onPressed: () async {
              var result = await showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(2021),
                  lastDate: DateTime(2022));
              print('Date:$result');
            },
            child: Text("Date")),
        ElevatedButton(
            onPressed: () async {
              var result = await showTimePicker(
                  context: context, initialTime: TimeOfDay.now());
              print('Time:$result');
            },
            child: Text("Time"))
      ],
    );
  }
}