CODEWITHSUNDEEP
flutterdart
Sumchans
Sumchans

Reputation: 3774

get rid of the cancel button from Flutter stepper widget

Is there any way we could get rid of the cancel button inside of the Stepper widget? I can make it disabled, but I want to get rid of totally.

Here is my code -

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

Upvotes: 1

Views: 221

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63594

use controlsBuilder.

Result

result

 Stepper(
        currentStep: current,
        controlsBuilder: (context, {onStepCancel, onStepContinue}) {
          return Align(
              alignment: Alignment.centerLeft,
              child:
                  ElevatedButton(onPressed: () {}, child: Text("continuew")));
        },
        steps: <Step>[
          Step(
            title: const Text('Enter Phone Number'),
            content:
                Container(alignment: Alignment.centerLeft, child: TextField()),
          ),
        ],
      ),

Full widget


class Body extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  int current = 0;

  final steps = <Step>[
    Step(
      title: const Text('Enter Phone Number'),
      content: Container(alignment: Alignment.centerLeft, child: TextField()),
    ),
    Step(
      title: const Text('Enter 2 Number'),
      content: Container(alignment: Alignment.centerLeft, child: TextField()),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stepper(
        currentStep: current,
        controlsBuilder: (context, {onStepCancel, onStepContinue}) {
          return Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ElevatedButton(
                onPressed: () {
                  setState(
                    () {
                      current++;
                      if (current >= steps.length) current = 0;

                      ///Set logic here or just use onStepContinue
                    },
                  );
                },
                child: Text("continuew"),
              ),
            ),
          );
        },
        steps: steps,
      ),
    );
  }
}

Upvotes: 2

Related Questions