Flutter渐变进度条插件gradient_progress

Flutter渐变进度条插件gradient_progress_bar的使用

介绍

gradient_progress_bar 是一个Flutter插件，适用于Android和iOS平台，提供渐变颜色的进度指示器。通过这个插件，你可以轻松创建具有渐变效果的进度条，提升应用的视觉效果。

使用方法

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 gradient_progress_bar 依赖：

dependencies:
  flutter:
    sdk: flutter
  gradient_progress_bar:

2. 完整示例代码

下面是一个完整的示例代码，展示了如何在Flutter应用中使用 GradientProgressIndicator 创建一个渐变进度条，并通过按钮控制进度条的值。

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

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

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

  // Demo of gradient_progress_bar
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Gradient Progress Indicator',
      debugShowCheckedModeBanner: false, // 隐藏调试标志
      theme: ThemeData(
        primarySwatch: Colors.blue, // 设置主题颜色
      ),
      home: const MyHomePage(title: 'Gradient Progress Indicator'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double value = 0.0; // 进度条的初始值

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置AppBar标题
      ),
      body: Center(
        child: SizedBox(
          width: 300, // 设置进度条的宽度
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐
            children: <Widget>[
              // 渐变进度条
              GradientProgressIndicator(
                const [
                  Color(0xffF68270), // 渐变颜色1
                  Color(0xffF1C358), // 渐变颜色2
                  Color(0xffEFDE62), // 渐变颜色3
                  Color(0xffE5F3BE), // 渐变颜色4
                  Color(0xffCDE8F1), // 渐变颜色5
                  Color(0xffDDC5EE), // 渐变颜色6
                  Color(0xffF2E300), // 渐变颜色7
                ],
                value, // 当前进度值
              )
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.play_arrow), // 按钮图标
        onPressed: () {
          setState(() {
            value = 0.7; // 点击按钮后设置进度条的值为0.7
          });
        },
      ),
    );
  }
}

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

yibo5220 1楼•7 天前

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

当然，以下是如何在Flutter项目中使用gradient_progress_bar插件的一个详细示例。这个插件允许你创建一个具有渐变效果的进度条。

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

dependencies:
  flutter:
    sdk: flutter
  gradient_progress_bar: ^x.y.z  # 请替换为最新版本号

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

接下来，在你的Dart文件中，你可以这样使用GradientProgressBar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Progress Bar Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 自定义渐变进度条
              SizedBox(
                width: double.infinity,
                height: 50,
                child: GradientProgressBar(
                  progress: 0.75, // 当前进度，范围从0到1
                  backgroundColor: Colors.grey[200]!,
                  borderRadius: 25.0,
                  gradient: LinearGradient(
                    colors: [Colors.blue, Colors.red],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                  ),
                  barHeight: 20.0,
                ),
              ),
              SizedBox(height: 20),
              // 另一个示例，带有不同的渐变色和形状
              SizedBox(
                width: double.infinity,
                height: 50,
                child: GradientProgressBar(
                  progress: 0.5,
                  backgroundColor: Colors.grey[300]!,
                  borderRadius: 15.0,
                  gradient: LinearGradient(
                    colors: [Colors.green, Colors.yellow],
                    begin: Alignment.centerLeft,
                    end: Alignment.centerRight,
                  ),
                  barHeight: 30.0,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释

导入包：

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

主应用：
```
void main() {
  runApp(MyApp());
}
```
构建主页面：
- 使用MaterialApp和Scaffold来构建基础布局。
- 在body中使用Center和Column来居中显示两个进度条。
自定义进度条：
- 使用SizedBox来限制进度条的宽度和高度。
- GradientProgressBar的参数：
  - progress：进度值，范围从0到1。
  - backgroundColor：背景颜色。
  - borderRadius：圆角半径。
  - gradient：线性渐变效果，定义渐变的颜色和方向。
  - barHeight：进度条的高度。

这个示例展示了如何使用gradient_progress_bar插件来创建具有渐变效果的进度条，并可以根据需要调整颜色、形状和大小。你可以根据需要进一步自定义进度条的外观。