Flutter/Flutter로 웹툰 앱 만들기

[노마드코더: Flutter 로 웹툰 앱 만들기] #6.7 ListView

유호야 2022. 12. 14. 02:39
반응형

CircularProgressIndicator();

 

 

 

아래와 같은 코드는 효율적이지 않다,

이 ListView는 스크롤바도 제공한다.

문제는 최적화되지 않고 모든 값들을 화면에 출력하고 있다는 것이다.

다른 ListView 더 전문적인 더 많은 아이템에 최적화되어 있는 ListView를 사용해볼 것이다.

이 인덱스로 어떤 아이템이 build되는 지 알 수 있다.

바로 그것이 ListView.builder
좀 더 최적화된 것

사용자가 보고 있는 ITEM만 build하는 기능을 갖고 있다.
사용자가 보고 있지 않으면 메모리에서 삭제한다. 

ListView.seperated에서는 글자 간 간격을 준다. (첫번째 글자는 제외한!) 
body: FutureBuilder(
        future: webtoons,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.separated(
              scrollDirection: Axis.horizontal,
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                print(index);
                var webtoon = snapshot.data![index];
                return Text(webtoon.title);
              },
              separatorBuilder: (context, index) => const SizedBox(
                width: 20,
              ),
            );

근데 이상하게 Axis.horizontal에서 왜 가로 스크롤이 안돼는지 모르겠다 :0

반응형