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

发布于 1周前 作者 gougou168 来自 Flutter

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

概述

flutter_rounded_progress_bar 是一个自定义的圆形进度条插件，可以用于在 Flutter 应用中显示圆形进度。它支持多种样式和主题，并且可以自定义进度条的各个部分。

特点

  • 支持多种位置的子组件（childCenter, childLeft, childRight）
  • 支持多种主题
  • 可以自定义样式
  • 支持动画效果

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_rounded_progress_bar: 0.2.0

然后运行 flutter pub get 来安装依赖。

使用方法

基本用法

创建一个简单的圆形进度条：

RoundedProgressBar(
    childLeft: Text("$percent%",
        style: TextStyle(color: Colors.white)),
    percent: percent,
    theme: RoundedProgressBarTheme.green)

子组件位置

RoundedProgressBar 支持三种位置的子组件：childCenter, childLeft, childRight。

RoundedProgressBar(
    childCenter: Text("$percent%"),
    percent: percent,
)

自定义样式

使用 RoundedProgressBarStyle 类来自定义进度条的样式。

RoundedProgressBar(
    style: RoundedProgressBarStyle(
        widthShadow: 30, colorBorder: Colors.blue[200]),
    percent: percent,
    reverse: true,
)

动画效果

设置 milliseconds 属性来启用动画效果。

RoundedProgressBar(
    milliseconds: 1000,
    percent: percent,
    theme: RoundedProgressBarTheme.yellow,
    borderRadius: BorderRadius.circular(24),
)

主题

支持多种预定义的主题：

RoundedProgressBarTheme.blue, 
RoundedProgressBarTheme.red,
RoundedProgressBarTheme.green,
RoundedProgressBarTheme.purple,
RoundedProgressBarTheme.yellow,
RoundedProgressBarTheme.midnight

图标圆形进度条

使用 IconRoundedProgressBar 来显示带有图标的圆形进度条。

IconRoundedProgressBar(
    icon: Padding(
        padding: EdgeInsets.all(8), child: Icon(Icons.person)),
    theme: RoundedProgressBarTheme.green,
    margin: EdgeInsets.symmetric(vertical: 16),
    borderRadius: BorderRadius.circular(6),
    percent: percent,
)

自定义背景和图标

自定义背景和图标样式：

IconRoundedProgressBar(
    widthIconSection: 70,
    icon: Padding(
        padding: EdgeInsets.all(8),
        child: Icon(Icons.airline_seat_flat, color: Colors.white)),
    style: RoundedProgressBarStyle(
        colorBackgroundIcon: Color(0xffc0392b),
        colorProgress: Color(0xffe74c3c),
        colorProgressDark: Color(0xffc0392b),
        colorBorder: Color(0xff2c3e50),
        backgroundProgress: Color(0xff4a627a),
        borderWidth: 4,
        widthShadow: 6),
    margin: EdgeInsets.symmetric(vertical: 16),
    borderRadius: BorderRadius.circular(6),
    percent: percent,
)

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_rounded_progress_bar 插件：

