Flutter 时间选择器,日期选择器选择后显示在文本上

直接看效果图

看完效果了，直接上整体代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyApp1(),
      ),
    );
  }
}

class MyApp1 extends StatefulWidget {
  const MyApp1({Key? key}) : super(key: key);

  @override
  _MyApp1State createState() => _MyApp1State();
}

class _MyApp1State extends State<MyApp1> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 100,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              children: [
                DateSelector(), //调用写好的日期选择器
                SizedBox(
                  height: 20,
                ),
                TimeSelector(), //调用写好的时间选择器
              ],
            )
          ],
        ),
      ],
    );
  }
}

//日期选择器封装类
class DateSelector extends StatefulWidget {
  const DateSelector({Key? key}) : super(key: key);

  @override
  _DateSelectorState createState() => _DateSelectorState();
}

class _DateSelectorState extends State<DateSelector> {
  DateTime? dateTime; //DateTime代表某个时刻,时区

  void din() {
    showDatePicker(
            //showDatePicker是封装了TearPicker和MonthPicker进行了联动
            //日期选择器
            context: context,
            initialDate:
                DateTime.now(), //初始化时间，通常设置为当前时间 //DateTime.now用于显示当前时间
            firstDate: DateTime(2002), //表示开始的时间，不能选择此时间之前的时间
            lastDate: DateTime(2025)) //表示结束时间,不能选择此时间之后的时间
        .then((dis) {
      setState(() {
        dateTime = dis; //当你选择时间后,将获取到的dis值赋值给dateTime
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size; //获取屏幕的大小
    return GestureDetector(
      //点击事件监听
      onTap: () {
        din(); //单击执行 din方法用于选择日期
      },
      child: Container(
        width: size.width - 40, //占满全屏减去40的像素
        height: 60,
        color: Colors.grey.withOpacity(.2), //颜色透明度
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween, //内部组件平分剩下的空间
            children: [
              Text(dateTime != null
                  ? dateTime.toString().substring(
                      0, 10) //dateTime将此类型转化为String类型,subString用于显示区间内的文字
                  : "未选择日期"), //三元表达式 dateTime不等于null显示dateTime否则显示"为选择日期"
              Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                  color: dateTime != null ? Colors.green : Colors.red, //和上面同理
                  borderRadius: BorderRadius.circular(30), //圆心角
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

//时间选择器封装类
class TimeSelector extends StatefulWidget {
  const TimeSelector({Key? key}) : super(key: key);

  @override
  _TimeSelectorState createState() => _TimeSelectorState();
}

class _TimeSelectorState extends State<TimeSelector> {
  String? _string; //String类型的值

  Future<void> _show() async {
    //TimeOfDay类标示某个时间的值，和当前所在的日期或时间无关
    //时间由小时和分钟表示一旦创建，这两个值都无法改变了
    final TimeOfDay? timeOfDay = await showTimePicker(
        context: context, initialTime: TimeOfDay.now()); //showTimePicker时间选择器
    if (timeOfDay != null) {
      //进行一个判断如果不是null那么就代表你选择完成了,接着将timeOfDay赋值给_string即可
      setState(() {
        //format时间格式转化，转换为美式时间格式
        _string = timeOfDay.format(context);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return GestureDetector(
      onTap: () {
        setState(() {
          _show();
        });
      },
      child: Container(
        width: size.width - 40, //占满全屏减去40的像素
        height: 60,
        color: Colors.grey.withOpacity(.2),
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(_string != null ? _string! : "未选择时间"), //三元表达式显示文本
              Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                    color: _string != null ? Colors.green : Colors.red, //颜色也如此
                    borderRadius: BorderRadius.circular(30)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}