https://github.com/elrizwiraswara/flutter_steps
A customizable widget that allows you to display a series of steps in a horizontal or vertical direction.
https://github.com/elrizwiraswara/flutter_steps
flutter-stepper flutter-steps stepper steps steps-widget
Last synced: 4 months ago
JSON representation
A customizable widget that allows you to display a series of steps in a horizontal or vertical direction.
- Host: GitHub
- URL: https://github.com/elrizwiraswara/flutter_steps
- Owner: elrizwiraswara
- License: mit
- Created: 2024-07-24T08:05:34.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-19T15:27:04.000Z (over 1 year ago)
- Last Synced: 2025-04-07T23:33:19.755Z (about 1 year ago)
- Topics: flutter-stepper, flutter-steps, stepper, steps, steps-widget
- Language: Dart
- Homepage:
- Size: 395 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Flutter Steps
The Flutter Steps package is a customizable widget that allows you to display a series of steps in a horizontal or vertical direction. This package can be used for creating step indicators for onboarding processes, progress tracking, or any other multi-step process in your Flutter application.
## Key Features
- **Flexible Direction**: Display steps horizontally or vertically based on your layout needs.
- **Customizable Appearance**: Adjust colors, fonts, and sizes for active and inactive steps, titles, and subtitles.
- **Step Line Options**: Show or hide the line connecting steps, with options for continuous or dashed lines.
- **Step Counters**: Optionally display counters for each step.
- **Interactive**: Supports showing subtitles and custom leading elements for active and inactive steps.
## Installation
Add the following to your `pubspec.yaml` file:
```yaml
dependencies:
flutter_steps: ^1.0.5
```
Then run `flutter pub get` to install the package.
## Usage
### Basic Usage
```dart
import 'package:flutter/material.dart';
import 'package:flutter_steps/flutter_steps.dart';
List basicSteps = [
...List.generate(
5,
(i) => Steps(
title: 'Title ${i + 1}',
subtitle: 'Subtitle',
isActive: i < 2 ? true : false,
),
)
];
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: FlutterSteps(
steps: basicSteps,
titleFontSize: 12,
showSubtitle: false,
),
),
);
}
}
```
## Example
Check out the [example](example) directory for a complete sample app demonstrating the use of the `flutter_steps` package.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Support
