ListView (4)

플러터에서 Column 안에 ListView 사용하는 방법 플러터에서 리스트 위젯은 정말 다양하게 사용됩니다. 다음과 같은 상황에 주로 사용되며 이외에도 리스트는 많은 기능을 구현하는데 활용되곤 합니다. 1. 화면 전체가 리스트 스크롤 영역인 경우 2. 상단부는 검색란 고정, 하단부는 리스트 스크롤 영역인 경우 3. 화면 전체가 리스트 스크롤 영역이면서 안에 스크롤이 없는 하위 리스트가 포함된 경우 이때 Column, ListView 위젯 안에 ListView를 적용하게 되면 아래와 같은 hasSize 오류가 발생합니다. 이는 ListView의 부모 위젯 높이가 무한대이기 때문에 발생한 오류로, ListView가 차지하는 공간 크기를 설정해줘야 한다는 내용입니다. 그러면 문제를 해결하는 3가지 방법에 대..

플러터 리스트 스크롤 위치 이동하기 상황에 따라 리스트의 스크롤 위치를 특정 위치로 이동시켜주는 기능이 필요해요. 예를 들어 검색 화면에서 검색어가 변경될 때마다 스크롤 위치를 맨 위로 이동시키거나, 채팅 화면에서 가장 최근 대화한 위치로 스크롤을 이동시키는 버튼을 추가해서, 사용자가 다음 작업을 조금 더 편하게 진행할 수 있도록 도울 수 있거든요. 플러터나 리액트 네이티브의 경우, 상태가 변경되었을 때만 해당 위젯이나 컴포넌트를 업데이트하기 때문에 리스트에 내용이 변경되더라도 스크롤 위치는 그대로인 것을 경험하신 적 있을 거예요. 그러면 플러터에서는 리스트 스크롤 위치를 어떻게 이동시키는지 구현해보도록 할게요. import 'package:flutter/material.dart'; class PostL..

플러터 리스트 스크롤이 보이도록 적용하는 방법 리액트 네이티브에선 기본적으로 리스트 스크롤이 보이도록 적용되어 있었는데, 플러터는 ListView 위젯을 사용하더라도 스크롤이 보이지 않아서 추가적인 작업이 필요합니다. 리스트 스크롤 표시는 Scrollbar() 위젯만 추가하면 간단하게 해결되며, 스크롤의 색상과 크기는 속성값으로 변경할 수 있습니다. - thickness : 스크롤 너비 (기본값 4.0) - radius : 스크롤 라운딩 (기본값 8.0) - isAlwaysShown : 항상 보이게 할 것인지 샘플 코드 class PostList extends StatelessWidget { @override Widget build(BuildContext context) { return Scrollbar..

플러터 ListVIew 위젯으로 리스트 생성하기 플러터에서는 ListView 위젯을 사용하면 리스트를 간단하게 생성할 수 있습니다. ListView 위젯은 목적에 따라 다양한 방법으로 리스트를 구현할 수 있는데요. 간단한 리스트를 만들 때는 ListView() 기본 생성자를, builder 방식으로 구현하려면 ListView.builder(), 리스트 아이템 사이에 구분자를 추가하려면 ListView.separated() 방법을 사용할 수 있습니다. 샘플 코드 1. ListView() - 기본 생성자를 이용하는 방법. class PostList extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( ..