flutter日期时间控件

flutter时间日期控件需要导入一个第三方的包intl,倒入第三方包首先要在pubspec.yaml中添加第三方包的名称和版本号,然后执行Packages get命令下载第三方包


flutter日期时间控件_第1张图片
屏幕快照 2019-06-26 上午10.37.50.png
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

class DateTimeDemo extends StatefulWidget {
  @override
  _DateTimeDemoState createState() => _DateTimeDemoState();
}

class _DateTimeDemoState extends State {
  DateTime selectedDate = DateTime.now();
  TimeOfDay selectedTime = TimeOfDay(hour: 9, minute: 30);

  /* 一般程序里的异步操作会先返回一个future,等异步操作执行完之后再返回真正的值。
   * 异步方法需要用async标记一下,在方法里面执行异步动作的前面加上await,用来等待异步动作的执行结果
   * 然后把这个结果交给一个变量,在方法的其他地方就可以使用这个异步返回的值了
   */

  // 选择日期的方法
  Future _selectDate() async {
    final DateTime date = await showDatePicker(
      context: context,
      initialDate: selectedDate, // 初始日期
      firstDate: DateTime(1900), // 可选择的最早日期
      lastDate: DateTime(2100), // 可选择的最晚日期
    );
    if (date == null) return;

    setState(() {
      selectedDate = date;
    });
  }
  // 选择时间的方法
  _selectTime() async {
    final TimeOfDay time = await showTimePicker(context: context, initialTime: selectedTime);
    if (time == null) return;
    setState(() {
      selectedTime = time;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('DateTimeDemo'), elevation: 0.0,),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                InkWell( // 选择日期
                  onTap: _selectDate,
                  child: Row(
                    children: [
                      Text(DateFormat.yMd().format(selectedDate)),
                      Icon(Icons.arrow_drop_down),
                    ],
                  ),
                ),
                InkWell( // 选择时间
                  onTap: _selectTime,
                  child: Row(
                    children: [
                      Text(selectedTime.format(context)),
                      Icon(Icons.arrow_drop_down),
                    ],
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

你可能感兴趣的:(flutter日期时间控件)