Study Record

✍ 실시간 스크롤 offset 알아보기 사용자가 스크롤 위젯을 스크롤할 때마다 얼마큼 스크롤 됐는지 알고 싶을 때가 있다. 이럴 때 ScrollController 를 사용하여 리스너를 추가해 주면 된다. 스크롤 위젯은 controller 인자가 있는 위젯이면 가능하다. (ex. ListView, GridView, CustomScrollView 등) 원하는 스크롤 뷰의 controller 인자에 미리 선언한 scrollController 를 넣고 addListener 함수로 리스너 함수를 선언해 주면 scrollController.offset 값으로 현재 스크롤 값을 알 수 있다. 위젯이 사라지기 전에 removeListener 와 dispose 를 해주는 것도 하면 안전하게 ScrollController..

✍ Dismissible 주로 리스트 뷰(ListView, GridView 등)에서 사용자가 항목을 스와이프 모션으로 삭제하는 것을 가능하게 해주는 위젯이다. Dismissible({ required Key key, required Widget child, Widget? background, Widget? secondaryBackground, Future Function(DismissDirection)? confirmDismiss, void Function()? onResize, void Function(DismissUpdateDetails)? onUpdate, void Function(DismissDirection)? onDismissed, DismissDirection direction = Dismi..

✍ RefreshIndicator 스크롤할 수 있는 화면의 맨 상단을 위로 당기면 로딩 아이콘이 나오면서 서버에 데이터를 다시 가져오거나 하는 등 새롭게 다시 데이터를 뿌려줄 때 이용하면 좋은 위젯이다. 사용 방법은 간단하다. RefreshIndicator 에 child 와 onRefresh 에 새로 고침 아이콘을 하면서 실행할 작업을 정의한다. child 에 스크롤이 가능한 위젯을 넣으면 된다. import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(home: RefreshIndicatorScreen())); class RefreshIndicatorScreen extends StatelessWidget { const Refre..

✍ Scrollbar 스크롤할 수 있는 위젯의 상위 위젯에 Scrollbar 위젯을 넣으면 스크롤 바가 생긴다. 일반적으로 ListView, GridView CustomScrollView 등의 상위 위젯에 Scrollbar 를 사용하는데 리스트 뷰의 항목 개수가 명확하지 않을 경우(itemCount, childCount 가 명시되지 않은 경우 무한 스크롤) 스크롤 바가 보이지 않는다. Scrollbar({ Key? key, required Widget child, ScrollController? controller, bool? thumbVisibility, bool? trackVisibility, double? thickness, Radius? radius, bool Function(ScrollNotif..

✍ SliverPersistentHeader CustomScrollView 의 silvers 중 하나로 사용할 수 있는 위젯으로 스크롤 중에도 상단에 위젯을 고정시킬 수 있다! 하나의 CustomScrollView 에 여러 개의 SliverPersistentHeader 가 있으면 상단에 위젯들이 쌓인다. SliverPersistentHeader({ Key? key, required SliverPersistentHeaderDelegate delegate, bool pinned = false, bool floating = false, }) 인자 중 delegate 가 꼭 필요한데 SliverPersistentHeaderDelegate() 는 다음과 같다. class _CustomSliverPersistent..

🎁 SliverAppBar CustomScrollView 의 slivers 에서 SliverAppBar 를 사용할 수 있다. 기본적인 앱바 기능부터 스크롤에 따른 앱바의 모양도 다르게 할 수 있다. 앱바를 어떻게 꾸미는지보단 스크롤바에 따라 앱바를 어떻게 컨트롤할 수 있는지에 대해 알아보려고 한다. CustomScrollView 와 SliverAppBar 를 같이 사용한 모습은 다음과 같다. CustomScrollView( slivers: [ SliverAppBar( title: Text("SliverAppBar"), centerTitle: true, ), SliverList( delegate: SliverChildListDelegate( List.generate(20, (index) => index) ..

✍ CustomScrollView 여러 종류의 리스트 뷰를 한 번에 사용할 수 있는 위젯이다. 한 스크롤에 여러 가지 형태의 리스트뷰(그리드 뷰, 리스트 뷰 등)를 집어넣을 수 있다. CustomSctollView 에 slivers 인자에 넣고 싶은 리스트 뷰를 넣으면 되는데 ListView, GridView 를 사용할 수 없고 SliverList, SliverGrid 로 넣어야 한다. 단일 위젯을 넣고 싶다면 SliverToBoxAdapter 위젯을 사용한다. CustomScrollView({ Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, Scr..

✍ ReorderableListView 리스트 뷰의 항목의 순서를 사용자가 바꿀 수 있는 위젯으로 긴 터치(Long touch)를 한 상태에서 드래그를 하면 위젯이 따라온다. 원하는 위치에 터치 상태에서 손을 떼면 그 위치로 위젯의 순서가 바뀐다. 😶 ReorderableListView ReorderableListView() 로 생성하면 children 에 항목(하위 위젯)을 넣는데 한 번 생성될 때 전부 한꺼번에 생성되기 때문에 비용이 많이 든다. 리스트 항목의 순서를 바꾸는 모션은 ReorderableListView 가 자동으로 해주지만 그 값을 바꾸는 것은 직접 해야 한다. onReorder 인자로 사용자가 직접 순서를 바꾼 위젯의 index(oldIndex, newIndex)를 받을 수 있는데 바..