본문 바로가기

분류 전체보기80

[Flutter] UI(2) - 'Horizontal viewport was given unbounded height' 에러 해결 Horizontal viewport was given unbounded height 에러 원인 Horizontal viewport was given unbounded height 에러는 보통 Scrollable 위젯을 column 혹은 다른 Scrollable 위젯 하위에 다시 사용할 때 발생한다. 발생 원인은 문자 그대로 위젯의 height에 대한 제약조건(constraint)이 걸려 있지 않아 위젯의 높이 영역이 어디까지인지 모호한 경우 발생하게 된다. 예를 들어 아래 이미지의 빨간 박스에 Listview가 들어가야된다고 가정하자. 빨간 박스의 윗부분들은 Column의 자식요소들로 이루어져 있을 것이고, 빨간박스 또한 Column의 자식요소 일 것이다. 코드를 간략하게 요약하면 Column( chil.. 2023. 12. 10.
[Flutter] Widget(4) - GestureDetector GestureDetector Widget GestureDetector위젯은 사용자의 동작을 감지하는 위젯이다. (마우스 좌클릭, 롱 프레스, 우클릭 등) non-Null 콜백의 제스쳐에 대한 인식을 수행한다. 자식요소가 있으면 위젯에 크기는 자식요소에 따라 결정되고, 자식이 없으면 대신 부모에 맞춰서 결정된다. Align Widget 예제 다음 예제를 통해 GestureDetector위젯으로 클릭버튼을 감지하여 전구 상태의 on / off를 표현해보자 예제 import 'package:flutter/material.dart'; enum Department { treasury, state, } void main() { runApp(const MyApp()); } class MyApp extends Stat.. 2023. 12. 9.
[Flutter] UI(1) - copyWith copyWith copyWith가 dart와 flutter만의 특별한 개념은 아니지만, 이 패턴은 꽤 자주 사용된다. `copyWith()`의 가장 큰 이점은 원래 개체(original)를 변경하지 않고, 원래 개체와 같은 속성의 새로운 object에 내가 원하는 값을 특정해서 생성할 수 있다는 점이다. 이를 통해 개체가 변경 가능한 '상태'를 포함하지 않으므로 테스트가 용이하고 관리하기 쉬운 앱을 만들 수 있게 된다. Text( "copyWith Test Sample", style: Theme.of(context) .textTheme .headline .copyWith( color: Colors.red, fontWeight: FontWeight.bold), ) 위 예제는 headline 테마를 복사 한.. 2023. 12. 7.
[Flutter] Widget(3) - Align Align Widget Align 위젯은 자신의 자식요소들을 정렬하고, 자식요소의 크기에 따라 선택적으로 자신의 크기를 조정하는 위젯이다. 치수가 제한되고, 너비요소와 높이요소가 null이면 가능한 큰 사이즈로 측정된다. 치수가 제한되지 않고 해당 크기 인자가 null이면 해당 치수에서 자식요소의 크기와 일치한다. 크기 인자가 null이 아닌 경우에는, 이 위젯의 해당 치수는 자식 치수와 크기 인자의 곱이다. Align Widget 예제 다음 예제를 통해 Alignment를 사용하여 Flutter 로고를 배치해보자. 우선 Align을 사용하지 않고 컨테이너 내부에 컨테이너를 배치해본다. 예제 import 'package:flutter/material.dart'; enum Department { treas.. 2023. 12. 7.