슬기로운 IT생활

첫 번째 화면에 해당하는 '가게 안내' 페이지를 작성하기 전에 앱 상단 바를 애니메이션 스크롤 형태로 만들겠다. ​ 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..

플러터 패키지 중 애니메이티드 스플래시 스크린 패키지를 이용해서 앱 실행 시 스플래시 스크린(시작화면)의 애니메이션을 쉽게 만드는 방법을 알려주려고 한다. 아래와 같이 이미지나 아이콘을 이동하거나, 웹에 있는 이미지를 이용해서 애니메이션 스플래시 스크린이 가능하다. 패키지 사이트 주소는 아래 URL 참고 https://pub.dev/packages/animated_splash_screen 패키지를 보면 현재 기준 1.0.1+2까지 나왔다. animated_splash_screen 패키지 추가 자 이제 VS Code에서 패키지를 다운 받아보자. 아래와 같이 pubspec.yaml 파일의 dependencies 내에서 패키지 이름과 버전을 입력한다. animated_splash_screen: ^1.0.1+2..