슬기로운 IT생활

플러터로 개발한 앱을 구글 플레이스토어에 출시했다. 개발 앱 이름은 미소닭갈비로 닭갈비 가게 홍보 용으로 제작했다. ​ 우선 플레이스토어에서 '닭갈비'로 검색했을 때 두 번째로 나오고 있다. ​ ​ 그리고 의미 없지만 '미소닭갈비' 상호 입력 시 두 번째로 나오는 점이 의문이다. ​ 그나마 '미소숯불닭갈비'로 입력 시에는 최상단에 뜨고 있다. 사실 이런 검색어를 입력할 사람이 없어서 의미는 없다고 생각한다. ​ 닭갈비, 밀키트 이런 키워드가 중요할 것 같은데 플레이스토어 등록 및 출시에 초점을 맞추다 보니 자세한 설명을 누락한 것 같다. ​ 미소숯불닭갈비라고 입력해야 최상단에 뜨고 있는데 검색어에 대해서는 좀 고민을 해봐야겠다. ​ ​ 우선 플러터로 만든 미소 닭갈비 앱은 2/23(화)에 구글 플레이스토..

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

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

VS Code에서 플러터로 소스를 수정 후 디버깅할 때 에뮬레이터 우측 상단에 디버그 배너가 항상 보이는데 이 배너가 거슬리는 사람을 위해서 포스팅한다. ​ 아래 이미지 우측 상단을 보면 DEBUG라는 표시가 보임 ​ 소스 코드에서 다음을 추가한다. ​ debugShowCheckedModeBanner: false, 이후 디버깅을 수행해보면 우측 상단에 보이던 DEBUG 배너가 사라진 것을 볼 수 있다. 별거 아니지만 디버깅할 때마다 DEBUG 띠가 보이는 게 거슬리는 사람을 위해서 포스팅한다. ​ 아 그리고 이전 포스팅에서 앱 이름을 5글자로 정했더니 잘려서 고민이었는데 앱 이름은 그냥 '닭갈비'로 심플하게 정리했다. ​ 좌측 상단 앱을 보면 '닭갈비'라고 아주 심플한 앱이 보인다.

이번에는 플러터 앱 아이콘을 아주 쉽게 추가해보겠다. 패키지를 이용해서 안드로이드와 iOS를 한방에 바꾸는 것이 바로 플러터의 매력이 아니겠는가?! 아이콘 추가 우선 이 전 포스팅에서 추가했던 Assets 폴더에 Icon 폴더를 추가 후 Icon을 해당 폴더에 삽입했다. 패키지 추가 이제 pubspec.yaml에서 flutter_launcher_icons 패키지를 호출하자. 현재 0.8.1 버전까지 나왔다. 아직 1.0까지는 안되서 아쉽네 그리고 줄 바꿈 주의 후 flutter_icons와 내용을 추가하자. android: true, ios: true 부분이 각각 플랫폼에 자동으로 처리해준다. flutter_launcher_icons: ^0.8.1 flutter_icons: android: "launch..