[Flutter] Marquee Widget 만들기 (2) - scroll

Marquee Widget 만들기 (1) - alternate 에서 이어지는 글입니다.

이 글에서는 1번 타입 (계속 한방향으로 흘러가는 Marquee) 을 만들어본 것을 기록합니다. 

 

 

참고로 Marquee는 flutter package가 이미 몇개있는데, 

text 하나만 받을 수 있게 구현되어있더라구요,,

 

저는 이미지 + text로 된 list를 받을 수 있는 위젯으로 만들어보려고 합니다. 

text만 scroll하기 원하신다면 이미 잘되어있는 package를 쓰시기를 추천드립니다.

 

 

[1] 코드

 

이렇게 Marquee 위젯을 만들어주고 

 

 

 

앱에서 테스트 해봅니다. 

 

 

 

 

 

[2] 코드 설명

 

이전 글의 alternate marquee와 다른 점은 build 메소드와 scroll 메소드 밖에 없는 데요

이거 위주로 살펴보겠습니다

(나머지 부분은 Marquee Widget 만들기 (1) - alternate  를 참고해주세요!)

 

 

## 1. 

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemBuilder: (context, index) {
          return Center(
            child: widget.items[index % widget.items.length]
          );
        },
        scrollDirection: Axis.horizontal,
        controller: _scrollController,
        physics: NeverScrollableScrollPhysics(), // not allow the user to scroll.
    );
  }

 

원래 ListView.builder 를 쓸 때는 itemCount를 넘겨줘야합니다.

하지만 itemCount를 안넘겨주면 infinite list가 된다고 합니다. (_scrollController.position.maxScrollExtent를 찍어보면 Infinity가 나옴)

itemBuilder 안에서 index를 출력해보면 계속 index값이 올라가는 것을 확인할 수 있습니다.

 

이 index값이 계속 증가하는 것을 이용하여 list를 계속 반복해주면 됩니다. 

 

 

==>

사실 이렇게 해도 문제가 없는 지 잘모르겠는데

구글링, marquee 패키지들을 보면 이렇게 ListView.builder에 itemCount를 안넘겨주시게 구현하셨더라구요,, 😳

 

 

 

 

## 2. 

 

scroll 메소드에서는 10만큼 오른쪽으로 스크롤 시켜주는 코드를 작성해주었습니다. 

그리고 이동할 때 걸리는 시간으로는 주입받은 moveDuration을 넣어줬습니다. 

그리고 이동을 기다려주는 delay 코드를 넣어줬습니다. 

 

+ ScrollEndNotification을 이용해서 scroll이 끝나면 다음 이동을 시켜주게 바꿔도 좋을 것 같아요! (참고)

  Future<bool> _scroll() async {
    double _moveDistance = 10.0;

    _position += _moveDistance;
    _scrollController.animateTo(_position, duration: widget.moveDuration, curve: Curves.linear);

    await Future.delayed(widget.moveDuration);
    return true;
  }