CODEWITHSUNDEEP
flutterdartflutter-layout
Doc
Doc

Reputation: 11651

Scroll to n-th child in a ListView where children have variable height

I have a ListView where the children can have any of the three custom types. Each child will have different height, so I cannot calculate the position based on their index.

How do I scroll to the n-th child in the ListView?

Upvotes: 1

Views: 759

Answers (2)

Doc
Doc

Reputation: 11651

With the help of Listview Scrolling to widget, the current example requires a GlobalKey to move the display the Widget which is n-th child in a list where each child has a variable height.

  import 'dart:math';
  class ScrollView extends StatelessWidget {
  final firstKey = GlobalKey(debugLabel: "top");
  final lastKey = GlobalKey(debugLabel: "bottom");
  final r = Random();
  var count = 25;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      primary: true,
      appBar: new AppBar(
        title: const Text('Home'),
      ),
      body: SingleChildScrollView(
        child: new Column(
          children: List.generate(
            count,
            (index) {
              if (index == 0) {
                return Text("First entry", key: firstKey);
              }
              if (index == count - 1) {
                return Text("Last entry", key: lastKey);
              }
              return Container(
                margin: const EdgeInsets.all(8.0),
                height: 20 + (r.nextDouble() * 80),
                color: Colors.red,
                child: Center(child: Text("Random Height Widget")),
              );
            },
          ),
        ),
      ),
      bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          new RaisedButton(
            onPressed: () => Scrollable.ensureVisible(firstKey.currentContext,
                curve: Curves.linear, duration: Duration(milliseconds: 500)),
            child: new Text("Scroll to first"),
          ),
          new RaisedButton(
            onPressed: () => Scrollable.ensureVisible(lastKey.currentContext,
                curve: Curves.linear, duration: Duration(milliseconds: 500)),
            child: new Text("Scroll to last"),
          ),
        ],
      ),
    );
  }
}

If there is a better way to do this, please post your code.

Upvotes: 1

Raouf Rahiche
Raouf Rahiche

Reputation: 31336

I have been using the scroll_to_index package by quire and its working pretty well

Upvotes: 2

Related Questions