Flutter自定义线性进度条插件custom_linear_progress_indicator的使用

Flutter自定义线性进度条插件custom_linear_progress_indicator的使用

插件介绍

custom_linear_progress_indicator 是一个为Flutter应用程序提供的可定制线性进度指示器插件，提供了动画和视觉定制选项。

特性

• 动画：支持多种动画效果。
• 视觉定制：允许调整进度条的颜色、边框样式、背景颜色等。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  DateTime selectedData = DateTime.now();
  late double progressPercent = 3;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(1),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 自定义线性进度指示器
            CustomLinearProgressIndicator(
              maxValue: 3, // 最大值
              value: progressPercent, // 当前进度
              minHeight: 50, // 最小高度
              borderWidth: 4, // 边界宽度
              borderColor: Colors.yellow.shade900, // 边界颜色
              borderStyle: BorderStyle.solid, // 边界样式
              colorLinearProgress: Colors.yellow, // 进度条颜色
              animationDuration: 1000, // 动画持续时间
              borderRadius: 20, // 圆角半径
              linearProgressBarBorderRadius: 15, // 线性进度条圆角半径
              backgroundColor: Colors.green.shade50, // 背景颜色
              progressAnimationCurve: Curves.ease, // 动画曲线
              alignment: Alignment.center, // 对齐方式
              showPercent: true, // 是否显示百分比
              percentTextStyle: const TextStyle(fontWeight: FontWeight.bold), // 百分比字体样式
              gradientColors: const [Colors.purple, Colors.blue, Colors.blueAccent], // 渐变颜色
              onProgressChanged: (double value) {
                // 进度变化回调
                log('Progress: $value');
              },
            ),
            const SizedBox(height: 30),
            TextButton(
              onPressed: () {
                setState(() {
                  progressPercent += 0.5;
                });

                log(progressPercent.toString());
              },
              child: const Text('Change Progress'),
            ),
          ],
        ),
      ),
    );
  }
}