패스트캠퍼스 환급챌린지 22일차 미션(2월 22일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 스크롤뷰 최상단에서 아래로 끌어당겨 정보를 최신화하는 기능과 알림 화면을 구현해보았다.

 

스크롤뷰 최상단에서 아래로 끌어당겨 정보를 최신화하는 기능을 줄여서 Pull to Refresh라고 한다.

이 기능을 구현하기 위해 RefreshIndicator라는 위젯을 활용할 것이다.

// ...
  children: [
    RefreshIndicator(
      onRefresh: () async {},
      child: SingleChildScrollView(
// ...

RefreshIndicator 위젯은 child로 ScrollView 위젯을 받을 수 있고, 필수적으로 onRefresh라는 인자를 요구한다.

onRefresh의 원형은 이렇게 Future<void> 타입으로 선언되어있으며, 반환값이 Future 타입이라는 것은 비동기 액션을 의미한다고 생각할 수 있다.

onRefresh에 짧은 시간 동안 대기하는 간단한 비동기 함수를 넣어두고 테스트해보면 아래와 같이 동작하는 것을 확인할 수 있다.

 

다음으로는 알림 화면을 구현해보자. 현재 우측 상단의 종 모양 아이콘을 클릭하면 별다른 액션이 일어나지 않는데, 알림 내역들을 확인할 수 있는 화면(대충 수직 스크롤이 가능한 리스트뷰 형태의 화면)으로 이동하도록 만드는 것이다.

 

알림 화면은 이동 시 기존 화면에 있던 하단 네비게이션 바가 사라지기 때문에, 굳이 메인 화면의 레이아웃을 공유할 필요는 없다.

그래서 main screen을 관리하는 디렉토리와 같은 레벨에 별도의 디렉토리를 만들고 거기에 스크린을 구성하는 위젯 파일을 만들어주자.

 

스크롤뷰를 구성할 때 먼저 뒤로가기 버튼 등이 존재하는 AppBar를 만들어야하는데, 앱바와 하단의 스크롤뷰가 공존하는 형태의 위젯을 만들 때 Flutter에서 공식으로 지원하는 sliver(슬리버?)를 활용하면 좋다고 한다.

 

sliver를 활용하려면 CustomScrollView를 사용해야한다.

class _NotificationScreenState extends State<NotificationScreen> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(slivers: [],)
  }
}

slivers 배열에는 위젯을 나열하게 되는데, Stack처럼 가장 마지막에 나열된 위젯이 가장 바깥에 노출되는 형태가 아니고 실제로 나열한 위젯의 순서대로 위치하게 된다.

 

알림 데이터는 유형에 따라 노출되는 아이콘과 레이블이 달랐기 때문에, NotificationType을 선언하고 알림에 대한 vo를 만들어주었다.

이후 Notification 더미데이터를 몇 개 만든 뒤, 이전에 홈 화면에서 그랬던 것처럼 Column과 Row 위젯을 적절하게 활용해서 각 알림 위젯의 레이아웃을 구성하고 데이터를 적절하게 배치해주었다. 결과는 아래와 같다.

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N