import 'package:flutter/material.dart';
import 'package:flutter_rounded_progress_bar/flutter_icon_rounded_progress_bar.dart';
import 'package:flutter_rounded_progress_bar/flutter_rounded_progress_bar.dart';
import 'package:flutter_rounded_progress_bar/rounded_progress_bar_style.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double percent = 10;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rounded Progress Bar'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                setState(() {
                  percent += 5;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.remove),
              onPressed: () {
                setState(() {
                  percent -= 5;
                });
              },
            )
          ],
        ),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Center(
            child: ListView(children: <Widget>[
              Column(
                children: <Widget>[
                  RoundedProgressBar(
                      percent: percent, childCenter: Text("$percent%")),
                  RoundedProgressBar(
                      childLeft: Text("$percent%",
                          style: TextStyle(color: Colors.white)),
                      percent: percent,
                      theme: RoundedProgressBarTheme.green),
                  RoundedProgressBar(
                      childRight: Text("$percent%",
                          style: TextStyle(color: Colors.white)),
                      percent: percent,
                      theme: RoundedProgressBarTheme.red,
                      reverse: true),
                  RoundedProgressBar(
                      percent: percent,
                      theme: RoundedProgressBarTheme.purple,
                      childLeft: AnimatedContainer(
                        padding: EdgeInsets.only(left: 8),
                        duration: Duration(milliseconds: 500),
                        child: Icon(
                          Icons.airplanemode_active,
                          color: Colors.white,
                        ),
                      ),
                      paddingChildLeft: EdgeInsets.all(0)),
                  RoundedProgressBar(
                      milliseconds: 1000,
                      percent: percent,
                      theme: RoundedProgressBarTheme.yellow,
                      borderRadius: BorderRadius.circular(24)),
                  RoundedProgressBar(
                      percent: percent,
                      height: 70,
                      theme: RoundedProgressBarTheme.midnight,
                      childCenter: Text("$percent%",
                          style: TextStyle(
                              fontSize: 22,
                              fontWeight: FontWeight.bold,
                              color: Colors.yellow))),
                  RoundedProgressBar(
                    style: RoundedProgressBarStyle(
                        widthShadow: 30, colorBorder: Colors.blue[200]!),
                    percent: percent,
                    reverse: true,
                  ),
                  RoundedProgressBar(
                    style:
                        RoundedProgressBarStyle(borderWidth: 0, widthShadow: 0),
                    margin: EdgeInsets.symmetric(vertical: 16),
                    borderRadius: BorderRadius.circular(24),
                    percent: percent,
                  ),
                  IconRoundedProgressBar(
                    icon: Padding(
                        padding: EdgeInsets.all(8), child: Icon(Icons.person)),
                    theme: RoundedProgressBarTheme.green,
                    margin: EdgeInsets.symmetric(vertical: 16),
                    borderRadius: BorderRadius.circular(6),
                    percent: percent,
                  ),
                  IconRoundedProgressBar(
                    widthIconSection: 70,
                    reverse: true,
                    icon: Padding(
                        padding: EdgeInsets.all(8),
                        child:
                            Icon(Icons.airline_seat_flat, color: Colors.white)),
                    style: RoundedProgressBarStyle(
                        colorBackgroundIcon: Color(0xffc0392b),
                        colorProgress: Color(0xffe74c3c),
                        colorProgressDark: Color(0xffc0392b),
                        colorBorder: Color(0xff2c3e50),
                        backgroundProgress: Color(0xff4a627a),
                        borderWidth: 4,
                        widthShadow: 6),
                    margin: EdgeInsets.symmetric(vertical: 16),
                    borderRadius: BorderRadius.circular(6),
                    percent: percent,
                  ),
                ],
              )
            ]),
          ),
        ),
      ),
    );
  }
}

通过以上代码，你可以看到如何在 Flutter 应用中使用 flutter_rounded_progress_bar 插件来创建和自定义圆形进度条。希望这对你的项目有所帮助！


更多关于Flutter圆形进度条插件flutter_rounded_progress_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter圆形进度条插件flutter_rounded_progress_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个使用 flutter_rounded_progress_bar 插件来创建圆形进度条的示例代码。flutter_rounded_progress_bar 是一个流行的 Flutter 插件，用于在应用中显示圆形进度条。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_rounded_progress_bar 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_rounded_progress_bar: ^2.0.0  # 确保使用最新版本

然后，运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用这个插件。以下是一个完整的示例代码，展示了如何在一个简单的 Flutter 应用中使用 flutter_rounded_progress_bar 来显示圆形进度条。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Rounded Progress Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ProgressBarScreen(),
    );
  }
}

class ProgressBarScreen extends StatefulWidget {
  @override
  _ProgressBarScreenState createState() => _ProgressBarScreenState();
}

class _ProgressBarScreenState extends State<ProgressBarScreen> with SingleTickerProviderStateMixin {
  double _progress = 0.0;

  void _incrementProgress() {
    setState(() {
      _progress += 0.1;
      if (_progress >= 1.0) {
        _progress = 0.0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded Progress Bar Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RoundedProgressBar(
              progress: _progress,
              strokeWidth: 10.0,
              backgroundPadding: 15.0,
              color: Colors.blue,
              backgroundColor: Colors.grey.withOpacity(0.2),
              borderRadius: 50.0,
              width: 200.0,
              height: 200.0,
            ),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: _incrementProgress,
              child: Text('Increment Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个 MyApp 应用程序，它使用 MaterialApp 并设置了主题和主页 ProgressBarScreen。
  2. ProgressBarScreen 是一个有状态的小部件，它包含一个 _progress 变量来跟踪进度。
  3. 我们定义了一个 _incrementProgress 方法来逐步增加进度值，并在达到 1.0 时重置为 0.0。
  4. 在 build 方法中，我们使用 RoundedProgressBar 小部件来显示圆形进度条，并添加了一个按钮来手动增加进度。

运行这个示例应用时，你会看到一个圆形的进度条和一个按钮。每次点击按钮时，进度条都会增加 0.1 的进度。

回到顶部