CODEWITHSUNDEEP
flutter
user2570135
user2570135

Reputation: 2999

Flutter: how to dynamically create a horizontal timeline widget

I am creating 4 pages (forms)in flutter that has next and prev button on the bottom of the form . Then depending on the active page, I would like to show the user the image attached on the top of each page

The image show that user is on page 3 and prev 2 pages are completed

How can I create this. ?

Thanks for your help

enter image description here

Upvotes: 5

Views: 6555

Answers (2)

milano zz
milano zz

Reputation: 116

there are some packages at pub.dev for what you want, you can try those 2 packages :

  1. https://pub.dev/packages/timelines
  2. https://pub.dev/packages/timeline_tile

Upvotes: 0

Sukhi
Sukhi

Reputation: 14195

In my opinion, there's no readymade package to do this. You'll have to write your own class to achieve and it is fairly easy. Sample code below and full code here.

Just call the class below as ScreenProgress(ticks:2) and it'll return something similar to the image in your question.

Note : Use the code below as a sample (and not a final implementation).

class ScreenProgress extends StatelessWidget {

  final int ticks;

  ScreenProgress({@required this.ticks});


  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        tick1(),
        spacer(),
        line(),
        spacer(),
        tick2(),
        spacer(),
        line(),
        spacer(),
        tick3(),
        spacer(),
        line(),
        spacer(),
        tick4(),
      ],
    );


  }

  Widget tick(bool isChecked){
    return isChecked?Icon(Icons.check_circle,color: Colors.blue,):Icon(Icons.radio_button_unchecked, color: Colors.blue,);
  }

  Widget tick1() {
    return this.ticks>0?tick(true):tick(false);
  }
  Widget tick2() {
    return this.ticks>1?tick(true):tick(false);
  }
  Widget tick3() {
    return this.ticks>2?tick(true):tick(false);
  }
  Widget tick4() {
    return this.ticks>3?tick(true):tick(false);
  }

  Widget spacer() {
    return Container(
      width: 5.0,
    );
  }

  Widget line() {
    return Container(
      color: Colors.blue,
      height: 5.0,
      width: 50.0,
    );
  }
}

Upvotes: 6

Related Questions