앱개발(96)
-
[001] 플러터 (Flutter) Windows App Tip - 마우스 클릭으로 스크롤 기능 활성화하기
안녕하세요~ totally 개발자입니다. 윈도우 앱으로 플러터를 빌드했을 때 기본적으로 마우스의 스크롤 기능으로만 상하좌우 스크롤이 가능하게 됩니다. 이렇게 되면 pull to refresh, 위로 제스쳐하여 새로고침하는 RefreshIndicator 위젯을 활성화할 수 없는데 이 경우 이 방법을 쓰면 마우스 왼쪽 클릭으로도 스크롤 기능을 부여할 수 있습니다. Step 1: main.dart나 다른 dart 파일을 생성하여 CustomScrollBehavior 클래스(클래스명은 변경되어도 무방합니다)를 만들어줍니다. class CustomScrollBehavior extends MaterialScrollBehavior { @override Set get dragDevices => { PointerDevi..
2023.11.03 -
[013] 플러터 (Flutter) Tip - cocoapods-downloader requires Ruby version >= 2.7.4 (ruby 버전 문제) 해결 방법
안녕하세요~ totally 개발자입니다. 패키지 등을 업데이트하여 빌드하려고 할 때 아래와 같은 에러를 마주하는 경우가 있습니다. sudo gem install cocoapods를 진행할 때 나올 수 있는 오류인데요. 여러 가지 방법을 시도해본 결과 다음의 방법으로 해결하였으니 참고하시면 좋을 것 같습니다. There are no versions of cocoapods-downloader (>= 2.0) compatible with your Ruby & RubyGems. Maybe try installing an older version of the gem you're looking for? cocoapods-downloader requires Ruby version >= 2.7.4. The curren..
2023.11.01 -
[005] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성5 - 제품 결제시작 페이지 만들기 2)
안녕하세요~ totally 개발자입니다. 저번 포스팅에 이어 결제시작 페이지를 작업해보겠습니다. 먼저 우편번호 부분을 API를 통해 구현할 것입니다. Step 1: pubspec.yaml에 kpostal 패키지를 추가하고 터미널에 flutter pub get 입력해줍니다. kpostal 패키지 참고 https://pub.dev/packages/kpostal kpostal | Flutter Package Kpostal package can search for Korean postal addresses using Kakao postcode service. This package is inspired by Kopo package that is discontinued. pub.dev Step 2: 안드로이드와..
2023.10.14 -
[004] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성4 - 제품 결제시작 페이지 만들기 1)
안녕하세요~ totally 개발자입니다. 이번 포스팅에서는 결제시작 페이지 UI 구성에 대해 살펴보도록 하겠습니다. Step 1: item_basket_page.dart를 복사하셔서 이름을 item_checkout_page.dart로 변경해줍니다. 클래스, State 명도 모두 변경해줍니다. Step 2: basketList 변수를 checkoutList로 이름을 변경해주고 quantityList는 그대로 내버려둡니다. Step 3: 아래에 있는 basketContainer 위젯의 이름을 checkoutContainer로 변경해줍니다. Step 4: 다음 부분처럼 title과 basketList를 checkoutList로 변경해주시면 됩니다. 또한 53번째 줄에 basketContainer를 checko..
2023.10.09 -
[003] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성3 - 제품 장바구니 페이지 만들기)
안녕하세요~ totally 개발자입니다. 이번 시간에는 장바구니 페이지 UI 구성에 대해서 살펴봅니다. Step 1: item_basket_page.dart 파일을 생성하여 다음처럼 뼈대를 만들고 시작합니다. Step 2: 장바구니에 담긴 제품들을 표시할 ListView를 만들어주기 위해 Mock Data를 간단히 리스트 변수로 선언하여 줍니다. 먼저 UI에 중점을 두기 때문에 이렇게 하는 것이고 실제로는 이렇게 하면 안 되기 때문에 나중에 기능 부분을 구현할 때 이 부분은 당연히 수정할 것입니다. 먼저 기존 제품 리스트 변수처럼 2개 제품을 넣고, 27번째 줄에 quantityList를 별도로 만들어서 { key: value }를 { productNo: quantity } 형식으로 하여 제품 고유번호를..
2023.09.28 -
[002] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성2 - 제품 상세 페이지 만들기)
안녕하세요~ totally 개발자입니다. 이전 강좌에 이어 이번 포스팅에서는 제품 리스트에서 각 제품을 클릭했을 때 각 제품의 상세 페이지로 이동해줄 수 있도록 상세 페이지를 만들어보도록 하겠습니다. Step 1: constants.dart 파일을 먼저 생성해줍니다. Step 2: 저번 시간에 item_list_page.dart에서 만들었던 NumberFormat 부분이 계속 사용되고 중복되는 관계로 이 변수를 constants.dart 파일 여기로 분리해줍니다. 아래 부분을 없애주시고, 아래 constants.dart 파일에 다음처럼 복사해주신 뒤, 그 후에 오류로 표시되어 있는 numberFormat에 필요한 이 부분을 임포트하여 줍니다. item_list_page.dart에서 constants를 임..
2023.09.28