widget (3)

플러터에서 행 데이터 자동으로 다음 줄로 바꿔주는 Wrap 위젯 앱을 만들다 보면 너비가 일정하지 않은 데이터를 순차적으로 나열하면서 자동으로 줄 바꿈까지 되게끔 구현하고 싶은 경우가 있습니다. 예를 들면 #플러터 #위젯 #줄바꿈 같은 태그를 나타낼 때가 있습니다. 그런데 여러 개의 위젯을 나열하기 위해 Row()를 사용해보면, children에 속한 위젯의 너비가 Row의 너비를 초과할 경우, 다음과 같은 픽셀 오류가 발생하면서 줄 바꿈이 안되는 것을 확인할 수 있습니다. A RenderFlex overflowed by 300 pixels on the right. 이때 Wrap 위젯을 사용하면 문제를 간단히 해결할 수 있습니다. Wrap 위젯은 자식 위젯을 하나씩 순차적으로 채워가면서 너비를 초과하면 ..

플러터 위젯 속성값 변경을 도와주는 copyWith() 위젯을 커스텀하다 보면 변경하고 싶은 속성값은 1개뿐인데, 모든 속성값을 입력하지 않았다며... 필수 속성값을 입력하라는 오류를 경험해보신 적 있을 거예요. 특히 themeData와 같이 필수 속성값이 여러 개인 위젯을 사용할 때 많이 번거로웠습니다. 이러한 불편은 copyWith() 함수를 사용하면 해결할 수 있습니다. 위젯의 기존 속성값은 그대로 사용하면서 변경하려는 속성값의 코드만 작성하면 되도록 도와주거든요. 샘플 코드 class TitleColorThemeCopy extends StatelessWidget { const TitleColorThemeCopy({Key? key, required this.child, required this.ti..

플러터 위젯 min-max width, height 적용하기 디자인을 하다보면 최소, 최대 폭과 높이를 지정해야 하는 경우가 있다. 플러터에서는 Container() 위젯을 사용하여 최소, 최대값을 설정할 수 있다. 먼저 Container() 위젯에 constrains 속성값에 BoxConstraints()를 사용하는 방법이다. Container( constrains: BoxConstrains( minWidth: 100, minHeight: 100, ), child: ..., ), 두번째 방법은 ContainedBox()를 사용하는 방법이다. 하지만 이 방법보다는 첫번째 방법이 코드가 조금이라도 적다. ConstrainedBox( constraints: BoxConstraints( minWidth: 10..