클래스/└ TIL

<TIL> Flutter: SizedBox, ClipRRect, whitespace

디벅잉 2022. 7. 7. 23:31
728x90

 

🧭

 

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