Flutter(119)
-
[001] 플러터 (Flutter) 실전어플제작 - 쇼핑몰 앱 제작(UI구성1 - 제품 리스트 페이지 만들기)
안녕하세요~ totally 개발자입니다. 그 동안의 플러터 기본기를 통하여 간단하면서도 중요한 기능들은 포함한 (PG 기능은 실제로 구현하지는 않지만 필요한 입력값들은 다 받고 주문완료까지 표시해줄 수 있도록 만들 계획입니다. 구성은 아래와 같습니다. UI 구성(제품 리스트, 제품 상세, 장바구니, 결제시작, 구매완료, 구매내역 확인, 구매 취소 등등) 백엔드 연동 (제품, 주문내역 등 데이터베이스 테이블로 저장 및 불러옴) Step 1: 플러터 쇼핑몰 앱 제작에 필요한 프로젝트는 이미 준비되어 있다고 가정하고 시작합니다. 실제 업무에서는 디자인 팀에서 제공해주는 Figma, XD 등 디자인 툴을 이용하여 UI를 보고 따라하지만 여기에서는 그런 과정을 모두 생략하고 MVP 형식의 제일 간단한 UI로 진행..
2023.09.24 -
[012] 플러터 (Flutter) Tip - Incorrect use of ParentDataWidget 해결 방법
안녕하세요~ totally 개발자입니다. 플러터 개발시 하위 위젯을 굉장히 많이 배치를 하게 되는데 이 때 Incorrect use of ParentDataWidget이라는 오류가 발생하는 경우가 있습니다. 대표적인 경우가 Flexible, Expanded, Positioned 등과 같은 위젯인데요. 이 위젯들의 상위 parent에 적절한 위젯이 들어가지 않으면 오류 메시지가 출력되게 됩니다. 물론 앱 실행상에서는 지장이 없는 경우도 있지만 해결하는 것이 권장됩니다. Flexible, Expanded의 경우에는 Row, Column, Flex 위젯으로 감싸주셔야 합니다. Flexible, Expanded 자체가 여백을 확장하여 채워주는 위젯이기 때문에 2개 이상의 위젯이 들어갈 수 있는 children ..
2023.09.21 -
[011] 플러터 (Flutter) Tip - ListView 등 위젯 사용시 위아래 padding 제거하기
안녕하세요~ totally 개발자입니다. ListView, ListView.builder 등을 쓸 때 위아래로 여백(padding)이 생기는 경우가 종종 있습니다. 그 때 신속하게 해결 가능한 방법은 아래와 같습니다. 보통 2가지 방법이 존재합니다. 1. ListView에 있는 padding 속성으로 해결 2. parent 위젯으로 MediaQuery 위젯을 사용하여 해결 이미 padding이 쓰이는 경우라면 2번 방법으로도 해결할 수 있습니다.
2023.09.20 -
[010] 플러터 (Flutter) Tip - Null Safety 적용하기(Migrating to Null Safety)
안녕하세요~ totally 개발자입니다. Migrating to Null Safety 이 포스팅에서는 Null Safety에 대해서 살펴봅니다. Null Safety는 플러터 2.0, 다트 2.12부터 지원되기 시작했으며 Null Safety를 사용하여 모든 변수는 null로 처리되지 않으며 non-nullable의 변수를 위해서 체크 할 필요가 없습니다. 또한 클래스를 선언할 때 선언할 때 초기화를 하거나 ? 표시나 late 키워드를 통해 사용해주셔야 합니다. 그래서 String message = ""; 또는 String? message; late String message;로 사용합니다. Null Safety를 통해 코드 컴파일 실행 전에 오류로 인식하여 미리 수정할 수 있습니다. 플러터 2.0, 다..
2023.09.03 -
[070] 플러터 (Flutter) 배우기 - 머터리얼 (Material 3) 디자인 사용해서 빠르게 부드러운 색상 적용하기
안녕하세요~ totally 개발자입니다. Material 3 Design 보통 플러터 앱 개발을 하실 때 로직 부분을 개발하는데에도 시간이 많이 소요되지만 디자인적인 측면에서도 시간이 많이 소요되는 것을 느끼실 것입니다. 그 때 구글의 머터리얼 (Material) 3의 디자인을 적용하면 디자인적으로 통일성과 자연스러움을 간단하게 적용할 수 있습니다. 사용을 위해서는 당연히 플러터는 업그레이드가 되어 있어야 합니다. 상세한 내용을 아래를 통해 가이드를 확인할 수 있습니다. https://m3.material.io/ Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by op..
2023.09.02 -
[069] 플러터 (Flutter) 배우기 - TabBarView와 InAppWebView와 연동(스크롤 이슈도 해결하기)
안녕하세요~ totally 개발자입니다. TabBarView & InAppWebView WebView를 사용할 때 패키지는 주로 flutter_inappwebview나 webview_flutter가 사용됩니다. 이 때 flutter_inappwebview를 사용하고 TabBarView를 이용할 때 스크롤이 되지 않는 문제가 있는데 그 때에는 아래 Stackoverflow에 나와 있는 대로 Set()..add 부분을 추가해주시면 됩니다. https://stackoverflow.com/questions/67345346/flutter-inappwebview-scroll-not-working-inside-the-nestedscrollview-tabbarview Flutter inappwebview scroll ..
2023.08.12