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:
dependencies:
flutter_steps: ^1.0.3
Then run flutter pub get
to install the package.
Usage
Basic Usage
import 'package:flutter/material.dart';
import 'package:flutter_steps/flutter_steps.dart';
List<Steps> 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 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 file for details.