분류 전체보기 (58)

플러터에서 json 데이터 encode, decode 처리하는 방법 이번에는 플러터에서 json 데이터를 인코딩, 디코딩하는 코드를 구현해볼게요. 너무 간단한데 가끔 코드를 깜빡하는 절 위해... 또는 저와 비슷한 누군가를 위해 남겨볼게요. dart:convert 라이브러리 추가 import 'dart:convert'; json encoding void main() { final items = [ {'id': 1, 'title': 'Item 1'}, {'id': 2, 'title': 'Item 2'}, ]; print(json.encode(items)); } 인코딩 출력 결과 >>> [{'id':1,'title':'Item 1'},{'id':2,'title':'Item 2'}] json decoding ..

플러터에서 앱 로딩 화면인 Splash Screen 적용하는 방법 앱을 최초 실행할 때 한 번 나타나는 화면인 스플래시 스크린(Splash Screen)을 추가하면 사용자에서 더 좋은 앱 환경을 제공할 수 있습니다. 우선 앱의 메인 페이지가 나타나기 전에 필요한 사용자 데이터, 이미지, 폰트 등을 미리 불러올 수 있습니다. 또 잠깐 스쳐가는 화면이지만 그 짧은 사이에 앱의 목적이나 방향성, 슬로건을 사용자에게 지속적으로 제시할 수 있는 작은 마케팅도 가능합니다. 이러한 마케팅은 앱을 처음 다운로드 받아서 이용해 보는 사용자에게 사전에 앱의 전반적인 분위기를 느끼도록 제공할 수 있다고 생각합니다. 개인적인 생각이지만 지속적으로 사용자에게 앱의 슬로건이나 앱이 지향하는 이미지를 보여주다 보면, 언젠가 이미지..

플러터에서 행 데이터 자동으로 다음 줄로 바꿔주는 Wrap 위젯 앱을 만들다 보면 너비가 일정하지 않은 데이터를 순차적으로 나열하면서 자동으로 줄 바꿈까지 되게끔 구현하고 싶은 경우가 있습니다. 예를 들면 #플러터 #위젯 #줄바꿈 같은 태그를 나타낼 때가 있습니다. 그런데 여러 개의 위젯을 나열하기 위해 Row()를 사용해보면, children에 속한 위젯의 너비가 Row의 너비를 초과할 경우, 다음과 같은 픽셀 오류가 발생하면서 줄 바꿈이 안되는 것을 확인할 수 있습니다. A RenderFlex overflowed by 300 pixels on the right. 이때 Wrap 위젯을 사용하면 문제를 간단히 해결할 수 있습니다. Wrap 위젯은 자식 위젯을 하나씩 순차적으로 채워가면서 너비를 초과하면 ..

그리드뷰 (GridView) 위젯으로 카드 리스트를 쉽게 만드는 방법 우리는 앱을 이용하는 사용자에게 제공하는 콘텐츠나 정보의 양이 많을 때, 리스트 형식의 디자인을 활용할 수 있습니다. 주로 한 줄에 하나의 정보가 담긴 단순한 리스트, 한 줄에 여러 개의 정보가 카드 모양으로 담긴 카드형 리스트를 쉽게 찾아볼 수 있는데요. 이번 글에서는 그중에서 카드 형식의 리스트를 플러터에서는 어떻게 구현할 수 있는지 알아보도록 하겠습니다. 아래 사진은 그리드뷰 GridView() 위젯을 이용해서 카드형 리스트를 만든 예시입니다. 1. GridView.builder 방식 먼저 그리드뷰를 builder 방식으로 구현하는 방법입니다. GridView.builder() 에서 그리드를 만드는 방식은 2가지가 존재하는데요...

맥에서 Unable to boot simulator 해결하는 방법 Mac OS에서 [Flutter: Launch Emulator] 명령어를 실행하면 가끔 아래와 같은 오류 안내 문구와 함께 시뮬레이터가 정상적으로 실행되지 않는 오류가 발생합니다. Unable to boot simulator 저도 구글링으로 해결 방법을 찾아봤는데요. 주로 기존 시뮬레이터를 삭제하고 다시 설치하는 방법이 가장 많았습니다. 하지만 게으른 저에게 이 방법은... 매우 번거롭더라고요. 그래서 조금이나마 간단하게 해결했던 방법을 알려드릴게요. 바탕화면 좌측 상단부 애플 아이콘을 클릭하셔서 이 Mac에 관하여 > 저장 공간 > 관리 > 개발자 > xcode 프로젝트 빌드 파일 > xcode 캐시 항목을 선택하시고 삭제합니다. 그리고..

