라티의 작은 일기장

오늘은 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과 같이 앱에서 전반적으로 활용하는 색상 정보를 설정해줄 수 있는 프로퍼티..

오늘은 Flutter에서 화면 전환(페이지 또는 뷰의 전환)이 어떻게 이루어질 수 있는지 알아보려 한다. Flutter에서는 크게 3가지 방식을 활용할 수 있다. - 상태를 활용 - Navigator 객체 활용 - 외부 라이브러리 GoRouter 활용 일단 첫 번째부터 알아보자. Scaffold에는 appBar, body 말고도 bottomNavigationBar라는 것이 있다. items, currentIndex, onTap 3개의 인자를 가지며, 각 인자의 역할에 대한 설명은 아래와 같다. - items: BottomNavigationBarItem 생성자를 통해 만들어지는 인스턴스를 요소로하는 배열이다. - BottomNavigationBarItem 생성자는 icon과 label을 인자로 요구한다. ..

오늘은 Flutter 프로젝트에서 일종의 환경 설정 파일로 사용되는 pubspec.yaml 파일에 대해 알아보고, Flutter에서 외부 라이브러리와 로컬 데이터를 활용하는 방법에 대해 알아보려 한다. 웹 개발 프로젝트에서 외부 라이브러리를 사용하는 경우, 패키지 매니저를 사용하게 되는데 npm의 경우 package.json이라는 파일에서 해당 프로젝트의 이름, 저자, 버전 정보 또는 외부 라이브러리(의존성)의 버전 정보를 관리하게 된다. Flutter에서도 이 package.json 파일과 같은 역할을 하는 pubspec.yaml 파일이 있다. (진짜 웹 개발이랑 여러모로 비슷하다;;) 여기서도 프로젝트의 이름, 상세 설명과 프로젝트 버전 등이 관리되고 있고, sdk 버전도 관리하고 있는 것을 확인할 ..

오늘은 Flutter에서 지원하는 다양한 입력 위젯, 콜백과 Gesture에 대해 알아보려 한다. 일단 입력이 제대로 실행되는지 알기 위해 상태를 지원하는 Stateful 위젯을 활용해서 만들어보자. 처음으로 구현해볼 위젯은 Checkbox이다. class _TestCheckBoxState extends State { late List values; @override void initState() { super.initState(); values = [false, false, false]; } @override Widget build(BuildContext context) { return Row( children: [ Checkbox(value: values[0], onChanged: (value) =>..