Flutter中如何在Widget构建后延迟执行代码？含FlutterLogo样式修改需求

嘿，针对你想在Widget构建完成后延迟修改FlutterLogo样式的需求，Flutter里有两种非常常用的实现方式，都是社区公认的最佳实践，我给你详细拆解下：

方案一：用Future.delayed + setState（简洁首选） #

这是最省心的写法，利用Future.delayed创建一个延迟任务，在回调里通过setState更新UI状态就行：

import 'package:flutter/material.dart';

class DelayedLogoDemo extends StatefulWidget {
  const DelayedLogoDemo({super.key});

  @override
  State<DelayedLogoDemo> createState() => _DelayedLogoDemoState();
}

class _DelayedLogoDemoState extends State<DelayedLogoDemo> {
  // 初始用默认的markOnly样式
  FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;

  @override
  void initState() {
    super.initState();
    // 延迟3秒后修改样式，你可以自己调整Duration的时间
    Future.delayed(const Duration(seconds: 3), () {
      // 一定要先检查mounted！防止Widget已经被销毁时调用setState报错
      if (!mounted) return;
      setState(() {
        _logoStyle = FlutterLogoStyle.horizontal;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FlutterLogo(
        style: _logoStyle,
        size: 200,
      ),
    );
  }
}

方案二：用Timer类（适合需要控制任务的场景） #

如果你需要中途取消这个延迟任务（比如用户在延迟时间内跳转了页面），那Timer会更灵活：

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

class TimerLogoDemo extends StatefulWidget {
  const TimerLogoDemo({super.key});

  @override
  State<TimerLogoDemo> createState() => _TimerLogoDemoState();
}

class _TimerLogoDemoState extends State<TimerLogoDemo> {
  FlutterLogoStyle _logoStyle = FlutterLogoStyle.markOnly;
  Timer? _delayTimer; // 保存Timer实例，方便后续取消

  @override
  void initState() {
    super.initState();
    // 创建一个一次性Timer，延迟3秒执行回调
    _delayTimer = Timer(const Duration(seconds: 3), () {
      if (!mounted) return;
      setState(() {
        _logoStyle = FlutterLogoStyle.stacked;
      });
    });
  }

  @override
  void dispose() {
    // 页面销毁时一定要取消Timer，不然会造成内存泄漏哦
    _delayTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FlutterLogo(
        style: _logoStyle,
        size: 200,
      ),
    );
  }
}

几个重要的小提示： #

• 必须用StatefulWidget：因为要修改UI的状态（也就是FlutterLogo的style），StatelessWidget是不可变的，没法更新。
• 检查mounted是好习惯：延迟任务执行时，Widget可能已经被销毁了（比如用户提前退出页面），这时候调用setState会报错，所以先判断mounted很重要。
• Timer要记得清理：用Timer的话，一定要在dispose里取消它，避免内存泄漏。

这两种方式都是Flutter开发者常用的，要是只是简单的一次性延迟，选第一种就够了；如果需要控制任务的生命周期，第二种更合适~

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