반응형 flutter111 Flutter[플러터] / CheckboxListTile을 사용하여 체크박스 타일 만들기 (체크박스리스트타일, 탭, 목록, 레이블)CheckboxListTile (Flutter Widget of the Week) CheckboxListTile class체크박스가 있는 ListTile 입니다. 즉, 레이블이 있는 체크박스입니다.목록 타일 전체는 상호 작용이 가능합니다. 타일의 아무 곳이나 탭 하면 확인란이 전환됩니다.https://youtu.be/RkSqPAn9szs공식 문서 코드 보통 체크 박스를 사용할 때에는 단독으로 사용하지 않고 리스트 타일 와 함께 결합하여 사용자들에게 친숙한 모습으로 사용되곤 한다. 근데 또 리스트 타일 만들고 체크 박스 그 안에 넣고 하려면 너무나 생산 코스트가 많이 들것이다. 이럴 때 사용할 수 있는 위젯이 있으니 바로 CheckboxListTile위젯이다.이 CheckboxListTile 위젯은 Checkbox와 ListTile을 결합한 위젯이다. 사용자에게 체크 가능한 옵션 목.. 2025. 7. 8. Flutter[플러터] / Padding을 사용하여 자식 위젯에 여백 공간 주기 (패딩, 할당, 마진, 띄우기, 충전재, 공백)Padding (Flutter Widget of the Week) Padding class주어진 패딩으로 자식을 삽입하는 위젯입니다.자식 요소에 레이아웃 제약 조건을 전달할 때, 패딩은 주어진 패딩만큼 제약 조건을 축소하여 자식 요소의 레이아웃을 더 작은 크기로 조정합니다. 그런 다음 패딩은 자식 요소의 크기에 맞춰 크기를 조정하고, 패딩만큼 확장하여 자식 요소 주변에 빈 공간을 만듭니다.https://youtu.be/oD5RtLhhubg공식 문서 코드 앱에서 위젯이 많으면 화면이 복잡해지는 경우가 생긴다. 이럴 때 우리는 위젯끼리 공간을 띄워서 사회적 거리 두기를 실천해줘야 한다. 이럴 때 아주 쉽게 사용할 수 있는 위젯이 바로 Padding위젯이다.이 Padding 위젯은 자식 위젯 주위에 여백(공백 공간)을 추가할 때 사용되는 위젯이다. UI 요소들 사이의 간격을.. 2025. 7. 7. Flutter[플러터] / AnimatedWidget 를 사용하여 위젯에 애니메이션 넣기 (추상, Listenable, 효과, 지속되는, stroke width change, 컨트롤러, AnimationController, Animation<T>) AnimatedWidget (Flutter Widget of the Week) AnimatedWidget class주어진 Listenable의 값이 변경될 때 다시 빌드되는 위젯입니다.AnimatedWidget 은 일반적으로 Listenable 인 Animation 객체와 함께 사용되지만 ChangeNotifier 및 ValueNotifier를 포함한 모든 Listenable 과 함께 사용할 수 있습니다.AnimatedWidget 은 상태가 없는 위젯에 가장 유용합니다. AnimatedWidget을 사용하려면 하위 클래스를 만들고 build 함수를 구현해야 합니다.https://youtu.be/LKKgYpC-EPQ공식 문서 코드 애니메이션 효과를 위한 많은 위젯들과 옵션들이 존재한다. 또한 가끔은 위젯에 애니메이션을 주고 싶을 것이다. 많은 경우에 있어서 원하는 애니메이션을 주고 .. 2025. 7. 6. Flutter[플러터] / ClipOval 을 사용하여 모서리를 둥글게 만들기 (원형, 타원형, 클립오발, 동그랗게, 가장자리) ClipOval (Flutter Widget of the Week) ClipOval class타원을 사용하여 자식 위젯을 클립 하는 위젯입니다.https://youtu.be/vzWWDO6whIM 코드 예제 그림이나 화면에 있는 다른 부분들이 너무나 네모나게 보여 가장자리에 모서리가 있는 위젯을 원형이나 타원형으로 제작하고 싶을 때가 있다. 이럴 때 쓸 수 있는 것이 바로 ClipOval위젯이다.이 ClipOval위젯은 자식 위젯은 타원형 혹은 원형으로 자르는 데 사용한다. 이 위젯은 일반적으로 이미지나 컨테이너 등의 위젯을 원형 프로필 이미지처럼 보이게 만들고 싶을 때 유용하다. 한번 바로 알아보자.하위 속성속성명타입기본값설명clipperCustomClipper?null사용자 정의 클리퍼를 지정해 타원의 경계를 결정함clipBehaviorClipClip.antiAlias.. 2025. 7. 5. Flutter[플러터] / CupertinoActivityIndicator 를 사용하여 로더 기능 만들기 (로딩, 프로그래스, 쿠퍼티노엑티비티인디케이터, 바, 진행률 표시, loader)CupertinoActivityIndicator (Flutter Widget of the Week) CupertinoActivityIndicator class시계 방향으로 회전하는 iOS 스타일의 활동 표시기입니다.https://youtu.be/AENVH-ZqKDQ 공식 문서 코드 앱에 로딩을 보여줄 지표가 필요한가? 또한 UI로 Cupertino 위젯을 사용하고 있는가? 그렇다면 iOS 스타일의 로딩 스피너를 표시하는 CupertinoActivityIndicator 위젯을 사용하면 된다.이 CupertinoActivityIndicator 위젯은 iOS 스타일의 로딩 인디케이터를 보여줄 수 있는 위젯으로 쉽게 사용할 수 있다. 바로 알아보자.하위 속성속성명타입기본값설명colorColor?null인디케이터의 색상을 지정animatingbooltrue인디케이터가 애니메이션을 실행할지 여부radiusdoub.. 2025. 7. 4. Flutter[플러터] / IgnorePointer 를 사용하여 터치 이벤트 무시하기 (이그노어포인트, 없애기, 입력, 비활성화, 제한, 터치, 탭, 드래그 방지) IgnorePointer (Flutter Widget of the Week) IgnorePointer class히트 테스트 중에는 보이지 않는 위젯입니다.ignoring 이 true 이면 이 위젯(및 하위 트리)은 적중 테스트에서 보이지 않습니다. 레이아웃 중에도 공간을 사용하고 평소처럼 자식 위젯을 그립니다. RenderBox.hitTest 에서 false를 반환하기 때문에 위치 이벤트의 대상이 될 수 없습니다.https://youtu.be/qV9pqHWxYgI공식 문서 코드 갑자기 앱의 UI가 바뀌는 동작이 진행되면 사용자는 사용하고 싶지 않은 무언가(버튼류)를 건드릴 수 있게 될 것이다. 다들 그러한 경험이 한 번씩은 있지 않은가? 갑자기 나타난 버튼을 잘못 눌러서 원하지 않은 동작이 실행되는 상황 말이다. 이렇듯 실수로 UI를 변경하는 일은 상당히 빈번하게 발생하며 골치 .. 2025. 7. 3. Flutter[플러터] / Divider 를 사용하여 구분선 추가하기 (수평선, 디바이더, 섹션, 가로, 세로, VerticalDivider, 호리존탈, 버티컬) Divider (Flutter Widget of the Week) Divider class양쪽에 패딩이 있는 얇은 수평선입니다.머티리얼 디자인 언어에서 이는 구분선을 나타냅니다. 구분선은 목록, Drawer 등에서 콘텐츠를 구분하는 데 사용할 수 있습니다.ListTile 항목 사이에 구분선을 만들려면 이 경우에 최적화된 ListTile.divideTiles를 사용하는 것이 좋습니다.https://youtu.be/_liUC641Nmk공식 문서 코드 앱을 제작하다 보면 직면하게 되는 문제가 있는데 바로 위젯과 위젯 사이에 공간을 어떻게 할지이다. 이러한 두 위젯 사이에 공간이 필요할 때 중간에 줄을 넣어주면 굉장히 도움이 되는데 그럴 땐 Divider 위젯을 사용하면 쉽게 수평선(horizontal line) 형태의 구분선을 추가해 줄 수 있다.이 Divider 위젯은.. 2025. 7. 2. Flutter[플러터] / LinearProgressIndicator 를 사용하여 다운로드 중임을 나타내는 화면 보여주기 (download bar, 리니어, 선형, 프로그래스 인디케이터, 바, 진행률 표시) LinearProgressIndicator (Flutter Widget of the Week) LinearProgressIndicator classMaterial Design의 선형 진행률 표시기, 진행률 막대라고도 합니다.https://youtu.be/O-rhXZLtpv0공식 문서 코드 화면에서 어떠한 콘텐츠가 다운로드 중이라는 것을 표시하기 위해서는 어떤 방식이 가장 좋을까? 서큘러 인디케이터? 아니면 대놓고 다운중이라고 글자로 표시하기? 아마도 가장 좋은 방법으로는 선형의 인디케이터를 사용하여 그 인디케이터의 차지 공간에 따라 다운로드가 어느 정도 되었는지 표시하는 방법일 것이다. 이러한 선형의 인디케이터를 쉽게 사용할 수 있게 만들어주는 위젯이 있는데 바로 LinearProgressIndicator다.이 LinearProgressIndicator는 선형 진행 표시줄(linear progr.. 2025. 7. 1. Flutter[플러터] / CircularProgressIndicator 를 사용하여 동작이 실행 중임을 나타내는 로딩 화면 보여주기 (로더, 서큘러, 프로그래스 인디케이터, 바, 진행률 표시) CircularProgressIndicator (Flutter Widget of the Week) CircularProgressIndicator class애플리케이션이 실행 중임을 나타내기 위해 회전하는 Material Design 원형 진행률 표시기입니다.https://youtu.be/O-rhXZLtpv0공식 문서 코드 화면에서 어떠한 동작이 로딩 중이라는 것을 표시하기 위해선 어떤 방법이 가장 좋을까? 단연콘데 로더 동작을 만들어 놓으면 좋을 것이다. 근데 이제 여기에서 일반 사용자에게 가장 익숙한 로더는 무엇인가 하면 바로 원형 프로그래스 인디케이터일 것이다. 근데 또 이런 인디케이터를 직접 만들려고 하면 골치 아플 것인데 이것을 아주 간단하게 바로 사용할 수 있도록 만든 위젯이 바로 CircularProgressIndicator이다.이 CircularProgressIndicator 위젯은 원.. 2025. 7. 1. Flutter[플러터] / ClipPath 를 사용하여 컨테이너에서 잘라내어 간단한 삼각형 만들기 (클리핑패스, 커스텀, 경로, 다각형, 독특한 모양) ClipPath (Flutter Widget of the Week) ClipPath class경로를 사용하여 자식을 클리핑 하는 위젯입니다.위젯을 그릴 때마다 델리게이트에 대한 콜백을 호출합니다. 콜백은 경로를 반환하고, 위젯은 자식 위젯이 경로 외부에 그려지는 것을 방지합니다.경로에 클리핑 하는 것은 비용이 많이 듭니다. 특정 도형에는 더 최적화된 위젯이 있습니다.사각형으로 잘라내려면 ClipRect 를 사용하세요.타원이나 원형으로 잘라내려면 ClipOval을 사용해보세요.둥근 사각형으로 잘라내려면 ClipRRect 를 사용해보세요.https://youtu.be/oAUebVIb-7s예제 코드 컨테이너를 사용하면서 삼각형을 만들고 싶었던 적이 있는가? 당연하겠지만 컨테이너를 삼각형 모양으로 만들어주는 편리한 위젯은 아직까지는(2025.06.30) 없기 때문에 삼각형 모.. 2025. 6. 30. Flutter[플러터] / JSDoc처럼 변수, 클래스, 메서드에 문서 주석 달기 (툴팁, Documentation tool, Doc comments, md, 마크다운) 우리가 여러 위젯들을 사용할 때 무조건 한 번씩 보는 게 있다. 바로 그 위젯에 대한 툴팁, 문서 팝업이다. 주로 그 코드에 마우스를 올리거나 Android Studio에서는 Ctrl + Q, VSCode에서는 Ctrl + K로 확인 가능한 팝업 창인데이 문서툴(Documentation tool)을 우리는 꼭 확인해야지만 위젯을 쉽고 완벽하게 사용할 수 있다.당연한 거지만 그 위젯의 타입과 파라미터, 설명과 함께 종종 예제 코드도 포함되어 있기 때문으로 그것을 보고 코드를 작성하면 처음 써본 위젯이라도 편하게 쓸 수 있다.그렇다면 이 위젯을 이 문서툴만 확인한 것이 아니라 직접 이 위젯이 정의되어 있는 파일(Go to Definition)로 들어가 본 적이 있는가?Android Studio에서는 Ctrl.. 2025. 6. 30. Flutter[플러터] / Builder 를 사용하여 새로운 BuilderContext를 생성하여 하위 위젯에 접근하기 (빌더, 빌드콘텍스트, 하위 트리) Builder (Flutter Widget of the Week) Builder class위젯의 자식을 생성하기 위해 빌더 콜백을 사용하는 빌드 메서드를 가진 상태 비저장 유틸리티 위젯입니다.https://youtu.be/xXNOkIuSYuA공식 문서 코드 별도의 BuildContext 를 생성하고 싶은 경우가 있는가? 특히 context 로는 접근할 수 없는 상황 말이다.대부분의 Flutter 위젯은 상위 위젯에 대한 어떠한 추가 정보도 찾지 않고 만들어진다. 하지만 때로는 상위 위젯의 빌드 컨텍스트에 동일한 빌드 메서드로 몇 가지 코드를 작성해야 하는 경우가 생긴다. 이럴 때에 필요한 것이 바로 Builder 위젯이다.Builder 위젯은 BuildContext 에 직접 접근할 수 있게 도움을 주는 위젯이다. 주로 하위 위젯에서 상위 위젯의 BuildContext.. 2025. 6. 29. Flutter[플러터] / NotificationListener 를 사용하여 위젯의 알림을 쉽게 처리하고 사용하기 (노티피케이션리스너, 노티파이, ScrollNotification) NotificationListener (Flutter Widget of the Week) NotificationListener class트리 위로 올라오는 알림을 수신하는 위젯입니다.https://youtu.be/cAnFbFoGM50예제 코드 알림을 보내는 위젯이 있다는 것을 알고 있는가? 예를 들면 ListView 와 같은 스크롤 가능한(scrollable) 위젯은 ScrollNotifications 와 같은 알림을 보낸다. 근데 이 알림은 나무(tree)처럼 구성된 정보를 따라서 각 상위 위젯을 돌아다니는데 이렇게 발생한 알림은 어디에선가 처리가 되지 않으니 이를 처리할 필요성이 있다. 그럴 때 이러한 알림을 처리하는 일련의 동작들을 쉽게 할 수 있게 만들어주는 위젯이 있는데 바로 NotificationListener 위젯이다.이 NotificationListener 위젯은 하위 위젯 트.. 2025. 6. 28. Flutter[플러터] / ShaderMask 를 사용하여 텍스트에 그라디언트 적용하기 (위젯, 쉐이더, 마스크, 디자인, 효과) ShaderMask (Flutter Widget of the Week) ShaderMask class셰이더 에서 생성된 마스크를 자식 위젯에 적용하는 위젯입니다.예를 들어, ShaderMask를 사용하면 RadialGradient 마스크를 사용하여 자식 요소의 가장자리를 점차적으로 페이드 아웃할 수 있습니다.https://youtu.be/7sUL66pTQ7Q공식 문서 코드 우리가 텍스트를 사용하다 보면 텍스트에 그라디언트를 넣어주고 싶을 때가 있다. 근데 텍스트의 파라미터에는 그라디언트를 먹일 수 있는 속성이 존재하지 않는다. 이럴 때 위젯에 디자인을 덮어 씌우는 형식으로 셰이더를 추가해 줄 수 있는 위젯이 있는데 바로 ShaderMask 위젯이다.이 ShaderMask 위젯은 자식 위젯에 셰이더(Shader)를 적용하여 시각적인 효과를 줄 수 있는 위젯이다. 주로 텍스트나.. 2025. 6. 27. Flutter[플러터] / ListWheelScrollView 를 사용하여 리스트 뷰에 3D 효과 주기 (입체감, 원형, 바퀴, 휠, 스크롤 뷰, ListView, 실린더, 가로 스크롤) ListWheelScrollView (Flutter Widget of the Week) ListWheelScrollView class아이들이 바퀴를 돌려 스크롤할 수 있는 상자입니다.이 위젯은 ListView 와 비슷 하지만, 스크롤 축을 따라 모든 자식 위젯의 크기가 동일해야 한다는 제한이 있습니다.목록이 스크롤 오프셋 0에 있을 때 첫 번째 자식은 뷰포트 중앙에 정렬됩니다. 목록이 스크롤 오프셋 최종에 있을 때 마지막 자식은 뷰포트 중앙에 정렬됩니다.아이들은 평면에서 스크롤하는 대신 바퀴 위에서 회전하는 것처럼 묘사됩니다.https://youtu.be/dUhmWAz4C7Y예제 코드 알림 앱에서 특정한 시간을 정할 때, 날짜를 정할 때 흔히들 휠(Wheel) 형식으로 스크롤이 되는 다이얼로그를 사용한다.이렇게 휠 형식으로 만들어 놓으면 기본적으로 꽤 새로운데 이는 즉 사용자로 하여금 식상.. 2025. 6. 26. 이전 1 2 3 4 5 ··· 8 다음 반응형
