Skip to content

Commit ceea128

Browse files
CodeThomnicsCodeThomnics
authored
Merge pull request #5 from Iconica-Development/feature/add_step_indicator_themes
Added theming for the different states of the stap indicators
2 parents b25ed7e + 65cec0e commit ceea128

10 files changed

Lines changed: 146 additions & 58 deletions

File tree

‎example/ios/Flutter/AppFrameworkInfo.plist‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@
2121
<key>CFBundleVersion</key>
2222
<string>1.0</string>
2323
<key>MinimumOSVersion</key>
24-
<string>9.0</string>
24+
<string>11.0</string>
2525
</dict>
2626
</plist>

‎example/ios/Runner.xcodeproj/project.pbxproj‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@
272272
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
273273
GCC_WARN_UNUSED_FUNCTION = YES;
274274
GCC_WARN_UNUSED_VARIABLE = YES;
275-
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
275+
IPHONEOS_DEPLOYMENT_TARGET = 11.0;
276276
MTL_ENABLE_DEBUG_INFO = NO;
277277
SDKROOT = iphoneos;
278278
SUPPORTED_PLATFORMS = iphoneos;
@@ -349,7 +349,7 @@
349349
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
350350
GCC_WARN_UNUSED_FUNCTION = YES;
351351
GCC_WARN_UNUSED_VARIABLE = YES;
352-
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
352+
IPHONEOS_DEPLOYMENT_TARGET = 11.0;
353353
MTL_ENABLE_DEBUG_INFO = YES;
354354
ONLY_ACTIVE_ARCH = YES;
355355
SDKROOT = iphoneos;
@@ -398,7 +398,7 @@
398398
GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
399399
GCC_WARN_UNUSED_FUNCTION = YES;
400400
GCC_WARN_UNUSED_VARIABLE = YES;
401-
IPHONEOS_DEPLOYMENT_TARGET = 9.0;
401+
IPHONEOS_DEPLOYMENT_TARGET = 11.0;
402402
MTL_ENABLE_DEBUG_INFO = NO;
403403
SDKROOT = iphoneos;
404404
SUPPORTED_PLATFORMS = iphoneos;

