라티의 작은 일기장

오늘은 스크롤뷰 최상단에서 아래로 끌어당겨 정보를 최신화하는 기능과 알림 화면을 구현해보았다. 스크롤뷰 최상단에서 아래로 끌어당겨 정보를 최신화하는 기능을 줄여서 Pull to Refresh라고 한다. 이 기능을 구현하기 위해 RefreshIndicator라는 위젯을 활용할 것이다. // ... children: [ RefreshIndicator( onRefresh: () async {}, child: SingleChildScrollView( // ... RefreshIndicator 위젯은 child로 ScrollView 위젯을 받을 수 있고, 필수적으로 onRefresh라는 인자를 요구한다. onRefresh의 원형은 이렇게 Future 타입으로 선언되어있으며, 반환값이 Future 타입이라는 것은 ..

오늘은 Home 화면을 구현해보았다. 토스 앱의 홈 화면은 이렇게 헤더 영역과 콘텐츠 영역이 수직으로 나열된 레이아웃을 가지고 있고, 스크롤을 내려도 헤더의 모습이 보이는 이른바 고정 헤더(Sticky Header)가 적용돼있다. 그럼 헤더와 스크롤 영역은 겹쳐지는 관계라고 생각할 수 있고, 이럴 때 활용할 수 있는 적절한 위젯은 Stack이 된다. @override Widget build(BuildContext context) { return Container( color: Colors.black, child: Container( child: Stack(children: [ SingleChildScrollView(child: Column(),), TossAppBar() ],), ), ); } 이렇게 S..

오늘은 하단 네비게이션 바의 모습을 수정하고, 더미데이터를 만들어보는 실습을 진행했다. 원래 Fast App Base의 하단 네비게이션 탭 아이템은 홈과 즐겨찾기 두 개였는데, 토스 앱의 경우 5개이니, 이를 늘려주는 작업을 해야한다. // ... enum TabItem { home(Icons.home, '홈', HomeFragment()), benefit(Icons.star, '혜택', BenefitFragment()), tosspay(Icons.payment, '토스페이', TossPayFragment()), stock(Icons.candlestick_chart, '주식', StockFragment()), all(Icons.menu, '전체', AllFragment()); // ... 그리고 각 화면..

오늘은 토스 앱 클론 파트로 들어가는 첫번째 날이다. 시작에 앞서 강사님이 빠른 플러터 앱 개발을 위한 Fast App Base 프로젝트에 대해 간단하게 소개를 해주셨다. 일종의 스타터 프로젝트로, 앱 구성에 필수적인 위젯들이 이미 구현돼있고, 국제화와 다크모드 등의 설정 또한 편리하게 변경 또는 추가할 수 있도록 되어있는 친절한 프로젝트라고 할 수 있다. 일단 준비해주신 아이콘을 활용해 간단하게 스플래시 화면부터 구현해보았다. flutter_native_splash 패키지가 이미 적용돼있어서 그냥 설정값만 바꿔주면 되었다. 손쉽게 적용되었다! 그런데 이걸로 끝은 아닌게, 앱 내부에서 만약 로그인 처리를 위해 별도의 스플래시 화면을 보여줄 필요가 있거나 하는 상황이면 flutter 엔진 내부에서도 이 스..

오늘은 Flutter 앱의 스플래시 화면에 대해 알아보려 한다. 스플래시 화면은, 앱을 처음 실행했을 때 첫 번째 뷰를 보여주기 전 로딩 상황에서 흰색 빈 화면 대신 앱과 관련된 어떤 대체 화면을 보여주는데, 그 대체 화면을 스플래시 화면이라고 한다. 로그인이 필요한 경우는 세션 검증을 하는 시간을 벌어준다고 한다. 즉 Flutter의 Native Splash Screen은 Flutter 프레임워크가 각 플랫폼에서 구동되기 위해 로딩하는 데 필요한 시간동안 보여줄 수 있는 대체 화면을 지칭하는 것이다. 위 예시는 그냥 스플래시 화면의 예시로서 보이기 위해 캡쳐한 것이고, 실제로는 아주 짧은 시간동안 흰 화면 또는 앱의 로고가 중앙에 보이는 화면이 1초 정도 스쳐지나간다. 그럼 어차피 이렇게 짧은 시간동안..

Flutter 앱도 생명주기가 있다. 크게 화면에 노출 / 유저 Input 가능 / OS View에 붙어있는가? 3가지 기준으로 4개의 생명주기를 갖는다고 할 수 있다. - inactive: 화면에 노출 O / 유저 Input 가능? X / OS View에 붙어있는가? O - paused: 화면에 노출 X / 유저 Input 가능? X / OS View에 붙어있는가? O - resumed: 화면에 노출 O / 유저 Input 가능? O / OS View에 붙어있는가? O - detatched: 화면에 노출 X / 유저 Input 가능? X / OS View에 붙어있는가? X 보통 일반적으로 유저가 앱을 사용할 때는 resumed, 앱을 종료할 때는 detatched 상태가 된다. 문자를 받거나 해서 앱의..

오늘은 복습 겸 Flutter 프로젝트에 패키지를 추가하는 방법, 라이센스를 확인하고 활용하는 방법에 대해 알아보자. 일단 Flutter에서 패키지를 추가하는 방법은 크게 두 가지가 있다. 1. 터미널에서 명령어로 추가 flutter pub add {package name} 위 명령어로 패키지를 추가하면 최신 버전이면서 프로젝트 의존성과 호환되는 최적의 버전을 알아서 찾고 설치해준다. 2. pubspec.yaml에 명시적으로 추가 dependencies, 또는 devDependencies에 명시적으로 해당 패키지의 이름과 버전을 설정하고 설치해줄 수 있다. 이 때 caret syntax를 보통 쓰게 되는데, 현업에서 패키지의 버전을 명시하고 업데이트 범위를 제한하는것은 의도치 않은 충돌을 막아줄 수 있으..

오늘은 새 마음 새 뜻으로 Part 3에 들어섰다. 오리엔테이션에서 간단한 강사님의 소개와 모바일 앱 개론, Part 3에서 배우게 될 지식들에 대해 간단히 알아볼 수 있었다. 첫 번째 챕터에서 만들게 될 예제는 흔들기 카운트 앱인데, 모바일 디바이스의 가속도 센서를 활용하는 첫 프로젝트라서 기대된다. 프로젝트 세팅에 앞서 Flutter의 패키지 생태계에 대해 알아보자. 나는 이전 포스팅에서 외부(pub)에서 다운받아 사용하는 코드 모음을 라이브러리라고 불렀다. 웹 개발할 때 그렇게 배웠으니까. 그런데 Flutter 생태계에선 라이브러리를 '패키지'라고 부르는게 맞다고 한다. 이런 패키지는 두 가지 종류로 분리할 수 있다. - Dart Package: Dart, Flutter 프로젝트 모두 이용 가능 -..