Flutter页面跳转时CircularProgressIndicator短暂卡顿问题求助

问题描述 #

页面跳转至包含CircularProgressIndicator的页面时，指示器出现短暂卡顿，动画启动延迟。

卡顿原因 #

新页面初始化时，Flutter需要完成布局、渲染等操作，同时CircularProgressIndicator的动画同步启动，两者的资源开销叠加导致动画卡顿，调试模式下该现象会更明显。

解决方案 #

方案1：利用PostFrameCallback延迟显示指示器

将目标页面改为StatefulWidget，等待页面第一帧绘制完成后再显示指示器，避免动画与页面初始化的渲染操作冲突：

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

  @override
  State<AnotherDummyScreen> createState() => _AnotherDummyScreenState();
}

class _AnotherDummyScreenState extends State<AnotherDummyScreen> {
  bool _showIndicator = false;

  @override
  void initState() {
    super.initState();
    // 等待页面第一帧绘制完成后更新状态显示指示器
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        _showIndicator = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _showIndicator ? const CircularProgressIndicator() : const SizedBox.shrink(),
      ),
    );
  }
}

方案2：短延迟后显示指示器

通过极短的延迟，让页面先完成初始化流程，再启动指示器动画：

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

  @override
  State<AnotherDummyScreen> createState() => _AnotherDummyScreenState();
}

class _AnotherDummyScreenState extends State<AnotherDummyScreen> {
  bool _showIndicator = false;

  @override
  void initState() {
    super.initState();
    // 延迟10毫秒后显示指示器，确保页面初始化完成
    Future.delayed(const Duration(milliseconds: 10), () {
      if(mounted) {
        setState(() {
          _showIndicator = true;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _showIndicator ? const CircularProgressIndicator() : const SizedBox.shrink(),
      ),
    );
  }
}

额外优化

在发布模式下运行项目（执行flutter run --release），调试模式下Flutter会启用额外的检查和日志输出，性能会比发布模式差，卡顿现象会显著减少。

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