라티의 작은 일기장

오늘은 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 프로젝트 모두 이용 가능 -..

오늘은 Flutter Theme에 대해 알아보고, 간단한 토이 프로젝트를 만들어본 후기를 남겨보려고 한다. 우선 Flutter Theme은 Flutter의 위젯에서 디자인과 가장 밀접한 관련이 있는 위젯으로, 활용 빈도가 매우 높다고 한다. Flutter Theme은 일단 다른 위젯에 덧씌워지는 형태로 사용되는 것 같다. 사용법을 익히기 위해 간단한 카운터 앱을 만들어보았다. 우측 하단에 있는 버튼을 누르면 카운터 값이 올라가는 간단한 앱이다. 여기에 Flutter Theme을 사용해보자. Scaffold에서 theme 프로퍼티를 통해 설정해줄 수 있다. ThemeData 생성자 내부에서 colorScheme, appBarTheme과 같이 앱에서 전반적으로 활용하는 색상 정보를 설정해줄 수 있는 프로퍼티..