Mohammad alqannas
Mohammad alqannas

Reputation: 425

Change the button alignment in the steper flutter & Go back the steps using the button in appbar

  1. I want to align the button at the bottom of the page and Fixed it without going up and down when the content changes
  2. The second question is how to go back the steps using the arrow in the AppBar

enter image description here

Stepper(
controlsBuilder: (context, details) => Row(
                     children: [
                       Padding(
                         padding: const EdgeInsets.only(top: 200.0),
                         child: ElevatedButton(
                             style: ButtonStyle(
                                 shape: MaterialStateProperty.all(const RoundedRectangleBorder(
                                     borderRadius: BorderRadius.only(
                                         bottomLeft: Radius.circular(17),
                                         bottomRight: Radius.circular(17),
                                         topLeft: Radius.circular(17),
                                         topRight: Radius.circular(0)))

                                 ),
                                 backgroundColor:
                                 MaterialStateProperty.all(JobberColor().appColor)),
                             onPressed: details.onStepContinue,
                             child: Container(
                               alignment: Alignment.center,
                                 margin:
                                 const EdgeInsets.symmetric(horizontal: 140, vertical: 20),
                                 child: const Text(
                                   'Next',
                                   style: TextStyle(fontSize: 14),
                                 ))),
                       ),


                     ],
                    ),
                    type: StepperType.horizontal,
                    physics: ScrollPhysics(),
                    currentStep: _currentStep,
                    onStepTapped: (step) {
                      tapped(step);

                    },
                    onStepContinue:  continued,
                    onStepCancel: cancel,
                    steps: <Step>[
                      Step(),
                      Step(),
                      Step(),


Upvotes: 0

Views: 631

Answers (1)

eamirho3ein
eamirho3ein

Reputation: 17880

You can using stack for positioned the button to the bottom of screen like this:

Stack(
    children: [
      Padding(
         padding: const EdgeInsets.only(bottom:you button height),
         child: Stepper(
               controlsBuilder:...
         ),
      ),
      Positioned(left: 0,right: 0, bottom: 16,child: your button widget),
    ],
  ),

for your second issue you can check for _currentStep and if it is not equal to first step try to reduce _currentStep and if it is pop to previous page, like this:

AppBar(
        leading: IconButton(
          icon: Icon(Icons.chevron_left),
          onPressed: () {
            if (_currentStep != 0) {
              tapped(_currentStep--);
            } else {
              Navigator.pop(context);
            }
          },
        ),
      )

Upvotes: 1

Related Questions