Flutter日期时间组件初始加载显示null的优化方案

出现首帧显示null的原因非常明确：

• 声明的_timeString变量未设置初始值，Dart中未初始化的可空类型默认值为null
• initState中仅注册了1秒间隔的周期定时器，第一次执行时间更新逻辑是在1秒后定时器首次触发时，组件第一次build执行时拿到的_timeString就是null，因此会出现约1秒的null显示
• 原有代码还存在定时器未取消导致内存泄漏、DateFormat重复创建、未判断组件挂载状态就执行setState的潜在问题

核心调整点：

1. 组件初始化时立刻执行一次时间获取，保证首帧渲染就有正确的时间值，无需等待定时器第一次触发
2. 复用DateFormat实例，避免每次更新时间都重复创建格式化对象，减少不必要的性能开销
3. 组件销毁时取消定时器，避免内存泄漏
4. 执行setState前判断组件挂载状态，避免组件销毁后触发状态更新报错
5. 移除String类型变量多余的toString()调用

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

class CurrentDate extends StatefulWidget {
  @override
  _CurrentDateState createState() => _CurrentDateState();
}

class _CurrentDateState extends State<CurrentDate> {
  // 提前初始化格式化实例，全局复用
  final DateFormat _dateFormatter = DateFormat('y MMMM EEEE d\n kk:mm:ss');
  late String _timeString;
  Timer? _updateTimer;

  @override
  void initState() {
    super.initState();
    // 首帧前就获取一次当前时间，杜绝null显示
    _updateTime();
    // 启动每秒更新的定时器
    _updateTimer = Timer.periodic(
      const Duration(seconds: 1), 
      (_) => _updateTime()
    );
  }

  void _updateTime() {
    // 计算东3区时间，固定偏移适用于无夏令时调整的固定时区场景
    final DateTime currentTime = DateTime.now().toUtc().add(const Duration(hours: 3));
    _timeString = _dateFormatter.format(currentTime);
    // 仅组件挂载时触发UI更新
    if (mounted) setState(() {});
  }

  @override
  void dispose() {
    // 销毁定时器，避免内存泄漏
    _updateTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      _timeString,
      textAlign: TextAlign.center,
      style: TextStyle(
          fontFamily: 'Cairo',
          color: Theme.of(context).iconTheme.color,
          height: 1.2,
          letterSpacing: -1,
          fontSize: 23,
          fontWeight: FontWeight.bold),
    );
  }
}

• 如果你的业务场景需要适配夏令时、需要更精准的时区计算，不要手动加Duration做时间偏移，可以引入官方维护的timezone包做标准时区映射，避免时间计算错误
• 如果组件所在页面存在频繁重建的场景，可以使用ValueNotifier+ValueListenableBuilder缩小UI更新范围，减少不必要的组件重建开销
• 若对时间显示精度要求高，可以将定时器调整为对齐下一秒的延迟触发逻辑，而非固定1秒间隔，避免出现秒数跳两格的显示问题

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