I wanna hide Continue and Cancel Button on Stepper And change to On Enter Text Filed for continuing the step. Is it possible? How to do that?

Thanks

CodePudding user response：

I have already used this code for hiding Continue and Cancel.

Firt declare variable hide as bool and the value is false

bool hide = false;

Then use controlsBuilder in the stapper.

For 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'),
              ),
            ],
          ); 
        },

And for flutter <= 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

Thanks,

CodePudding user response：

      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),
                ))
          ],
        );
      },
          )
         );
          }
     }

by applying condition in controls builder you can hide or show the next or previous. button