一个可定制的分段进度条。

segmented_progress_bar

安装

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  flutter:
    sdk:
  segmented_progress_bar: any

像这样导入分段进度条包

  import 'package:segmented_progress_bar/segmented_progress_bar.dart';

用法

只需创建一个 SegmentedProgressBar 小部件，并传递所需的参数。

      List<ProgressSegment> get socialSegments => [
          ProgressSegment(value: 5, color: Colors.pink, label: 'Instagram \n 50%'),
          ProgressSegment(
              value: 3, color: Colors.indigo, label: 'Facebook \n 30%', isAbove: true, labelPadding: 20),
          ProgressSegment(value: 1, color: Colors.redAccent, label: 'Threads \n 10%'),
          ProgressSegment(
              value: 3, color: Colors.lightBlue, label: 'Tweeter \n 20%', isAbove: true, labelPadding: 20),
        ];

        
        @override
        Widget build(BuildContext context) {
          return Center(
            child: SegmentedProgressBar(
              segments: socialSegments,
            ),
          );
        }

自定义

使用这些参数自定义 SegmentedProgressBar 小部件。

    /// List of segments in the progress bar
    final List<ProgressSegment> segments;
    
    /// Height of progress bar
    /// Defaults to 20
    final double height;
    
    /// Border radius of progress bar
    /// Defaults to 5
    final double borderRadius;

GitHub

查看 Github