Created
May 22, 2021 17:04
-
-
Save BlaShadow/4642dabc2dcee56e35b5d29a81124dff to your computer and use it in GitHub Desktop.
Progress view using flutter
This file contains hidden or 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
/// This is the stateful widget that the main application instantiates. | |
class MyStatefulWidget extends StatefulWidget { | |
const MyStatefulWidget({Key key}) : super(key: key); | |
@override | |
_MyStatefulWidgetState createState() => _MyStatefulWidgetState(); | |
} | |
/// This is the private State class that goes with MyStatefulWidget. | |
class _MyStatefulWidgetState extends State<MyStatefulWidget> { | |
int _index = 0; | |
@override | |
Widget build(BuildContext context) { | |
return Stepper( | |
type: StepperType.horizontal, | |
controlsBuilder: (BuildContext buildContext, {void Function() onStepCancel, void Function() onStepContinue}) { | |
return Row( | |
children: <Widget>[ | |
TextButton( | |
onPressed: onStepContinue, | |
child: const Text('NEXT'), | |
), | |
TextButton( | |
onPressed: onStepCancel, | |
child: const Text('CANCEL'), | |
), | |
], | |
); | |
}, | |
currentStep: _index, | |
onStepCancel: () { | |
if (_index > 0) { | |
setState(() { | |
_index -= 1; | |
}); | |
} | |
}, | |
onStepContinue: () { | |
if (_index <= 0) { | |
setState(() { | |
_index += 1; | |
}); | |
} | |
}, | |
onStepTapped: (int index) { | |
setState(() { | |
_index = index; | |
}); | |
}, | |
steps: <Step>[ | |
Step( | |
title: const Text('Step 1 title'), | |
content: Container( | |
alignment: Alignment.centerLeft, | |
child: const Text('Content for Step 1') | |
), | |
), | |
const Step( | |
title: Text('Step 2 title'), | |
content: Text('Content for Step 2'), | |
), | |
const Step( | |
title: Text('Step 3 title'), | |
content: Text('Content for Step 3'), | |
), | |
], | |
); | |
} | |
} | |
class StepProgressView extends StatelessWidget { | |
StepProgressView({ | |
Key key, | |
@required List<IconData> icons, | |
@required int curStep, | |
@required double width, | |
@required Color color, | |
List<String> titles | |
}) : | |
_icons = icons, | |
_titles = titles, | |
_curStep = curStep, | |
_width = width, | |
_activeColor = color, | |
assert(curStep > 0 == true && curStep <= icons.length), | |
assert(width > 0), | |
super(key: key); | |
final double _width; | |
final List<IconData> _icons; | |
final List<String> _titles; | |
final int _curStep; | |
final Color _activeColor; | |
final Color _inactiveColor = Colors.grey[100]; | |
final double lineWidth = 4.0; | |
Widget build (BuildContext context) { | |
return Container( | |
padding: EdgeInsets.only(top: 32.0, left: 24.0, right: 24.0,), | |
width: this._width, | |
child: Column( | |
children: <Widget>[ | |
Row( | |
children: _iconViews(), | |
), | |
SizedBox(height: 10,), | |
if (_titles != null) | |
Row( | |
mainAxisAlignment: MainAxisAlignment.spaceBetween, | |
children: _titleViews(), | |
), | |
]) | |
); | |
} | |
List<Widget> _iconViews() { | |
final List<Widget> list = <Widget>[]; | |
_icons.asMap() | |
.forEach((int i, IconData icon) { | |
final Color circleColor = (i == 0 || _curStep > i + 1) | |
? _activeColor | |
: _inactiveColor; | |
final Color lineColor = _curStep > i + 1 | |
? _activeColor | |
: _inactiveColor; | |
final Color iconColor = (i == 0 || _curStep > i + 1) | |
? _inactiveColor | |
: _activeColor; | |
list.add( | |
//dot with icon view | |
Container( | |
width: 30.0, | |
height: 30.0, | |
padding: EdgeInsets.all(0), | |
child: Icon(icon, color: iconColor,size: 15.0,), | |
decoration: BoxDecoration( | |
color: circleColor, | |
borderRadius: BorderRadius.all(Radius.circular(25.0)), | |
border: Border.all( | |
color: _activeColor, | |
width: 2.0, | |
), | |
), | |
), | |
); | |
//line between icons | |
if (i != _icons.length - 1) { | |
list.add( | |
Expanded( | |
child: Container(height: lineWidth, color: lineColor,) | |
) | |
); | |
} | |
}); | |
return list; | |
} | |
List<Widget> _titleViews() { | |
final List<Widget> list = <Widget>[]; | |
_titles.asMap().forEach((int i, String text) { | |
list.add(Text(text, style: TextStyle(color: _activeColor))); | |
}); | |
return list; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment