Flutter: Stepper is not scrolling when added insid

问题:

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.

回答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

回答2:

Found the solution. Stepper is already scroll-able widget, And as i was adding Stepper inside ListView it was becoming Scrollable widget inside another Scrollable widget.

@FunMiles from Gitter suggested to use NestedScrollView widget instead of ListView & that solved my prob.

class TestAppHomePage extends StatefulWidget {
  @override
  TestAppHomePageState createState() => new TestAppHomePageState();
}

class TestAppHomePageState extends State<TestAppHomePage>
    with TickerProviderStateMixin {
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Test Title'),
        elevation: 0.0,
      ),
      body: new NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            new SliverList(
              delegate:new SliverChildListDelegate(<Widget>[
                    new MyContents(),
                    new MyContents(),
                    new MyContents(),
                    new MyContents(),
              ]),
            ),
          ];
        },
        body: new SimpleWidget(),
      ),
    );
  }
}