Study Record

🎁 탭바(TabBar) 만들기 탭바를 만드는 방법 중 Appbar 위젯의 bottom 인자를 사용하는 방법을 소개하려 한다. 먼저 TabBar() 위젯의 tabs 인자(List)에 탭 역할을 할 위젯들을 넣는다. 어떤 위젯이든 되지만 Tab() 위젯을 제공해주고 있다. 탭바에 따른 화면들은 TabBarView() 의 children 인자(List)에 넣어주면 되는데 TabBar() 위젯의 tabs 인자의 List 인덱스와 TabBarView() 의 children 인자의 List 인덱스가 서로 연결되어 탭을 클릭하면 그 인덱스의 화면이 보인다. TabBar 와 TabBarView 를 정의했다고 해서 자동으로 이 둘이 서로 연결되어 탭을 클릭하면 그 화면으로 넘어가는 것은 아니다. 서로를 연결해주는 방식으..

✍ Drawer Dawer 위젯은 햄버거 아이콘을 누르면 슬라이드 메뉴가 나오는 기능을 쉽게 구현해 준다. Scaffold 인자 중 drawer 에 Drawer 위젯을 넣고 appBar 인자를 채우면 자동으로 앱바에 햄버거 아이콘이 추가되면서 Drawer 를 열고 닫기를 조절할 수 있다. 기본 모양은 다음과 같다. Drawer 의 child 로 슬라이드 메뉴의 위젯을 넣어준다. Scaffold( appBar: AppBar(title: const Text("Drawer")), drawer: Drawer( backgroundColor: Colors.deepPurple, child: ListView( children: [ const DrawerHeader( child: Text("Drawer Header", ..

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

🎁 LayoutBuilder 빌드 방식을 사용하면서 위젯을 완성하기 전에 위젯의 크기를 확인할 수 있는 위젯이다. builder 의 constraint.maxHeight 와 constraint.maxWidth 변수로 위젯의 너비와 높이를 알 수 있다. LayoutBuilder( builder: (BuildContext context, BoxConstraints constraint){ // LayoutBuilder 가 차지하고 있는 높이 constraint.maxHeight; // LayoutBuilder 가 차지하고 있는 너비 constraint.maxWidth; return Container(); } ) 예시 😶) 가로 스크롤의 ListView 에서 한 아이템이 한 스크롤 화면 당 3개의 항목을 보여주..

✍ 앱 바 사이즈 import 'package:flutter/material.dart'; // 앱 바 사이즈 kToolbarHeight

✍ 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..