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

            ],
          ),

        ],
      ),
    );
  }
}

Use the Stepper widget, there are plenty of examples on the web. — Yann39
– Yann39, Commented Feb 2, 2020 at 19:37
I have tried with horizontal stepper but it wont be match with my UI/UX and title of stepper display horizontally only even line won't cover from starting point – @Yann39 — Lingaraj Sajjan
– Lingaraj Sajjan, Commented Feb 3, 2020 at 3:18

adarsh · Accepted Answer · 2021-03-05 10:35:00Z

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

Collectives™ on Stack Overflow

Flutter Custom AppBar display with user progress indicator

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related