Flutter (37)

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

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

플러터 화면 아래에서 나타나는 ModalBottomSheet 위젯 우리는 사용자가 특정 항목의 선택지를 고르는 기능을 다양한 방법으로 제공할 수 있습니다. 그중에서 선택지가 많은 경우 자주 사용되는 ModalBottomSheet 위젯에 대해 알아보겠습니다. 만약 항목과 선택지가 적다면 체크박스, 라디오 버튼으로도 충분합니다. 하지만 선택지가 3~5개 이상이거나 항목이 많다면 오히려 사용자의 가독성 떨어뜨릴 수 있다고 생각합니다. 이때 ModalBottomSheet 위젯을 활용하는게 하나의 방법입니다. 우선 구현하려는 ModalBottomSheet 기능은 아래와 같은 모습입니다. 기본 코드 showModalBottomSheet 위젯만 추가하면 끝입니다. 참고로 모달 위젯은 onTap, onPressed ..

플러터에서 숫자 세 자리, 천 단위마다 콤마 넣는 방법 숫자의 단위가 커지다 보면 천 단위마다 콤마로 구분해주는 게 사용자의 가독성을 높이는데 도움이 되는데요. 플러터에서는 intl 패키지에 있는 NumberFormat을 이용하여 숫자 형식을 간단하게 변환할 수 있어요. 우선 플러터 패키지 사이트 (https://pub.dev/packages/intl/install)에서 intl 최신 버전을 확인하고, pubspec.yaml 파일에 추가합니다. dependencies: intl: ^0.17.0 천 단위마다 콤마 표기 import 'package:intl/intl.dart'; var f = NumberFormat('###,###,###,###'); print(f.format(1000000)); // 결과 ..

플러터 리스트 스크롤 위치 이동하기 상황에 따라 리스트의 스크롤 위치를 특정 위치로 이동시켜주는 기능이 필요해요. 예를 들어 검색 화면에서 검색어가 변경될 때마다 스크롤 위치를 맨 위로 이동시키거나, 채팅 화면에서 가장 최근 대화한 위치로 스크롤을 이동시키는 버튼을 추가해서, 사용자가 다음 작업을 조금 더 편하게 진행할 수 있도록 도울 수 있거든요. 플러터나 리액트 네이티브의 경우, 상태가 변경되었을 때만 해당 위젯이나 컴포넌트를 업데이트하기 때문에 리스트에 내용이 변경되더라도 스크롤 위치는 그대로인 것을 경험하신 적 있을 거예요. 그러면 플러터에서는 리스트 스크롤 위치를 어떻게 이동시키는지 구현해보도록 할게요. import 'package:flutter/material.dart'; class PostL..

Some Android licenses not accepted 오류 해결 플러터 설치가 잘 되었는지 $ flutter doctor 명령어를 실행했는데, 아래와 같이 안드로이드 라이센스 경고 문구가 나타난 경우 해결하는 방법은 정말 간단해요. 사실 경고 문구에 친절하게 해결하는 방법을 알려주고 있는데요. 아래 명령어를 실행하고 모든 라이센스 동의 여부를 동의해주면 끝이에요. $ flutter doctor --android-licenses 이제 잘 해결되었는지 다시 $ flutter doctor 명령어로 확인해보면 아래와 같이 Android toolchain 항목이 기분 좋은 초록색으로 체크된 것을 볼 수 있을 거예요. 조금이라도 누군가에게 도움이 되는 글이면 좋겠네요! 오늘도 즐거운 플러터 개발하시길 바래..

cmdline-tools component is missing 오류 해결 플러터가 제대로 설치되었는지 $ flutter doctor 명령어를 실행했는데, 아래와 같이 Android toolchain 환경 설정이 안 되었다는 문구가 나타난 경우 해결하는 방법에 대해 알아볼게요. 빨간색, 주황색 경고는 못 참겠잖아요...😂 우선 Android Studio를 실행합니다. 그리고서 Preferences > Appearance & Behavior > System Settings > Android SDK 메뉴 항목을 선택하고, SDK Tools 탭에서 Android SDK Command-line Tools (latest) 항목을 체크하고 우측 하단에 위치한 [apply] 버튼을 누르고 설치를 진행합니다. 설치가 끝..

M1 맥북에 플러터 3.0.0 버전 설치하기 플러터 3.0.0 버전을 맥북 M1에 설치하는 방법과 환경변수(PATH)를 설정하는 방법은 간단합니다. 여러 블로그 글을 찾아보니 플러터를 설치하는 과정은 대부분 동일한데, 환경변수 설정은 약간씩 차이가 있어서 헷갈리더군요. 그래서 가장 쉬운 방법으로 정리해보려고 합니다. 1. Flutter 3.0.0 설치 플러터 설치를 위해 공식 사이트에서 Apple Silicon SDK를 다운로드합니다. 현재 글이 맥 기준이라 macos 링크를 남겨둘게요. (https://docs.flutter.dev/get-started/install/macos) 설치 파일 다운로드가 끝났으면 원하는 경로에 플러터 SDK 파일을 압축 해제합니다. 저는 공식 문서에 나온 대로 [사용자] ..

플러터 리스트 스크롤이 보이도록 적용하는 방법 리액트 네이티브에선 기본적으로 리스트 스크롤이 보이도록 적용되어 있었는데, 플러터는 ListView 위젯을 사용하더라도 스크롤이 보이지 않아서 추가적인 작업이 필요합니다. 리스트 스크롤 표시는 Scrollbar() 위젯만 추가하면 간단하게 해결되며, 스크롤의 색상과 크기는 속성값으로 변경할 수 있습니다. - thickness : 스크롤 너비 (기본값 4.0) - radius : 스크롤 라운딩 (기본값 8.0) - isAlwaysShown : 항상 보이게 할 것인지 샘플 코드 class PostList extends StatelessWidget { @override Widget build(BuildContext context) { return Scrollbar..

플러터 ListVIew 위젯으로 리스트 생성하기 플러터에서는 ListView 위젯을 사용하면 리스트를 간단하게 생성할 수 있습니다. ListView 위젯은 목적에 따라 다양한 방법으로 리스트를 구현할 수 있는데요. 간단한 리스트를 만들 때는 ListView() 기본 생성자를, builder 방식으로 구현하려면 ListView.builder(), 리스트 아이템 사이에 구분자를 추가하려면 ListView.separated() 방법을 사용할 수 있습니다. 샘플 코드 1. ListView() - 기본 생성자를 이용하는 방법. class PostList extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( ..