21 - listview

1.  ListView와 Column의 차이

- ListView는 많은 위젯들을 표시하는 데 사용되며, 백엔드 호출이나 API 호출과 같이 데이터를 반환하는 용도로 최적화되어 있다.
- Column은 앱 위젯의 메인 구조와 같은 것에 사용되며, 여러 섹션을 쌓거나 세 개의 위젯을 쌓을 때 사용된다.
- ListView에서는 화면에 보이는 위젯만 마운트되고 그려지는 반면, Column에서는 모든 자식 위젯이 마운트되고 그려진다.

2. ️Flutter ListView의 활용법과 옵션 설명

- ListView를 사용하여 스크롤 가능한 리스트를 만드는 방법을 소개합니다.
- axis 옵션은 리스트의 자식 위젯들이 *세로(Column) 혹은 가로(Row)로 배열*되는지 결정합니다.
- 기본적으로는 세로로 배열되는데, 이는 대부분의 경우 데이터베이스나 API 호출로부터 데이터를 가져올 때 수직 스크롤을 사용하기 때문입니다.
- spacing 옵션은 자식 위젯들 사이의 간격을 설정하는데, *패딩 대신 item spacing 옵션을 사용*할 수도 있습니다.
- 이 외에도 spacing을 변수로 설정하거나, 시작과 끝에만 간격을 주는 등 유연한 간격 설정이 가능합니다.

3. FlutterFlow의 ListView에서 사용 가능한 옵션과 옵션 활용 예시

- 쉬운 말로, ListView에서 shrink wrap 옵션을 활성화 할 경우, 자식 요소 수에 맞게 ListView의 크기가 동적으로 변경됨.
- 또한, 옵션 중에서는 ListView의 scroll controller, 자식 요소의 방향을 설정하는 것이 가능함.
- FlutterFlow에서 많이 사용하는 chat interface를 예로 들어, ListView의 옵션을 활용하여 채팅 내용을 보여줄 수 있음.
- 이러한 옵션과 ListView의 활용은 FlutterFlow에서 편리한 UI 제작을 도와줌.

ListView와 Column의 차이점은 무엇인가요?

 

ListView는 많은 위젯들을 표시하는 데 사용되요.

백엔드 호출이나 API 호출과 같이 데이터를 반환하는 용도로 최적화되어 있어요.

반면에 Column은 앱 위젯의 메인 구조와 같은 것에 사용돼요.

여러 섹션을 쌓거나 세 개의 위젯을 쌓을 때 주로 사용돼요.

ListView에서는 화면에 보이는 위젯만 마운트되고 그려지지만, Column에서는 모든 자식 위젯이 마운트되고 그려져요.

Flutter ListView 활용법

ListView를 사용해서 스크롤 가능한 리스트를 만드는 방법을 알려드릴게요.

axis 옵션은 자식 위젯들이 세로(Column) 혹은 가로(Row)로 배열되는지 결정해요.

보통 수직 스크롤을 사용하기 때문에 디폴트는 세로로 배열됩니다.

spacing 옵션을 사용하면 자식 위젯들 사이의 간격을 설정할 수 있습니다.

패딩 대신 item spacing 옵션을 사용할 수도 있어요.

또, 시작과 끝에만 간격을 주는 등 유연한 간격 설정이 가능합니다.

FlutterFlow의 ListView에서 어떤 옵션을 사용할 수 있고, 어떻게 활용할까요?

간단히 말하면, shrink wrap 옵션을 활성화 하면 ListView의 크기가 동적으로 변경됩니다.

또한, 스크롤의 공간을 설정하는 scroll controller와 자식 요소의 방향을 설정하는 옵션도 있습니다.

FlutterFlow에서 채팅 인터페이스를 제작하면서, ListView를 이용하여 채팅 내용을 보여주는데 활용할 수 있습니다.

이러한 옵션들과 ListView의 활용은 FlutterFlow에서 UI 제작이 간편하게 가능하도록 도와줍니다.