Flutter教程实现自定义进度条

在Flutter中实现自定义进度条时遇到几个问题：

  1. 如何修改默认进度条的颜色和高度？我尝试设置valueColor和height属性但效果不理想。
  2. 需要实现一个圆角进度条，但发现进度填充部分总是直角，该怎么处理？
  3. 想给进度条添加动画效果，使进度变化更平滑，有什么推荐的实现方式？
  4. 如何在进度条上方实时显示当前进度百分比文字？
  5. 遇到进度条在iOS和安卓平台显示不一致的问题，该怎么统一样式？
3 回复

要实现一个自定义进度条，首先创建一个 CustomPaint 组件。以下是一个简单的示例：

  1. 创建一个新的 Flutter 项目。
  2. 在你的页面文件中，比如 home_page.dart，导入 dart:math 和 package:flutter/material.dart。
  3. 定义一个 CustomPainter 类，重写 paint 方法来绘制进度条。
import 'dart:math';
import 'package:flutter/material.dart';

class CustomProgressBar extends CustomPainter {
  final double progress;

  CustomProgressBar({required this.progress});

  @override
  void paint(Canvas canvas, Size size) {
    Paint track = Paint()..color = Colors.grey[300]!;
    Paint progressPaint = Paint()..color = Colors.blue;
    
    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRRect(
      RRect.fromLTRBAndCorners(0, 0, size.width, size.height,
          topLeft: Radius.circular(8), topRight: Radius.circular(8)),
      track,
    );
    
    double progressWidth = size.width * progress;
    canvas.drawRRect(
      RRect.fromLTRBAndCorners(0, 0, progressWidth, size.height,
          topLeft: Radius.circular(8), topRight: Radius.circular(8)),
      progressPaint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
  1. 在 Scaffold 中使用 CustomPaint，传入 CustomProgressBar 并设置进度值。
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('自定义进度条')),
    body: Center(
      child: CustomPaint(
        painter: CustomProgressBar(progress: 0.5),
        child: SizedBox(height: 20, width: 200),
      ),
    ),
  );
}

这个例子中，进度条的高度是固定的20像素，宽度根据进度动态变化。你可以通过修改 progress 的值（范围0到1）来调整进度条的填充程度。

更多关于Flutter教程实现自定义进度条的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


实现一个自定义进度条可以使用 Flutter 的 CustomPainter 类来绘制。以下是一个简单的例子：

  1. 创建一个新的 Flutter 项目。
  2. 在你的 dart 文件中创建一个自定义的 StatefulWidget 来实现进度条。
import 'package:flutter/material.dart';

class CustomProgressBar extends StatefulWidget {
  final double progress;

  CustomProgressBar({required this.progress});

  @override
  _CustomProgressBarState createState() => _CustomProgressBarState();
}

class _CustomProgressBarState extends State<CustomProgressBar> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 30,
      child: CustomPaint(
        painter: ProgressBarPainter(progress: widget.progress),
      ),
    );
  }
}

class ProgressBarPainter extends CustomPainter {
  final double progress;

  ProgressBarPainter({required this.progress});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    Rect rect = Rect.fromLTWH(0, 0, size.width * progress, size.height);
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
  1. 使用这个自定义进度条：
CustomProgressBar(progress: 0.5)

这个示例展示了如何根据进度动态改变进度条的宽度。你可以进一步调整颜色、边框等样式。

以下是一个简单的Flutter自定义进度条实现示例：

import 'package:flutter/material.dart';

class CustomProgressBar extends StatelessWidget {
  final double progress; // 0.0 ~ 1.0
  final Color backgroundColor;
  final Color progressColor;
  final double height;
  final double borderRadius;

  const CustomProgressBar({
    Key? key,
    required this.progress,
    this.backgroundColor = Colors.grey,
    this.progressColor = Colors.blue,
    this.height = 10.0,
    this.borderRadius = 5.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius),
      child: SizedBox(
        height: height,
        child: Stack(
          children: [
            Container(
              width: double.infinity,
              color: backgroundColor,
            ),
            FractionallySizedBox(
              widthFactor: progress,
              child: Container(
                color: progressColor,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 使用示例
CustomProgressBar(
  progress: 0.65, // 65%进度
  backgroundColor: Colors.grey[200],
  progressColor: Colors.green,
  height: 12,
  borderRadius: 6,
)

进阶版 - 带渐变和动画的进度条：

AnimatedContainer(
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
  height: height,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(borderRadius),
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.lightBlue],
    ),
  ),
  width: MediaQuery.of(context).size.width * progress,
)

特点：

  1. 可自定义高度、圆角
  2. 可设置背景色和进度条颜色
  3. 使用Stack布局实现进度效果
  4. 进阶版添加了动画和渐变效果

你可以根据需要调整参数或添加更多自定义功能，如文本标签、阴影效果等。

回到顶部