Пользовательский дизайн кнопок для степпера

Question

Я использую Stepper в своем приложении. Я застрял в положении, когда мне нужно разработать и продолжить, а затем отменить / вернуться на заказ. Как я пытаюсь определить, как я могу реализовать свой собственный дизайн для этого.

Answer 1

Я нашел решение для разработки пользовательских кнопок для Stepper.Это может быть достигнуто с помощью 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,),
                              ],
                            );