2023-03-02 Flutter 通过setState 刷新

背景：升级进度条这个需求很常见，网上有很多可以参考的库，这里用到的是 percent_indicator 。但是如果进度条widget是在dialog里，dialog的context 和 当前页面的肯定不一样，那怎么去更新进度呢？闲话不表，直接上代码：

异常代码

CircularPercentIndicator(
      reverse: true,
      radius: 50.0,
      lineWidth: 6.0,
      percent: 0.70,
      center: Container(

          height: 70.h,
          width: 70.w,
          // color: Colors.cyan,
          child:
          Center(
            child:
            RichText(
                text: const TextSpan(
                    text: '100',
                    style: TextStyle(color: KColor.primaryTextColor,fontSize:30),
                    children: [
                      TextSpan(
                          text: '%',
                          style: TextStyle(color: KColor.primaryTextColor,fontSize:12),
                          children: [

                          ]
                      ),
                    ]
                ),
            ),
          )
      ),
      circularStrokeCap: CircularStrokeCap.round,
      backgroundColor: Colors.white,
      // maskFilter: MaskFilter.blur(BlurStyle.inner, 3),
      linearGradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [KColor.catDeviceUpgradeProgressEndColor , KColor.catDeviceUpgradeProgressBeginColor],
      ),
    )

解决思路，将进度条widget 外面包裹一层statefulWidget ,通过statefulWidgt setState方法局部更新进度条

Future<int?> showDeviceStatus2(context) async {
    double fountSize = 11;
    return showModalBottomSheet<int>(
      backgroundColor: Colors.transparent,
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
         return GetBuilder<DRHomeController>(builder: (logic) {
          return Container(
            clipBehavior: Clip.antiAlias,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: const Radius.circular(20.0),
                topRight: const Radius.circular(20.0),
              ),
            ),
            height: MediaQuery
                .of(context)
                .size
                .height - 40.h,
            child: Padding(
              padding: const EdgeInsets.all(24.0),
              child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      // textDirection: TextDirection.rtl,
                      children: [
                        DRGenerationWidget.getAppMediumText("设备状态总览".tr, 16),
                        InkWell(
                          child: Image(
                            image: AssetImage(
                                'assets/dr_image/device_add/device_add_search_none_cancle.png'),
                            height: 20.h,
                            width: 20.w,
                            // fit: BoxFit.fitWidth
                          ),
                          onTap: () =>
                          {
                            Navigator.of(context).pop(),
                          },
                        ),
                      ],
                    ),
                    SizedBox(height: 6.h),
               
                    Container(
                      // color: Colors.amber,
                      alignment: Alignment.centerLeft,
                      child: DRGenerationWidget.getAppNormalText(
                          "在线状态：${_controller.deviceStatusModel!.online
                              ? "在线"
                              : "离线"}".tr, fountSize),
                    ),
                    // Divider(height: 1.0),
                  ]),
            ),
          );
        }
        );
      },
    );
  }

然后 在controller 调用了update()，果然可以刷新。

如果有更好办法的小伙伴，也可以一起交流，如有写的不对的地方，欢迎大家指正。
参考博文:
How to Refresh an AlertDialog In Flutter?