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: 5 days 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 (6 months ago)
• Default Branch: main
• Last Pushed: 2024-09-13T09:39:32.000Z (4 months ago)
• Last Synced: 2024-09-13T23:25:37.319Z (4 months ago)
• Topics: flutter-stepper, flutter-steps, stepper, steps, steps-widget
• Language: Dart
• Homepage:
• Size: 392 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• 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