슬기로운 IT생활

인제 미소닭갈비 가게 홍보 용으로 플러터로 개발했던 앱을 구글 플레이스토어 등록 진행해보겠다. ​ 개발자 계정 가입 및 $25 결제가 필요하다. ​ ​ 개발자 계정 가입 및 등록 ​ 처음으로 앱을 출시하기 때문에 개발자 계정 가입 및 등록 과정이 필요하다 ​ 아래 URL 접속 후 가이드 참고 ​ https://support.google.com/googleplay/android-developer/answer/6112435 Play Console 사용 방법 - Play Console 고객센터 도움이 되었나요? 어떻게 하면 개선할 수 있을까요? 예아니요 support.google.com ​ 이제 아래 URL로 접속해서 개발자 계정을 생성한다. ​ https://play.google.com/console/sig..

미소닭갈비 가게를 소개하는 앱을 플러터로 개발했다. 이제 개발한 앱을 구글 플레이스토어에 등록하기 위해 배포용 APK를 만들어야 한다. ​ ​ 패키지(Package) 이름 변경 ​ 우선 패키지 이름부터 변경해보자 VS Code에서 Shift+Ctrl+F를 누르면 프로젝트 전체에서 검색할 수 있다. ​ 이때 기본 패키지 이름 형식인 'com.example'로 검색하면 다음과 같이 나온다. ​ 여기서 찾아들어가서 com.example.miso_chicken_rib으로 되어 있는 걸 변경하는데 보통은 본인 회사 이름으로 변경한다. ​ 예) com.회사이름.앱이름 ​ 주의 : 패키지 이름은 한번 플레이 스토어에 올리면 수정할 수 없기 때문에 신중하게 작성할 것 ​ ​ 앱 버전 확인 ​ pubspec.yaml에서..

안드로이드 스튜디오 AVD(Android Virtual Device) 에뮬레이터에 갤럭시S 스킨 추가하는 방법을 알아보겟다. ​ 나는 갤럭시S21+를 추가하려고 한다. 우선 삼성전자 개발자 사이트에 접속한다. ​ https://developer.samsung.com/galaxy-emulator-skin/guide.html Emulator Skin - Build | Samsung Developers The world runs on you. developer.samsung.com ​ 갤럭시 S21+에 보이는 DOWNLOAD SKIN 버튼을 클릭하여 스킨을 다운로드해서 아래 안드로이드 스튜디오 관련 폴더 내에 찾아서 복사한다. ​ 본인의 경우 다운로드 경로는 다음과 같았다. C:\Program Files\An..

VSCode(비주얼 스튜디오 코드)로 플러터 앱 개발 환경을 세팅하겠다. 우선 아래 URL에서 VSCode를 다운로드한다 ​ 우선 아래 URL에서 VSCode를 다운로드한다 ​ https://code.visualstudio.com/ ​ 아래와 같은 설치 화면에서 동의합니다 이후 다음다음 눌러서 진행한다 ​ VSCode 언어를 한글로 설정하겠다. 좌측 블럭 아이콘인 마켓 플레이스를 클릭 후 검색 창에서 'korean' 입력하면 다음과 같이 나오고 Install을 클릭해서 설치하면 된다. ​ 개발 툴이 한글로 변경되었다. 이제는 마켓 플레이스에서 flutter를 검색하여 설치한다. ​ 다음은 코드 가독성을 위해 레인보우 브래킷을 설치해 준다. ​ ​ 다음은 Error Lens를 설치했다. 에러를 가독성 있게..

안드로이드 스튜디오로 플러터 앱 개발이 가능한 환경을 다시 세팅하게 되어 포스팅한다. ​ 플러터 SDK 설치 ​ 아래 플러터 공식 사이트에서 다운로드한다. ​ https://flutter-ko.dev/docs/get-started/install/windows 윈도우에서 설치 flutter-ko.dev ​ 아래 flutter_windows_2.0.1-stable.zip을 다운로드했다. ​ 압축을 풀면 flutter 폴더가 보이는데 나는 그냥 C 드라이브에다가 설치했다 ​ flutter 폴더 내 파일 중에 flutter_console을 실행한다. ​ ​ ​ 그러면 정상 여부를 체크해 주는데 나는 플러터만 설치했으니 V 체크가 나온다. 이렇게 플러터가 정상임을 확인했으며 이번에는 볼 수 없었던 Chrome -..

