在颤动中创建指示器栏

Question

我想创建一个新的LinearProgressIndicator（）。

•当我在民意测验中选择答案时，此LinearProgressIndicator出现。•此LinearProgressIndicator与答案数量成正比。•此LinearProgressIndicator指示民意调查的进度。

我尝试了更多解决方案，但失败了。

所以我该怎么做？

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      appBar: new AppBarPollWidget()
          .getAppBar('App', 'assets/img/logo.png', cand),
      body: new Center(
        child: SingleChildScrollView(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new Flexible(
                child: new Container(
                  height: 450,
                  child: new FutureBuilder<List<PollQuestionsDto>>(
                      future: _future,
                      // ignore: missing_return
                      builder: (context, snapshot) {
                        switch (snapshot.connectionState) {
                          case ConnectionState.none:
                            return Text('Failed connection API');
                          case ConnectionState.waiting:
                            return new Text('Wait...');
                          case ConnectionState.done:
                            if (snapshot.hasData) {
                              if (snapshot.data != null) {
                                return PageView.builder(
                                  controller: controller,
                                  scrollDirection: Axis.horizontal,
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (BuildContext context, index) {
                                    return PollListViewItem(
                                      entitled: snapshot.data[index].entitled,
                                      answers: snapshot.data[index].answers,
                                      currentAnswer: this.responses[index],
                                      onSelect: (Answer answer) {
                                        this.responses[index] = answer;
                                        questionId = snapshot.data[index].id;
                                        answerId = answer.id;
                                      },
                                    );
                                  },
                                );
                              }
                            }
                            break;
                          case ConnectionState.active:
                        }
                      }),
                ),
              ),
              new LinearProgressIndicator(),
              new Container(
                margin: EdgeInsets.only(right: 10.0),
                child: new RaisedButton.icon(
                  onPressed: () async {
                    Timer(Duration(seconds: 5), () {
                      setState(() {
                        Navigator.pushReplacement(context,
                            MaterialPageRoute(builder: (context) => End()));
                      });
                    });

                    await Poll()
                        .submitPoll(answers: answersQuestion)
                        .then((value) {
                      // success
                      _scaffoldKey.currentState.showSnackBar(SnackBar(
                        content: Text('Questionnaire envoyé !'),
                        duration: Duration(seconds: 3),
                      ));
                    }).catchError((err) {
                      // fails
                      _scaffoldKey.currentState.showSnackBar(SnackBar(
                        content: Text('Echec de l envoi du questionnaire !'),
                        duration: Duration(seconds: 3),
                      ));
                    });
                  },
                  label: Text('Suivant'),
                  icon: Icon(Icons.navigate_next),
                ),
                alignment: Alignment.bottomRight,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如果您想要更多代码，请给我打电话。

谢谢！

Answer 1

使用Stack或任何其他容器。

Stack(
  alignment: AlignmentDirectional.topStart,
  children: <Widget>[
    Container(
      margin: EdgeInsets.only(bottom: 35),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          for (int i = 0; i < introWidgetsList.length; i++)
            if (i == currentPageValue) ...[circleBar(true)] else
              circleBar(false),
        ],
      ),
    ),
  ],
)

以及圆圈本身的简单Widget。

Widget circleBar(bool isActive) {
  return AnimatedContainer(
    duration: Duration(milliseconds: 150),
    margin: EdgeInsets.symmetric(horizontal: 8),
    height: isActive ? 12 : 8,
    width: isActive ? 12 : 8,
    decoration: BoxDecoration(
        color: isActive ? kOrange : klightGrey,
        borderRadius: BorderRadius.all(Radius.circular(12))),
  );
}

[发布问题之前，请先搜索问题。在Medium article中已经对此进行了解释。