Flutter: how to dynamically create a horizontal timeline widget

Question

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

Answer 1

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,
    );
  }
}