한창 앱 개발이 진행 중이지만 개인적으로 플러터 공부에 대해 정리도 하고 쉬어가는 의미로 Stateless와 Stateful 차이점에 대해 포스팅한다. ​ Stateless Widget 화면이 로드될 때 한 번만 그려지는 State가 없는 위젯으로 변경이 필요한 Data가 없는 것을 의미하며 이벤트 또는 사용자 상호 작용에 의해 동작하지 않는다. ​ 예를 들어 지금 제작 중인 미소닭갈비 앱의 가게 안내, 메뉴 안내 화면처럼 사용자와 상호작용이 필요 없는 위젯은 Stateless Widget으로 구성하면 된다. ​ ​ Stateful Widget ​ 위젯이 동작하는 동안 Data 변경이 필요한 경우 화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯으로 이벤트 또는 사용자 상호 작용에 의해 동작..

이제는 두 번째 화면인 메뉴 화면을 만들어보겠다. ​ 사실 메뉴판은 대표 메뉴로 어떤 음식이 있고 금액은 얼마인지 그리고 원산지가 어디인지만 잘 표현되면 된다. 그래서 홈페이지에 있는 메뉴판 내용을 그대로 가져왔다 ​ ​ 가게 안내 페이지와 동일하게 이름만 MenuGuide인 클래스에 NestedScrollView에 SliverAppBar와 ListView로 구성하였다. ​ 메뉴판 이미지는 SliverAppBar에 FlexibleSpaceBar에 넣었고 ListView 쪽에는 각 메뉴별 대표 이미지를 리스트로 줄줄이 넣었다. ​ ​ 소스 코드는 다음과 같다. import 'package:flutter/material.dart'; class MenuGuide extends StatelessWidget { ..

매장 안내를 의미하는 화면을 만들 예정이다. ​ 페이지 특성상 특별한 기술도 필요 없을 것 같고 가게를 소개하는 내용만 잘 구성해서 보이면 될 것 같다. ​ 우선 이전 포스팅에서 만든 NestedScrollView 하단에 ListView 추가 후 내용을 때려 넣으려고 한다. ​ 우선 ShopGuide 클래스에서 아래와 같이 ListView와 그 자식으로 Text를 추가해봤다. ​ 디버깅하여 에뮬레이터 화면을 보면 아래와 같이 추가한 텍스트가 잘 표현되는 것을 볼 수 있다. ​ 이제 그 아래에 공백과 사진을 넣어보겠다. 아래와 같이 Container로 공백을 넣었고 그 아래에 이미지도 추가했다. ​ 이전 포스팅에서 MediaQuery 클래스로 size.height를 이용해 핸드폰 화면 높이를 얻었는데 Co..

첫 번째 화면에 해당하는 '가게 안내' 페이지를 작성하기 전에 앱 상단 바를 애니메이션 스크롤 형태로 만들겠다. ​ SliverAppBar를 사용하여 앱 상단 바를 동적으로 표현할 예정이다. 위로 스크롤 하면 바가 작아지는데 이걸 Sliver 효과라고 부른다. ​ 우선 만들어놓은 화면 중 shopguide.dart 파일로 이동 후 아래 소스 코드를 추가한다. ​ 먼저 한 화면에 여러 개의 스크롤을 사용할 수 있는 NestedScrollView를 추가했고 그 안에 위젯으로 SliverAppBar를 추가했다. SliverAppBar에는 여러 옵션들이 있는데 중요해 보이는 pinned, floating, snap에 대한 내용은 위 주석을 참고바란다. 나는 우선 깔끔하게 화면을 구성하기 위해 appbar를 안 ..

지금까지는 워밍업이었고, 이제 본격적으로 앱 개발을 시작하려고 한다. ​ 나는 누구나 쉽게 따라 할 수 있는 소스 코드를 좋아하기 때문에 쉽고 단순하게 만들어보겠다. ​ 우선 하단에 구성할 탭 메뉴를 만들어보자. 플러터 개발 첫 포스팅 때 얘기했지만 메뉴는 총 4개로 구성할 예정이다. ​ 1. 가게 안내 2. 메뉴 안내 3. 오시는 길 4. 스토어 ​ 4개의 메뉴는 탭으로 구성할 예정이며 쉽게 그리고 이쁘게 만들기 위해 애니메이션 탭을 지원하는 convex_bottom_bar 패키지를 다운로드할 예정이다. 더 이쁜 패키지도 있지만 이 버전이 안정적인 것 같아서 다운로드했다. ​ pubspec.yaml으로 이동하여 convex_bottom_bar를 추가 후 Get Packages를 누른다. convex_b..