위젯 (4)

플러터 리스트 스크롤이 보이도록 적용하는 방법 리액트 네이티브에선 기본적으로 리스트 스크롤이 보이도록 적용되어 있었는데, 플러터는 ListView 위젯을 사용하더라도 스크롤이 보이지 않아서 추가적인 작업이 필요합니다. 리스트 스크롤 표시는 Scrollbar() 위젯만 추가하면 간단하게 해결되며, 스크롤의 색상과 크기는 속성값으로 변경할 수 있습니다. - thickness : 스크롤 너비 (기본값 4.0) - radius : 스크롤 라운딩 (기본값 8.0) - isAlwaysShown : 항상 보이게 할 것인지 샘플 코드 class PostList extends StatelessWidget { @override Widget build(BuildContext context) { return Scrollbar..

플러터 ListVIew 위젯으로 리스트 생성하기 플러터에서는 ListView 위젯을 사용하면 리스트를 간단하게 생성할 수 있습니다. ListView 위젯은 목적에 따라 다양한 방법으로 리스트를 구현할 수 있는데요. 간단한 리스트를 만들 때는 ListView() 기본 생성자를, builder 방식으로 구현하려면 ListView.builder(), 리스트 아이템 사이에 구분자를 추가하려면 ListView.separated() 방법을 사용할 수 있습니다. 샘플 코드 1. ListView() - 기본 생성자를 이용하는 방법. class PostList extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( ..

플러터 위젯 속성값 변경을 도와주는 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..