Adds support for StepStyle visual property bundle to the Step widget (#140825)

Fixes  #140770 and #103124

Adds the possibility of passing a height and width to icons. And also a margin for the distance of the lines between the icons.

examples/api/lib/material/stepper/step_style.0.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.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: Border.all(
+      width: 2,
+    ),
+  );
+
+   @override
+   Widget build(BuildContext context) {
+      return Stepper(
+      type: StepperType.horizontal,
+      stepIconHeight: 48,
+      stepIconWidth: 48,
+      stepIconMargin: EdgeInsets.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: Border.all(
+                width: 2,
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

examples/api/test/material/stepper/step_style.0_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/stepper/step_style.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('StepStyle Smoke Test', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.StepStyleExampleApp(),
+    );
+
+    expect(find.widgetWithText(AppBar, 'Step Style Example'), findsOneWidget);
+
+    final Stepper stepper = tester.widget<Stepper>(find.byType(Stepper));
+    // Check that the stepper has the correct properties.
+    expect(stepper.type, StepperType.horizontal);
+    expect(stepper.stepIconHeight, 48);
+    expect(stepper.stepIconWidth, 48);
+    expect(stepper.stepIconMargin, EdgeInsets.zero);
+
+    // Check that the first step has the correct properties.
+    final Step firstStep = stepper.steps[0];
+    expect(firstStep.title, isA<SizedBox>());
+    expect(firstStep.content, isA<SizedBox>());
+    expect(firstStep.isActive, true);
+    expect(firstStep.stepStyle?.connectorThickness, 10);
+    expect(firstStep.stepStyle?.color, Colors.white);
+    expect(firstStep.stepStyle?.connectorColor, Colors.red);
+    expect(firstStep.stepStyle?.indexStyle?.color, Colors.black);
+    expect(firstStep.stepStyle?.indexStyle?.fontSize, 20);
+    expect(firstStep.stepStyle?.border, Border.all(width: 2));
+
+    // Check that the second step has the correct properties.
+    final Step secondStep = stepper.steps[1];
+    expect(secondStep.title, isA<SizedBox>());
+    expect(secondStep.content, isA<SizedBox>());
+    expect(secondStep.isActive, true);
+    expect(secondStep.stepStyle?.connectorThickness, 10);
+    expect(secondStep.stepStyle?.connectorColor, Colors.orange);
+    expect(secondStep.stepStyle?.gradient, const LinearGradient(
+      colors: <Color>[
+                Colors.white,
+                Colors.black,
+              ],
+    ));
+
+    // Check that the third step has the correct properties.
+    final Step thirdStep = stepper.steps[2];
+    expect(thirdStep.title, isA<SizedBox>());
+    expect(thirdStep.content, isA<SizedBox>());
+    expect(thirdStep.isActive, true);
+    expect(thirdStep.stepStyle?.connectorThickness, 10);
+    expect(thirdStep.stepStyle?.color, Colors.white);
+    expect(thirdStep.stepStyle?.connectorColor, Colors.blue);
+    expect(thirdStep.stepStyle?.indexStyle?.color, Colors.black);
+    expect(thirdStep.stepStyle?.indexStyle?.fontSize, 20);
+    expect(thirdStep.stepStyle?.border, Border.all(width: 2));
+
+    // Check that the fourth step has the correct properties.
+    final Step fourthStep = stepper.steps[3];
+    expect(fourthStep.title, isA<SizedBox>());
+    expect(fourthStep.content, isA<SizedBox>());
+    expect(fourthStep.isActive, true);
+    expect(fourthStep.stepStyle?.color, Colors.white);
+    expect(fourthStep.stepStyle?.indexStyle?.color, Colors.black);
+    expect(fourthStep.stepStyle?.indexStyle?.fontSize, 20);
+    expect(fourthStep.stepStyle?.border, Border.all(width: 2));
+  });
+}

packages/flutter/test/material/stepper_test.dart

