ListView in Stepper - Step

Question

I examined the Stepper Class and saw that it is using a ListView to display items in horizontal mode (StepperType.horizontal).

I've no clue, how I can use a nested ListView inside my Step.

I've tried a couple of methods mentioned in other threads, but none worked (due to the impossibility of computation of height).

Meanwhile I'm using a Column instead a ScrollView, but it has a BUG.

When I remove an item from the Column and call setState to refresh the Step, the thing that is rendered is not consistent, the count of Items from DataSource is equal to the count of Widgets in the Column, but the displayed widget is cached somehow showing the removed item.

Share some of your code and some drawing or design of what exactly you want to achieve. — Ajay Kumar, Jul 07 '18 at 07:18
i have same issue, but using Column widget instead of ListView solves problem for me — Sana.91, Jul 08 '18 at 10:40
Did you manage to use ListView inside the Stepper widget? I would like to use CheckBoxListTile but I'm unable to find a solution. — Mxwan, Apr 01 '20 at 14:50

Babatunde Ahmed · Answer 1 · 2020-04-14T14:47:44.390

You can use singlechildscrollview with row

List<Step> steps = [
    Step(
        // Title of the Step
        title: Text("Send Money"),
        // Content, use SingleChildScrollView
        content:SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                children: <Widget>[

                  Container(
                    color: Colors.green, // Yellow
                    height: 200.0,
                    width: 200.0,
                  ),

                  Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg',
                     width: 300, height: 200, fit: BoxFit.contain),

                  Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png',
                     width: 200, fit: BoxFit.contain),

                  Container(
                    color: Colors.pink, // Yellow
                    height: 200.0,
                    width: 200.0,
                  ),

                  Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)),

                  Container(
                    color: Colors.redAccent, // Yellow
                    height: 200.0,
                    width: 200.0,
                  ),

                  Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg',
                     width: 300, height: 200, fit: BoxFit.contain),

                ],
              ),
             ),

        state: StepState.complete,
        isActive: true),] ...

ListView in Stepper - Step

1 Answers1