Stepper 3
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:separated_row/separated_row.dart';
int activeIndex = 0;
final list = [
{
'title': 'Personal Info',
},
{
'title': 'Account',
},
{
'title': 'Confirmation',
}
];
SeparatedRow(
separatorBuilder: (context, index) {
final finish = activeIndex > index;
return Expanded(
child: Divider(
indent: 8,
endIndent: 8,
thickness: 1,
color: finish ? Colors.deepPurple : Colors.black54,
),
);
},
children: List.generate(list.length, (index) {
final isActive = activeIndex == index;
final finish = activeIndex > index;
final title = list[index]['title'].toString();
return GestureDetector(
onTap: () {
activeIndex = index;
setState(() {});
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
finish
? const Icon(
Icons.check_circle,
size: 16,
color: Colors.deepPurple,
)
: isActive
? const SizedBox(
width: 12,
height: 12,
child: CircularProgressIndicator(strokeWidth: 1),
)
: SizedBox(
width: 14,
child: Text(
'${index + 1}',
textAlign: TextAlign.center,
style: const TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
color: Colors.black45,
),
),
),
const Gap(4),
Text(
title,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 14,
color: finish
? Colors.deepPurple
: isActive
? Colors.black87
: Colors.black45,
),
),
],
),
);
}),
),