플러터16 [Flutter] Widget(5) - LayoutBuild LayoutBuilder Widget LayoutBuilder 위젯은 부모 위젯의 크기에 따라 달라지는 위젯 트리를 작성한다. 즉, 위젯의 크기에 따라 자식요소를 build를 하겠다는 의미이다. framework가 layout 타임에 빌더 함수를 호출하며 부모 위젯의 제약 조건을 제공한다는 점을 제외하고는 Builder 위젯과 유사하다. 이 위젯은 부모 위젯이 자식의 크기를 결정하고, 자식 위젯의 고유 크기에 의존하지 않을 때 유용하다. 이 위젯의 최종 크기는 자식의 크기와 일치하다. LayoutBuilder Widget이 호출되는 경우 위젯이 처음으로 배치 되는 경우 상위 위젯이 해당 위젯을 업데이트 하는 경우 builder 함수가 구독하는 종속성의 변경이 있는 경우 LayoutBuilder 예제 코드.. 2023. 12. 11. [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. 이전 1 2 3 4 다음
