带有用户进度指示器的 Flutter 自定义 AppBar 显示答案

【问题标题】：Flutter Custom AppBar display with user progress indicator带有用户进度指示器的 Flutter 自定义 AppBar 显示
【发布时间】：2020-05-18 15:39:27
【问题描述】：

我正在尝试使用基于进度条指示器的用户继续访问页面来自定义应用栏，指示器应动态更改而无需点击它们，例如，如果用户完成我的信息页面然后单击继续，则指示器圆圈颜色应更改。请有人对此设计和功能提供帮助，我们将不胜感激

这是精确的设计

这是我的代码，它显示如下

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

            ],
          ),

        ],
      ),
    );
  }
}

【问题讨论】：

使用Stepper 小部件，网上有很多例子。
我尝试过使用水平步进器，但它与我的 UI/UX 不匹配，并且步进器的标题水平显示，甚至连线都不会从起点覆盖 - @Yann39

标签： flutter dart flutter-layout flutter-animation

【解决方案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),

【讨论】：