@@ -1530,7 +1530,7 @@ testWidgets('Stepper custom indexed controls test', (WidgetTester tester) async
     expect(circleColor('1'), selectedColor);
     expect(circleColor('2'), disabledColor);
     // in two steps case there will be single line
-    expect(lineColor('line0'), disabledColor);
+    expect(lineColor('line0'), selectedColor);
 
     // now hitting step two
     await tester.tap(find.text('step2'));
@@ -1587,6 +1587,108 @@ testWidgets('Stepper custom indexed controls test', (WidgetTester tester) async
     expect(find.text('!'), findsOneWidget);
   });
 
+  testWidgets('StepperProperties test', (WidgetTester tester) async {
+    const Widget widget = SizedBox.shrink();
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Material(
+          child: Stepper(
+            stepIconHeight: 24,
+            stepIconWidth: 24,
+            stepIconMargin: const EdgeInsets.all(8),
+             steps: List<Step>.generate(3, (int index) {
+               return Step(
+                 title: Text('Step $index'),
+                 content: widget,
+               );
+             }),
+          ),
+        ),
+      ),
+    );
+
+    final Finder stepperFinder = find.byType(Stepper);
+    final Stepper stepper = tester.widget<Stepper>(stepperFinder);
+
+    expect(stepper.stepIconHeight, 24);
+    expect(stepper.stepIconWidth, 24);
+    expect(stepper.stepIconMargin, const EdgeInsets.all(8));
+  });
+
+  testWidgets('StepStyle test', (WidgetTester tester) async {
+    final StepStyle stepStyle = StepStyle(
+      color: Colors.white,
+      errorColor: Colors.orange,
+      connectorColor: Colors.red,
+      connectorThickness: 2,
+      border: Border.all(),
+      gradient: const LinearGradient(
+        colors: <Color>[Colors.red, Colors.blue],
+      ),
+      indexStyle: const TextStyle(color: Colors.black),
+    );
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Material(
+          child: Stepper(
+            steps: <Step>[
+              Step(
+                title: const Text('Regular title'),
+                content: const Text('Text content'),
+                stepStyle: stepStyle,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    final Finder stepperFinder = find.byType(Stepper);
+    final Stepper stepper = tester.widget<Stepper>(stepperFinder);
+    final StepStyle? style = stepper.steps.first.stepStyle;
+
+    expect(style?.color, stepStyle.color);
+    expect(style?.errorColor, stepStyle.errorColor);
+    expect(style?.connectorColor, stepStyle.connectorColor);
+    expect(style?.connectorThickness, stepStyle.connectorThickness);
+    expect(style?.border, stepStyle.border);
+    expect(style?.gradient, stepStyle.gradient);
+    expect(style?.indexStyle, stepStyle.indexStyle);
+
+    //copyWith
+    final StepStyle newStyle = stepStyle.copyWith(
+      color: Colors.black,
+      errorColor: Colors.red,
+      connectorColor: Colors.blue,
+      connectorThickness: 3,
+      border: Border.all(),
+      gradient: const LinearGradient(
+        colors: <Color>[Colors.red, Colors.blue],
+      ),
+      indexStyle: const TextStyle(color: Colors.black),
+    );
+
+    expect(newStyle.color, Colors.black);
+    expect(newStyle.errorColor, Colors.red);
+    expect(newStyle.connectorColor, Colors.blue);
+    expect(newStyle.connectorThickness, 3);
+    expect(newStyle.border, stepStyle.border);
+    expect(newStyle.gradient, stepStyle.gradient);
+    expect(newStyle.indexStyle, stepStyle.indexStyle);
+
+    //merge
+    final StepStyle mergedStyle = stepStyle.merge(newStyle);
+
+    expect(mergedStyle.color, Colors.black);
+    expect(mergedStyle.errorColor, Colors.red);
+    expect(mergedStyle.connectorColor, Colors.blue);
+    expect(mergedStyle.connectorThickness, 3);
+    expect(mergedStyle.border, stepStyle.border);
+    expect(mergedStyle.gradient, stepStyle.gradient);
+    expect(mergedStyle.indexStyle, stepStyle.indexStyle);
+  });
 }
 
 class _TappableColorWidget extends StatefulWidget {