‎example/lib/vertical_multi.dart‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,28 @@ class _VerticalMultiPageStepperState extends State<VerticalMultiPageStepper> {
3434
),
3535
MultiStepperView(
3636
theme: StepperTheme(
37-
stepIndicatorTextStyleActive:
38-
Theme.of(context).textTheme.bodyText2?.copyWith(
39-
color: Colors.black,
40-
),
37+
stepIndicatorTheme: StepIndicatorTheme(
38+
activeBackgroundColor: Colors.white,
39+
activeTextStyle: Theme.of(context).textTheme.bodyText2?.copyWith(
40+
color: Colors.black,
41+
),
42+
activeBorder: Border.all(
43+
color: Colors.white,
44+
),
45+
inactiveBackgroundColor: Colors.black,
46+
inactiveTextStyle:
47+
Theme.of(context).textTheme.bodyText2?.copyWith(
48+
color: Colors.white,
49+
),
50+
inactiveBorder: Border.all(
51+
color: Colors.white,
52+
),
53+
completedBackgroundColor: Colors.green,
54+
completedTextStyle:
55+
Theme.of(context).textTheme.bodyText2?.copyWith(
56+
color: Colors.white,
57+
),
58+
),
4159
lineColor: Colors.white,
4260
),
4361
showAllSteps: false,

‎example/lib/vertical_single.dart‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,29 @@ class _VerticalSinglePageStepperState extends State<VerticalSinglePageStepper> {
2424
scrollDirection: Axis.vertical,
2525
child: MultiStepperView(
2626
theme: StepperTheme(
27-
stepIndicatorTextStyleActive:
28-
Theme.of(context).textTheme.bodyText2?.copyWith(
29-
color: Colors.black,
30-
),
31-
stepIndicatorTextStyleInactive:
32-
Theme.of(context).textTheme.bodyText2?.copyWith(
33-
color: Colors.white,
34-
),
27+
stepIndicatorTheme: StepIndicatorTheme(
28+
activeBackgroundColor: Colors.white,
29+
activeTextStyle:
30+
Theme.of(context).textTheme.bodyText2?.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.bodyText2?.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.bodyText2?.copyWith(
47+
color: Colors.white,
48+
),
49+
),
3550
lineColor: Colors.white,
3651
),
3752
showAllSteps: true,

‎example/pubspec.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ packages:
6868
path: ".."
6969
relative: true
7070
source: path
71-
version: "1.0.2"
71+
version: "1.1.0"
7272
flutter_test:
7373
dependency: "direct dev"
7474
description: flutter
@@ -164,5 +164,5 @@ packages:
164164
source: hosted
165165
version: "2.1.2"
166166
sdks:
167-
dart: ">=2.17.6 <3.0.0"
167+
dart: ">=2.18.0 <3.0.0"
168168
flutter: ">=1.17.0"

‎lib/src/models/step_indicator_theme.dart‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// SPDX-FileCopyrightText: 2022 Iconica
2+
//
3+
// SPDX-License-Identifier: BSD-3-Clause
4+
5+
import 'package:flutter/material.dart';
6+
7+
class StepIndicatorTheme {
8+
const StepIndicatorTheme({
9+
this.completedBackgroundColor,
10+
this.completedBorder,
11+
this.completedTextStyle,
12+
this.inactiveBackgroundColor,
13+
this.inactiveBorder,
14+
this.inactiveTextStyle,
15+
this.activeBackgroundColor,
16+
this.activeBorder,
17+
this.activeTextStyle,
18+
});
19+
20+
final Color? activeBackgroundColor;
21+
22+
final BoxBorder? activeBorder;
23+
24+
final TextStyle? activeTextStyle;
25+
26+
final Color? inactiveBackgroundColor;
27+
28+
final BoxBorder? inactiveBorder;
29+
30+
final TextStyle? inactiveTextStyle;
31+
32+
final Color? completedBackgroundColor;
33+
34+
final BoxBorder? completedBorder;
35+
36+
final TextStyle? completedTextStyle;
37+
}

‎lib/src/models/stepper_theme.dart‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// SPDX-License-Identifier: BSD-3-Clause
44

55
import 'package:flutter/material.dart';
6+
import 'package:flutter_stepper/src/models/step_indicator_theme.dart';
67

78
class StepperTheme {
89
/// The theme for the [MultiStepperView].
@@ -12,8 +13,7 @@ class StepperTheme {
1213
this.lineDashLength = 5,
1314
this.lineDashGapLength = 3,
1415
this.lineColor = Colors.black,
15-
this.stepIndicatorTextStyleActive,
16-
this.stepIndicatorTextStyleInactive,
16+
this.stepIndicatorTheme = const StepIndicatorTheme(),
1717
this.stepIndicatorSize = 30,
1818
this.iconDone = Icons.check,
1919
this.iconSize = 20,
@@ -37,11 +37,8 @@ class StepperTheme {
3737
/// The color of the line.
3838
final Color lineColor;
3939

40-
/// The style of the step indicator text while active
41-
final TextStyle? stepIndicatorTextStyleActive;
42-
43-
/// The style of the step indicator text while inactive.
44-
final TextStyle? stepIndicatorTextStyleInactive;
40+
/// The style of the step indicator for the different states
41+
final StepIndicatorTheme stepIndicatorTheme;
4542

4643
/// Height and width of the step indicator.
4744
final double stepIndicatorSize;

‎lib/src/stepper.dart‎

Lines changed: 51 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ class MultiStepperView extends StatelessWidget {
6060

6161
@override
6262
Widget build(BuildContext context) {
63+
var indicatorTheme = theme.stepIndicatorTheme;
6364
if (!showAllSteps) {
6465
return Row(
6566
crossAxisAlignment: CrossAxisAlignment.start,
@@ -78,7 +79,7 @@ class MultiStepperView extends StatelessWidget {
7879
child: Center(
7980
child: Text(
8081
(currentStep + (zeroIndexed ? 0 : 1)).toString(),
81-
style: theme.stepIndicatorTextStyleActive ??
82+
style: indicatorTheme.activeTextStyle ??
8283
Theme.of(context).textTheme.bodyText2,
8384
),
8485
),
@@ -129,57 +130,69 @@ class MultiStepperView extends StatelessWidget {
129130
height: theme.stepIndicatorSize,
130131
decoration: BoxDecoration(
131132
shape: BoxShape.circle,
132-
border: Border.all(
133-
color: theme
134-
.stepIndicatorTextStyleInactive
135-
?.color ??
136-
Colors.black,
137-
),
133+
border: currentStep == i
134+
? indicatorTheme.activeBorder
135+
: currentStep >=
136+
(i + (zeroIndexed ? 0 : 1))
137+
? indicatorTheme.completedBorder
138+
: indicatorTheme
139+
.inactiveBorder ??
140+
Border.all(
141+
color: Theme.of(context)
142+
.primaryColor,
143+
),
138144
color: currentStep == i
139-
? theme
140-
.stepIndicatorTextStyleInactive
141-
?.color
145+
? indicatorTheme
146+
.activeBackgroundColor
142147
: currentStep >=
143148
(i + (zeroIndexed ? 0 : 1))
144-
? theme
145-
.stepIndicatorTextStyleInactive
146-
?.color
147-
: theme
148-
.stepIndicatorTextStyleActive
149-
?.color,
149+
? indicatorTheme
150+
.completedBackgroundColor
151+
: indicatorTheme
152+
.inactiveBackgroundColor ??
153+
Theme.of(context)
154+
.primaryColor,
150155
),
151156
child: Center(
152157
child: currentStep >=
153-
(i + (zeroIndexed ? 0 : 1))
158+
_getIndexNumber(
159+
index: i,
160+
zeroIndexed: zeroIndexed,
161+
)
154162
? Icon(
155163
theme.iconDone,
156164
size: theme.iconSize,
157165
color: currentStep == i
158-
? theme
159-
.stepIndicatorTextStyleActive
166+
? indicatorTheme
167+
.completedTextStyle
160168
?.color
161169
: currentStep >=
162-
(i +
163-
(zeroIndexed
164-
? 0
165-
: 1))
166-
? theme
167-
.stepIndicatorTextStyleActive
170+
_getIndexNumber(
171+
index: i,
172+
zeroIndexed:
173+
zeroIndexed,
174+
)
175+
? indicatorTheme
176+
.completedTextStyle
168177
?.color
169-
: theme.stepIndicatorTextStyleInactive
178+
: indicatorTheme
179+
.inactiveTextStyle
170180
?.color ??
171181
Theme.of(context)
172182
.textTheme
173183
.bodyText2
174184
?.color,
175185
)
176186
: Text(
177-
(i + (zeroIndexed ? 0 : 1))
178-
.toString(),
187+
_getIndexNumber(
188+
index: i,
189+
zeroIndexed: zeroIndexed,
190+
).toString(),
179191
style: currentStep == i
180-
? theme
181-
.stepIndicatorTextStyleActive
182-
: theme.stepIndicatorTextStyleInactive ??
192+
? indicatorTheme
193+
.activeTextStyle
194+
: indicatorTheme
195+
.inactiveTextStyle ??
183196
Theme.of(context)
184197
.textTheme
185198
.bodyText2,
@@ -263,4 +276,11 @@ class MultiStepperView extends StatelessWidget {
263276
);
264277
}
265278
}
279+
280+
int _getIndexNumber({
281+
required int index,
282+
required bool zeroIndexed,
283+
}) {
284+
return index + (zeroIndexed ? 0 : 1);
285+
}
266286
}

‎lib/stepper.dart‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,6 @@
55
library stepper;
66

77
export 'src/models/step.dart';
8+
export 'src/models/step_indicator_theme.dart';
89
export 'src/models/stepper_theme.dart';
910
export 'src/stepper.dart';

‎pubspec.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
name: flutter_stepper
22
description: Flutter package to create a Stepper widget that can be used to display a sequence of steps with a line between each step.
3-
version: 1.0.2
3+
version: 1.1.0
44
homepage: https://github.com/Iconica-Development/stepper
55

66
environment:
7-
sdk: ">=2.17.6 <3.0.0"
7+
sdk: ">=2.18.0 <3.0.0"
88
flutter: ">=1.17.0"
99

1010
dependencies:

0 commit comments

Comments
 (0)