주제 (58)

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

플러터에서 소수점 올림, 버림, 반올림, 소수점 자릿수 고정 숫자 계산을 하다보면 상황에 따라서, 가독성을 높이기 위해서 소수점이 포함된 숫자를 올림 또는 버림, 반올림 처리를 해야 할 때가 있습니다. 이번 포스트에서는 플러터에서 소수점 처리를 어떻게 하는지 알아볼게요. 올림 소수점 이하 값을 올림 처리하기 위해서는 ceil 함수를 사용하면 됩니다. var num = 1.234; var result = num.ceil(); print(result); // 결과 => 2 버림 소수점 이하 값을 버림 처리하기 위해서는 floor 함수를 쓰면 됩니다. var num = 9.876; var result = num.floor(); print(result); // 결과 => 9 반올림 소수점 이하 값을 반올림하기 ..

플러터에서 숫자 세 자리, 천 단위마다 콤마 넣는 방법 숫자의 단위가 커지다 보면 천 단위마다 콤마로 구분해주는 게 사용자의 가독성을 높이는데 도움이 되는데요. 플러터에서는 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)); // 결과 ..

플러터에서 사용자 입력 키보드를 슉 숨기는 방법 TextField 위젯은 사용자 입력을 받기 위해 자주 사용되는데요. TextField 입력란을 누르면 화면에 키보드가 나타나게 되고, 이를 닫기 위해선 안드로이드의 경우 뒤로가기 버튼이나 ios에선 완료 버튼을 눌러야만 키보드가 사라지는 것을 확인하실 수 있을 거예요. "잉...? 우리가 평소 사용하던 앱에서는 키보드 밖에 영역을 터치하거나 누르면 키보드가 스르륵 사라지던데..." 키보드를 닫으려고 항상 작은 버튼을 누르는 것은 사용자에게 불편한 경험을 제공하는 거라 생각해요. 그래서 작은 버튼을 누르지 않고 키보드를 숨기는 간단한 방법에 대해 알아볼게요. 1단계: 사용자 탭 감지하기 우선 사용자가 TextField 외부 영역을 탭 했는지 감지하기 위해 ..

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

Joel Adams - Fake Friends 오늘은 새벽 코딩에 지쳐있을 때 듣기 좋은 곡 하나 추천드릴게요. 너무 흥이 넘치면 나도 모르게 노래에 집중돼서 피곤한데, 이 노래는 적당한 흥으로 코딩하면서 듣기 좋더라고요~🎵 가사 코드 Lately you and I can't even hold a conversation It's like I'm talking to a wall, I hear that You've been running around telling people you hate me Somehow I didn't even know And I've been talkin' to your mama She said, "Boy, it's such a shame." She knows that I've a..

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 파일을 압축 해제합니다. 저는 공식 문서에 나온 대로 [사용자] ..

macOS Monterey version 12.3.1 ./MacOS/Electron: No such file or directory 오류 해결 맥 소프트웨어를 업데이트하고서 VsCode code. 터미널 명령어 실행이 안 되는 경우, code. 명령어를 실행했는데 아래와 같은 오류가 발생한 경우 해결했던 방법입니다. /usr/local/bin/code: line 6: python: command not found /usr/local/bin/code: line 10: ./MacOS/Electron: No such file or directory 참고로 저는 맥북 M1을 사용하고 있습니다. 그럼 터미널을 실행시켜 아래 순서에 맞춰 작업을 진행하시면 됩니다. $ cd/usr/local/bin $ nano co..