Reputation: 425
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
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