플러터의 Listview 종류들 (Types of Listviews in Flutter) TBC..

플러터의 Listview 종류들 (Types of Listviews in Flutter)

목차: 

• 1.  ListView
• 2.  ListView.builder
• 3. GroupedListView
• 4. GridView
• 5. SingleChildScrollView
• 6. ListTile
• 7. CustomScrollView

 

플러터에서는 여러가지 Listview를 제공하여 강력한 UI 서비스를 구축할 수 있게끔 해줍니다.

 

먼저 플러터 공식문서의 coockbook을 참고 해봐요.

https://flutter.dev/docs/cookbook

Cookbook

 

플러터에서 대표적으로 많이 쓰는 Listview 들을 다뤄보겠습니다. 

 

1. ListView : is for when you have a relatively small and fixed set of items. This is because you create all of the Widgets at once and they are all inserted into the tree.

- 적은 리스트 셋을 가지고 코드들을 다 때려 넣을 때 쓰는 위젯.

 

2. ListView.builder : is for when you have a large set of items because it doesn't build all of them at once, and only builds the ones that are visible or are going to be visible. This makes it more memory efficient than the regular ListView.

- 리스트 셋이 길어서 메모리 효율을 할 때 쓰는 위젯. 

 

<두개의 가장 큰 차이점>:  

ListView() — Render all the items in the list, even if it is not visible.

ListView.Builder()` — Render only visible items on the screen.

 

 

3. GroupedListView: Listview 와 비슷하나 크게 아래의 2가지 기능을 가지고 싶을 때 쓰는 위젯.

패키지를 따로 추가해주어야 한다.  

• Can be separated into groups of all list item.
• Can give one header for each group

 

https://pub.dev/packages/grouped_list

grouped_list | Flutter Package

자세한 사항은 미디엄의 이 사람의 글을 참고하자

https://medium.com/flutterdevs/grouped-listview-in-flutter-a3a7cc13133c

Grouped ListView in Flutter

 

4. GridView: 

The main difference between ListView and GridView is how it lays out its child. With ListView you are laying your children one by one either vertically or horizontally only. With GridView, its a combination of both. It lays its children horizontally first. When it exceeds the number specified in crossAxisCount which is the number of children in the cross axis, it proceeds to lay its next children to a new line.

 

리스트뷰는 수직이나 수평으로 리스트를 생성한다. 

그리드뷰는 두가지 모두인데, 일단은 수평으로 리스트를 생성하고, 명시된 crossAxisCount의 갯수를 초과하게 되면 다음 라인에 리스트 라인을 만들어 배열한다.  

 

자세한 사항은 아래의 미디엄 글을 참고하자

https://medium.com/flutterfly-tech/flutter-listview-gridview-ce7177812b1d

Flutter: ListView & GridView

 

5. SingleChildScrollView: Column에 scrollable functionality을 추가해준다. Wrap column with SCSV

The column is used when we have to list widgets vertically on the screen and SingleChildScrollView widget provides scroll functionality for Column widgets.

 

SCSV랑 Column이랑 같이 쓰게 되면, 리스트 아이템들이 전부다 렌더링이 된다.

언제 사용하나?!

1. ListView에 비해서 performance가 떨어지기 때문에 적은 리스트이고 성능상 큰 문제가 없을 때 사용

2. 다른 위젯들이 복합적으로 필요하고 스크롤링 기능이 필요할 때 사용.

 

ListView와의 차이점:

 

1. ListView는 SCSV + Column 의 최적화라고 보면 된다.

2. ListView는 less flexible 하다. 적은 아이템들로 복잡한 레이아웃이 필요하고 성능이 문제되지 않을 때는 SCSV + Column 사용

 

 

6. ListTile : ListView의 children으로 사용된다.

리스트 뷰안에 있는 아이템들을 customizing 할 때 사용한다. 

 

Row에 divider 들을 추가하고 싶으면 ListTile.divideTitles을 사용한다. 

 

 

 

7. CustomScrollView: Allows you to add Slivers directly to achieve custom scroll effts. 

A sliver is a portion of a scrollable area that you can define to behave in a special way. 

A customscrollview has a property slivers which is a list of widgets. Each of the widgets must produce rednersliver otherwise you will get a runtime error. 

 

sliver 을 이용해서 뭔가 커스텀한 스크롤링 효과를 주과 싶을 때 사용한다.