-
<TIL> Flutter: SizedBox, ClipRRect, whitespace클래스/└ TIL 2022. 7. 7. 23:31728x90
🧭
Container vs SizedBox
단순 whitespace를 위해서는 상대적으로 무거운 Container 보다 SizedBox를 사용하는 것이 효율적입니다.
(whitespace는 화면 구성 요소 사이의 여백을 말함, 무겁다는 것은 기능을 많이 포함하고 있다는 것)
또한 SizedBox는 const 생성자를 사용할 수 있다는 것은 덤입니다.
ClipRRect
이미지 주변을 둥글게 깎기 위해서는 이미지를 ClipRRect로 감싸고, borderRadius 프로퍼티에 원하는 만큼의 반지름을 설정합니다.
behavior: HitTestBehavior.opaque
GestureDetector 내부에서 패딩을 가진 위젯의 경우, 패딩 부위를 클릭하면 인식을 하지 않습니다.
이때, behavior 프로퍼티에 HitTestBehavior.opaque 값을 넣으면 패딩 부위를 클릭해도 인식을 하게 됩니다.
📌
https://dart-lang.github.io/linter/lints/sized_box_for_whitespace.html
sized_box_for_whitespace
sized_box_for_whitespace Group: style Maturity: stable View all Lint Rules Using the Linter Use SizedBox to add whitespace to a layout. A Container is a heavier Widget than a SizedBox, and as bonus, SizedBox has a const constructor. BAD: Widget buildRow()
dart-lang.github.io
https://lcw126.tistory.com/351
[플러터] Flutter Rounded Corners Image 이미지 둥근 모서리
ClipRRect 위젯으로 감싸주고 borderRadius를 주면 된다. ClipRRect( borderRadius: BorderRadius.circular(8.0), child: Image.network( imagePath, fit: BoxFit.fill, ), // Text(key['title']), ),
lcw126.tistory.com
https://api.flutter.dev/flutter/widgets/ClipRRect-class.html
ClipRRect class - widgets library - Dart API
A widget that clips its child using a rounded rectangle. By default, ClipRRect uses its own bounds as the base rectangle for the clip, but the size and location of the clip can be customized using a custom clipper. See also: CustomClipper, for information
api.flutter.dev
728x90'클래스 > └ TIL' 카테고리의 다른 글
<TIL> 토이 프로젝트 종료 (0) 2022.07.25 <TIL> 플러터: overflowed by x.x pixels (0) 2022.07.21 <TIL> late modifier, constraints, shimmer (0) 2022.06.25 <TIL> ElasticBeanstalk / merge PR (0) 2022.05.28 <TIL> CRLF vs LF, 윈도우에서 LF로 작업하기 (0) 2022.05.25