Flutter Custom AppBar display with user progress indicator

Question

I am trying to customize the appbar with progress bar indicator based user continues to visit pages, the indicator dynamically should change without tapping them ,Example if user completes my Info page then click on continue then indicator circle color should change.Please can someone help on this design and functionality it will be really appreciated

Here is exact design

Here is my code , and it display like

import 'package:flutter/material.dart';

class Appbarbottomview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80,
     // width: double.infinity,
      child: Row(
       // crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Column(

            children: <Widget>[
              Row(

                children: <Widget>[

                  Column(

                    children: <Widget>[
                      Row(                      
                        children: <Widget>[                       
                          Container(
                            height: 2,
                            //width: double.infinity,
                            width: 80,
                            color: Colors.red,
                           // margin: const EdgeInsets.only(left: 0.0,top: 5,right: 0.0),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Container(
                        height: 50,
                        width: 0,
                        child: Icon(
                          Icons.check_circle,
                          size: 25,
                        ),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.blue,

                        ),
                      )

                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Container(
                           width: 50,
                           color: Colors.red,

                          // margin: const EdgeInsets.only(right:10,top:5,left:10.0),
                          ),
                        ],
                      ),
                    ],
                  )
                ],
              ),
              Container(
                child:Text('My info'),
              ),
            ],
          ),
          Column(

            children: <Widget>[
              Row(

                children: <Widget>[

                  Column(

                    children: <Widget>[
                      Row(                      
                        children: <Widget>[                       
                          Container(
                            height: 2,
                           // width: double.infinity,
                            width: 80,
                            color: Colors.red,
                           // margin: const EdgeInsets.only(left: 0.0,top: 5,right: 0.0),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Container(
                        height: 50,
                        width: 2,
                        child: Icon(
                          Icons.check_circle,
                          size: 25,
                        ),
                        decoration: BoxDecoration(
                        shape: BoxShape.circle,

                        ),
                      )

                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Container(
                           width: 50,
                           color: Colors.red, 
                          // margin: const EdgeInsets.only(right:5,top:5,left:10.0),
                          ),
                        ],
                      ),
                    ],
                  )
                ],
              ),
              Container(
                child: Text('Company Info'),
              ),
            ],
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Row(

                children: <Widget>[

                  Column(

                    children: <Widget>[
                      Row(                      
                        children: <Widget>[                       
                          Container(
                            height: 2,
                           // width: double.infinity,
                            width: 80,
                            color: Colors.red,
                           // margin: const EdgeInsets.only(left: 10.0,top: 10,right: 10.0),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Container(
                        height: 50,
                        width: 5,
                        child: Icon(
                          Icons.check_circle,
                          size: 25,
                        ),
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,

                        ),
                      )

                    ],
                  ),
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Container(
                           width: 50,
                           color: Colors.red, 
                          // margin: const EdgeInsets.only(right:0,top:5,left:0.0),
                          ),
                        ],
                      ),
                    ],
                  )
                ],
              ),
              Container(
                child: Text('Submit'),
              ),

            ],
          ),

        ],
      ),
    );
  }
}

Answer 1

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';

class StepProgressView extends StatelessWidget {
  final double _width;

  final List<String> _titles;
  final int _curStep;
  final Color _activeColor;
  final Color _inactiveColor = HexColor("#E6EEF3");
  final double lineWidth = 3.0;

  StepProgressView(
      {Key key,
      @required int curStep,
      List<String> titles,
      @required double width,
      @required Color color})
      : _titles = titles,
        _curStep = curStep,
        _width = width,
        _activeColor = color,
        assert(width > 0),
        super(key: key);

  Widget build(BuildContext context) {
    return Container(
        width: this._width,
        child: Column(
          children: <Widget>[
            Row(
              children: _iconViews(),
            ),
            SizedBox(
              height: 8,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: _titleViews(),
            ),
          ],
        ));
  }

  List<Widget> _iconViews() {
    var list = <Widget>[];
    _titles.asMap().forEach((i, icon) {
      var circleColor = (i == 0 || _curStep > i + 1) ? _activeColor : _inactiveColor;
      var lineColor = _curStep > i + 1 ? _activeColor : _inactiveColor;
      var iconColor = (i == 0 || _curStep > i + 1) ? _activeColor : _inactiveColor;

      list.add(
        Container(
          width: 20.0,
          height: 20.0,
          padding: EdgeInsets.all(0),
          decoration: new BoxDecoration(
            /* color: circleColor,*/
            borderRadius: new BorderRadius.all(new Radius.circular(22.0)),
            border: new Border.all(
              color: circleColor,
              width: 2.0,
            ),
          ),
          child: Icon(
            Icons.circle,
            color: iconColor,
            size: 12.0,
          ),
        ),
      );

      //line between icons
      if (i != _titles.length - 1) {
        list.add(Expanded(
            child: Container(
          height: lineWidth,
          color: lineColor,
        )));
      }
    });

    return list;
  }

  List<Widget> _titleViews() {
    var list = <Widget>[];
    _titles.asMap().forEach((i, text) {
      list.add(Text(text, style: TextStyle(color: HexColor("#000000"))));
    });
    return list;
  }
}

// call this call variable

final List<String> titles = [TextConstant.CART, TextConstant.ADDRESS, TextConstant.PAYMENT];
  int _curStep = 2;

//use any class below this line

StepProgressView(width: MediaQuery.of(context).size.width,curStep: _curStep,color: Color(0xff50AC02),titles: titles),