본문 바로가기

전체 글

[FLUTTER] 위젯의 사이즈 구하기 위젯의 사이즈(높이, 너비)가 필요할 때 GlobalKey를 사용해 왔었는데,LayoutBuilder로 좀 더 간단하게 사이즈를 구할 수 있었다. (혹시 모를 GlobalKey duplicate 에러도 방지)   화면이 그려진 후에 return 하는 위젯의 context를 가져올 수 있기 때문에 addPostFrameCallback() 안에서 사이즈 구하는 로직 실행  return Scaffold( appBar: AppBar(), body: Center( child: LayoutBuilder( builder: (context, constraints) { WidgetsBinding.instance.addPostFrameCallback((timeStamp) { .. 더보기
[FLUTTER] 공백 포함된 한글에 밑줄 추가 시 밑줄 높낮이 다른 버그 해결 텍스트 버튼을 사용할 때 버튼이라는 시각적 효과를 더하기 위해 기본적으로 기본 글씨랑 색상을 다르게 넣지만, 추가적으로 텍스트에 밑줄을 많이 넣기도 한다.style: TextStyle( decoration: TextDecoration.underline, decorationColor: Colors.green,), 헌데 한글의 경우 공백이 있을 때 한글과 공백의 밑줄 높이가 다른 버그가 있다. 각 폰트마다 높이가 다른 매트릭스 어쩌구... 가 원인이다.  사실 큰 문제는 아니지만 좀 거슬린다... 해당 버그를 인터넷에 찾아보면 굉장히 오래된 버그임을 알 수 있지만 여전히 나타나고 있다. 해결법은 TextHeightBehavior, TextPainter 등을 사용하거나 Container 를 사용해 임의로 .. 더보기
[FLUTTER] 스크롤 시 이미지 크기 상호작용하는 UI 만들기 UI 레퍼런스를 찾아보던 중 구현해 보고 싶은 UI를 발견했다. 기본 구조는 상단에 이미지가 있고 그 밑으로 텍스트가 길게 늘어져 있는 아주 흔한 형태에, 아래로 스크롤 해 텍스트가 올라오면 이미지가 확대됨과 동시에 가려지는 UI이다.   먼저 기본적인 UI를 잡아보았다. Scaffold의 body는 스크롤링을 위해 SingleChildScrollView 위젯을 사용하고 Column 위젯을 통해 Image, Text 위젯을 차례대로 놓았다. 이미지는 원하는 사이즈로 무작위 이미지를 불러올 수 있는 사이트를 이용했다. (그래서 중간중간 스샷의 이미지가 계속 바뀔 예정) https://picsum.photos/  첫 번째로 화면을 스크롤하면 텍스트가 이미지 위로 올라와 이미지를 가려지게 해보자. body의 .. 더보기
[플레이콘솔 / FLUTTER] 이 App Bundle 아티팩트 유형은 네이티브 코드를 포함하며 아직 디버그 기호가 업로드되지 않았습니다... 경고 해결방법 ⚠️ 경고 - 이 App Bundle 아티팩트 유형은 네이티브 코드를 포함하며 아직 디버그 기호가 업로드되지 않았습니다. 비정상 종료 및 ANR을 더 쉽게 분석하고 디버그할 수 있도록 기호 파일을 업로드하는 것이 좋습니다. 최근 플레이콘솔에서 앱을 프로덕션 심사를 넣으면서 해당 경고를 보게 되었다. 지난달 앱 업데이트 심사 때 처음 보고 인터넷 검색을 통해 해결했었는데, 이번 업데이트 때 또 기억이 잘 나지 않아 블로그에 정리해 두기로 했다. 해당 문제는 경고라서 무시하고 앱 심사를 올려도 되지만 제거해 주는 게 당연히 좋다. (해당 디버그 기호를 업로드하고 나서 메일로 비정상 종료와 같은 앱에서 문제가 발생할 때 내용이 담긴 메일이 날라오는데 사실 잘 안 본다... 그래도 한 번씩은 확인함...) 앞서.. 더보기
[FLUTTER] TextInputAction.next 시 원치 않는 포커스 스킵 방법 (TextField의 suffixIcon) 두 개의 TextField가 있고, TextField 안에는 suffixIcon이 들어있다. 해당 아이콘은 TextField의 내용을 한 번에 지우기 위한 버튼으로 사용하려 한다. textInputAction: TextInputAction.next, 그리고 편의성을 위해 textInputAction에 next 메서드를 주어 키보드의 버튼을 클릭하면 다음 TextField로 포커스를 이동시키고 싶었다. 하지만 키보드의 버튼을 누르면 의도대로 다음 TextField로 포커스가 이동하지 않고, 현재 TextField의 suffixIcon으로 포커스가 이동한다. 이때, Focus 위젯을 사용하여 포커스가 가지 않도록 할 수 있다. TextField( textInputAction: TextInputAction.n.. 더보기
[FLUTTER] showModalBottomSheet 자식 위젯으로 인해 드래그로 닫을 수 없을 때 해결법 중구난방 사용하면 패키지들을 삭제하고 기본 위젯으로 교체하면서 부터 발생했던 문제다. 플러터의 기본 showModalBottomSheet 를 사용하면서부터 자식 위젯이 Scrollable 위젯(ListView, SingleChildScrollView 등등)인 경우 모달을 드래그로 닫을 수 없다는걸 알게 되었다. 플러터의 기본 모달바텀시트를 쓰기 전에는 modal_bottom_sheet 패키지를 사용했었는데, 해당 패키지를 사용하면 Scollable 위젯이 들어있어도 드래그로 닫을 수 있지만 버전이 올라갈 때나 마이그레이션 시, 에러가 발생한 경우가 있었고, 주기적으로 소스 수정이 필요할 수 있다. 그리하여 기본 위젯으로 변경하기로 했다. 핵심 이유! 기본 위젯으로 충분히 구현 가능한대도 무분별하게 패키지.. 더보기
[DART] Dart 3.0 신규 문법 1. Records Records are an anonymous, immutable, aggregate type. Like other collection types, they let you bundle multiple objects into a single object. Unlike other collection types, records are fixed-sized, heterogeneous, and typed.Records are real values; you can store them in variables, nest them, pass them to and from functions, and store them in data structures such as lists, maps, and sets.. 더보기
[JAVA SCRIPT] Intl API Internationalization API aka. I18N https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl Intl - JavaScript | MDN Intl 객체는 각 언어에 맞는 문자비교, 숫자, 시간, 날짜비교를 제공하는, ECMAScript 국제화 API를 위한 이름공간입니다. Collator (en-US), NumberFormat, DateTimeFormat는 Intl 객체의 속성을 위한 생성자입니다. developer.mozilla.org Intl 은 각 언어에 맞는 문자 비교, 숫자, 시간, 날짜 비교를 제공하는 ECMAScript 국제화 API이다. 숫자가 커질수록 콤마(구분점)이 없으면.. 더보기
[FLUTTER] Widget - Container Container Properties alignment → AlignmentGeometry : 컨테이너 안의 자식 요소를 정렬한다. child → Widget : 컨테이너에 포함된 자식 요소이다. clipBehavior → Clip : Container.decoration이 null이 아닐 때의 클립 동작이다. color → Color : 자식 요소의 배경에 칠하는 색상이다. constraints → BoxConstraints : 자식 요소에 적용할 추가 제약 조건이다. decoration → Decoration : 자식 요소의 배경에 적용할 장식이다. foregroundDecoration → Decoration : 자식 요소의 앞에 적용할 장식이다. height : 컨테이너의 높이이다. margin →.. 더보기
[DART] connectivity_plus Package https://pub.dev/packages/connectivity_plus connectivity_plus | Flutter Package Flutter plugin for discovering the state of the network (WiFi & mobile/cellular) connectivity on Android and iOS. pub.dev https://plus.fluttercommunity.dev/docs/connectivity_plus/overview/ Connectivity Plus Overview | Flutter Community Plus Plugins Connectivity Plus Overview plus.fluttercommunity.dev 앱이 디바이스의 네트워크 연결에.. 더보기

티스토리툴바