Flutter渐变进度指示器插件gradient_progress_indicator的使用

Flutter渐变进度指示器插件gradient_progress_indicator的使用

简介

此插件可以展示一个具有渐变颜色的圆形进度指示器，并且可以在其中插入文字。

基本用法

以下是一个基本示例，展示了如何在Flutter应用中使用gradient_progress_indicator插件：

class MyApp extends StatelessWidget {
  // 这个widget是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: GradientProgressIndicator(
          // 设置圆的半径
          radius: 120,
          // 设置动画持续时间（秒）
          duration: 3,
          // 设置进度条宽度
          strokeWidth: 12,
          // 设置渐变颜色停靠点
          gradientStops: const [
            0.2,
            0.8,
          ],
          // 设置渐变颜色
          gradientColors: const [
            Colors.white,
            Colors.grey,
          ],
          // 设置进度指示器内部的子组件
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '一些文本',
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
              Text(
                '另一段文本',
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

示例代码

以下是完整的示例代码，你可以将其复制到你的Flutter项目中运行：

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

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

class MyApp extends StatelessWidget {
  // 这个widget是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: GradientProgressIndicator(
          // 设置圆的半径
          radius: 120,
          // 设置动画持续时间（秒）
          duration: 3,
          // 设置进度条宽度
          strokeWidth: 12,
          // 设置渐变颜色停靠点
          gradientStops: const [
            0.2,
            0.8,
          ],
          // 设置渐变颜色
          gradientColors: const [
            Colors.white,
            Colors.grey,
          ],
          // 设置进度指示器内部的子组件
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '一些文本',
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
              Text(
                '另一段文本',
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


gradient_progress_indicator 是一个用于 Flutter 的插件，它允许你创建一个带有渐变颜色的进度指示器。这个插件非常适合用于那些需要自定义进度条颜色和样式的场景。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 gradient_progress_indicator 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  gradient_progress_indicator: ^1.0.0

然后运行 flutter pub get 来安装插件。

使用 GradientProgressIndicator

GradientProgressIndicator 是一个小部件，你可以像使用其他 Flutter 小部件一样使用它。以下是一个简单的示例，展示了如何使用 GradientProgressIndicator：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Gradient Progress Indicator Example'),
        ),
        body: Center(
          child: GradientProgressIndicator(
            value: 0.7, // 进度值，范围是 0.0 到 1.0
            gradient: LinearGradient(
              colors: [Colors.blue, Colors.green], // 渐变色
            ),
            backgroundColor: Colors.grey[300], // 背景色
            strokeWidth: 10.0, // 进度条的宽度
          ),
        ),
      ),
    );
  }
}

参数说明

  • value：进度值，范围是 0.0 到 1.0，表示当前进度。
  • gradient：用于进度条的渐变色。你可以使用 LinearGradient 或 RadialGradient 来定义渐变。
  • backgroundColor：进度条的背景色。
  • strokeWidth：进度条的宽度。

自定义渐变

你可以通过 LinearGradient 或 RadialGradient 来自定义进度条的渐变色。例如：

gradient: LinearGradient(
  colors: [Colors.red, Colors.orange, Colors.yellow],
  begin: Alignment.centerLeft,
  end: Alignment.centerRight,
)

或者使用 RadialGradient：

gradient: RadialGradient(
  colors: [Colors.blue, Colors.purple],
  center: Alignment.center,
  radius: 0.5,
)

其他样式

你还可以通过设置 strokeCap 来定义进度条的两端形状（圆形或方形），以及通过 animationDuration 来设置动画持续时间。

strokeCap: StrokeCap.round, // 圆形端点
animationDuration: Duration(milliseconds: 500), // 动画持续时间
回到顶部