Flutter [Flutter] TextField 바깥 영역을 터치 했을 때 키보드가 감춰지게 만들기 Flutter의 TextField는 유저의 인풋을 받기 위해 사용하는데 한번 Focus가 들어가면 키보드의 "완료" 버튼을 누르거나 키보드 감추기 버튼을 누르지 않으면 키보드가 화면에서 사라지지 않는다. 이번 포스트에서는 TextField의 바깥 영역을 사용자가 터치 했을 때 키보드가 감춰지게 만드는 법에 대해서 간단하게 알아본다. onTapOutside TextField 위젯에는 onTapOutside 라는 설정을 할 수가 있다. 말 그대로
Flutter [Flutter] TextField의 값을 TextInputFormatter를 이용하여 내가 원하는 포멧으로 바꾸기 Flutter에서 사용자의 입력을 받을 때는 주로 TextField를 사용하게 되는데, 아무 값이나 아무 포멧으로 받아들이는게 아니고 내가 원하는 값을 원하는 포멧으로만 받아들일 수 있도록 설정하고 싶은 경우가 생긴다. 예를 들면 전화번호 입력창이나 카드번호 입력창의 경우, UX적인 부분에 있어서도 정해진 포멧으로 자동으로 입력이 되는 것이 사용자 입장에서도 알기 쉽다. 이번 포스트에서는 Flutter의
Flutter Flutter에서 Locale을 적용하는 법에 대해 알아보자 Flutter로 개발을 하다보면 이미 기본적으로 탑재되어 있는 위젯들을 사용할 때 기본 설정으로 언어는 영어로 설정이 되어있다. 예를 들면 날짜를 선택 할 수 있게 도와주는 showDatePicker 같은 경우 locale 옵션을 따로 설정하지 않으면 영어로 나오게 된다. 그 외에도 여러 언어를 지원하는 앱을 만드는 경우 locale 설정은 필수이다. 이번 포스트에서는 Flutter에서 Locale을
Flutter Flutter에 Firebase를 연결하는 법 Flutter와 Firebase는 함께 자주 쓰는 일이 잦은데, 연결은 처음에 한번만 하면 그 다음부터 신경을 안써도 되다보니 기억을 잘 못하고, 매번 새로운 프로잭트를 실행 할 때마다 방법을 찾아보았다. 매번 찾기 귀찮아서 이번 포스팅에 정리를 해보았다. iOS, Android, Web 3가지 모두를 연결하는 법에 대해 알아본다. # iOS 우선 패키지명을 정하는 것부터 시작을 해야한다.
Flutter Flutter에서 Responsive Layout 설정하는 방법 Flutter는 WebApp에도 대응하고 있기 때문에 responsive layout을 설정 할 수 있다. 이번 포스트에서는 어떻게 구현하면 되는지 설정 방법에 대해 간단히 알아본다. #Responsive Layout Widget main.dart에 있는 MaterialApp에 직접 코드를 작성하는 것도 좋지만 관리를 편하게 하기 위해 레이아웃용 위젯을 따로 만드는 것이 용이하다. responsive_layout_screen.dart import 'package:flutter/
Flutter [Flutter] 사용자 지정 이미지와 폰트를 사용 할 수 있도록 설정하기 Flutter 앱에서 이미지와 폰트를 사용하기 위해서는 앱을 패키징 할 때 필요한 파일들이 같이 패키징이 되도록 설정을 해 주어야 한다. 이번 포스트에서는 어떻게 설정하는 지 알아본다. #pubspec.yaml 파일 수정 앱에 패키징 할 파일들과 라이브버리 설정은 pubspec.yaml에서 한다. 이 파일은 프로젝트의 루트 디렉토리에 존재하고 있다. 우선 pubspec.yaml을 수정하기 전에
Flutter Flutter를 이용한 앱 개발 준비 본격적으로 Flutter를 이용한 앱 개발을 시작하기 전에 갖춰야 할 개발 환경과 알아두면 좋은 것들에 대하여 정리 해 보았다. # IDE 설정 Flutter 개발은 Flutter SDK만 컴퓨터에 설치 되어 있으면 어떤 IDE를 사용해도 개발 자체는 가능하지만, 개발을 편하게 하기 위해선 Android Studio를 추천한다. 그 다음으로 추천하는 건 Visual Studio Code. Android Studio를
Flutter Flutter로 Android앱을 개발하기 위한 설정 이번 포스트에서는 Flutter의 Android앱 용 설정에 대해 알아본다. #Android Studio 설치 우선 Android Studio가 설치되어있어야한다. 공식 홈페이지에서 자신의 os에 맞는 버전을 다운로드 하여 설치하자. #에뮬레이터로 실행하는 방법 설치가 끝나면 Android Studio를 실행하고 자신의 flutter 프로잭트가 있는 폴더안에 있는 android 폴더를 선택해서 열어준다. (사실 새로운 프로잭트 생성, 혹은 아무 다른 프로잭트를
Flutter Flutter앱을 실제 iPhone에서 테스트하기 위해 필요한 설정 지난 포스팅에서는 iOS앱을 시뮬레이터로 돌리기 위한 설정에 대해 설명하였다. 이번 포스팅에서는 실제 아이폰에서 구동시키기 위해 필요한 설정에 대해서 알아보도록 한다. 우선 터미널을 열고 자신의 flutter 프로잭트가 있는 디렉토리에서 아래 커맨드를 실행한다. open ios/Runner.xcworkspace 그러면 xcode가 열린다. 우선 아이폰을 컴퓨터에 연결한다. 그 다음 왼쪽 위에 "Runner > iPhone xx" 부분을
Flutter Flutter에서 iOS 앱 개발을 위한 설정 Flutter를 이용하여 iOS 앱을 개발하기 위해서는 Flutter의 기본적인 설치 외에 해야 하는 설정들이 있다. 이번 포스트에서는 필요한 설정에 대해 알아본다. # Xcode 설치 iOS 앱을 개발하기 위해서는 무조건 Xcode가 설치되어 있어야 한다. 앱스토어에서 다운로드 받을 수 있다. 다운로드 받고 설치가 끝났다면 터미널에서 아래 커맨드를 실행해주자. sudo xcode-select --switch /Applications/Xcode.app/
Flutter Flutter를 설치해보자 Flutter는 구글에서 개발한 프레임워크로 모바일웹, 웹앱, 데스크탑앱을 모두 하나의 코드베이스로 만들 수 있다. 사용하는 프로그래밍 언어는 DART. 이번 포스팅에서는 MacOS에서 Flutter를 설치하는 법을 알아본다. 리눅스와 윈도우에서도 Flutter를 사용할 수 있지만 iOS앱을 만들 수 없다. iOS앱을 패키징 하는데는 Xcode가 필수인데 맥에서 밖에 지원이 안되는 것으로 알고 있다. # Flutter 파일 다운로드 공식
![[Flutter] TextField 바깥 영역을 터치 했을 때 키보드가 감춰지게 만들기](/content/images/size/w600/2023/10/flutter_logo.webp){kind=logo}
![[Flutter] TextField의 값을 TextInputFormatter를 이용하여 내가 원하는 포멧으로 바꾸기](/content/images/size/w600/2023/10/flutter_logo-2.webp){kind=logo}
![[Flutter] 사용자 지정 이미지와 폰트를 사용 할 수 있도록 설정하기](https://storage.googleapis.com/sy34-ghost/2021/05/flutter-logo-sharing-1.png){kind=logo}
