帶有用戶進度指示器的 Flutter 自定義 AppBar 顯示

Question

我正在嘗試使用基於進度條指示器的用戶繼續訪問頁面來自定義應用欄，指示器應動態更改而無需點擊它們，例如，如果用戶完成我的信息頁面然后單擊繼續然后指示器圓圈顏色應更改。請有人幫忙這種設計和功能將不勝感激

這是確切的設計

這是我的代碼，它顯示為

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

// 調用這個調用變量

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

//使用此行下方的任何類

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