Flutter stepper with image and title above - flutter

Question

I am trying to create a horizontal stepper that changes based on a status. It would need a title above, different image (preferably svg) inside the circle and changing color of the divider with the same thickness.
Im trying to achieve this
I tried different approach and other packages, and I cant seem to get to make this, maybe I'm doing something wrong.
Stepper has its title on the side and the circles are checks and numbers only.
IconStepper from im_stepper package only has icons for steps, and no titles, and only dots for the divider.
EnhanceStep from enhance_stepper package has the title below the the icon, and it doesn't have a circle. I tried editing the package and the icon is not aligned with the line anymore.
Custom Widget but it is all UI and no functionality on changing the selected, and changing the index changes the color of the step itself but not the ones before it. Also the text is not aligned along the center of the step, is just aligned using Row's MainAxisAlignment.spaceBetween,
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class Testing4 extends StatefulWidget {
const Testing4({Key? key}) : super(key: key);
#override
State<Testing4> createState() => _Testing4State();
}
class _Testing4State extends State<Testing4> {
final List<int> steps = [1, 2, 3];
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
for (var step in steps) Center(child: Text('STEPPER # $step'))
],
),
SizedBox(
width: MediaQuery.of(context).size.width,
height: kToolbarHeight,
child: Stack(
alignment: Alignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: MediaQuery.of(context).size.width / 3,
child: const Divider(
color: Colors.black,
thickness: 5,
),
),
SizedBox(
width: MediaQuery.of(context).size.width / 3,
child: const Divider(
color: Colors.grey,
thickness: 5,
),
),
],
),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
for (var step in steps)
Column(
children: [
Stack(
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color:
step == 2 ? Colors.black : Colors.grey,
),
padding: const EdgeInsets.all(10),
child: Center(
child: SvgPicture.asset("assets/check.svg"),
),
)
],
),
],
)
],
),
)
],
),
),
],
)),
);
}
}

Answer 1

In the end, this one worked for me
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
class CustomStepper extends StatelessWidget {
CustomStepper({
Key? key,
required int currentStep,
required this.steps,
}) : _curStep = currentStep,
assert(currentStep >= 0 == true && currentStep <= steps.length),
super(key: key);
final int _curStep;
final Color _activeColor = Colors.black;
final Color _inactiveColor = Colors.grey.shade300;
final double lineWidth = 5.0;
final List<Map<String, dynamic>> steps;
List<Widget> _iconViews() {
var list = <Widget>[];
steps.asMap().forEach((i, icon) {
Color circleColor =
(i == 0 || _curStep >= i) ? _activeColor : _inactiveColor;
Color lineColor = _curStep > i ? _activeColor : _inactiveColor;
list.add(
Container(
width: 55.0,
height: 55.0,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: circleColor,
),
child: SvgPicture.asset(
icon['image'],
),
),
);
if (i != steps.length - 1) {
list.add(Expanded(
child: Container(
height: lineWidth,
color: lineColor,
)));
}
});
return list;
}
List<Widget> _titleViews() {
var list = <Widget>[];
steps.asMap().forEach((i, text) {
list.add(Text(text["title"], style: TextStyle(color: _activeColor)));
});
return list;
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: _titleViews(),
),
const SizedBox(
height: 10,
),
Row(
children: _iconViews(),
),
],
);
}
}