如何创建先显示上传提示、延迟后显示成功的可复用Flutter Widget？

你的初始代码无法实现文本切换，因为普通函数式Widget是无状态的，Future.delayed里的操作不会触发UI重绘。要实现这个需求，需要用StatefulWidget来管理文本状态，延迟后更新状态触发重绘。以下是完整的可复用实现：

import 'package:flutter/material.dart';

class DelayedSwitchText extends StatefulWidget {
  // 可配置参数：初始文本、延迟后文本、延迟时长
  final String initialText;
  final String delayedText;
  final Duration delayDuration;

  const DelayedSwitchText({
    super.key,
    required this.initialText,
    required this.delayedText,
    this.delayDuration = const Duration(seconds: 2),
  });

  @override
  State<DelayedSwitchText> createState() => _DelayedSwitchTextState();
}

class _DelayedSwitchTextState extends State<DelayedSwitchText> {
  late String _currentText;

  @override
  void initState() {
    super.initState();
    // 初始化显示初始文本
    _currentText = widget.initialText;
    // 延迟执行文本切换
    Future.delayed(widget.delayDuration, () {
      if (mounted) { // 防止Widget已销毁时调用setState
        setState(() {
          _currentText = widget.delayedText;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text(_currentText);
  }
}

使用示例 #

在你的页面中直接调用这个可复用Widget：

DelayedSwitchText(
  initialText: "Uploading please wait...",
  delayedText: "Successfully Uploaded",
  // 可选：自定义延迟时长，比如3秒
  // delayDuration: const Duration(seconds: 3),
)

关键说明 #

• 用StatefulWidget保存当前文本状态，通过setState触发UI更新
• 所有核心参数都做成可配置的（初始文本、目标文本、延迟时长），提升复用性
• 加入mounted判断，避免Widget已销毁时调用setState引发报错

内容的提问来源于stack exchange，提问作者jpg.hue