FLUTTER 썸네일형 리스트형 [FLUTTER] 위젯의 사이즈 구하기 위젯의 사이즈(높이, 너비)가 필요할 때 GlobalKey를 사용해 왔었는데,LayoutBuilder로 좀 더 간단하게 사이즈를 구할 수 있었다. (혹시 모를 GlobalKey duplicate 에러도 방지) 화면이 그려진 후에 return 하는 위젯의 context를 가져올 수 있기 때문에 addPostFrameCallback() 안에서 사이즈 구하는 로직 실행 return Scaffold( appBar: AppBar(), body: Center( child: LayoutBuilder( builder: (context, constraints) { WidgetsBinding.instance.addPostFrameCallback((timeStamp) { .. 더보기 [FLUTTER] 스크롤 시 이미지 크기 상호작용하는 UI 만들기 UI 레퍼런스를 찾아보던 중 구현해 보고 싶은 UI를 발견했다. 기본 구조는 상단에 이미지가 있고 그 밑으로 텍스트가 길게 늘어져 있는 아주 흔한 형태에, 아래로 스크롤 해 텍스트가 올라오면 이미지가 확대됨과 동시에 가려지는 UI이다. 먼저 기본적인 UI를 잡아보았다. Scaffold의 body는 스크롤링을 위해 SingleChildScrollView 위젯을 사용하고 Column 위젯을 통해 Image, Text 위젯을 차례대로 놓았다. 이미지는 원하는 사이즈로 무작위 이미지를 불러올 수 있는 사이트를 이용했다. (그래서 중간중간 스샷의 이미지가 계속 바뀔 예정) https://picsum.photos/ 첫 번째로 화면을 스크롤하면 텍스트가 이미지 위로 올라와 이미지를 가려지게 해보자. body의 .. 더보기 [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 위젯이 들어있어도 드래그로 닫을 수 있지만 버전이 올라갈 때나 마이그레이션 시, 에러가 발생한 경우가 있었고, 주기적으로 소스 수정이 필요할 수 있다. 그리하여 기본 위젯으로 변경하기로 했다. 핵심 이유! 기본 위젯으로 충분히 구현 가능한대도 무분별하게 패키지.. 더보기 [FLUTTER] Widget - Container Container Properties alignment → AlignmentGeometry : 컨테이너 안의 자식 요소를 정렬한다. child → Widget : 컨테이너에 포함된 자식 요소이다. clipBehavior → Clip : Container.decoration이 null이 아닐 때의 클립 동작이다. color → Color : 자식 요소의 배경에 칠하는 색상이다. constraints → BoxConstraints : 자식 요소에 적용할 추가 제약 조건이다. decoration → Decoration : 자식 요소의 배경에 적용할 장식이다. foregroundDecoration → Decoration : 자식 요소의 앞에 적용할 장식이다. height : 컨테이너의 높이이다. margin →.. 더보기 이전 1 다음
