forked from flutter/packages
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
- Loading branch information
Showing
4 changed files
with
534 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | ||
), | ||
), | ||
), | ||
), | ||
], | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); | ||
}); | ||
} |
Oops, something went wrong.