Flutter中如何修改DatePicker的日期显示格式为dd/mm/yyyy

有两种常用方法可以实现这个需求：

方法一：手动拼接日期（无需额外依赖） #

直接通过DateTime的属性取出日、月、年，手动拼接成目标格式，注意给小于10的日/月补零：

修改InkWell里的Text部分：

Text(
  "${selectedDate.day.toString().padLeft(2, '0')}/${selectedDate.month.toString().padLeft(2, '0')}/${selectedDate.year}"
)

padLeft(2, '0')的作用是确保日和月始终是两位数字，比如1号会变成01，避免出现1/5/2024这种不规范的格式。

方法二：使用intl包（更推荐，支持多语言和复杂格式） #

如果需要更灵活的日期格式或者适配多语言，推荐使用官方的intl包：

1. 先在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.18.1 # 版本号以最新为准

执行flutter pub get安装依赖。

2. 在代码中导入包：

import 'package:intl/intl.dart';

3. 修改Text部分，用DateFormat来格式化日期：

Text(DateFormat('dd/MM/yyyy').format(selectedDate))

这里dd代表两位数字的日，MM代表两位数字的月（注意大写M，小写m是分钟），yyyy代表四位数字的年。

修改后的完整代码（以intl包为例） #

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

class DatePicker extends StatefulWidget {
  const DatePicker({Key? key}) : super(key: key);
  @override
  State<DatePicker> createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {
  DateTime selectedDate = DateTime.now();
  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        InkWell(
            onTap: () => _selectDate(context),
            child: Text(DateFormat('dd/MM/yyyy').format(selectedDate))),
        SizedBox(
          width: 20.0, // 原代码用height不符合Row布局逻辑，改为width更合理
        ),
      ],
    );
  }
}

内容的提问来源于stack exchange，提问作者Panashe