Study Record

✍ 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)를 받을 수 있는데 바..

🎁 GridView 행과 열이 복잡한 리스트 뷰를 만들 수 있다. 😶 GridView.count 일반적으로 GridView 를 사용하는 방법이다. crossAxisCount 로 가로로 몇 줄로 넣을지 결정한다. crossAxisSpacing 으로 가로 사이의 간격을 mainAxisSpacing 으로 세로 사이의 간격을 정한다. children 으로 그리드뷰에 들어갈 항목을 정한다. children 에 위젯이 100개면 실행과 동시에 100개가 한 번에 생성된다. 따라서 개수가 많으면 비효율적일 수 있다. GridView.count( // 가로로 몇개를 넣을래? crossAxisCount: 2, // 가로끼리의 간격 crossAxisSpacing: 12.0, // 세로(위, 아래)끼리의 간격 mainAxi..

🎁 ListView 여러 개의 항목을 여러 개로 스크롤 가능하게 보여줄 수 있는 위젯이다. 😶 기본 ListView 다음과 같이 기본적으로 children 으로 여러 개의 항목을 설정할 수 있다. 이 방법은 children 의 리스트 개수가 100개면 실행과 동시에 100개가 한 번에 생성된다. 따라서 개수가 많으면 비효율적일 수 있다. ListView( children: List.generate(100, (index) => Container( height: 100, child: Center(child: Text(index.toString())), )), ); 😶 ListView.builder ListView.builder 를 사용하여 리스트뷰를 생성할 수 있다. itemCount 가 항목의 개수이고 i..

✍ SingleChildScrollView Widget 가장 기본적인 스크롤 가능한 위젯이다. child 인자에 원하는 위젯(ex. Column)을 넣으면 기본 값으로 위젯이 화면 사이즈를 넘게 되면 스크롤이 가능하고 화면 사이즈를 넘지 않으면 기본 위젯으로만 작동한다. SingleChildScrollView 위젯은 child 에 있는 위젯을 한번에 그린다. 즉, child 에 Column 위젯을 넣었는데 children list 의 길이가 100이면 100개 한번에 생성된다. 따라서 들어가는 위젯이 많으면 비용 면에서 비효율적일 수 있다. SingleChildScrollView( child: Column( children: [ Colors.red, Colors.yellow, Colors.green, C..

✍ TextFormField Widget TextFormField 위젯은 TextField 에서 몇개의 기능이 추가된 위젯이다. 따라서, TextField 에서 사용하는 인자값을 거의 그대로 사용할 수 있다. 또한, TextFormField 에는 사용자가 입력한 입력 값을 검증해 정해진 오류에 맞는 text를 보여줄 수 있다.(validator) TextFormField 와 Form 위젯을 함께 사용하면 여러개의 입력값을 한번에 관리할 수 있다. 바로 예시를 들면, import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(home: HomeScreen())); class HomeScreen extends StatefulWidget..