步进器的自定义按钮设计答案

【问题标题】：Custom buttons design for stepper步进器的自定义按钮设计
【发布时间】：2019-11-09 02:59:22
【问题描述】：

我正在我的 Flutter 应用中实现 Stepper。我被困在需要设计继续和取消/后退按钮自定义设计的位置。我如何尝试确定如何实现我的自定义设计。

【问题讨论】：

发布您的controlsBuilder 属性
我现在找到了解决方案，正如您在 controlBuilder 中提到的那样。

标签： android flutter dart hybrid-mobile-app flutter-layout

【解决方案1】：

我找到了为 Stepper 设计自定义按钮的解决方案。可以通过controlsBuilder来实现。这是我的示例代码：

controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
                            return Column(
                              children: <Widget>[
                                SizedBox(height: AppSize.smallMedium,),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    ProgressButtonWidget(
                                      backgroundColor: Colors.lightBlueAccent,
                                      buttonTitle: Constants.continueButton,
                                      tapCallback: (){
                                        setState(() {
                                          // update the variable handling the current step value
                                          // going back one step i.e adding 1, until its the length of the step
                                          if (currentStep < mySteps.length - 1) {
                                            currentStep = currentStep + 1;
                                          } else {
                                            currentStep = 0;
                                          }
                                        });
                                      },
                                    ),
                                    SizedBox(width: AppSize.small,),
                                    ProgressButtonWidget(
                                      backgroundColor: Colors.grey,
                                      buttonTitle: Constants.cancelButton,
                                      tapCallback: (){
                                        // On hitting cancel button, change the state
                                        setState(() {
                                          // update the variable handling the current step value
                                          // going back one step i.e subtracting 1, until its 0
                                          if (currentStep > 0) {
                                            currentStep = currentStep - 1;
                                          } else {
                                            currentStep = 0;
                                          }
                                        });
                                      },
                                    ),
                                  ],
                                ),
                                SizedBox(height: AppSize.smallMedium,),
                              ],
                            );

【讨论】：

【解决方案2】：

Flutter 2.8 更新后，Flutter Stepper Widget 中的自定义按钮功能发生变化。请使用此代码。Screenshot

controlsBuilder: (context, details) {
              return Padding(
                padding: const EdgeInsets.symmetric(vertical: 20),
                child: Row(
                  children: [
                    Expanded(
                        child: Container(
                      color: AppTheme.buttoncolor,
                      child: TextButton(
                        onPressed: details.onStepContinue,
                        child: Text(
                          "Next",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    )),
                    if (_currentStep != 0)
                      CupertinoButton(
                          color: AppTheme.buttoncolor,
                          borderRadius: BorderRadius.zero,
                          child: Text(
                            "Back",
                            style: TextStyle(color: Colors.white),
                          ),
                          onPressed: details.onStepCancel),
                  ],
                ),
              );
            },

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。