Flutter Stepper按钮底部固定对齐及AppBar箭头返回步骤实现

一、固定Stepper按钮到页面底部 #

需求说明 #

需要把Flutter Stepper组件的按钮对齐到页面底部并固定，避免内容变化时按钮上下移动。当前自定义按钮的代码如下：

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(),

解决方法 #

硬编码top:200的方式无法适配内容变化，建议调整页面整体布局，让Stepper占据滚动区域，按钮单独固定在底部：

class StepperPage extends StatefulWidget {
  @override
  State<StepperPage> createState() => _StepperPageState();
}

class _StepperPageState extends State<StepperPage> {
  int _currentStep = 0;

  void continued() {
    setState(() {
      _currentStep < 2 ? _currentStep += 1 : null;
    });
  }

  void cancel() {
    setState(() {
      _currentStep > 0 ? _currentStep -= 1 : null;
    });
  }

  void tapped(int step) {
    setState(() => _currentStep = step);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Stepper Demo")),
      body: Column(
        children: [
          // Stepper占据剩余空间，内容过长自动滚动
          Expanded(
            child: Stepper(
              type: StepperType.horizontal,
              physics: const ScrollPhysics(),
              currentStep: _currentStep,
              onStepTapped: tapped,
              onStepContinue: continued,
              onStepCancel: cancel,
              steps: const <Step>[
                Step(title: Text("Step 1"), content: Text("内容1")),
                Step(title: Text("Step 2"), content: Text("内容2")),
                Step(title: Text("Step 3"), content: Text("内容3")),
              ],
              // 隐藏Stepper内部按钮，改用底部固定按钮
              controlsBuilder: (context, details) => const SizedBox.shrink(),
            ),
          ),
          // 底部固定按钮栏
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
            color: Colors.white,
            child: Row(
              children: [
                // 非第一步显示回退按钮
                if (_currentStep > 0)
                  TextButton(onPressed: cancel, child: const Text("Back")),
                const Spacer(),
                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: continued,
                  child: Container(
                    alignment: Alignment.center,
                    margin: const EdgeInsets.symmetric(horizontal: 140, vertical: 20),
                    child: const Text('Next', style: TextStyle(fontSize: 14)),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

• Expanded让Stepper自动适配剩余空间，内容过长时滚动，不会挤压按钮位置
• 底部按钮栏独立于Stepper，始终固定在页面底部，还能根据当前步骤动态控制按钮显示

二、AppBar箭头按钮实现Stepper回退 #

需求说明 #

点击AppBar的返回箭头，实现Stepper的步骤回退功能。

解决方法 #

自定义AppBar的leading按钮，点击时判断当前步骤，执行回退逻辑：

AppBar(
  title: const Text("Stepper Demo"),
  leading: IconButton(
    icon: const Icon(Icons.arrow_back),
    onPressed: () {
      if (_currentStep > 0) {
        // 非第一步，执行步骤回退
        setState(() => _currentStep -= 1);
        // 如果原有cancel()方法包含校验等逻辑，直接调用即可：cancel();
      } else {
        // 第一步，点击箭头退出页面
        Navigator.pop(context);
      }
    },
  ),
)

• 边界处理：当前是第一步时，点击箭头直接退出页面（可根据需求调整逻辑）
• 如果需要复用原有回退逻辑，直接调用cancel()方法即可，无需重复写状态更新代码

内容的提问来源于stack exchange，提问作者Mohammad alqannas