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

在本教程中，我们将展示如何在Flutter应用程序中使用circular_bar插件来创建一个圆形进度条。我们将提供一个完整的示例代码，以帮助你快速上手。

示例代码

import 'package:flutter/material.dart';
import 'package:circular_bar/circular_bar.dart'; // 引入 circular_bar 插件

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double progress = 0.0; // 进度值

  void updateProgress(double value) {
    setState(() {
      progress = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularPercentIndicator(
              radius: 100.0,
              lineWidth: 10.0,
              percent: progress,
              center: Text("${(progress * 100).toInt()}%"),
              progressColor: Colors.blue,
              backgroundColor: Colors.grey,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                updateProgress(progress + 0.1); // 每次点击增加进度
              },
              child: Text('增加进度'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                updateProgress(0.0); // 重置进度
              },
              child: Text('重置进度'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入库：

   import 'package:circular_bar/circular_bar.dart';
   

   这行代码用于引入circular_bar插件，该插件提供了创建圆形进度条的功能。

2. 定义主应用类：

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

3. 定义主页类：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

4. 定义主页状态类：

   class _MyHomePageState extends State<MyHomePage> {
     double progress = 0.0; // 定义进度变量
   
     void updateProgress(double value) {
       setState(() {
         progress = value;
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               CircularPercentIndicator(
                 radius: 100.0,
                 lineWidth: 10.0,
                 percent: progress,
                 center: Text("${(progress * 100).toInt()}%"),
                 progressColor: Colors.blue,
                 backgroundColor: Colors.grey,
               ),
               SizedBox(height: 20),
               ElevatedButton(
                 onPressed: () {
                   updateProgress(progress + 0.1); // 增加进度
                 },
                 child: Text('增加进度'),
               ),
               SizedBox(height: 20),
               ElevatedButton(
                 onPressed: () {
                   updateProgress(0.0); // 重置进度
                 },
                 child: Text('重置进度'),
               ),
             ],
           ),
         ),
       );
     }
   }