title: Flutter: How to make stepper UI in flutter?
body: <p>This is my stepper part code.</p>
  <p>I want my top stepper part like my first image But how to do in bottom of my stepper number.And I also want that when i cleck on my save and next button then my next index show.
  and I don't know why is showing in bottom coontinue ana cancel button I want to remove this.</p>
  <pre><code>import 'dart:io';
  
  import 'package:ddlog/ddlog.dart';
  import 'package:flutter/material.dart';
  
  class StepDemo extends StatefulWidget {
    const StepDemo({Key? key}) : super(key: key);
  
    @override
    _StepDemoState createState() =&gt; _StepDemoState();
  }
  
  class _StepDemoState extends State&lt;StepDemo&gt; {
    int _index = 0;
      go(int index) {
      if (index == -1 &amp;&amp; _index &lt;= 0) {
        ddlog(&quot;it's first Step!&quot;);
        return;
      }
  
     
  
      setState(() {
        _index += index;
      });
    }
    int current_step = 0;
    @override
    Widget build(BuildContext context) {
      return SafeArea(
        child: Scaffold(
          body: Container(
            child: Stepper(
              steps: lstStep,
              currentStep: current_step,
              type: StepperType.horizontal,
              onStepTapped: (step){
                setState(() {
                  current_step=step;
                });
              },
                    
            ),
          ),
        ),
      );
    }
  
    List&lt;Step&gt; lstStep = [
      Step(
          title: Text(
            &quot;Shop Details&quot;,
            maxLines: 2,
          ),
          
          content: Container(
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;First Name&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Last name&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Email&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Mobile Number&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Address&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Your Amount&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Category&quot;),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 30,
                    ),
                    ElevatedButton(
                      onPressed: () {
  
                      },
                      child: Text(&quot; Save And Next&quot;),
                    ),
                    SizedBox(
                      width: 8,
                    ),
                   
                  ],
                ),
              ],
            ),
          ),
          isActive: true),
      Step(
          title: Text(
            &quot;Shop Certification&quot;,
            maxLines: 2,
          ),
          content: Container(
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;First Name 1&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Last name 1&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Email 1&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Mobile Number 1&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Address 1&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Your Amount 1&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Category 1&quot;),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 30,
                    ),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text(&quot; Save And Next&quot;),
                    ),
                    SizedBox(
                      width: 8,
                    ),
                    
                  ],
                ),
              ],
            ),
          ),
          isActive: false),
      Step(
          title: Text(
            &quot;Bank Details&quot;,
            maxLines: 2,
          ),
          content: Container(
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;First Name 2&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Last name 2&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Email 2&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Mobile Number 2&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Address 2&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Your Amount 2&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Category 2&quot;),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 30,
                    ),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text(&quot; Save And Next&quot;),
                    ),
                    SizedBox(
                      width: 8,
                    ),
                   
                  ],
                ),
              ],
            ),
          ),
          isActive: false),
      Step(
          title: Text(
            &quot;Shop Image&quot;,
            maxLines: 2,
          ),
          content: Container(
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;First Name 3&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Last name 3&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Email 3&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Mobile Number 3&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Address 3&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Your Amount 3&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Category 3&quot;),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 30,
                    ),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text(&quot; Save And Next&quot;),
                    ),
                    SizedBox(
                      width: 8,
                    ),
                
                  ],
                ),
              ],
            ),
          ),
          isActive: false),
      Step(
          title: Text(
            &quot;Delivery Details&quot;,
            maxLines: 2,
          ),
          content: Container(
            child: Column(
              children: [
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;First Name 4&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Last name 4&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Email 4&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Mobile Number 4&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Address 4&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Your Amount 4&quot;),
                ),
                TextFormField(
                  decoration: InputDecoration(labelText: &quot;Category 4&quot;),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 30,
                    ),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text(&quot; Save And Next&quot;),
                    ),
                    SizedBox(
                      width: 8,
                    ),
                 
                  ],
                ),
              ],
            ),
          ),
          isActive: false),
    ];
  }
  
  </code></pre>
  <p>How to make a custom stepper like this.</p>
  <p><a href="https://i.stack.imgur.com/nkuz5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nkuz5.jpg" alt="enter image description here" /></a></p>
  <p>I want to make stepper like this and when i Click on save and nect button then my next page will go another page.</p>
  <p>but my stepper is becoming like this.
  <a href="https://i.stack.imgur.com/YZXLc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YZXLc.jpg" alt="enter image description here" /></a></p>