Skip to content

Commit 179f6f5

Browse files
authored
Create stepper.dart
1 parent 9b08b45 commit 179f6f5

File tree

1 file changed

+167
-0
lines changed

1 file changed

+167
-0
lines changed

stepper.dart

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
2+
// Post has been taken from Ranga Reddy- https://dev.to/irangareddy/custom-stepper-in-flutter-40o8
3+
4+
What is a Stepper?
5+
A stepper is a two-buttons used to increase or decrease an incremental value.
6+
By default, one button of a stepper displays a plus symbol, and the other displays a minus symbol.
7+
These symbols can be replaced with custom images if desired.
8+
9+
class StepperScreen extends StatelessWidget {
10+
@override
11+
Widget build(BuildContext context) {
12+
return Scaffold(
13+
appBar: AppBar(
14+
backgroundColor: kPrimaryColor,
15+
title: Text("Custom Stepper"),
16+
centerTitle: false,
17+
),
18+
body: SafeArea(
19+
child: Center(
20+
child: Container(
21+
height: 300,
22+
width: 200,
23+
decoration: BoxDecoration(
24+
color: Colors.white,
25+
borderRadius: BorderRadius.circular(8.0),
26+
boxShadow: [
27+
BoxShadow(
28+
color: kShadowColor,
29+
offset: Offset(0, 20),
30+
blurRadius: 30.0),
31+
]
32+
),
33+
child: Column(
34+
mainAxisAlignment: MainAxisAlignment.center,
35+
crossAxisAlignment: CrossAxisAlignment.start,
36+
children: [
37+
Padding(
38+
padding: const EdgeInsets.all(8.0),
39+
child: Container(
40+
decoration: BoxDecoration(
41+
color: Colors.black.withOpacity(0.04),
42+
borderRadius: BorderRadius.circular(8.0),
43+
),
44+
child: Padding(
45+
padding: const EdgeInsets.all(8.0),
46+
child: Image.asset('assets/images/fruit.png',fit: BoxFit.fitWidth,),
47+
),
48+
),
49+
),
50+
Padding(
51+
padding: const EdgeInsets.only(top: 8.0,left: 8.0),
52+
child: Text('Juicy Strawberry',style: TextStyle(
53+
color: Colors.black,
54+
fontSize: 18.0,
55+
),),
56+
),
57+
Padding(
58+
padding: const EdgeInsets.only(top: 8.0,left: 8.0),
59+
child: Row(
60+
children: [
61+
Text('\$20.40',style: TextStyle(
62+
color: Colors.black,
63+
fontSize: 15.0,
64+
fontWeight: FontWeight.bold,
65+
),),
66+
Spacer(),
67+
CustomStepper()
68+
],
69+
),
70+
),
71+
72+
],
73+
),
74+
)),
75+
),
76+
);
77+
}
78+
}
79+
80+
81+
82+
class CustomStepper extends StatefulWidget {
83+
CustomStepper({
84+
@required this.lowerLimit,
85+
@required this.upperLimit,
86+
@required this.stepValue,
87+
@required this.iconSize,
88+
@required this.value,
89+
});
90+
91+
final int lowerLimit;
92+
final int upperLimit;
93+
final int stepValue;
94+
final double iconSize;
95+
int value;
96+
97+
@override
98+
_CustomStepperState createState() => _CustomStepperState();
99+
}
100+
101+
class _CustomStepperState extends State<CustomStepper> {
102+
103+
@override
104+
Widget build(BuildContext context) {
105+
return Row(
106+
mainAxisAlignment: MainAxisAlignment.center,
107+
children: [
108+
RoundedIconButton(
109+
icon: Icons.remove,
110+
iconSize: widget.iconSize,
111+
onPress: () {
112+
setState(() {
113+
widget.value =
114+
widget.value == widget.lowerLimit ? widget.lowerLimit : widget.value -= widget.stepValue;
115+
});
116+
},
117+
),
118+
Container(
119+
width: widget.iconSize,
120+
child: Text(
121+
'${widget.value}',
122+
style: TextStyle(
123+
fontSize: widget.iconSize * 0.8,
124+
),
125+
textAlign: TextAlign.center,
126+
),
127+
),
128+
RoundedIconButton(
129+
icon: Icons.add,
130+
iconSize: widget.iconSize,
131+
onPress: () {
132+
setState(() {
133+
widget.value =
134+
widget.value == widget.upperLimit ? widget.upperLimit : widget.value += widget.stepValue;
135+
});
136+
},
137+
),
138+
],
139+
);
140+
}
141+
}
142+
143+
144+
145+
class RoundedIconButton extends StatelessWidget {
146+
RoundedIconButton({@required this.icon, @required this.onPress, @required this.iconSize});
147+
148+
final IconData icon;
149+
final Function onPress;
150+
final double iconSize;
151+
152+
@override
153+
Widget build(BuildContext context) {
154+
return RawMaterialButton(
155+
constraints: BoxConstraints.tightFor(width: iconSize, height: iconSize),
156+
elevation: 6.0,
157+
onPressed: onPress,
158+
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(iconSize*0.2)),
159+
fillColor: Color(0xFF65A34A),
160+
child: Icon(
161+
icon,
162+
color: Colors.white,
163+
size: iconSize * 0.8,
164+
),
165+
);
166+
}
167+
}

0 commit comments

Comments
 (0)