슬기로운 IT생활

안드로이드 스튜디오 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..

이제는 두 번째 화면인 메뉴 화면을 만들어보겠다. ​ 사실 메뉴판은 대표 메뉴로 어떤 음식이 있고 금액은 얼마인지 그리고 원산지가 어디인지만 잘 표현되면 된다. 그래서 홈페이지에 있는 메뉴판 내용을 그대로 가져왔다 ​ ​ 가게 안내 페이지와 동일하게 이름만 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를 안 ..