How to add textformfields in icon stepper in flutter?

Question

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

  @override
  State<iconstep> createState() => _iconstepState();
}

class _iconstepState extends State<iconstep> {
  int stepIndex =0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15.0),
            ),
            child: IconStepper(
              steppingEnabled: true,
              stepRadius: 25.0,
              stepColor: kPrimaryLightColor,
              direction: Axis.vertical,
              activeStepColor: kPrimaryLightColor,
              activeStepBorderColor: Colors.white,
              icons: [ 
                Icon(Icons.task_alt,color: Colors.grey,),
                Icon(Icons.directions_bus,color: Colors.grey,),
                Icon(Icons.restaurant,color: Colors.grey,),
                Icon(Icons.hotel,color: Colors.grey,),
                Icon(Icons.note_alt,color: Colors.grey,),
              ],
              
            ),
          )
        ],
      ),
    );
  }
}

Hi, I am very new to flutter. I want to make a icon stepper which will take input through textformfields. I cannot add textformfields in this icon stepper. this is the code.

Answer 1

You can use onStepReached to track the current step.

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

  @override
  State<iconstep> createState() => _iconstepState();
}

class _iconstepState extends State<iconstep> {
  int stepIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15.0),
            ),
            child: IconStepper(
              steppingEnabled: true,
              stepRadius: 25.0,
              onStepReached: (index) {
                setState(() {
                  stepIndex = index;
                });
              },
              // stepColor: kPrimaryLightColor,
              direction: Axis.vertical,
              // activeStepColor: kPrimaryLightColor,
              activeStepBorderColor: Colors.white,
              icons: [
                Icon(
                  Icons.task_alt,
                  color: Colors.grey,
                ),
                Icon(
                  Icons.directions_bus,
                  color: Colors.grey,
                ),
              ],
            ),
          ),
          Expanded(
              child: [ //your pages
            TextFormField(), 
            Text("directions_bus"),
          ].elementAt(stepIndex))
        ],
      ),
    );
  }
}

Also I will prefer PageView on Expanded