dart - How to display a list in a step of stepper in FLUTTER

Question

I am trying to upload documents one by one and display them in a list using ListView but when I click on the 4th step, nothing is happening. The 4th step is not opening.

Here's the image

Here's the code

  List<Step> steps = [
Step(
  isActive: false,
  state: StepState.indexed,
  title: const Text('Attach your DOCUMENTS'),
  content: Column(
    children: <Widget>[
          ListView.builder(
            itemCount: documents.length,
            itemBuilder: (context, index) {
              final item = documents[index];

              return ListTile(
                title: Text("$item"),
              );
            },
          ),
      Container(
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: GestureDetector(
            child: Icon(
              Icons.upload_file,
              color: Colors.grey,
            ),
            // onTap: () => {}
          ),
        ),
      )
    ],
  ),
),

];

Scaffold(
  body: SafeArea(
    child: Container(
      child: Stepper(
          steps: steps,
          currentStep: currentStep,
          onStepContinue: next,
          onStepTapped: (step) => goTo(step),
          onStepCancel: cancel,
          type: StepperType.vertical,
          controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Column(
              children: <Widget>[
                SizedBox(height: size.width * 0.02),
                Row(
                  mainAxisAlignment: MainAxisAlignment
                      .start,
                  crossAxisAlignment: CrossAxisAlignment
                      .start,
                  children: <Widget>[
                    FlatButton(
                      color: Color(0XFFEFEFEF),
                      textColor: primaryColor,
                      disabledColor: Colors.grey,
                      disabledTextColor: Colors
                          .black,
                      padding: EdgeInsets.symmetric(
                          vertical: 15.0,
                          horizontal: 10.0),
                      onPressed: cancel,
                      child: Text(
                        "Back",
                        style: TextStyle(
                          fontSize: 15.0,
                        ),
                      ),
                    ),
                    SizedBox(width: size.width * 0.02),
                    FlatButton(
                      color: primaryColor,
                      textColor: Colors.white,
                      disabledColor: Colors.grey,
                      disabledTextColor: Colors
                          .black,
                      padding: EdgeInsets.symmetric(
                          vertical: 15.0,
                          horizontal: 10.0),
                      onPressed: next,
                      child: Text(
                        "Next",
                        style: TextStyle(
                          fontSize: 15.0,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            );
          }
      )

I am getting the documents in an API response as :

documents = ["doc1", "doc2"];

I don't know whether we can display a list in a stepper. Is there any other way to do that?

Thanks in advance!!

Answer 1

Try putting shrinkWrap: true for the ListView widget or wrap it with Expanded widget. Here is a live example in dartpad.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentStep = 0;
  List<String> documents = ['file1.rst', 'file_2.txt', 'file_3.pdf'];
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'App',
      home: new Scaffold(
        appBar: new AppBar(title: new Text('App')),
        body: new Stepper(
          type: StepperType.vertical,
          currentStep: _currentStep,
          onStepTapped: (int step) => setState(() => _currentStep = step),
          onStepContinue:
              _currentStep < 2 ? () => setState(() => _currentStep += 1) : null,
          onStepCancel:
              _currentStep > 0 ? () => setState(() => _currentStep -= 1) : null,
          steps: <Step>[
            new Step(
              title: new Text('Shipping'),
              content: new Text('This is the first step.'),
              isActive: _currentStep >= 0,
              state:
                  _currentStep >= 0 ? StepState.complete : StepState.disabled,
            ),
            new Step(
              title: new Text('Payment'),
              content: Column(
                children: <Widget>[
                  ListView.builder(
                    shrinkWrap: true,
                    itemCount: documents.length,
                    itemBuilder: (context, index) {
                      final item = documents[index];

                      return ListTile(
                        title: Text("$item"),
                      );
                    },
                  ),
                  Container(
                    child: MouseRegion(
                      child: GestureDetector(
                        child: Icon(
                          Icons.upload_file,
                          color: Colors.grey,
                        ),
                        // onTap: () => {}
                      ),
                    ),
                  )
                ],
              ),
              isActive: _currentStep >= 0,
              state:
                  _currentStep >= 1 ? StepState.complete : StepState.disabled,
            ),
            new Step(
              title: new Text('Order'),
              content: new Text('This is the third step.'),
              isActive: _currentStep >= 0,
              state:
                  _currentStep >= 2 ? StepState.complete : StepState.disabled,
            ),
          ],
        ),
      ),
    );
  }
}

If you are facing some other issue, please consider updating the post with the error you are facing.