Flutter圆形进度条插件circular_progress_bar的使用

Flutter圆形进度条插件circular_progress_bar的使用

在本教程中，我们将展示如何使用circular_progress_bar插件来创建一个圆形进度条。此插件可以轻松地添加到您的Flutter项目中，并且可以通过配置不同的属性来自定义进度条的外观和行为。

插件属性说明

下表列出了circular_progress_bar插件的主要属性及其描述：

示例代码

以下是一个完整的示例代码，展示了如何使用circular_progress_bar插件创建一个圆形进度条，并通过点击按钮生成随机数更新进度条的百分比。

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:circular_progress_bar/circular_progress_bar.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
  }

  // 定义进度百分比变量
  double _percentage = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 创建圆形进度条
            CircularProgressBar(
              textStyle: const TextStyle(
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                  fontSize: 14),
              width: 1000,
              height: 300,
              duration: const Duration(milliseconds: 1000),
              curve: Curves.elasticInOut,
              radius: 100,
              percentage: _percentage,
              color: Colors.amber,
              percentagePrefix: "PREFIX",
              percentageSuffix: "SUFFIX ",
              hasDecimalPoint: true,
            ),
            // 创建一个按钮用于生成随机数并更新进度条
            TextButton(
                onPressed: () {
                  Random random = Random();
                  var randomNumber = random.nextInt(100);
                  setState(() {
                    _percentage = randomNumber.toDouble();
                  });
                },
                child: const Text('生成随机数 0 ~ 100')),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包：

   import 'dart:math';
   import 'package:flutter/material.dart';
   import 'package:circular_progress_bar/circular_progress_bar.dart';
   

2. 定义主应用类：

   class MyApp extends StatefulWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     State<MyApp> createState() => _MyAppState();
   }
   

3. 定义状态类：

   class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
     double _percentage = 0;
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           body: Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               CircularProgressBar(
                 textStyle: const TextStyle(
                     fontWeight: FontWeight.bold,
                     color: Colors.blue,
                     fontSize: 14),
                 width: 1000,
                 height: 300,
                 duration: const Duration(milliseconds: 1000),
                 curve: Curves.elasticInOut,
                 radius: 100,
                 percentage: _percentage,
                 color: Colors.amber,
                 percentagePrefix: "PREFIX",
                 percentageSuffix: "SUFFIX ",
                 hasDecimalPoint: true,
               ),
               TextButton(
                   onPressed: () {
                     Random random = Random();
                     var randomNumber = random.nextInt(100);
                     setState(() {
                       _percentage = randomNumber.toDouble();
                     });
                   },
                   child: const Text('生成随机数 0 ~ 100')),
             ],
           ),
         ),
       );
     }
   }