Flutter中布尔变量为true时CircularProgressIndicator不显示问题

你的代码里CircularProgressIndicator没显示，核心原因有两个：

• 在GestureDetector的onTap回调里直接创建CircularProgressIndicator，但这个Widget根本没被添加到当前Widget树中，自然不会渲染。
• 修改_isloader的值后没有调用setState((){})，Flutter无法感知状态变化，不会触发UI重绘。

1. 修复状态更新逻辑 #

修改showindicator方法，在改变_isloader时调用setState，让Flutter触发UI更新：

Future<void> showindicator() async {
  setState(() {
    _isloader = true;
  });
  print("_isloader before $_isloader");
  await Future.delayed(const Duration(seconds: 10));
  setState(() {
    _isloader = false;
  });
  print("_isloader after $_isloader");
  Get.to(const PersonalAssessment());
  print("_isloader afteroperation $_isloader");
}

2. 在Widget树中添加指示器 #

把CircularProgressIndicator放到页面Widget树里，这里用全屏遮罩的方式实现：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: MyColors.backgrey,
    body: Stack(
      children: [
        ListView(
          children: [
            Stack(
              children: [
                // 保留你原来的轮播图、卡片等代码
                Center(
                  child: Container(
                    margin: const EdgeInsets.only(left:20, right:20, top:20),
                    child: GlowGlass(
                      Customheight:200,
                      Customwidth:double.maxFinite,
                      Firstcolor:Colors.black.withOpacity(.8),
                      Secondcolor:MyColors.Primarypurple.withOpacity(.4),
                    ),
                  ),
                ),
                // ... 其余原有代码
              ],
            ),
          ],
        ),
        // 根据_isloader状态显示/隐藏指示器
        if (_isloader)
          Container(
            color: Colors.black.withOpacity(0.5),
            child: const Center(
              child: CircularProgressIndicator(color: Colors.white),
            ),
          ),
      ],
    ),
  );
}

3. 修正GestureDetector的onTap逻辑 #

去掉onTap里无效的Widget创建代码，只保留方法调用：

GestureDetector(
  onTap: showindicator,
  child: Column(
    children: [
      Container(
        height:200,
        width:360,
        decoration: BoxDecoration(
          boxShadow:[BoxShadow(color:Colors.black54, blurRadius:10)],
          color:MyColors.backgrey,
          borderRadius:BorderRadius.circular(20),
        ),
        child: Row(
          children: [
            Container(
              margin:const EdgeInsets.only(left:10),
              height:170,
              width:150,
              decoration: BoxDecoration(
                boxShadow:[BoxShadow(color:MyColors.Primarypurple, blurRadius:10)],
                borderRadius:BorderRadius.circular(30),
                image:DecorationImage(
                  fit:BoxFit.cover,
                  image:AssetImage("lib/Assets/images/dekstop.PNG"),
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)

修改后，点击组件时会触发状态更新，显示全屏加载指示器；10秒后状态重置，指示器消失并跳转到PersonalAssessment页面。

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