Nice Step Indicator #

A package for nice step indicators in your app.

Features #

• Customizable active and inactive colors
• Builder for child widgets
• Supports different step statuses (active, completed, inactive)

Installation #

Add nice_step_indicator to your pubspec.yaml:

dependencies:
  nice_step_indicator: ^0.2.0

Then run flutter pub get to install the package.

Usage #

Import the package #

import 'package:nice_step_indicator/nice_step_indicator.dart';

Example #

Here is an example of how to use the NiceStepIndicator widget:

import "package:flutter/material";
import "package:nice_step_indicator/nice_step_indicator.dart";

/// A model representing a step in the progress indicator.
class ProgressStep {
  /// Creates a [ProgressStep] with the given [title], [subtitle], and [status].
  const ProgressStep({
    required this.title,
    required this.subtitle,
    this.status = StepLineStatus.inactive,
  });

  /// The title of the step.
  final String title;

  /// The subtitle of the step.
  final String subtitle;

  /// The status of the step, which can be active, completed, or inactive.
  final StepLineStatus status;
}

/// The main application widget.

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    // Generate a list of steps for the progress indicator.
    final steps = List.generate(
      5,
          (index) =>
          ProgressStep(
            subtitle: 'Step ${index + 1} subtitle',
            title: 'Step ${index + 1}',
          ),
    );

    return MaterialApp(
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          backgroundColor: Theme
              .of(context)
              .colorScheme
              .inversePrimary,
        ),
        useMaterial3: true,
      ),
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: Center(
        child: NiceStepIndicator<ProgressStep>(
          items: steps,
          builder: (context, _, item) =>
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(item.title),
                  const SizedBox(height: 8),
                  Text(item.subtitle),
                ],
              ),
          status: (item) => StepLineStatus.fromString(item.status.name),
        ),
      ),
    );
  }
}

Customization #

You can customize the NiceStepIndicator widget by providing different values for the following properties:

• activeColor: The color of the active step.
• inactiveColor: The color of the inactive step.
• dotOffset: Optional offset for the dot indicator item.
• offset: Optional offset for the step indicator item, providing padding around the step.
• strokeWidth: The width of the stroke.

API Reference #

NiceStepIndicator

A widget that displays a series of step indicators.

Properties

• activeColor: The color of the active step.
• builder: The child widget builder.
• dotOffset: Optional offset for the dot indicator item.
• inactiveColor: The color of the inactive step.
• items: The data to render in the steps.
• offset: Optional offset for the step indicator item, providing padding around the step.
• status: The indicator status builder.
• strokeWidth: The width of the stroke.

StepWidgetBuilder

A function that builds a widget for a step indicator item.

Parameters

• BuildContext context: The build context.
• int index: The index of the item.
• T item: The item itself.

StepStatusBuilder

A function that determines the status of a step indicator item.

Parameters

• T item: The item itself.

Returns

• StepLineStatus: The status of the step indicator item.

License #

This project is licensed under the MIT License.

Bugs or Requests #

If you encounter any problems feel free to open an issue. If you feel this package is missing a feature, please raise a ticket on GitHub and I'll look into it. Pull request are also welcome.