Flutter Stepper - Show all content

Question

I need a Stepper just to show the current status of something (in steps). Therefore I would like to display the content for all states at once. I removed the default Continue and Cancel buttons, but it only shows the content of the first Step.

This is my code:

body: Center(
        child: new Stepper(
          steps: my_steps,
          controlsBuilder: (BuildContext context,
              {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Row(
              children: <Widget>[
                Container(
                  child: null,
                ),
                Container(
                  child: null,
                ),
              ],
            );
          },
        ),
      ),

And these are my Steps:

List<Step> my_steps = [
    new Step(
        title: new Text("Step 1"),
        content: new Text("Hello 1!")),
    new Step(
        title: new Text("Step 2"),
        content: new Text("Hello 2!")
    ),
    new Step(
        title: new Text("Step 3"),
        content: new Text("Hello World!"),
    )
  ];

And here it only shows "Hello 1" for the first step. For the rest the content is empty.

Anyone?

Answer 1

I did it:

1. Clone the Stepper class of the MaterialUI from the directory flutter/lib/src/material/stepper.dart to another directory in your project. For example, you copy it and rename to your /lib/widget/modified_stepper.dart.

2. Rename the 2 class names in the new modified_stepper.dart so that it's not gonna cause conflicts when you use it. There are 2 classes to be renamed: Stepper and Step. For example, rename them to ModifiedStepper and ModifiedStep.

(Tips: If you are using Visual Studio Code, you can use multiple cursor to perform the renaming faster by moving your cursor to the class name, then press Ctrl + F2 (Windows) or Cmd + F2 (Mac))

3. In this new ModifiedStepper class, find the method _isCurrent, it will look like this:

bool _isCurrent(int index) {
  return widget.currentStep == index;
}

This method is used to detect which step is currently displayed: if the currentStep is equal to the index of the step, the step then be displayed. So simply do a trick: return true always will work the way you expected:

bool _isCurrent(int index) {
  return true;
  // return widget.currentStep == index;
}

And now you can import your ModifiedStepper to use.

Answer 2

Simply you can use isActive tag in Step to show which all status has been completed by the users. I guess this will help you to display current status of something.

To set which all status is marked -

bool getIsActive(int currentIndex, int index){
  if(currentIndex<=index){
    return true;
  }else{
    return false;
  }
}

And your code

body: Center(
    child: new Stepper(
      steps: [
    new Step(
      title: new Text("Step 1"),
      content: new Text("Hello 1!"),
      isActive: getIsActive(0,_index),
    ),
    new Step(
      title: new Text("Step 2"),
      content: new Text("Hello 2!"),
      isActive: getIsActive(1,_index),
    ),
    new Step(
      title: new Text("Step 3"),
      content: new Text("Hello World!"),,
      isActive: getIsActive(2,_index),
    )
   ],
      controlsBuilder: (BuildContext context,
          {VoidCallback onStepContinue, VoidCallback onStepCancel}) => Container(),
    ),
  ),

Answer 3

From my understanding of your issue you actually have two issues.

1. The first issue is that you are not using the appropriate Flutter Widget to accomplish your task.

2. The second issue is that you have a bug in your Stepper example code.

Since fixing issue #2 will not solve issue #1 in any manner I am going to suggest the following as your solution:

The implicit manner in which Flutter's Stepper Widget works mutually excludes showing all steps in an active state simultaneously. Basically Stepper isn't designed to do what you desire. In your case a better approach might be to use something like ListBuilder:

import 'dart:io' as Io;
import 'package:flutter/material.dart';

class zListTileExample extends StatefulWidget {
  zListTileExample({Key key}) : super(key: key);

  @override
  zListTileExampleState createState() => zListTileExampleState();
}

class zListTileExampleState extends State <zListTileExample> {

  List<SampleStepTile> my_steps = [
    new SampleStepTile(
        title: new Text("Step 1"),
        content: new Text("Hello 1!")),
    new SampleStepTile(
        title: new Text("Step 2"),
        content: new Text("Hello 2!")
    ),
    new SampleStepTile(
      title: new Text("Step 3"),
      content: new Text("Hello World!"),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
    title: Text("My App Title"),
    ),
    body:

        ListView.builder(
          itemCount: my_steps.length,
          itemBuilder: (context, index) {
              return
                Column ( children: <Widget> [
                  ListTile(
                    title: my_steps[index].title ,
                    subtitle: my_steps[index].content
                    )
                  , Row ( children : <Widget> [
                      RaisedButton ( child: new Text ("Use") 
                          , onPressed: () { print ("Step $index is ok");}),
                      RaisedButton ( child: new Text ("Cancel") 
                          , onPressed: () { print ("Step $index is canceled");})
                      ]
                    )
                  ]
                );
              },
            )
      );
    }
}

class SampleStepTile {

  SampleStepTile({Key key, this.title, this.content });

  Text  title;
  Text content;
}