Skip to content

Commit

Permalink
Adds support for StepStyle visual property bundle to the Step widget …
Browse files Browse the repository at this point in the history
…(#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.
  • Loading branch information
Mairramer authored Jan 12, 2024
1 parent ec97b6d commit f40a99c
Show file tree
Hide file tree
Showing 4 changed files with 534 additions and 23 deletions.
105 changes: 105 additions & 0 deletions examples/api/lib/material/stepper/step_style.0.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
// 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,
),
),
),
),
],
);
}
}
72 changes: 72 additions & 0 deletions examples/api/test/material/stepper/step_style.0_test.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
// 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));
});
}
Loading

0 comments on commit f40a99c

Please sign in to comment.