我们如何根据flutter中的动态数据显示自定义进度指示器进度？

Question

所以，我想在该图像周围添加圆形进度指示器。该进度指示器根据动态值显示进度。我的意思是进展是动态的而不是固定的。那么，我们怎样才能做到这一点？

Answer 1

您可以使用 Percent Indicator 包来根据您的内容实现动态加载器。

例如：

// Using ValueNotifier to update whenever the value of the progress changed
    final ValueNotifier<double?> completionValue = ValueNotifier(null);

// Call this function on where you are updating the progress value 
    void _updateProgressUI({
        required int totalFiles,
        required int totalSuccess,
      }) {
//Update completionValue value 
        completionValue.value = totalSuccess / totalFiles;
      }

// Use this widget on you screen to show the progress indicator 

Container(
              padding: EdgeInsets.symmetric(horizontal: ,),
              child: ValueListenableBuilder<double?>(
                valueListenable: completionValue,
                builder: (_, completionValue, __) {
                  return CircularPercentIndicator(
                    lineHeight: 16,
                    progressColor: your_color,
                    backgroundColor: your_color,
                    percent: completionValue ?? 0,
                    animationDuration: 1000,
                    animateFromLastPercent: true,
                    animation: true,
                    linearStrokeCap: LinearStrokeCap.roundAll,
                  );
                },
              ),
            )

尝试将圆形指示器包裹在图像之外。

Answer 2

您可以尝试syncfusion_flutter_gauges包。

例如： https://flutter.syncfusion.com/#/radial-gauge/pointers/range-pointer

https://flutter.syncfusion.com/#/radial-gauge/pointer-animation/ease

Answer 3

第 1 步：创建对话框

showAlertDialog(BuildContext context){
      AlertDialog alert=AlertDialog(
        content: new Row(
            children: [
               CircularProgressIndicator(),
               Container(margin: EdgeInsets.only(left: 5),child:Text("Custom Widget" )),
            ],),
      );
      showDialog(barrierDismissible: false,
        context:context,
        builder:(BuildContext context){
          return alert;
        },
      );
    }

第2步：调用它

showAlertDialog(context);

第 3 步：关闭对话框

Navigator.pop(context);

Answer 4

SmartDialog.showLoading(builder: (context) {
        return Container(
          decoration: BoxDecoration(
              color: BrandColors.kWhite,
            borderRadius: BorderRadius.circular(10)
          ),
          height: 150,
          width: 150,
          child: Lottie.asset(
            'assets/lottie/loading.json',
            // height: 50,
            // width: 100,
            repeat: false,
            reverse: false,
          ),
        );

          });