I want to create something like this :-
How can I achieve these connected dots layout that act as a tab bar. Is there any package available to do so?
>Solution :
the feature name is "Stepper" and you can use few reference to achieve that https://medium.flutterdevs.com/stepper-widget-in-flutter-37ce5b45575b it’s the tutorial instruction of how to use the stepper in flutter and the other one that i recognize as the very similar stepper as your UI design is available on https://stackoverflow.com/a/71656978/13497264
this is the simple stepper (cr: GeeksforGeeks)
class _MyHomePageState extends State<MyHomePage> {
// Here we have created list of steps that
// are required to complete the form
List<Step> stepList() => [
const Step(title: Text('Account'), content: Center(child: Text('Account'),)),
const Step(title: Text('Address'), content: Center(child: Text('Address'),)),
const Step(title: Text('Confirm'), content: Center(child: Text('Confirm'),))
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.green,
title: const Text('GeeksforGeeks',style: TextStyle(color: Colors.white), ),
),
// Here we have initialized the stepper widget
body: Stepper(
steps: stepList(),
)
);
}
}
and you can set the stepper into horizontal line by setting it into horizontal mode:
body: Stepper(
type: StepperType.horizontal,
steps: stepList(),
)