플러터에서 Column 안에 ListView 사용하는 방법 플러터에서 리스트 위젯은 정말 다양하게 사용됩니다. 다음과 같은 상황에 주로 사용되며 이외에도 리스트는 많은 기능을 구현하는데 활용되곤 합니다. 1. 화면 전체가 리스트 스크롤 영역인 경우 2. 상단부는 검색란 고정, 하단부는 리스트 스크롤 영역인 경우 3. 화면 전체가 리스트 스크롤 영역이면서 안에 스크롤이 없는 하위 리스트가 포함된 경우 이때 Column, ListView 위젯 안에 ListView를 적용하게 되면 아래와 같은 hasSize 오류가 발생합니다. 이는 ListView의 부모 위젯 높이가 무한대이기 때문에 발생한 오류로, ListView가 차지하는 공간 크기를 설정해줘야 한다는 내용입니다. 그러면 문제를 해결하는 3가지 방법에 대..

플러터에서 이미지를 해상도에 따라 자동으로 지정하는 방법 우리가 만든 앱은 모바일 뿐만 아니라 태블릿, 데스크탑에서도 사용자가 이용할 수 있습니다. 그러다 보니 모바일에만 초점을 맞춰서 디자인을 하게 되면, 태블릿에서는 상당한 여백이 생겨서 우리가 의도한 디자인과 멀어지게 되고, 가독성 마저 떨어질 수 있습니다. 예를 들어, 모바일에서 사용되는 이미지 크기가 너무 작다면, 태블릿에서는 당연히 더 작아 보이겠죠? 그렇다고 크기가 큰 이미지를 사용하기에는 오히려 모바일에서 낭비인 것 같고요. 이런 경우에는 사용자가 이용 중인 기기의 해상도에 맞춰서 이미지를 변경해주는 방법이 있습니다. 그럼 플러터에서 어떻게 기기, 해상도에 따라서 자동으로 이미지를 불러오도록 설정하는지 알아보겠습니다. 해상도 폴더 생성하기 ..

플러터에서 로컬, 네트워크 이미지 사용하는 방법 우리는 앱에 적절한 이미지를 추가하여 사용자가 앱을 이해하기 쉽게 유도하거나, 앱의 분위기와 느낌(?)을 만들 수 있습니다. 이때 사용되는 이미지는 주로 로컬 저장소나 서버 요청으로 불러오는데요. 플러터에서는 Image() 위젯을 이용하면 간단하게 처리할 수 있습니다. 그럼 어떻게 이미지를 불러와서 화면에 나타내는지 알아보도록 하겠습니다. 로컬 이미지 우선 로컬에 저장된 이미지를 불러오려면 실제로 저장된 이미지가 있어야겠죠? 프로젝트의 최상위 위치에 assets 폴더를 생성합니다. 참고로 폴더 이름은 자유롭게 사용하시면 됩니다. 그리고 해당 폴더에 우리가 사용할 이미지를 추가합니다. 위젯에서 로컬 이미지를 표시하기 위해서는 pubspec.yaml 파일에 사..

showModalBottomSheet 위젯에서 setState 처리 방법 플러터에서 제공하는 showModalBottomSheet 위젯을 사용해보면 setState를 하더라도 모달 위젯 내부의 값이 바로 변경되지 않고, 모달 창을 닫았다가 열면 그제야 변경된 값이 반영된 것을 확인하실 수 있습니다. 만약 모달 창이 열린 상태에서 사용자가 라디오나 체크박스로 옵션값을 변경하도록 구현하시려는데, 버튼을 눌러도 체크값이 변경되지 않는다면 안 되겠죠? 이런 문제를 해결하는 방법에 대해 알아보겠습니다. StatefulBuilder 사용하기 showModalBottomSheet 위젯을 빌드하기 전에 StatefulBuilder 위젯으로 감싸줍니다. 그리고서 StatefulBuilder의 세터 함수 bottomSta..

플러터에서 키보드가 열렸는지 닫혔는지 확인하는 방법 사용자가 키보드를 열었을 때와 닫았을 때 디자인을 다르게 보이게 하거나, 특정 이벤트를 실행시키도록 앱을 만들어야 하는 상황이 생길 수 있습니다. 이때 flutter_keyboard_visibility 패키지를 이용하면 키보드의 활성 상태를 간단하게 확인할 수 있습니다. 아래는 패키지를 활용해서 키보드 상태가 변경될 때마다 글자와 자물쇠 아이콘이 바뀌는 예시 화면입니다. 패키지 설치 패키지의 최신 버전을 확인하고, pubspec.yaml 파일의 dependencies 위치에 패키지를 추가하여 설치합니다. (https://pub.dev/packages/flutter_keyboard_visibility/install) // pubspec.yaml depen..