步进器的自定义按钮设计

Question

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

Answer 1

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

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