내가 필요해서 모아두는 플러터 팁들

TextField의 글자수 제한 방법 1) maxLength : 5 / maxLengthEnforced : true 2) inputFormatters:LengthLimitingTextInputFormatter(10)하지만 위의 방법을 적용해도 다음과 같은 결과가 일

physics 설정을 통해 scroll의 특성을 변경 가능하다.ClampingScrollPhysics() - Android 기본 설정 값,시작과 끝을 도달 했을때 효과를 보여줌 BouncingScrollPhysics() - IOS의 기본 세팅과 유사, List의 끝에

다양한 기기의 화면에 맞추기 위해 SingleChildScrollView를 자주 쓰게 된다.그러면 화면상단이나 하단부분에서 스크롤을 하면 다음과 같은 효과가 나온다.이러한 효과를 없애고 싶을때 다음과 같이 적용하면 된다.화면의 공간보다 더 많이 스크롤 했을때를 감지하여

SMS를 이용한 전화번호 인증 서비스를 개발하기 위해 많은 서비스들을 찾아봤다. 서비스를 제공하는 업체가 Twillo, 퍼플북등 다양하게 있었다.그 중에서도 나에게 친숙하고 국내에 있는 대기업인 네이버 클라우드 플랫폼을 이용하기로 했다.링크 ->https://

아래와 같이 하나의 Text위젯에 다양한 TextStyle을 적용해야 하는 경우가 있다. 이 문제는 하나의 Text Widget으로 해결하는 것은 불가능 하다. 이럴 때 사용하는 위젯이 RichText이다.코드 예시는 아래와 같다. RichText위젯 아래에 자식 위

Flutter를 사용하면서 한글 글자에 종성의 유무를 판별하는 경우가 있다.대표적인 예로 이름 뒤에 (을)/(를)을 작성해야 할 때 이다.이럴때 아래 코드를 활용하면 해당 글자의 종성 유무를 확인 할 수 있다.isKorean함수는 말 그대로 해당 String이 한글인지

위의 사진처럼 길이가 긴 String 내에 특정 단어에만 다른 TextStyle을 적용해야 하는 경우가 있다.강조를 위해서, 또는 해당 단어에 Recognizer를 추가하는 경우등등 상황은 여러가지 일수 있다.이럴때 RichText를 응용하여 사용하면 된다.코드에 관한

위의 사진과 같이 Button을 눌렀을때 물결 효과 가 발생한다. 신경을 쓰지 않는다면 괜찮지만 깔끔한 UI를 위해 제거해야 하는 경우가 있다.Splash 효과의 색깔을 투명하게 설정하여 해당 효과가 User에게는 보이지 않게 되는 것이다.

App의 기능 중 인터넷 연결을 통해 외부에서 데이터를 받아오는 경우가 있다. 해당 기능을 실행할 때 해당 기기가 인터넷과 연결이 되어 있는지를 확인해야 한다.코드는 간단하다.먼저 해당 기기에서 Google.com과 연결을 시도한다.연결에 성공한 경우 다음과 같은

위의 사진과 같이 Text Widget에 Emoji(이모티콘)을 넣어야 하는 경우가 있다. 그런 경우에는 다음과 같이 작성하면 된다.'\\u{}' 안에 넣고자 하는 이모지의 유니코드를 입력하면 된다.Emoji의 유니코드는 아래와 같이 되어 있다.ex) U+1234 여기

쇼핑몰 앱에서 물건을 주문한 경우 보통 위 사진에 나와 있는 정보들이 고객에게 제공된다.해당 정보들 중 운송장 번호를 통해 주문한 물품의 현재 위치를 파악할 수 있다.이런 경우에 사용자가 직접 복사 범위를 선택해서 복사하는 것보다 해당 텍스트를 터치했을때 바로 복사될때

앱을 개발하던 중 앱 내에 .md파일을 띄울 일이 있었다.기성의 앱들은 보통 이용약관을 보여줄때 이용한다. .md 파일을 flutter앱 내에서 보여주기 위해 flutter_markdown패키지를 이용했다.일단 Widget 내에서 Markdown파일을 보여줄 코드는 다

특정 날짜가 속한 주의 월요일과 토요일을 구하는 방법은 다음과 같다.weekDay함수는 요일을 절대값으로 정의하여 받게 된다.참고 : https://api.dart.dev/stable/2.10.5/dart-core/DateTime/weekday.html각 요일

위와 같은 코드에서 만약 UI변경을 위해 setState를 한다고 가정하면 Future함수가 실행된다.해당 화면 내의 Data변화를 위해 setState를 할 수도 있지만 단순 UI만 바뀌는 경우에는 Future함수가 굳이 실행될 필요가 없다.실행되면 불필요한 로딩시간

App이나 Web에서 위의 사진과 같이 커서가 위젯 위에 있을때를 인지하여 특별한 효과를 주고 싶을때가 있다.GestureDetector나 InkWell의 경우에는 Touch와 관련된 행동이거나 아니면 스크롤 했을때를 인지하는 경우이다. 그렇기에 Hovering을 확인

개인프로젝트에서 마우스 커서 이동에 따른 UI 변화를 주는 기능에 많은 시간을 할애했다.해당 앱 내에서 이동을 할때에는 MouseRegion이라는 위젯을 통해 구현을 할 수 있었다.하지만 다음과 같은 경우는 어떨까?만약 기존의 앱에서 오른쪽 창으로 이동한다고 했을때 해

visibility 위젯의 경우 visibile 속성의 값을 통해 화면에 나타날지를 결정하여 그려지는 위젯이다.만약 replacement 위젯을 정해주지 않으면 visibile : false일때 해당 자리에 아무 위젯도 그려지지 않는다. 하지만 위와 같이 replac

ListView.builder 내의 속성 - cacheExtentListView.builder를 통해 listview를 만들때 다음과 같이 위젯 속성들을 정해준다.itemCount,itemBuilder,itemExtent까지는 내가 자주 사용하던 것들이기에 익숙했다.하

Future.wait여러개의 Future함수를 동작하게 해야 될 때 사용한다.사용 예시Flutter에서 future함수 안에 future를 사용하여도 기다려 주지 않기에 다음과 같이 사용한다.textScaleFactor해당 값을 설정해주지 않으면 기기마다 각각의 글자

앱을 개발할때 테스트 환경에서 먼저 검수가 끝나고 난 이후 실제 배포버젼으로 환경으로 바꾸어 테스트를 한다. 이때, 검수하는 환경이 테스트 환경인지 배포환경인지 구분하기 위해 환경 변수를 직접 선언하여 사용할 수 있다. ex) flutter run --dart-d

1) 공식문서 정의A stateless utility widget whose build method uses its builder callback to create the widget's child. 즉, Builder 콜백을 통해 StatelessWidget을 만드

Flutter 앱을 처음 시작하면 다음과 같이 흰색화면이 잠깐 노출이 되었다가 설정한 최초의 화면이 나타나게 됩니다!<Flutter 앱을 처음 시동 켰을때의 이미지 삽입>Flutter는  Native앱들과 다르게 최초에 앱을 켰을때 Flutter엔진