How to achieve this connected dot layout in flutter?

Question

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?

score 1 · Answer 1 · answered Sep 12 '22 at 06:55

You can create Horizontal Stepper in Flutter without any package

Container(
  child: Column(
    children: [
      Expanded(
        child: Stepper(
          type: StepperType.horizontal,
          physics: ScrollPhysics(),
          currentStep: _stepNumber,
          onStepTapped: (step) => onTapped(step),
          onStepContinue:  onContinued,
          onStepCancel: onCancel,
          steps: <Step>[
            Step(
              title: new Text(''),
              content: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Email'),
                  ),
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Password'),
                  ),
                ],
              ),
              isActive: _stepNumber >= 0,
              state: _stepNumber >= 0 ?
              StepState.complete : StepState.disabled,
            ),
            Step(
              title: new Text(''),
              content: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Home'),
                  ),
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Post Code'),
                  ),
                ],
              ),
              isActive: _stepNumber >= 0,
              state: _stepNumber >= 1 ?
              StepState.complete : StepState.disabled,
            ),
            Step(
              title: new Text(''),
              content: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Number'),
                  ),
                ],
              ),
              isActive:_stepNumber >= 0,
              state: _stepNumber >= 2 ?
              StepState.complete : StepState.disabled,
            ),
            Step(
              title: new Text(''),
              content: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Number'),
                  ),
                ],
              ),
              isActive:_stepNumber >= 0,
              state: _stepNumber >= 3 ?
              StepState.complete : StepState.disabled,
            ),
          ],
        ),
      ),
    ],
  ),
)


onTapped(int step){
  setState(() => _stepNumber = step);
}

onContinued(){
  _stepNumber < 3 ?
  setState(() => _stepNumber += 1): null;
}
onCancel(){
  _stepNumber > 0 ?
  setState(() => _stepNumber -= 1) : null;
}

1988 · Answer 2 · 2022-09-12T06:59:20.833

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(),
      )

Thanks a lot.... saved a lot of my time. – Shashank Deepak Sep 12 '22 at 06:58 — Shashank Deepak, Sep 12 '22 at 06:58

score 1 · Accepted Answer · answered Sep 12 '22 at 07:33

You can use this plugin import timelines: ^0.1.0

import 'package:timelines/timelines.dart';


@override
Widget build(BuildContext context) {
  return Timeline.tileBuilder(
    builder: TimelineTileBuilder.fromStyle(
      contentsAlign: ContentsAlign.alternating,
      contentsBuilder: (context, index) => Padding(
        padding: const EdgeInsets.all(24.0),
        child: Text('Timeline Event $index'),
      ),
      itemCount: 10,
    ),
  );
}

score 0 · Answer 4 · answered Sep 12 '22 at 06:49

0

Check this package: im_stepper, it has a lot of options to customise.

answered Sep 12 '22 at 06:49

Pathik Patel

1,347
1
9
22

How to achieve this connected dot layout in flutter?

4 Answers4