如何完全移除Flutter Stepper组件中的取消按钮

Flutter官方默认的Stepper组件没有提供单独隐藏取消按钮的配置参数，你可以通过自定义操作按钮区域的方式完全删除取消按钮，只需要给Stepper组件添加controlsBuilder属性即可，修改后的代码如下：

Widget build(BuildContext context) {
    return Scaffold(
      body: Stepper(
        currentStep: _stepIndex,       
        onStepCancel : null,
        onStepTapped: null,
        onStepContinue: () async {
          if (_stepIndex == 0) {
            if (!_isLoading) {
              String phone = _phoneNumber.substring(1, _phoneNumber.length);
              final response = await supabase
                  .from('users')
                  .select('id')
                  .eq('phone_number', phone)
                  .execute();
              response.data.length == 0 ? _signUp() : _signIn();
            }
          }
        },
        // 新增controlsBuilder自定义底部操作按钮
        controlsBuilder: (BuildContext context, ControlsDetails details) {
          return Row(
            children: <Widget>[
              // 只保留继续按钮，不渲染取消按钮
              TextButton(
                onPressed: details.onStepContinue,
                child: const Text('继续'),
              ),
            ],
          );
        },
        steps: <Step>[
          Step(
            title: const Text('Enter Phone Number'),
            content: Container(
              alignment: Alignment.centerLeft,
              child: IntlPhoneField(
                initialCountryCode: 'CA',
                onChanged: (phone) {
                  setState(() {
                    _phoneNumber = (phone.completeNumber).trim();
                  });
                },
              ),
            ),
          ),
        ],
      ),
    );
}

如果你需要调整按钮的样式、文字或者添加其他自定义控件，都可以直接在controlsBuilder返回的Widget中修改即可。

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