[Flutter] ListView의 자동 스크롤

카카오톡을 보면 새로운 메시지를 받았을 때나 내가 신규로 메시지를 보낼 경우 제일 하단으로 스크롤이 자동으로 움직이는 것을 본다.

 

(전)

 

(후)

 

 

(소스)

import 'package:flutter/material.dart';

 

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

 

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: MyMain(),

    );

  }

}

 

class MyMain extends StatefulWidget {

  @override

  _MyMainState createState() => _MyMainState();

}

 

class _MyMainState extends State<MyMain> {

  List<String> data = new List();

  ScrollController _scrollController;

  TextEditingController _textController = new TextEditingController();

  bool bottomFlag = false;

 

  @override

  void initState() {

    _scrollController = new ScrollController();

    _scrollController.addListener(_scrollListener);

    super.initState();

  }

 

  _scrollListener() async {

    if (_scrollController.offset ==

            _scrollController.position.maxScrollExtent &&

        !_scrollController.position.outOfRange) {

      // top

    } else if (_scrollController.offset <=

            _scrollController.position.maxScrollExtent &&

        !_scrollController.position.outOfRange) {

      // bottom

    }

  }

 

  void _handleSubmitted(String text) {

    _textController.clear();

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Automic List'),

      ),

      body: Container(

        height: MediaQuery.of(context).size.height,

        child: Column(

          children: [

            Container(

              height: 50,

              child: Row(

                children: [

                  Container(

                    width: 200,

                    child: TextField(

                      controller: _textController,

                      onSubmitted: _handleSubmitted,

                    ),

                  ),

                  RaisedButton(

                    child: Icon(Icons.arrow_back),

                    onPressed: () {

                      setState(() {

                        bottomFlag = true;

                        data.add(_textController.text);

                        _textController.clear();

                      });

                    },

                  ),

                ],

              ),

            ),

            Expanded(

              child: ListView.builder(

                controller: _scrollController,

                itemCount: data.length,

                itemBuilder: (context, index) {

                  if (data.length > 0) {

                    if(bottomFlag) {

                      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {

                        _scrollController.animateTo(

                            _scrollController.position.maxScrollExtent,

                            duration: Duration(milliseconds: 200),

                            curve: Curves.easeInOut);

                        bottomFlag = false;

                      });

                    }

 

                    return Text(

                      '${data[index]}',

                      style: TextStyle(

                        fontSize: 30,

                      ),

                    );

                  } else {

                    return Text('No Data');

                  }

                },

              ),

            ),

          ],

        ),

      ),

    );

  }

}

 

 

Flutter(플러터)를 이용해서 자동 스크롤 기능을 구현하려고 한다. 이 기능을 응용해서 채팅 어플을 만들거나 새로운 신규 글이 있을 시 자동으로 스크롤이 이동하게 응용이 가능하다.

 

TextField와 RaisedButton 부분의 소스를 살펴보자.

- 값을 입력 받을 때마다 추가가 되어야 하므로 button을 클릭했을 경우 계속 상태가 변하면서 listView 위젯이 다시 빌드되면서 내용이 추가되게 버튼 이벤트에 setState를 적용한다. setState() 함수는 값이 변할 때 위젯을 다시 빌드해준다.

 

ListView.builder 부분의 소스를 살펴보자.

- ScrollController를 사용한 건 ListView를 컨트롤 하기 위해서 적용했다.  _scrollController.animateTo() 메서드는  ListView의 스크롤을 원하는 위치로 이동시킨다.

- WidgetsBinding.instance.addPostFrameCallback() 메서드는 화면을 다 그린 후 실행되는 메서드다. data 객체에 TextField의 값이 추가되면 ListView에 추가된 후 실행이 된다.  그래서 callback() 메서드 안에 _scrollController.animateTo()  함수를 추가하면 맨 밑으로 가는 자동 스크롤이 완성된다.

- bottomFlag  사용한 이유는 스크롤을 위로 올렸을 때 맨 마지막으로 계속 이동하는 버그가 있어서 추가했다. 그래서 새로운 글이 등록됐을 때만 자동 스크롤이 실행된다.