반응형 scroll8 Flutter[플러터] / DraggableScrollableSheet 를 사용하여 UI 크기 조절 기능 구현하기 (사이즈, 스크롤, 드래그, 드래그블스크롤브시트) (Flutter Widget of the Week) DraggableScrollableSheet class드래그 제스처 에 응답하여 스크롤 가능한 요소의 크기를 제한에 도달할 때까지 조절한 다음 스크롤하는 스크롤 가능한 요소의 컨테이너입니다.https://youtu.be/Hgw819mL_78공식 문서 코드 우리가 흔히 여러 프로그램들을 쓰다 보면 느낄 수 있는 공통적인 사항들이 있다. 바로 크기를 사용자가 직접 UI 의 크기를 설정할 수 있다는 건데 벌써 비주얼 스튜디오 코드나 안드로이드 스튜디오만 보더라도 툴바라든지 여러 화면의 요소들의 크기를 직접 조절할 수 있게 되어 있다. 이러한 기능을 구현려면 크기 조절에 유연한 DraggableScrollableSheet 위젯을 사용해 줄 수 있다.이 DraggableScrollableSheet 위젯은 화면의 .. 2025. 6. 17. Flutter[플러터] / ListView 를 사용하여 스크롤 가능한 리스트 만들기 (목록, controller, 컨트롤러, 상호작용) ListView (Flutter Widget of the Week) ListView class선형적으로 배열된 위젯의 스크롤 가능한 목록입니다.ListView 는 가장 일반적으로 사용되는 스크롤 위젯입니다. 스크롤 방향으로 자식 위젯들을 하나씩 표시합니다. 교차 축에서 자식 위젯들은 ListView를 채워야 합니다.null이 아닌 경우 itemExtent 는 자식이 스크롤 방향으로 지정된 범위를 갖도록 합니다.null이 아닌 경우, prototypeItem은 스크롤 방향에서 자식 위젯이 주어진 위젯과 동일한 크기를 갖도록 합니다.itemExtent 나 prototypeItem을 지정하는 것은 자식이 스스로 범위를 결정하도록 하는 것보다 효율적입니다. 예를 들어 스크롤 위치가 크게 바뀌는 경우, 스크롤 장치가 자식의 범위에 대한 사전 지식을 활용하여 작업을 절약할 수 있기.. 2025. 6. 9. Flutter[플러터] / ReorderableListView 를 사용하여 항목의 순서를 드래그 앤 드롭으로 변경하기 (정렬, 리스트, 리로더블리스트뷰) ReorderableListView (Flutter Widget of the Week) ReorderableListView class사용자가 드래그하여 항목을 대화형으로 재정렬할 수 있는 목록입니다.https://youtu.be/3fB1mxOsqJE공식 문서 코드 ReorderableListView 아이템들을 드래그하여 순서를 바꿀 수 있는 스크롤 리스트를 만들 수 있는 위젯이다. 즉 우리가 평소에 사용하는 앱 중에 예를 들어 음악 플레이어가 있다. 음악 플레이어 앱 내에 있는 자신만의 플레이리스트의 서순을 드래그하여 바꿀 수 있을 것이다. 이 위젯을 그것을 지원하는 아주 좋은 위젯이다. 한번 알아보자.하위 속성속성명타입기본값설명childrenList–리스트 항목으로 사용할 자식 위젯 목록onReorderReorderCallback–아이템의 순서가 변경될 때 호출되는 콜백 함수onReo.. 2025. 5. 30. Flutter[플러터] / AnimatedList 를 사용하여 아이템 삽입/제거 할 때 커스텀 애니메이션 적용하기(애니메이티드 리스트, item, custom, remove, insert, 애니메이션, 스크롤, scroll) AnimatedList (Flutter Widget of the Week) AnimatedList class항목을 삽입하거나 제거할 때 해당 항목에 애니메이션을 적용하는 스크롤 컨테이너입니다.이 위젯의 AnimatedListState를 사용하여 항목을 동적으로 삽입하거나 제거할 수 있습니다. AnimatedListState 를 참조하려면 GlobalKey를 제공 하거나 항목의 입력 콜백에서 정적 메서드 of 를 사용하세요.이 위젯은 ListView.builder 로 만든 위젯과 비슷합니다.https://youtu.be/ZtfItHwFlZ8공식 문서 코드 AnimatedList 는 리스트를 애니메이션과 함께 보여줄 수 있게 해주는 위젯이다. ListView 같은 위젯은 항목(아이템)을 추가하거나 제거할 때 애니메이션을 적용하지 않지만 이 위젯을 사용하면 넣고 싶은 애니메이션을.. 2025. 5. 20. Flutter[플러터] / Dismissible 을 사용하여 리스트에서 스와이프하여 아이템 제거하기 (드래그, 리스트, 디스미스블, 삭제, Swipe, drag) Dismissible (Flutter Widget of the Week) Dismissible class표시된 방향으로 드래그하여 닫을 수 있는 위젯입니다.DismissDirection 에서 이 위젯을 드래그하거나 던지면 자식 위젯이 슬라이드 아웃됩니다. 슬라이드 애니메이션 후 resizeDuration 이 null이 아니면 Dismissible 위젯은 resizeDuration 에 지정된 시간 동안 높이(또는 해제 방향과 수직인 너비)를 0으로 애니메이션 합니다.https://youtu.be/iEMgjrfuc58 공식 문서 코드 Dismissible 위젯은 리스트나 아이템등 카드처럼 표시된 위젯을 스와이프로 지울 수 있도록 도와주는 위젯인데 보통 위의 예제처럼 주로 ListView.builder 같은 코드와 함께 사용된다. 주요 기능으로는 스와이프 방향설정(가로, 세로)과 .. 2025. 5. 17. Flutter[플러터] / SliverList & SliverGrid 를 사용하여 CustomScrollView 에서 리스트, 그리드 배치 (커스텀 스크롤뷰) SliverList & SliverGrid (Flutter Widget of the Week) SliverList class주축을 따라 선형 배열로 여러 개의 상자 자식을 배치하는 슬라이버입니다.슬리버에 대해 자세히 알아보려면 CustomScrollView.slivers를 참조하세요.각 자식은 교차 축에서 SliverConstraints.crossAxisExtent 를 가져야 하지만 자체 주 축 범위를 결정합니다.SliverList는 슬라이버의 가시 영역 밖에 있는 자식 요소들이 구체화되지 않았기 때문에 "추측 항법"을 통해 스크롤 오프셋을 결정합니다. 즉 , SliverList는 해당 자식 요소들의 주축 범위를 학습할 수 없습니다. 대신, 새롭게 구체화된 자식 요소들은 기존 자식 요소들 옆에 배치됩니다.https://youtu.be/ORiTTaVY6mM자식 요소의 주축에 고정된 범위가 있는 경우.. 2025. 5. 1. Flutter[플러터] / SliverAppBar 를 사용하여 CustomScrollView 에서 AppBar 넣기 (커스텀 스크롤, 앱바) SliverAppBar (Flutter Widget of the Week) SliverAppBar classCustomScrollView 와 통합된 Material Design 앱 바입니다.앱 바는 툴바와 TabBar, FlexibleSpaceBar 등의 다른 위젯으로 구성됩니다. 앱 바는 일반적으로 하나 이상의 일반적인 동작을 IconButton 으로 표시하며, 덜 일반적인 작업을 위해 PopupMenuButton 이 뒤에 올 수도 있습니다.https://youtu.be/R9C5KMJKluE 실버 앱 바는 일반적으로 CustomScrollView 의 첫 번째 자식으로 사용되며 , 이를 통해 앱 바가 스크롤 뷰와 통합되어 스크롤 오프셋에 따라 높이가 변경되거나 스크롤 뷰의 다른 콘텐츠 위에 떠 있을 수 있습니다. 화면 상단의 고정 높이 앱 바는 Scaffold.appBar 슬롯.. 2025. 4. 30. Flutter[플러터] / PageView 를 사용하여 스크롤 되는 페이지 구현하기 (화면 넘김, 페이징, 페이지네이션) PageView (Flutter Widget of the Week) PageView class페이지별로 작동하는 스크롤 가능한 목록입니다. 페이지 뷰의 각 자식은 뷰포트와 동일한 크기가 되도록 강제됩니다.PageController를 사용하여 뷰에 표시되는 페이지를 제어할 수 있습니다. PageController 는 PageView 내부 콘텐츠의 픽셀 오프셋을 제어할 수 있을 뿐만 아니라 , 뷰포트 크기의 증분인 페이지 단위로 오프셋을 제어할 수도 있습니다.PageController는 PageView가 처음 생성될 때 어떤 페이지가 표시되는지 결정하는 PageController.initialPage 와 뷰포트 크기에 대한 분수로 페이지 크기를 결정하는 PageController.viewportFraction 을 제어하는 데에도 사용할 수 있습니다.https://yout.. 2025. 4. 28. 이전 1 다음 반응형
