{"id":26917671,"url":"https://github.com/talebrafiepour/step_progress","last_synced_at":"2026-01-11T04:48:13.314Z","repository":{"id":52648086,"uuid":"354258536","full_name":"TalebRafiepour/step_progress","owner":"TalebRafiepour","description":"A lightweight package for displaying customizable step progress indicators in a user interface.","archived":false,"fork":false,"pushed_at":"2025-07-02T13:25:53.000Z","size":504,"stargazers_count":6,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-02T14:36:35.685Z","etag":null,"topics":["step-progress","step-progress-indicator"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/step_progress","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TalebRafiepour.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-04-03T10:09:02.000Z","updated_at":"2025-07-02T13:25:58.000Z","dependencies_parsed_at":"2025-02-12T12:39:44.487Z","dependency_job_id":"bd029f9f-d679-4c42-a853-3a7f9971b945","html_url":"https://github.com/TalebRafiepour/step_progress","commit_stats":null,"previous_names":["talebrafiepour/step_progress","talebrafiepour/step-progress"],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/TalebRafiepour/step_progress","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TalebRafiepour%2Fstep_progress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TalebRafiepour%2Fstep_progress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TalebRafiepour%2Fstep_progress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TalebRafiepour%2Fstep_progress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TalebRafiepour","download_url":"https://codeload.github.com/TalebRafiepour/step_progress/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TalebRafiepour%2Fstep_progress/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263351171,"owners_count":23453418,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["step-progress","step-progress-indicator"],"created_at":"2025-04-01T20:50:15.601Z","updated_at":"2026-01-11T04:48:13.308Z","avatar_url":"https://github.com/TalebRafiepour.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# StepProgress\n\n[![Pub Version](https://img.shields.io/pub/v/step_progress.svg?label=pub\u0026color=blue)](https://pub.dev/packages/step_progress/versions)\n[![GitHub Stars](https://img.shields.io/github/stars/TalebRafiepour/step_progress?color=yellow\u0026label=Stars)](https://github.com/TalebRafiepour/step_progress/stargazers)\n[![GitHub Open Issues](https://img.shields.io/github/issues/TalebRafiepour/step_progress?color=red)](https://github.com/TalebRafiepour/step_progress/issues)\n[![GitHub Closed Issues](https://img.shields.io/github/issues-closed/TalebRafiepour/step_progress)](https://github.com/TalebRafiepour/step_progress/issues?q=is%3Aissue+is%3Aclosed)\n![GitHub License](https://img.shields.io/github/license/TalebRafiepour/step_progress)\n[![codecov](https://codecov.io/gh/TalebRafiepour/step_progress/graph/badge.svg)](https://codecov.io/gh/TalebRafiepour/step_progress)\n\n\n**StepProgress** is a lightweight and highly flexible package designed to display step progress indicators for completing multi-step tasks in a user interface. This package supports both **vertical and horizontal** orientations, allowing developers to customize the display according to their application's needs. It provides a variety of customizable widgets that visually represent the progress of a task, making it easier for users to understand their current position and the steps remaining. With this flexibility, **StepProgress** can seamlessly integrate into various UI designs, enhancing user experience across different platforms.\n\n![StepProgress-banner](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/stepprogress-banner.png)\n\n\n## Features\n\n- **Visual Step Indication**: Clearly displays progress through a sequence of steps, available in both horizontal and vertical orientations.\n  \n- **Theming and Customization**:\n  - **Comprehensive Theme**: Easily customize the look and feel using `StepProgressThemeData`, controlling colors, text styles, and border properties.\n  - **Step Sizing**: Adjust the size of step nodes with `stepNodeSize`.\n  - **Titles and Subtitles**: Add descriptive labels to each step nodes and lines for enhanced user understanding.\n  - **Visibility Control**: Show or hide titles, subtitles, and connecting lines using `StepProgressVisibilityOptions`.\n  - **Custom Icons**: Utilize custom icons for step nodes using `nodeIconBuilder`.\n  - **Custom Labels**: Use `nodeLabelBuilder` and `lineLabelBuilder` to provide custom labels for step nodes and connecting lines.\n  - **Breadcrumb Support**: Display connecting lines as breadcrumbs for a unique visual style using the `isBreadcrumb` property in `StepLineStyle`.\n  \n- **Interactive Elements**:\n  - **Step Tapping**: Enable user interaction with steps using `onStepNodeTapped` callbacks.\n  - **Line Tapping**: Provide actions when users tap on the lines connecting steps with `onStepLineTapped`.\n  - **Step Change Notification**: Receive callbacks with `onStepChanged` when the current step is updated.\n  \n- **Programmatic Control**:\n  - **`StepProgressController`**: Manage the current step externally, allowing integration with your application's logic.\n  - **Initial Step**: Set the starting step with the `currentStep` property.\n  - **Reversed**: Display steps in reverse order using the `reversed` property.\n  \n- **Flexible Layout**:\n  - **Dimensions**: Control the width and height of the widget.\n  - **Spacing**: Adjust margins and padding for optimal visual placement.\n\n## Showcases\n\n### Example 1: Vertical Step Progress Indicator\n![StepProgress-vertical](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-1-step-progress-vertical.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  controller: stepProgressController,\n  axis: Axis.vertical,\n  nodeTitles: const ['step 1', 'step 2', 'step 3', 'step 4'],\n  onStepChanged: (index) {\n    debugPrint('on step changed: $index');\n  },\n  onStepNodeTapped: (index) {\n    debugPrint('on step tapped with index: $index');\n  },\n  onStepLineTapped: (index) {\n    debugPrint('on step line tapped with index: $index');\n  },\n),\n```\n\u003c/details\u003e\n\n### Example 2: Horizontal Step Progress Without Labels\n![StepProgress-without-labels](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-2-step-progress-without-labels.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 5,\n  padding: const EdgeInsets.symmetric(horizontal: 24),\n  controller: _stepProgressController,\n  onStepChanged: (currentIndex) {\n    setState(() {\n      currentStep = currentIndex;\n    });\n  },\n),\n```\n\u003c/details\u003e\n\n### Example 3: Horizontal Step Progress (Line Only Mode)\n![StepProgress-without-nodes](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-3-step-line-mode.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 5,\n  visibilityOptions: StepProgressVisibilityOptions.lineOnly,\n  controller: stepProgressController,\n  highlightOptions: StepProgressHighlightOptions.highlightCurrentLine,\n  onStepChanged: (currentIndex) {\n    debugPrint('onStepChanged: $currentIndex');\n  },\n  onStepLineTapped: (index) {\n    debugPrint('onStepLineTapped: $index');\n  },\n  theme: const StepProgressThemeData(\n    stepLineSpacing: 6,\n    defaultForegroundColor: Color.fromARGB(255, 55, 55, 55),\n    activeForegroundColor: Color.fromARGB(255, 105, 105, 105),\n    stepLineStyle: StepLineStyle(\n      lineThickness: 9,\n      borderRadius: Radius.circular(2),\n    ),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 4: Customized Horizontal Step Progress (Line Only Mode)\n![StepProgress-line-mode](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-4-step-line-mode.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nRow(\n  children: [\n    TextButton.icon(\n      onPressed: stepProgressController.previousStep,\n      label: const Text('PREV'),\n      icon: const Icon(Icons.arrow_back_ios),\n    ),\n    Expanded(\n      child: StepProgress(\n        totalSteps: 5,\n        visibilityOptions: StepProgressVisibilityOptions.lineOnly,\n        controller: stepProgressController,\n        theme: const StepProgressThemeData(\n          defaultForegroundColor: Color(0xFFeeeee4),\n          activeForegroundColor: Color(0xFF1A76D2),\n        ),\n      ),\n    ),\n    TextButton.icon(\n      onPressed: stepProgressController.nextStep,\n      label: const Text('NEXT'),\n      icon: const Icon(Icons.arrow_forward_ios),\n      iconAlignment: IconAlignment.end,\n    ),\n  ],\n),\n```\n\u003c/details\u003e\n\n### Example 5: Horizontal Step Progress with Custom Node Icons\n![StepProgress-custom-node-icon](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-5-step-progress-custom-icon.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  margin: const EdgeInsets.symmetric(horizontal: 12),\n  controller: stepProgressController,\n  nodeIconBuilder: (index, completedStepIndex) {\n    if (index \u003c= completedStepIndex) {\n      return Text(\n        '${index + 1}',\n        style: const TextStyle(\n          fontSize: 24,\n          color: Color(0xFFb1acaa),\n        ),\n      );\n    } else {\n      return Text(\n        '${index + 1}',\n        style: const TextStyle(\n          fontSize: 24,\n          color: Color(0xFFa2a2ab),\n        ),\n      );\n    }\n  },\n  theme: const StepProgressThemeData(\n    defaultForegroundColor: Colors.white,\n    activeForegroundColor: Colors.white,\n    borderWidth: 4,\n    activeBorderColor: Color(0xFF2d9ada),\n    borderColor: Color(0xFFdee0e2),\n    stepLineStyle: StepLineStyle(lineThickness: 0),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 6: Horizontal Step Progress with Positioned Labels\n![StepProgress-positioned-labels](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-6-step-progress-position-labels.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  controller: stepProgressController,\n  nodeTitles: const ['Step 1', 'Step 2', 'Step 3', 'Step 4'],\n  theme: const StepProgressThemeData(\n    stepLabelAlignment: StepLabelAlignment.topBottom,\n    stepLineSpacing: 2,\n    stepLineStyle: StepLineStyle(lineThickness: 2),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 7: Horizontal Step Progress (Node Only Mode)\n![StepProgress-node-only](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-7-step-progress-without-lines.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  controller: stepProgressController,\n  visibilityOptions: StepProgressVisibilityOptions.nodeOnly,\n  nodeSubTitles: const ['sub 1', 'sub 2', 'sub 3', 'sub 4'],\n  padding: const EdgeInsets.all(18),\n  theme: const StepProgressThemeData(\n    stepLabelAlignment: StepLabelAlignment.right,\n    nodeLabelStyle: StepLabelStyle(labelAxisAlignment: CrossAxisAlignment.start),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 8: Vertical Step Progress with Custom Line Spacing\n![StepProgress-vertical-lineSpacing](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-8-stepprogress-vertical-line-spacing.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  controller: stepProgressController,\n  axis: Axis.vertical,\n  height: 300,\n  nodeTitles: const [\n    'Step 1',\n    'Step 2',\n    'Step 3',\n    'Step 4',\n  ],\n  padding: const EdgeInsets.all(18),\n  theme: const StepProgressThemeData(\n    stepLabelAlignment: StepLabelAlignment.left,\n    nodeLabelStyle: StepLabelStyle(\n      labelAxisAlignment: CrossAxisAlignment.start,\n    ),\n    stepLineSpacing: 24,\n    stepLineStyle: StepLineStyle(\n      borderRadius: Radius.circular(4),\n    ),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 9: Horizontal Step Progress with Square Node Shape\n![StepProgress-horizontal-square-shape](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-9-stepprogress-square-shape.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  controller: stepProgressController,\n  nodeTitles: const [\n    'Step 1',\n    'Step 2',\n    'Step 3',\n    'Step 4',\n  ],\n  padding: const EdgeInsets.all(18),\n  theme: const StepProgressThemeData(\n    shape: StepNodeShape.square,\n    stepLabelAlignment: StepLabelAlignment.top,\n    stepLineSpacing: 24,\n    stepNodeStyle: StepNodeStyle(\n      decoration: BoxDecoration(\n        borderRadius: BorderRadius.all(\n          Radius.circular(4),\n        ),\n      ),\n      activeDecoration: BoxDecoration(\n        borderRadius: BorderRadius.all(\n          Radius.circular(6),\n        ),\n      ),\n    ),\n    stepLineStyle: StepLineStyle(\n      borderRadius: Radius.circular(4),\n    ),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 10: Horizontal Step Progress with Triangle Node Shape\n![StepProgress-horizontal-triangle-shape](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-10-stepprogress-triangle-shape.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  controller: stepProgressController,\n  visibilityOptions: StepProgressVisibilityOptions.nodeOnly,\n  nodeTitles: const [\n    'Step 1',\n    'Step 2',\n    'Step 3',\n    'Step 4',\n  ],\n  padding: const EdgeInsets.all(18),\n  theme: const StepProgressThemeData(\n    shape: StepNodeShape.triangle,\n    stepLabelAlignment: StepLabelAlignment.left,\n    stepNodeStyle: StepNodeStyle(\n      activeIcon: null,\n    ),\n  ),\n  ),\n```\n\u003c/details\u003e\n\n### Example 11: Horizontal Step Progress with Diamond Node Shape\n![StepProgress-horizontal-diamond-shape](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-11-stepprogress-diamond-shape.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  stepNodeSize: 24,\n  controller: stepProgressController,\n  nodeTitles: const [\n    'Step 1',\n    'Step 2',\n    'Step 3',\n    'Step 4',\n  ],\n  padding: const EdgeInsets.all(18),\n  theme: const StepProgressThemeData(\n    shape: StepNodeShape.diamond,\n    stepLineSpacing: 18,\n    stepLineStyle: StepLineStyle(\n      borderRadius: Radius.circular(4),\n    ),\n    nodeLabelStyle: StepLabelStyle(\n      margin: EdgeInsets.only(bottom: 6),\n    ),\n    stepNodeStyle: StepNodeStyle(\n      activeIcon: null,\n      decoration: BoxDecoration(\n        borderRadius: BorderRadius.all(\n          Radius.circular(6),\n        ),\n      ),\n    ),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 12: Vertical Step Progress with Hexagon Node Shape\n![StepProgress-vertical-hexagon-shape](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-12-step-progress-vertical-hexagon-shape.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  stepNodeSize: 24,\n  height: 390,\n  axis: Axis.vertical,\n  controller: stepProgressController,\n  nodeTitles: const [\n    'Step 1',\n    'Step 2',\n    'Step 3',\n    'Step 4',\n  ],\n  padding: const EdgeInsets.all(18),\n  theme: const StepProgressThemeData(\n    stepLabelAlignment: StepLabelAlignment.leftRight,\n    shape: StepNodeShape.hexagon,\n    stepLineSpacing: 18,\n    stepLineStyle: StepLineStyle(\n      borderRadius: BorderRadius.all(\n        Radius.circular(4),\n      ),\n    ),\n    stepNodeStyle: StepNodeStyle(\n      decoration: BoxDecoration(\n        borderRadius: BorderRadius.all(\n          Radius.circular(6),\n        ),\n      ),\n    ),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 13: Vertical Step Progress with Star Node Shape\n![StepProgress-vertical-star-shape](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-13-stepprogress-vertical-star-shape.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 4,\n  stepNodeSize: 28,\n  height: 390,\n  axis: Axis.vertical,\n  controller: stepProgressController,\n  padding: const EdgeInsets.all(18),\n  theme: const StepProgressThemeData(\n    stepLabelAlignment: StepLabelAlignment.left,\n    shape: StepNodeShape.star,\n    stepLineSpacing: 18,\n    stepLineStyle: StepLineStyle(\n      lineThickness: 3,\n      borderRadius: Radius.circular(3),\n    ),\n    stepNodeStyle: StepNodeStyle(\n      activeIcon: Icon(\n        Icons.verified_rounded,\n        size: 10,\n        color: Colors.white,\n      ),\n      icon: Icon(\n        Icons.more_horiz_outlined,\n        size: 10,\n        color: Colors.white,\n      ),\n      decoration: BoxDecoration(\n        borderRadius: BorderRadius.all(\n          Radius.circular(6),\n        ),\n      ),\n    ),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 14: Horizontal Step Progress with Line Labels\n![StepProgress-horizontal-with-line-labels](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-14-stepprogress-line-labels.png)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\ntotalSteps: 4,\npadding: const EdgeInsets.all(10),\nlineTitles: const [\n  'line title 1',\n  'line title 2',\n  'line title 3',\n],\ncontroller: stepProgressController,\nnodeIconBuilder: (index, completedStepIndex) {\n  if (index \u003c= completedStepIndex) {\n    return const Icon(\n      Icons.check,\n      color: Colors.white,\n    );\n  } else {\n    return const Icon(\n      Icons.more_horiz,\n      color: Colors.white,\n    );\n  }\n},\ntheme: const StepProgressThemeData(\n  lineLabelAlignment: Alignment.bottomCenter,\n  lineLabelStyle: StepLabelStyle(\n    defualtColor: Colors.grey,\n    activeColor: Colors.green,\n  ),\n  stepLineSpacing: 20,\n  stepLineStyle: StepLineStyle(\n    lineThickness: 3,\n    borderRadius: Radius.circular(4),\n  ),\n),\n),\n```\n\u003c/details\u003e\n\n### Example 15: Customized Vertical Step Progress with Line and Node Labels\n![StepProgress-vertical-customized-with-line-labels](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-15-stepprogress-custom-with-line-labels.png)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 6,\n  padding: const EdgeInsets.all(10),\n  axis: Axis.vertical,\n  reversed: true,\n  controller: stepProgressController,\n  nodeIconBuilder: (index, completedStepIndex) {\n    if (index \u003c= completedStepIndex) {\n      //step completed\n      return const Icon(\n        Icons.check,\n        size: 18,\n        color: Colors.white,\n      );\n    }\n    return null;\n  },\n  lineLabelBuilder: (index, completedStepIndex) {\n    // here index is index of current line\n    // (numbers of lines is equal to toalSteps - 1)\n    if (index.isEven) {\n      return Text(\n        'December ${index + 10} 2020',\n        style: Theme.of(context)\n            .textTheme\n            .titleSmall\n            ?.copyWith(color: Colors.white),\n      );\n    }\n    return null;\n  },\n  nodeLabelBuilder: (index, completedStepIndex) {\n    return Column(\n      mainAxisSize: MainAxisSize.min,\n      crossAxisAlignment: CrossAxisAlignment.start,\n      spacing: 2,\n      children: [\n        Text(\n          'Invisalign ClinCheck $index',\n          maxLines: 3,\n          style: Theme.of(context).textTheme.titleSmall?.copyWith(\n                decorationColor: const Color(0xFF4e97fc),\n                color: const Color(0xFF4e97fc),\n                decoration: TextDecoration.underline,\n              ),\n        ),\n        Text(\n          '9:20 AM - 9:40 AM',\n          style: Theme.of(context).textTheme.labelMedium?.copyWith(\n                color: const Color(0xFF7e7971),\n              ),\n        ),\n      ],\n    );\n  },\n  theme: const StepProgressThemeData(\n    defaultForegroundColor: Color(0xFF666666),\n    activeForegroundColor: Color(0xFF4e97fc),\n    lineLabelAlignment: Alignment.topLeft,\n    nodeLabelStyle: StepLabelStyle(\n      maxWidth: double.infinity,\n      margin: EdgeInsets.all(4),\n    ),\n    lineLabelStyle: StepLabelStyle(\n      maxWidth: double.infinity,\n      margin: EdgeInsets.only(\n        right: 18,\n      ),\n    ),\n  ),\n)\n```\n\u003c/details\u003e\n\n### Example 16: Horizontal Step Progress with Breadcrumb Lines\n![StepProgress-horizontal-with-breadcrumb-lines](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-16-stepprogress-breadcrumb-lines.png)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 5,\n  padding: const EdgeInsets.all(10),\n  controller: stepProgressController,\n  lineSubTitles: const [\n    'Step 2',\n    'Step 3',\n    'Step 4',\n    'Step 5',\n  ],\n  theme: const StepProgressThemeData(\n    stepLineSpacing: 28,\n    stepLineStyle: StepLineStyle(\n      lineThickness: 10,\n      isBreadcrumb: true,\n    ),\n  ),\n)\n```\n\u003c/details\u003e\n\n### Example 17: Horizontal Step Progress with Dotted Lines\n![StepProgress-horizontal-with-dotted-lines](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-17-stepprogress-dotted-line.png)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 5,\n  padding: const EdgeInsets.all(10),\n  controller: stepProgressController,\n  theme: const StepProgressThemeData(\n    stepLineStyle: StepLineStyle(\n      borderRadius: Radius.circular(8),\n      borderStyle: OutterBorderStyle(\n        isDotted: true,\n        borderWidth: 3,\n      ),\n    ),\n  ),\n)\n```\n\u003c/details\u003e\n\n### Example 18: Horizontal Step Progress with Ripple Effect on Nodes\n![StepProgress-horizontal-with-rippleeffect-nodes](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-18-stepprogress-rippleeffect-nodes.png)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 5,\n  padding: const EdgeInsets.all(10),\n  controller: stepProgressController,\n  theme: const StepProgressThemeData(\n    enableRippleEffect: true,\n  ),\n)\n```\n\u003c/details\u003e\n\n### Example 19: Horizontal Step Progress with Highlighted Current Step Node\n![StepProgress-horizontal-with-highlighted-current-step-node](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-19-stepprogress-highlightcurrentstepnode.png)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 5,\n  padding: const EdgeInsets.all(10),\n  controller: stepProgressController,\n  highlightOptions: StepProgressHighlightOptions.highlightCurrentNode,\n)\n```\n\u003c/details\u003e\n\n### Example 20: Horizontal Step Progress Customized Icons\n![StepProgress-horizontal-customized-icons](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-20-stepprogress-customized-icons.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nfinal stepProgressController = StepProgressController(totalSteps: 5);\nconst nodeIcons = [\n  Icon(Icons.home),\n  Icon(Icons.star),\n  Icon(Icons.settings),\n  Icon(Icons.person),\n  Icon(Icons.check)\n];\n```\n\n```dart\nStepProgress(\n  totalSteps: 5,\n  stepNodeSize: 75,\n  padding: const EdgeInsets.all(10),\n  controller: stepProgressController,\n  visibilityOptions: StepProgressVisibilityOptions.nodeOnly,\n  nodeIconBuilder: (index, completedStepIndex) =\u003e nodeIcons[index],\n  theme: const StepProgressThemeData(\n    stepAnimationDuration: Duration.zero,\n    stepNodeStyle: StepNodeStyle(\n      iconColor: Color(0xfffdfdfd),\n      activeIconColor: Color(0xff72479e),\n    ),\n    activeForegroundColor: Color(0xFF181818),\n    defaultForegroundColor: Color(0xff4c4c4c),\n  ),\n)\n```\n\u003c/details\u003e\n\n### Example 21: Instagram Story Stepper\n![StepProgress-horizontal-instagram-story-stepper](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-21-stepprogress-instagaram-story-stepper.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 5,\n  padding: const EdgeInsets.all(10),\n  controller: stepProgressController,\n  visibilityOptions: StepProgressVisibilityOptions.lineOnly,\n  autoStartProgress: true,\n  onStepChanged: (currentIndex) {\n    debugPrint('Current step changed to: $currentIndex');\n  },\n  theme: const StepProgressThemeData(\n    activeForegroundColor: Color.fromARGB(255, 255, 255, 255),\n    defaultForegroundColor: Color.fromARGB(255, 171, 168, 168),\n    stepLineSpacing: 3,\n    stepLineStyle: StepLineStyle(\n      lineThickness: 5,\n      animationDuration: Duration(seconds: 3),\n      borderRadius: Radius.circular(5),\n    ),\n  ),\n),\n```\n\u003c/details\u003e\n\n### Example 22: LineFirst mode (horizontal)\n![StepProgress-horizontal-line-first-mode](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-22-stepprogress-linefirst-mode.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 6,\n  stepNodeSize: 20,\n  padding: const EdgeInsets.symmetric(vertical: 24),\n  visibilityOptions: StepProgressVisibilityOptions.lineThenNode,\n  theme: const StepProgressThemeData(\n      //stepLineSpacing: 20,\n      stepNodeStyle: StepNodeStyle(\n        shape: StepNodeShape.hexagon,\n      )),\n  controller: stepProgressController,\n),\n```\n\u003c/details\u003e\n\n### Example 23: LineFirst mode (horizontal)\n![StepProgress-horizontal-line-first-mode-with-same-node-and-line-count](https://raw.githubusercontent.com/TalebRafiepour/showcase/main/step_progress/sample-23-stepprogress-customized-firstlinemode-samenodeandlinecount.gif)\n\n\u003cdetails\u003e\n  \u003csummary\u003eShow Implementation\u003c/summary\u003e\n\n```dart\nStepProgress(\n  totalSteps: 3,\n  stepNodeSize: 30,\n  hasEqualNodeAndLineCount: true, // enable equal node and line count\n  padding: const EdgeInsets.symmetric(vertical: 24),\n  visibilityOptions: StepProgressVisibilityOptions.lineThenNode,\n  lineTitles: const [\n    'Download Audacity application',\n    'Connect to cloud storage',\n    'Never lose your work in Audacity'\n  ],\n  theme: const StepProgressThemeData(\n    stepLineSpacing: 20,\n    lineLabelAlignment: Alignment.bottomCenter,\n    lineLabelStyle: StepLabelStyle(\n      defualtColor: Colors.black87,\n      activeColor: Colors.black87,\n      margin: EdgeInsets.only(top: 10),\n      titleStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),\n    ),\n    stepNodeStyle: StepNodeStyle(\n      shape: StepNodeShape.circle,\n    ),\n  ),\n  controller: stepProgressController,\n),\n```\n\u003c/details\u003e\n\n## Installation\n\nTo use StepProgress, add it to your `pubspec.yaml` file:\n```yaml\ndependencies:\n  step_progress: latest_version\n```\nThen, run the following command to install the package:\n```bash\nflutter pub get\n```\n\n## Usage\n\nTo use StepProgress in your Flutter app, first import the package:\n\n```dart\nimport 'package:step_progress/step_progress.dart';\n```\n\n### Initialize Your StepProgressController\n\n```dart\nfinal _stepProgressController = StepProgressController(totalStep: 4);\n```\n\n### Then Pass Your StepProgressController to the StepProgress Widget\n\n```dart\nStepProgress(\n  controller: _stepProgressController,\n  totalSteps: 4,\n  onStepChanged: (index) {\n    debugPrint('on step changed: $index');\n  },\n),\n```\n## StepProgressThemeData parameters\n\n| Property                | Type                | Description                                        | Default Value                              |\n|-------------------------|---------------------|----------------------------------------------------|--------------------------------------------|\n|`defaultForegroundColor` |`Color`              | The default color of the step nodes.               | `Color.fromARGB(255, 191, 196, 195)`       |\n|`activeForegroundColor`  |`Color`              | The color of the active step node.                 | `Color.fromARGB(255, 0, 167, 160)`         |\n|`borderStyle`            |`OutterBorderStyle`  | border style of line and nodes.                    | `null`                                     |\n|`enableRippleEffect`     |`bool`               | Whether to enable the ripple effect on step nodes. | `false`                                    |\n|`shape`                  |`StepNodeShape`      | The shape of the step nodes (e.g., circle, square).| `StepNodeShape.circle`                     |\n|`stepAnimationDuration`  |`Duration`           | The duration of the animation for step transitions.|`Duration(milliseconds: 150)`               |\n|`stepLineSpacing`        |`double`             | The spacing between step lines.                    | `0.0`                                      |\n|`nodeLabelAlignment`     |`StepLabelAlignment?`| The alignment of the labels for the step nodes.    |`null`                                      |\n|`lineLabelAlignment`     |`Alignment?`         | The alignment of the labels for the step lines.    |`null`                                      |\n|`nodeLabelStyle`         |`StepLabelStyle`     | The style of the labels for the step nodes.        | `StepLabelStyle()`                         |\n|`lineLabelStyle`         |`StepLabelStyle`     | The style of the labels for the step lines.        | `StepLabelStyle(maxWidth: double.infinity)`|\n|`stepNodeStyle`          |`StepNodeStyle`      | The style of the step nodes.                       | `StepNodeStyle()`                          |\n|`stepLineStyle`          |`StepLineStyle`      | The style of the lines connecting the step nodes.  | `StepLineStyle()`                          |\n|`rippleEffectStyle`      |`RippleEffectStyle`  | The style of the ripple effect on step nodes.      | `RippleEffectStyle()`                      |\n\n\n## StepNodeStyle Properties\n\n| Property               | Type               | Description                                                                                                  | Default Value|\n| ---------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------ | ----------------------------- |\n|`defaultForegroundColor`| `Color?`           | The default color for the foreground of the step node. If not set, it will be read from the theme.           | `null` |\n|`activeForegroundColor` | `Color?`           | The color for the foreground of the step node when it is active. If not set, it will be read from the theme. | `null` |\n|`borderStyle`           | `OutterBorderStyle`| border style of nodes.                                                                                       | `null` |\n|`animationDuration`     | `Duration?`        | The duration of the animation for the step node. If not set, it will be read from the theme.                 | `null` |\n|`iconColor`             | `Color`            | The color of the icon.                                                                                       | `null` |\n|`activeIconColor`       | `Color`            | The color of the icon when the step node is active.                                                          | `null` |\n|`shape`                 | `StepNodeShape`    | The shape of the step node.                                                                                  | `null` |\n|`decoration`            | `BoxDecoration`    | The decoration of the step node.                   | `const BoxDecoration(color: Color.fromARGB(50, 255, 255, 255))` (semi-transparent white) |\n|`activeDecoration`      | `BoxDecoration`    | The decoration of the step node when it is active.                                                           | `null` |\n|`icon`                  | `Widget?`          | The icon widget to display.                                                                                  | `null` |\n|`activeIcon`            | `Widget?`          | The icon widget to display when the step is active.| `const Icon(Icons.check, size: 18, color: Colors.white)`                                 |\n|`enableRippleEffect`    | `bool`             | Whether to enable the ripple effect.               | `true`                                                                                   |\n\n\n## RippleEffectStyle Properties\n\n| Property           | Type         | Description                                                                               | Default Value |\n|--------------------|--------------|-------------------------------------------------------------------------------------------|---------------|\n| `foregroundColor`  | `Color?`     | The color of the ripple effect's foreground. If `null`, the theme determines the color.   | `null`        |\n| `animationDuration`| `Duration?`  | The duration of the ripple effect animation. If `null`, the theme determines the duration.| `null`        |\n| `borderColor`      | `Color?`     | The color of the ripple effect's border. If `null`, the theme determines the color.       | `null`        |\n| `borderWidth`      | `double`     | The width of the ripple effect's border.                                                  | `1`           |\n\n\n## StepLineStyle Properties\n\n| Property           | Type               | Description                                                                            | Default Value         |\n|--------------------|------------------- |----------------------------------------------------------------------------------------|-----------------------|\n| `foregroundColor`  | `Color?`           | The color of the step line. If not set, it will be determined by the theme.            | `null`                |\n| `activeColor`      | `Color?`           | The color used when the step is active. If not set, it will be determined by the theme.| `null`                |\n| `animationDuration`| `Duration?`        | The duration of the animation. If not set, it will be determined by the theme.         | `null`                |\n| `lineThickness`    | `double`           | The thickness of the line in the step progress.                                        | `4.0`                 |\n| `borderRadius`     | `Radius`           | The border radius of the line in the step progress.                                    | `Radius.zero`         |\n| `isBreadcrumb`     | `bool`             | Indicates whether the step line is displayed as a breadcrumb.                          | `false`               |\n| `chevronAngle`     | `double`           | Specifies the angle of the chevron in the step line.                                   | `30.0`                |\n| `borderStyle`      | `OutterBorderStyle`| border style of nodes.                                                                 | `null`                |\n\n## OuterBorderStyle Properties\n\n| Property           | Type               | Description                                                                            | Default Value                      |\n|--------------------|--------------------|----------------------------------------------------------------------------------------|------------------------------------|\n|`borderWidth`       | `double`           | The width of the border around the step progress indicator.                            | `2`                                |\n|`defaultBorderColor`| `Color`            | The default color of the border when the step is inactive.                             |`Color.fromARGB(255, 191, 196, 195)`|\n|`activeBorderColor` | `Color`            | The color of the border when the step is active.                                       |`Color.fromARGB(255, 0, 167, 160)`  |\n|`isDotted`          | `bool`             | Determines whether the border is rendered as a dotted line.                            | `false`                            |\n|`dashPattern`       | `List\u003cdouble\u003e`     | The pattern of dashes and gaps for a dotted border.                                    | `[0.7, 4]`                         |\n\n## StepLabelStyle Properties\n\n| Property             | Type                | Description                                                                | Default Value              |\n| -------------------- | ------------------- | ---------------------------------------------------------------------------| -------------------------- |\n| `labelAxisAlignment` | `CrossAxisAlignment`| The alignment of the label along the cross axis.                           | `CrossAxisAlignment.center`|\n| `titleStyle`         | `TextStyle?`        | The style to use for the title text.                                       | `null`                     |\n| `subTitleStyle`      | `TextStyle?`        | The style to use for the subtitle text.                                    | `null`                     |\n| `activeColor`        | `Color?`            | The color to use when the step is active.                                  | `null`                     |\n| `defualtColor`       | `Color?`            | The color to use when the step is not active.                              | `null`                     |\n| `textAlign`          | `TextAlign`         | How the text should be aligned horizontally.                               | `TextAlign.center`         |\n| `titleMaxLines`      | `int`               | The maximum number of lines for the title text.                            | `3`                        |\n| `maxWidth`           | `double`            | The maximum width of the step label.                                       | `48`                       |\n| `subTitleMaxLines`   | `int`               | The maximum number of lines for the subtitle text.                         | `3`                        |\n| `overflow`           | `TextOverflow`      | How visual overflow should be handled.                                     | `TextOverflow.ellipsis`    |\n| `padding`            | `EdgeInsets`        | The amount of space to surround the label with.                            | `EdgeInsets.zero`          |\n| `margin`             | `EdgeInsets`        | The amount of space to surround the label with.                            | `EdgeInsets.all(2)`        |\n| `animationDuration`  | `Duration?`         | The duration of the animation when the style changes.                      | `null`                     |\n\n--------------\n## Support the Package\n\nWe appreciate your support for the StepProgress package! You can help us by:\n\n- Liking the package on [pub.dev](https://pub.dev/packages/step_progress).\n- Starring the repository on [GitHub](https://github.com/TalebRafiepour/step_progress).\n- Reporting any issues or bugs you encounter [here](https://github.com/TalebRafiepour/step_progress/issues).\n\nYour contributions and feedback are invaluable to us!\n\n## Donate\n\n**If you wants to support me: \u003ca href=\"https://github.com/TalebRafiepour/TalebRafiepour/blob/main/DONATE.md\" alt=\"Donate button\"\u003e\u003cimg src=\"https://img.shields.io/badge/-Donate-red?logo=undertale\" /\u003e\u003c/a\u003e**\n\n## License\n\n`StepProgress` is released under the `BSD-3-Clause` License.\n\n## Contact Me 📨\n\nFeel free to reach out to me through the following platforms:\n\n\u003ca href=\"https://github.com/TalebRafiepour\"\u003e\u003cimg src=\"https://img.icons8.com/ios-glyphs/344/github.png\" width=\"40px\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://www.linkedin.com/in/taleb-rafiepour/\"\u003e\u003cimg src=\"https://img.icons8.com/color/344/linkedin.png\" width=\"40px\"/\u003e\u003c/a\u003e\n\u003ca href=\"mailto:taleb.r75@gmail.com\"\u003e\u003cimg src=\"https://img.icons8.com/color/344/gmail-new.png\" width=\"40px\"/\u003e\u003c/a\u003e\n\nI look forward to connecting with you!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalebrafiepour%2Fstep_progress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftalebrafiepour%2Fstep_progress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftalebrafiepour%2Fstep_progress/lists"}