如何在flutter中根据动态数据显示自定义进度指示器的进度?

5ktev3wc  于 2023-02-25  发布在  Flutter
关注(0)|答案(3)|浏览(204)

所以,我想在这张图片周围添加一个圆形进度指示器。这个进度指示器根据动态值显示进度。我的意思是进度是动态的,而不是固定的。那么,我们怎么做呢?

wa7juj8i

wa7juj8i1#

您可以使用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,
                  );
                },
              ),
            )

试着把圆形的指示器包裹在你的图像之外。

xlpyo6sf

xlpyo6sf2#

你可以试试syncfusion_flutter_gauges软件包。
例如:https://flutter.syncfusion.com/#/radial-gauge/pointers/range-pointer
https://flutter.syncfusion.com/#/radial-gauge/pointer-animation/ease

tf7tbtn2

tf7tbtn23#

步骤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;
        },
      );
    }

第二步:打电话

showAlertDialog(context);

步骤3:关闭对话框

Navigator.pop(context);

相关问题