StepStyle class

This class is used to override the default visual properties of Step widgets within a Stepper.

To customize the appearance of a Step create an instance of this class with non-null parameters for the step properties whose default value you want to override.

Example usage:

Step(
  title: const Text('Step 1'),
  content: const Text('Content for Step 1'),
  stepStyle: StepStyle(
    color: Colors.blue,
    errorColor: Colors.red,
    border: Border.all(color: Colors.grey),
    boxShadow: const BoxShadow(blurRadius: 3.0, color: Colors.black26),
    gradient: const LinearGradient(colors: <Color>[Colors.red, Colors.blue]),
    indexStyle: const TextStyle(color: Colors.white),
  ),
)

An example that uses StepStyle to customize the appearance of each Step in a Stepper.

To see it in action, copy and run this code snippet on DartPad.

 
import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [StepStyle].

void main() => runApp(const StepStyleExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Step Style Example')),
        body: const Center(child: StepStyleExample()),
      ),
    );
  }
}

class StepStyleExample extends StatefulWidget {
  const StepStyleExample({super.key});

  @override
  State<StepStyleExample> createState() => _StepStyleExampleState();
}

class _StepStyleExampleState extends State<StepStyleExample> {
  final StepStyle _stepStyle = StepStyle(
    connectorThickness: 10,
    color: Colors.white,
    connectorColor: Colors.red,
    indexStyle: const TextStyle(color: Colors.black, fontSize: 20),
    border: .all(width: 2),
  );

  @override
  Widget build(BuildContext context) {
    return Stepper(
      type: .horizontal,
      stepIconHeight: 48,
      stepIconWidth: 48,
      stepIconMargin: .zero,
      steps: <Step>[
        Step(
          title: const SizedBox.shrink(),
          content: const SizedBox.shrink(),
          isActive: true,
          stepStyle: _stepStyle,
        ),
        Step(
          title: const SizedBox.shrink(),
          content: const SizedBox.shrink(),
          isActive: true,
          stepStyle: _stepStyle.copyWith(
            connectorColor: Colors.orange,
            gradient: const LinearGradient(
              colors: <Color>[Colors.white, Colors.black],
            ),
          ),
        ),
        Step(
          title: const SizedBox.shrink(),
          content: const SizedBox.shrink(),
          isActive: true,
          stepStyle: _stepStyle.copyWith(connectorColor: Colors.blue),
        ),
        Step(
          title: const SizedBox.shrink(),
          content: const SizedBox.shrink(),
          isActive: true,
          stepStyle: _stepStyle.merge(
            StepStyle(
              color: Colors.white,
              indexStyle: const TextStyle(color: Colors.black, fontSize: 20),
              border: .all(width: 2),
            ),
          ),
        ),
      ],
    );
  }
}
Mixed-in types
Annotations

Constructors

StepStyle({Color? color, Color? errorColor, Color? connectorColor, double? connectorThickness, BoxBorder? border, BoxShadow? boxShadow, Gradient? gradient, TextStyle? indexStyle})
Constructs a StepStyle.
const

Properties

border → BoxBorder?
Add a border around the step.
final
boxShadow → BoxShadow?
Add a shadow around the step.
final
color → Color?
Overrides the default color of the circle in the step.
final
connectorColor → Color?
Overrides the default color of the connector line between two steps.
final
connectorThickness → double?
Overrides the default thickness of the connector line between two steps.
final
errorColor → Color?
Overrides the default color of the error indicator in the step.
final
gradient → Gradient?
Add a gradient around the step.
final
hashCode → int
The hash code for this object.
no setteroverride
indexStyle → TextStyle?
Overrides the default style of the index in the step.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

copyWith({Color? color, Color? errorColor, Color? connectorColor, double? connectorThickness, BoxBorder? border, BoxShadow? boxShadow, Gradient? gradient, TextStyle? indexStyle}) → StepStyle
Returns a copy of this ButtonStyle with the given fields replaced with the new values.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
override
merge(StepStyle? stepStyle) → StepStyle
Returns a copy of this StepStyle where the non-null fields in stepStyle have replaced the corresponding null fields in this StepStyle.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringShort() → String
A brief description of this object, usually just the runtimeType and the hashCode.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
override