Flutter: Stepper is not scrolling when added inside ListView

Question

I have ListView which contains - 1. Banner Image 2. Container with some Text 3. Container with Some more Text 4. Container consist of Stepper.

I'm unable to scroll, When I try to scroll while taping the Stepper area. And even last step of stepper goes out of screen.

Adding CODE -

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new ListView(
        children: <Widget>[
          new MyContents(),
          new MyContents(),
          new MyContents(),
          new MyContents(),
          new SimpleWidget(),
        ],
      ),
    );
  }
}

class MyContents extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Container(
            padding: new EdgeInsets.all(40.0),
            child: new Card(
              child: new Column(
                children: <Widget>[
                  new Text(
                    "Cards Content Cards ContentCards Content Cards Content Cards ContentCards Content Cards Content Cards Content "
                  ),
                  new Text(
                    "Cards Content Cards ContentCards Content Cards Content Cards ContentCards Content Cards Content Cards Content "
                  ),
                  new Text(
                    "Cards Content Cards ContentCards Content Cards Content Cards ContentCards Content Cards Content Cards Content "
                  ),
                  new Text(
                    "Cards Content Cards ContentCards Content Cards Content Cards ContentCards Content Cards Content Cards Content "
                  )
                ],
              ),
            ),
            );
  }
}




class SimpleWidget extends StatefulWidget {
  @override
  SimpleWidgetState createState() => new SimpleWidgetState();
}

class SimpleWidgetState extends State<SimpleWidget> {
  int stepCounter = 0;
  List<Step> steps = [
    new Step(
      title:new Text("Step One"),
      content: new Text("This is the first step"),
      isActive: true,
    ),
    new Step(
      title:new Text("Step Two"),
      content: new Text("This is the second step"),
      isActive: true,
    ),
    new Step(
      title:new Text("Step Three"),
      content: new Wrap(
                  spacing: 8.0, // gap between adjacent chips
                  runSpacing: 4.0, // gap between lines
                  direction: Axis.horizontal, // main axis (rows or columns)
                  children: <Widget>[
                    new Chip(
                      label: new Text('Chips11')
                    ),new Chip(
                      label: new Text('Chips12')
                    ),new Chip(
                      label: new Text('Chips13')
                    ),new Chip(
                      label: new Text('Chips14')
                    ),new Chip(
                      label: new Text('Chips15')
                    ),new Chip(
                      label: new Text('Chips16')
                    )
                  ],
              ),
      state: StepState.editing,
      isActive: true,
    ),
    new Step(
      title: new Text("Step Four"),
      content: new Text("This is the fourth step"),
      isActive: true,
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Stepper(
        currentStep: this.stepCounter,
        steps: steps,
        type: StepperType.vertical,
        onStepTapped: (step) {
          setState(() {
            stepCounter = step;
          });
        },
        onStepCancel: () {
          setState(() {
            stepCounter > 0 ? stepCounter -= 1 : stepCounter = 0;
          });
        },
        onStepContinue: () {
          setState(() {
            stepCounter < steps.length - 1 ? stepCounter += 1 : stepCounter = 0;
          });
        },
      ),
    );
  }
}

Try to Scroll tapping Stepper area. Its not working.

Answer 1

If the stepper is contained within another scrollable, you can set stepper physics to ClampingScrollPhysics

Stepper(physics: ClampingScrollPhysics(), //remaing stepper code

in your case you are using listview which is scrollable, by setting stepper physics to ClampingScrollPhysics() the parent widget (listview) will have the controller of stepper scroll

Edit: as @asubanovsky stated in the comment, you can use NeverScrollableScrollPhysics() as well to be more precise for removing the scroll behavior of the current widget and let the parent widget handle it