Flutter进度指示插件progress_indicator_plus的使用

Flutter进度指示插件progress_indicator_plus的使用

特性

  • 可定制的线性进度指示器，具有动态文本颜色对比。
  • 文本颜色会动态变化，以确保即使进度位于文本中间时也能清晰可见。
  • 可轻松更改高度、内边距、颜色和其他属性。
  • 支持自定义装饰和渐变。

开始使用

要使用此包，在你的pubspec.yaml文件中添加progress_indicator_plus作为依赖项：

dependencies:
  progress_indicator_plus: ^0.0.4

使用方法

以下是一个简单的示例，展示如何使用LinearProgressIndicatorPlus组件：

import 'package:flutter/material.dart';
import 'package:progress_indicator_plus/linear_progress_indicator_plus.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('进度指示器Plus示例')),
        body: Center(
          child: LinearProgressIndicatorPlus(
            value: 0.7,  // 进度值
            text: '70%',  // 显示的文本
            height: 40,  // 高度
            padding: 8,  // 内边距
            backgroundColor: Colors.grey[300],  // 背景颜色
            color: Colors.blue,  // 进度条颜色
            borderRadius: BorderRadius.circular(8),  // 圆角半径
          ),
        ),
      ),
    );
  }
}

示例

文本在背景上

文本一半在背景上，一半在进度颜色上

文本在进度颜色上

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:progress_indicator_plus/linear_progress_indicator_plus.dart';

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

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

  // 此组件是您的应用的根组件。
  [@override](/user/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](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('进度指示器Plus示例')),
      body: Center(
        child: SizedBox(
          width: 200,
          child: LinearProgressIndicatorPlus(
            value: 0.5,  // 进度值
            text: '50%',  // 显示的文本
            height: 40,  // 高度
            padding: 8,  // 内边距
            backgroundColor: Colors.grey[300],  // 背景颜色
            color: Colors.blue,  // 进度条颜色
            borderRadius: BorderRadius.circular(8),  // 圆角半径
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


progress_indicator_plus 是一个 Flutter 插件，用于在应用中显示各种类型的进度指示器。它提供了丰富的自定义选项，可以满足不同的设计需求。以下是使用 progress_indicator_plus 的基本步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 progress_indicator_plus 依赖：

dependencies:
  flutter:
    sdk: flutter
  progress_indicator_plus: ^1.0.0  # 请使用最新版本

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

2. 导入插件

在需要使用进度指示器的 Dart 文件中导入插件：

import 'package:progress_indicator_plus/progress_indicator_plus.dart';

3. 使用进度指示器

progress_indicator_plus 提供了多种类型的进度指示器，以下是几个常见的示例。

3.1 圆形进度指示器

CircularProgressIndicatorPlus(
  value: 0.6, // 进度值，范围是 0.0 到 1.0
  backgroundColor: Colors.grey[300],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  strokeWidth: 4.0,
),

3.2 线性进度指示器

LinearProgressIndicatorPlus(
  value: 0.4, // 进度值，范围是 0.0 到 1.0
  backgroundColor: Colors.grey[300],
  valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
  minHeight: 8.0,
),

3.3 自定义进度指示器

你还可以通过 CustomProgressIndicator 来创建自定义的进度指示器：

CustomProgressIndicator(
  value: 0.8,
  backgroundColor: Colors.grey[200],
  valueColor: Colors.purple,
  child: Center(
    child: Text('80%', style: TextStyle(color: Colors.white)),
  ),
),

4. 完整示例

以下是一个完整的示例，展示如何在 Flutter 应用中使用 progress_indicator_plus：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Progress Indicator Plus Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircularProgressIndicatorPlus(
                value: 0.6,
                backgroundColor: Colors.grey[300],
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                strokeWidth: 4.0,
              ),
              SizedBox(height: 20),
              LinearProgressIndicatorPlus(
                value: 0.4,
                backgroundColor: Colors.grey[300],
                valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
                minHeight: 8.0,
              ),
              SizedBox(height: 20),
              CustomProgressIndicator(
                value: 0.8,
                backgroundColor: Colors.grey[200],
                valueColor: Colors.purple,
                child: Center(
                  child: Text('80%', style: TextStyle(color: Colors.white)),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部