Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to achieve this connected dot layout in flutter?

I want to create something like this :-

enter image description here

How can I achieve these connected dots layout that act as a tab bar. Is there any package available to do so?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>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(),
      )
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading