Skip to content

Commit 9b59e1c

Browse files
JacquesDIconicaFreek van de Ven
JacquesDIconica
authored and
Freek van de Ven
committed
fix: fix layout issues which failed the test
1 parent 2b11460 commit 9b59e1c

4 files changed

Lines changed: 184 additions & 185 deletions

File tree

‎example/lib/main.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ class _StepperDemoState extends State<StepperDemo> {
4949
],
5050
),
5151
if (_showAllSteps) ...[
52-
const VerticalSinglePageStepper(),
52+
const Expanded(child: VerticalSinglePageStepper()),
5353
] else ...[
5454
const VerticalMultiPageStepper(),
5555
],

‎example/lib/vertical_single.dart‎

Lines changed: 150 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -19,172 +19,177 @@ class _VerticalSinglePageStepperState extends State<VerticalSinglePageStepper> {
1919
@override
2020
Widget build(BuildContext context) => Column(
2121
children: [
22-
SingleChildScrollView(
23-
scrollDirection: Axis.vertical,
24-
child: MultiStepperView(
25-
showOnlyCurrentStep: true,
26-
theme: StepperTheme(
27-
stepIndicatorTheme: StepIndicatorTheme(
28-
activeBackgroundColor: Colors.white,
29-
activeTextStyle:
30-
Theme.of(context).textTheme.bodyMedium?.copyWith(
31-
color: Colors.black,
32-
),
33-
activeBorder: Border.all(
34-
color: Colors.white,
35-
),
36-
inactiveBackgroundColor: Colors.black,
37-
inactiveTextStyle:
38-
Theme.of(context).textTheme.bodyMedium?.copyWith(
39-
color: Colors.white,
40-
),
41-
inactiveBorder: Border.all(
42-
color: Colors.white,
43-
),
44-
completedBackgroundColor: Colors.green,
45-
completedTextStyle:
46-
Theme.of(context).textTheme.bodyMedium?.copyWith(
47-
color: Colors.white,
48-
),
49-
),
50-
lineColor: Colors.white,
51-
),
52-
showAllSteps: true,
53-
currentStep: _currentStep,
54-
zeroIndexed: false,
55-
onStepTapped: (value) {
56-
debugPrint('step tapped: ${value + 1}');
57-
},
58-
steps: [
59-
MultiViewStep(
60-
content: Column(
61-
crossAxisAlignment: CrossAxisAlignment.start,
62-
children: [
63-
Text(
64-
'Datum',
65-
style: Theme.of(context).textTheme.titleLarge?.copyWith(
66-
color: Colors.white,
67-
),
68-
),
69-
Text(
70-
'Selecteer een datum',
71-
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
72-
color: Colors.white,
22+
Expanded(
23+
child: SingleChildScrollView(
24+
child: MultiStepperView(
25+
showOnlyCurrentStep: true,
26+
theme: StepperTheme(
27+
stepIndicatorTheme: StepIndicatorTheme(
28+
activeBackgroundColor: Colors.white,
29+
activeTextStyle:
30+
Theme.of(context).textTheme.bodyMedium?.copyWith(
31+
color: Colors.black,
7332
),
74-
),
75-
const SizedBox(height: 50),
76-
],
77-
),
78-
),
79-
MultiViewStep(
80-
content: Column(
81-
crossAxisAlignment: CrossAxisAlignment.start,
82-
children: [
83-
Text(
84-
'Tijd',
85-
style: Theme.of(context).textTheme.titleLarge?.copyWith(
33+
activeBorder: Border.all(
34+
color: Colors.white,
35+
),
36+
inactiveBackgroundColor: Colors.black,
37+
inactiveTextStyle:
38+
Theme.of(context).textTheme.bodyMedium?.copyWith(
8639
color: Colors.white,
8740
),
88-
),
89-
Text(
90-
'Selecteer een tijd',
91-
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
41+
inactiveBorder: Border.all(
42+
color: Colors.white,
43+
),
44+
completedBackgroundColor: Colors.green,
45+
completedTextStyle:
46+
Theme.of(context).textTheme.bodyMedium?.copyWith(
9247
color: Colors.white,
9348
),
94-
),
95-
const SizedBox(height: 50),
96-
],
9749
),
50+
lineColor: Colors.white,
9851
),
99-
const MultiViewStep(
100-
content: Column(
101-
crossAxisAlignment: CrossAxisAlignment.start,
102-
children: [
103-
Text(
104-
'Product',
105-
style: TextStyle(
106-
color: Colors.white,
52+
showAllSteps: true,
53+
currentStep: _currentStep,
54+
zeroIndexed: false,
55+
onStepTapped: (value) {
56+
debugPrint('step tapped: ${value + 1}');
57+
},
58+
steps: [
59+
MultiViewStep(
60+
content: Column(
61+
crossAxisAlignment: CrossAxisAlignment.start,
62+
children: [
63+
Text(
64+
'Datum',
65+
style:
66+
Theme.of(context).textTheme.titleLarge?.copyWith(
67+
color: Colors.white,
68+
),
10769
),
108-
),
109-
Text(
110-
'Welk product',
111-
style: TextStyle(
112-
color: Colors.white,
70+
Text(
71+
'Selecteer een datum',
72+
style:
73+
Theme.of(context).textTheme.bodyMedium?.copyWith(
74+
color: Colors.white,
75+
),
11376
),
114-
),
115-
SizedBox(height: 50),
116-
],
77+
const SizedBox(height: 50),
78+
],
79+
),
11780
),
118-
),
119-
const MultiViewStep(
120-
content: Column(
121-
crossAxisAlignment: CrossAxisAlignment.start,
122-
children: [
123-
Text(
124-
'Temperatuur',
125-
style: TextStyle(
126-
color: Colors.white,
81+
MultiViewStep(
82+
content: Column(
83+
crossAxisAlignment: CrossAxisAlignment.start,
84+
children: [
85+
Text(
86+
'Tijd',
87+
style:
88+
Theme.of(context).textTheme.titleLarge?.copyWith(
89+
color: Colors.white,
90+
),
12791
),
128-
),
129-
Text(
130-
'Selecteer gemeten temperatuur',
131-
style: TextStyle(
132-
color: Colors.white,
92+
Text(
93+
'Selecteer een tijd',
94+
style:
95+
Theme.of(context).textTheme.bodyMedium?.copyWith(
96+
color: Colors.white,
97+
),
13398
),
134-
),
135-
SizedBox(height: 50),
136-
],
99+
const SizedBox(height: 50),
100+
],
101+
),
137102
),
138-
),
139-
const MultiViewStep(
140-
content: Column(
141-
crossAxisAlignment: CrossAxisAlignment.start,
142-
children: [
143-
Text(
144-
'Norm',
145-
style: TextStyle(
146-
color: Colors.white,
103+
const MultiViewStep(
104+
content: Column(
105+
crossAxisAlignment: CrossAxisAlignment.start,
106+
children: [
107+
Text(
108+
'Product',
109+
style: TextStyle(
110+
color: Colors.white,
111+
),
147112
),
148-
),
149-
Text(
150-
'Selecteer gemeten temperatuur',
151-
style: TextStyle(
152-
color: Colors.white,
113+
Text(
114+
'Welk product',
115+
style: TextStyle(
116+
color: Colors.white,
117+
),
153118
),
154-
),
155-
SizedBox(height: 50),
156-
],
119+
SizedBox(height: 50),
120+
],
121+
),
157122
),
158-
),
159-
const MultiViewStep(
160-
content: Column(
161-
crossAxisAlignment: CrossAxisAlignment.start,
162-
children: [
163-
Text(
164-
'Maatregel',
165-
style: TextStyle(
166-
color: Colors.white,
123+
const MultiViewStep(
124+
content: Column(
125+
crossAxisAlignment: CrossAxisAlignment.start,
126+
children: [
127+
Text(
128+
'Temperatuur',
129+
style: TextStyle(
130+
color: Colors.white,
131+
),
167132
),
168-
),
169-
Text(
170-
'Omschrijving',
171-
style: TextStyle(
172-
color: Colors.white,
133+
Text(
134+
'Selecteer gemeten temperatuur',
135+
style: TextStyle(
136+
color: Colors.white,
137+
),
173138
),
174-
),
175-
SizedBox(height: 50),
176-
],
139+
SizedBox(height: 50),
140+
],
141+
),
177142
),
178-
),
179-
const MultiViewStep(
180-
content: Text(
181-
'Akkoord',
182-
style: TextStyle(
183-
color: Colors.white,
143+
const MultiViewStep(
144+
content: Column(
145+
crossAxisAlignment: CrossAxisAlignment.start,
146+
children: [
147+
Text(
148+
'Norm',
149+
style: TextStyle(
150+
color: Colors.white,
151+
),
152+
),
153+
Text(
154+
'Selecteer gemeten temperatuur',
155+
style: TextStyle(
156+
color: Colors.white,
157+
),
158+
),
159+
SizedBox(height: 50),
160+
],
184161
),
185162
),
186-
),
187-
],
163+
const MultiViewStep(
164+
content: Column(
165+
crossAxisAlignment: CrossAxisAlignment.start,
166+
children: [
167+
Text(
168+
'Maatregel',
169+
style: TextStyle(
170+
color: Colors.white,
171+
),
172+
),
173+
Text(
174+
'Omschrijving',
175+
style: TextStyle(
176+
color: Colors.white,
177+
),
178+
),
179+
SizedBox(height: 50),
180+
],
181+
),
182+
),
183+
const MultiViewStep(
184+
content: Text(
185+
'Akkoord',
186+
style: TextStyle(
187+
color: Colors.white,
188+
),
189+
),
190+
),
191+
],
192+
),
188193
),
189194
),
190195
// button to go to next step

‎lib/src/models/stepper_theme.dart‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ class StepperTheme {
2525
this.useDashedLine = false,
2626
this.activeLineColor,
2727
this.hideStepWhenDone = false,
28+
this.stepAlignment = CrossAxisAlignment.center,
2829
});
2930

3031
/// The padding between the start of the line and the stepper indicator.
@@ -78,4 +79,7 @@ class StepperTheme {
7879

7980
/// scroll the completed steps up
8081
final bool hideStepWhenDone;
82+
83+
/// Alignment of steps in the column of steps
84+
final CrossAxisAlignment stepAlignment;
8185
}

0 commit comments

Comments
 (0)