CS/Flutter | Dart (55) 썸네일형 리스트형 CustomScrollView - SliverAppBar, SliverPersistentHeader, Scrollbar 앙 넘 기야웡.. SliverAppBar floating 밑으로 스크롤하다가 위로 하면 앱바 잠깐 보임 pinned 앱바 완전 고정 snap 조금만 올리거나 내려도 그 방향으로 앱바 이동 floating true시에만 사용 가능 stretch 앱바 사이즈 늘이기 기능 expandedHeight / collapseHeight 앱바 크기 늘어나는 최대 사이즈 / 최소 사이즈 flexibleSpace background, title 등 지정 가능 SliverPersistentHeader 머 이런 컨테이너도 삽입할 수 있다.. ScrollBar 스크롤바를 보여주고 싶다면 SingleChildScrollView를 Scrollbar 위젯으로 감싸주면 된다 CustomScrollView - SliverList, SliverGrid 모든 리스트 또는 스크롤 가능한 위젯들은 칼럼 안에 넣었을 때 Expanded로 해주지 않으면 에러난다 이론 상 리스트 뷰는 무한한 크기를 차지할 수 있다 -> 차지할 수 있는 최대 크기 지정해주기 (GridView도 마찬가지) Slivers https://medium.flutterdevs.com/explore-slivers-in-flutter-d44073bffdf6 Explore Slivers In Flutter Using Slivers To Making Scrollable Layouts In Flutter medium.flutterdevs.com SliverAppBar slivers의 SliverAppBar() 이용해 앱바 만들 수 있다 위 사이트를 참고하니, background 파라미터에 이미지 소.. ReorderableListView https://api.flutter.dev/flutter/material/ReorderableListView-class.html ReorderableListView class - material library - Dart API A list whose items the user can interactively reorder by dragging. This sample shows by dragging the user can reorder the items of the list. The onReorder parameter is required and will be called when a child widget is dragged to a new position. link To cr api.flutter.d.. GridView GridView 1. 한 번에 다 그림 퍼포먼스 상 효율적이진 않은듯 crossAxisSpacing: 16.0, 좌우 공백 mainAxisSpacing: 30.0, 위 아래 공백 2. 보이는 것만 그림 SliverGridDelegateWithFixedCrossAxisCount class 교차 축에 고정된 타일 수 사용해 그리드 레이아웃 만든다 그리드가 수직인 경우 이 대리자는 고정된 수의 열이 있는 레이아웃 만든다 그리드가 수평인 경우 이 대리자는 고정된 수의 행이 있는 레이아웃 만든다 이 대리자는 동일한 크기와 간격의 타일로 그리드 만든다 3. 최대 사이즈 SliverGridDelegateWithMaxCrossAxisExtent class 각각 최대 교차축 범위를 갖는 타일로 그리드 레이아웃 만든다 .. ListView ListView 1. ListView() 모든 데이터 한 번에 가져온다 -> SingleChildScrollView와 퍼포먼스 면에서 다를 것이 많이 없다 2. ListView.builder() 화면에 보이는 데이터만 먼저 가져온다 3. ListView.separated() 화면에 보이는 데이터만 먼저 가져오는데 추가로 중간에 추가한 위젯 넣을 수 있다 예시에서는 separatorBuilder 추가해 5개 인덱스마다 배너 형식으로 하나씩 들어갈 수 있도록 했다 SingleChildScrollView SingleChildScrollView: 화면 스크롤 기능 1. 기본 렌더링법 2. 화면 넘어가지 않아도 스크롤되게 하기 physics: AlwaysScrollableScrollPhysics(), //스크롤 됨 physics: NeverScrollableScrollPhysics(), //스크롤 안됨 physics: ClampingScrollPhysics(), // Android 스타일 physics: BouncingScrollPhysics(), //iOS 스타일 위 코드 참고! 기본 - 아래로 스크롤 내리기 - 위로 스크롤 올리기 3. 화면 위젯이 잘리지 않도록 하기 Clip.none으로 해주면 아래로 스크롤 내려도 위젯이 잘리지 않는다 4. 그외 퍼포먼스 참고 SingleChildScrollView 단.. 캘린더 일정관리 앱 #8 스케줄카드 눌러 기존 스케줄 업데이트하기 initialValue: initialValue, 스케줄카드를 눌러 업데이트 시 기존 입력된 데이터가 텍스트필드에 남아있도록 custom_textField.dart의 TextFormField에 initialValue값을 준다 스케줄카드를 눌렀을 때 add아이콘 눌렀을 때와 마찬가지로 bottom sheet 뜨게 한다 스케줄 값을 가져오는데에 에러 있으면 스케줄을 불러오지 못한다는 에러 메시지 출력한다 futureBuilder가 처음 실행됐고, 로딩중일때는 CircularProgressIndicator를 띄운다 future가 실행되고 값이 있는데 한 번도 startTime이 세팅되지 않았을 때는 기존 데이터를 넣는다 startInitialValue: startTim.. 캘린더 일정관리 앱 #7 앱에서 2023년 8월 23일자에 일정 하나를 저장했다 값이 제대로 저장되었다 일정을 등록한 날을 누르면 해당 일정이 제대로 보이고 해당 일정을 등록하지 않은 날을 누르면 일정이 보이지 않는다 투데이배너에 스케줄 값은 아직 수정해주지 않아 임의로 넣어둔 6이 뜬다 카테고리 색상도 마찬가지 ㅎㅅㅎ if (snapshot.hasData) { schedules = snapshot.data! .where((element) => element.date.toUtc() == selectedDate) .toList(); } 하지만 이런 식으로 필터링 수행할 경우 모든 일정을 다 불러온다는 문제가 있다 메모리에 모든 정보가 다 올라간다는 것을 뜻한다(낭비) -> 애초에 쿼리 날려 정보 가져올 때 필요한 정보만 가져오게 .. PREV 1 2 3 4 5 ··· 7 NEXT
