Stepper Widget -Flutter

We will learn about the Flutter Stepper widget in this article. Step-by-step progress is shown on a stepper widget.

In this post, we will look at the process of adding a Stepper to an application by creating an app with infinite content of Mobile Application. 

Step-by-Step Implementation


Step 1: Create a New Project in Android Studio (File >new flutter project).


Step 2: Adding material package 

Import method the runApp method in the main function call first while run the application.

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Creating a stateless widget  

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);

     }

 }

Step 4: Below code write a Step List in a flutter.
 List<Step> stepList() => [
   Step(
     state: _activeCurrentStep <= 0 ? StepState.editing : StepState.complete,
     isActive: _activeCurrentStep >= 0,
     title: const Text(''),
     content: Container(
       child: Column(
         children: [
           TextField(
             controller: name,
             decoration: const InputDecoration(
               border: OutlineInputBorder(),
               labelText: '',
             ),
           ),
         ],
       ),
     ),
   ),
   Step(
       state:
       _activeCurrentStep <= 1 ? StepState.editing : StepState.complete,
       isActive: _activeCurrentStep >= 1,
       title: const Text(''),
      content: Container(
        child: Column(
          children: [
            TextField(
              controller: address,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: '',
              ),
            ),
            ),
          ],
        ),
      )),
  ];
Step 5: Final code of Step List.
 import 'package:flutter/material.dart';

 void main() {
   runApp(Steppermain());
 }
 class Steppermain extends StatefulWidget {
   const Steppermain({Key? key}) : super(key: key);
   @override
   stepper createState() => stepper();
 }

 class stepper extends State<Steppermain> {
   int _activeCurrentStep = 0;
   TextEditingController name = TextEditingController();
   TextEditingController email = TextEditingController();
   TextEditingController pass = TextEditingController();
   TextEditingController address = TextEditingController();
   TextEditingController pincode = TextEditingController();

   List<Step> stepList() => [
     Step(
       state: _activeCurrentStep <= 0 ? StepState.editing : StepState.complete,
       isActive: _activeCurrentStep >= 0,
       title: const Text('Details'),
       content: Container(
         child: Column(
           children: [
             TextField(
               controller: name,
               decoration: const InputDecoration(
                 border: OutlineInputBorder(),
                labelText: 'Name',
              ),
            ),
            const SizedBox(
              height: 8,
            ),
            TextField(
              controller: email,
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Email Address',
              ),
            ),
            const SizedBox(
              height: 8,
            ),

          ],
        ),
      ),
    ),
    Step(
        state:
        _activeCurrentStep <= 1 ? StepState.editing : StepState.complete,
        isActive: _activeCurrentStep >= 1,
        title: const Text('Address'),
        content: Container(
          child: Column(
            children: [
              const SizedBox(
                height: 8,
              ),
              TextField(
                controller: address,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Your Address',
                ),
              ),
              const SizedBox(
                height: 8,
              ),
              TextField(
                controller: pincode,
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Pin Code',
                ),
              ),
            ],
          ),
        )),
    Step(
        state: StepState.complete,
        isActive: _activeCurrentStep >= 2,
        title: const Text('Confirm'),
        content: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text('Name: ${name.text}'),
                Text('Email: ${email.text}'),
                Text('Address : ${address.text}'),
                Text('PinCode : ${pincode.text}'),
              ],
            )))
    ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Stepper'),
      ),
      body: Stepper(
        type: StepperType.horizontal,
        currentStep: _activeCurrentStep,
        steps: stepList(),
        onStepContinue: () {
          if (_activeCurrentStep < (stepList().length - 1)) {
            setState(() {
              _activeCurrentStep += 1;
            });
          }
        },
        onStepCancel: () {
          if (_activeCurrentStep == 0) {
            return;
          }

          setState(() {
            _activeCurrentStep -= 1;
          });
        },
        onStepTapped: (int index) {
          setState(() {
            _activeCurrentStep = index;
          });
         },
       ),
     );
   }
 }
Step 6: Output of above example.


Happy coding!

365Bloggy June 14, 2024
Share this post
Tags
SUBSCRIBE THIS FORM

Subscribe Thanks

Recent Posts
How to add a Snackbar in Android
0 540
Zoom In and Out to TextView in Android
0 183
How to underline text in textview
0 152
Shine Effect in Android
0 136
How to Create Marquee Text in Android?
0 116
Our blogs
Archive