Flutter: ListView에서 위젯으로 스크롤링하기, Flutter: Scrolling to a widget in ListView

질문

ListView에서 특정 위젯으로 스크롤하는 방법은 무엇인가요? 예를 들어, 특정 버튼을 누르면 ListView에서 어떤 Container로 자동으로 스크롤하고 싶습니다.

ListView(children: <Widget>[
  Container(...),
  Container(...), #예를 들어 이 컨테이너로 스크롤
  Container(...)
]);

답변

현재로서는 Scrollable.ensureVisible(context)를 사용하는 것이 가장 쉬운 해결책입니다. 이 방법은 모든 것을 대신 처리해주며, 모든 위젯 크기와 작동합니다. GlobalKey를 사용하여 컨텍스트를 가져옵니다.

문제는 ListView가 보이지 않는 항목을 렌더링하지 않는다는 것입니다. 즉, 대상이 아예 만들어지지 않을 가능성이 가장 높습니다. 이는 대상이 context를 갖지 않게되어 더 많은 작업 없이는 이 방법을 사용할 수 없게 됩니다.

결국, 가장 쉬운 해결책은 ListView를 SingleChildScrollView로 대체하고 자식들을 Column으로 래핑하는 것입니다. 예시 :

class ScrollView extends StatelessWidget {
  final dataKey = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      primary: true,
      appBar: new AppBar(
        title: const Text('Home'),
      ),
      body: new SingleChildScrollView(
        child: new Column(
          children: <Widget>[
            new SizedBox(height: 160.0, width: double.infinity, child: new Card()),
            new SizedBox(height: 160.0, width: double.infinity, child: new Card()),
            new SizedBox(height: 160.0, width: double.infinity, child: new Card()),
            // destination
            new Card(
              key: dataKey,
              child: new Text("data\n\n\n\n\n\ndata"),
            )
          ],
        ),
      ),
      bottomNavigationBar: new RaisedButton(
        onPressed: () => Scrollable.ensureVisible(dataKey.currentContext),
        child: new Text("Scroll to data"),
      ),
    );
  }
}

참고 : 이 방법은 원하는 항목으로 쉽게 스크롤할 수 있도록 해주지만, 작은 미리 정의된 목록에 대해서만 고려해야 합니다. 큰 목록에 대해서는 성능 문제가 발생할 수 있습니다.

하지만 ListView에서 Scrollable.ensureVisible를 작동시키는 것은 가능합니다. 그러나 더 많은 작업이 필요합니다.