如何在 Flutter Stepper 上隐藏继续和取消按钮

Question

我想在步进器上隐藏继续和取消按钮并更改为 On Enter Text Filed 以继续该步骤。可能吗？怎么做？

谢谢

Answer 1

      class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key}) : super(key: key);

       @override
        _MyHomePageState createState() => _MyHomePageState();
       }

      class _MyHomePageState extends State<MyHomePage> {
             int _currentstep = 0;

      
       @override
      Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    centerTitle: true,
    backgroundColor: Colors.green,
    title: const Text('App',style: TextStyle(color: 
         Colors.white), ),
            ),
   

         body: Stepper(
          steps: [
    const Step(  state: _ _currentstep <= 0 ? 
      StepState.editing : StepState.complete,
      isActive: _ _currentstep >= 0,
         title: Text('Account'), content: Center(child: 
      Text('Account'),)),
     const Step(state: _ _currentstep <= 1 ? 
      StepState.editing : StepState.complete,
      isActive: _ _currentstep >= 1,title: Text('Address'), 
   content: Center(child: 
    Text('Address'),)),
      const Step(state: _ _currentstep <= 2 ? 
      StepState.editing : StepState.complete,
      isActive: _ _currentstep >= 2,title: Text('Confirm'), content: Center(child: 
      Text('Confirm'),))
           ],
      onStepContinue: () {
        if (_currentstep < (2)) {
          setState(() {
            _currentstep += 1;
          });
        } ),
        controlsBuilder: (context, details) {
        return Row(
          mainAxisAlignment: _currentstep != 0
              ? MainAxisAlignment.spaceBetween
              : MainAxisAlignment.end,
          children: [
            if (_currentstep != 0)
              ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      side: const BorderSide(color: Colors.grey),
                      shape: RoundedRectangleBorder(
                          borderRadius: 
       BorderRadius.circular(10)),
                      fixedSize: Size(20.w, 6.h),
                      elevation: 0,
                      primary: Colors.white),
                  onPressed: details.onStepCancel,
                  child: Icon(
                    Icons.arrow_back_ios,
                    color: Colors.grey[300],
                  )),
            ElevatedButton(
                style: ElevatedButton.styleFrom(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                    fixedSize: Size(45, 6),
                    primary: buttonColor),
                onPressed: details.onStepContinue,
                child: Text(
                  "Next",
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 13,
                      fontWeight: FontWeight.bold),
                ))
          ],
        );
      },
          )
         );
          }
     }

通过在控件构建器中应用条件，您可以隐藏或显示下一个或上一个。按钮

Answer 2

我已经使用此代码隐藏继续和取消。

首先声明变量hide为bool，值为false

bool hide = false;

然后在装订器中使用 controlsBuilder。

对于 Flutter >2.6

controlsBuilder: (BuildContext ctx, ControlsDetails dtl){
           return Row(
            children: <Widget>[
              TextButton(
                onPressed: dtl.onStepContinue,
                child: Text(hide == true ? '' : 'NEXT'),
              ),
              TextButton(
                onPressed: dtl.onStepCancel,
                child: Text(hide == true ? '' :'CANCEL'),
              ),
            ],
          ); 
        },

并且颤振 <= 2.5

controlsBuilder: (BuildContext context, { VoidCallback? onStepContinue, VoidCallback? onStepCancel }) {
         return Row(
           children: <Widget>[
             TextButton(
               onPressed: onStepContinue,
               child:  Text(hide == true ? '' : 'NEXT'),
             ),
             TextButton(
               onPressed: onStepCancel,
               child: Text(hide == true ? '' : 'CANCEL'),
             ),
           ],
         );
      },

CMIIW

谢谢，

Answer 3

将此添加到您的步进器中：

        child: Stepper(
          controlsBuilder: (BuildContext context, ControlsDetails controls) {
            return Row(
              children: <Widget>[
                Container(),
              ],
            );
          },

如何在 Flutter Stepper 上隐藏继续和取消按钮

How to Hide Continue and Cancel button on Flutter Stepper

android

flutter

flutter-layout