반응형 flutter/Widget of the Week88 Flutter[플러터] / PhysicalModel을 사용하여 간단하게 위젯에 그림자 추가하기 (쉐도우, BoxShadow, elevation, 고도, 계층, 입체감) PhysicalModel (Flutter Widget of the Week) PhysicalModel class자식 요소를 모양에 고정하는 물리적 계층을 나타내는 위젯입니다.https://youtu.be/XgUOSS30OQk예제 코드 우리가 UI를 구성할 때 위젯에 입체감을 줘야 하는 일이 생길 수 있다. 이런 입체감을 가장 쉽게 주는 방법 중 하나는 그림자(DropShadow)를 주는 것인데 이러한 그림자를 쉽게 줄 수 있도록 도와주는 위젯이 바로 PhysicalModel 위젯이다.이 PhysicalModel 위젯은 시각적으로 그림자와 입체감을 주기 위해 사용하는 위젯이다. Material 위젯처럼 elevation, shape, color 그리고 clip behavior 등의 속성을 활용할 수 있지만, PhysicalModel은 더 낮은 수준에서 물리적인 형태를 직접 제어할 .. 2025. 7. 21. Flutter[플러터] / ImageFiltered를 사용하여 이미지에 효과 및 필터 적용 시키기 (BackdropFillter, 흐리게, 블러, 모자이크 처리, 변형, ImageFilter) ImageFiltered (Flutter Widget of the Week) ImageFiltered class자식에 ImageFilter를 적용합니다.이미지 필터는 항상 자식 위젯에 필터 연산을 적용합니다. 이는 해당 필터가 개념적으로 "no-op"인 경우(예: 반경이 0인 ImageFilter.blur 또는 단위행렬을 갖는 ImageFilter.matrix)에도 마찬가지입니다. ImageFiltered.enabled를 로 설정하면 false이미지 필터를 비활성화하는 데 더 효율적입니다.https://youtu.be/7Lftorq4i2o 공식 문서 코드 우리가 이미지를 사용할 때 그 이미지에 블러를 먹여 모자이크 처리를 하고나 다른 효과를 줘야 할 때가 있다. 이럴 때 어떻게 해야 할까? 뭐 다른 디자인 프로그램에서 이미지에 효과를 다 줄다음 그것을 사용해도 되겠지만 여기 I.. 2025. 7. 20. Flutter[플러터] / SwitchListTile을 사용하여 레이블이 있는 스위치 제작하기 SwitchListTile (Flutter Widget of the Week) SwitchListTile classSwitch가 있는 ListTile 입니다. 즉, 레이블이 있는 스위치입니다.https://youtu.be/0igIjvtEWNU공식 문서 코드 흔히 앱 내부의 설정에 들어가면 옵션을 켜고 끌 수 있는 기능이 마련되어 있다. 그러한 기능들은 보통 리스트 타일 같은 형식으로 제작되어 한쪽에는 그 옵션을 켜고 끌 수 있게 만들어주는 토글 버튼이 있다. 그렇다면 어떻게 이러한 것을 쉽고 빠르게 만들 수 있을까? 바로 SwitchListTile위젯을 사용하면 된다.이 SwitchListTile은 스위치(Switch)와 리스트 타일(ListTile)을 결합한 위젯으로, 설정 화면과 같은 UI에서 토글 가능한 옵션을 만들 때 유용하게 사용된다. 바로 알아보자.하위 속성속성명타입.. 2025. 7. 17. Flutter[플러터] / GridView를 사용하여 그리드 제작하기 (스크롤, 2D, 격자, 배열, 다중, 리스트, 간격, 목록) GridView (Flutter Widget of the Week) GridView class스크롤 가능한 2D 위젯 배열입니다.https://youtu.be/bLOtZDTm4H8공식 문서 코드 UI를 구성하다 보면 행과 열이 복잡한 형태의 레이아웃으로 구성될 때가 있는데 이럴 때 레이아웃 그리드로 만든다면 아주 빠르고 쉽게 만들 수 있을 것이다. 그리고 Flutter에는 그리드를 쉽게 만들 수 있도록 도와주는 GridView위젯이 있다.이 GridView는 격자 형태의 스크롤 가능한 위젯을 만들 때 사용하는 매우 유용한 위젯으로 주로 일정한 간격으로 정렬된 이미지 목록이나 카드 등의 UI를 만들 때 사용된다. 바로 알아보자.하위 속성속성명타입기본값설명gridDelegateSliverGridDelegate–그리드의 열 수, 간격, 비율 등을 정의하는 레이아웃 구성 규칙.. 2025. 7. 16. Flutter[플러터] / InteractiveViewer를 사용하여 자식 위젯과의 팬 및 확대/축소 상호작용을 가능하게 하기 (터치, 드래그, 줌 인/아웃 기능, 인터랙티브뷰어) InteractiveViewer (Flutter Widget of the Week) InteractiveViewer class자식 위젯과의 팬 및 확대/축소 상호작용을 가능하게 하는 위젯입니다.사용자는 드래그하여 팬 하거나 핀치 하여 확대/축소하여 어린이를 변형할 수 있습니다.https://youtu.be/zrn7V3bMJvg공식 문서 코드 폰으로 뉴스 같은 글자가 작고 많은 것을 볼 때 우리는 화면을 확대하여 크기를 키우곤 한다. 그러한 동작을 Flutter내부에서 구현하려면 꽤 성가실 것 같은 기분이 든다. 하지만 이러한 줌 인/아웃 동작을 아주 간단하게 실행해 주 켜는 위젯이 있는데 그것이 바로 InteractiveViewer 위젯이다.이 InteractiveViewer 위젯은 사용자가 터치 제스처(예: 확대/축소, 드래그, 회전 등)를 통해 UI 요소와 상호작용할 수 있도록 해주.. 2025. 7. 15. Flutter[플러터] / SliverAppBar를 사용하여 커스텀 스크롤뷰 안에서 앱 바 사용하기 (사용법, CustomScrollView, NestedScrollView, 속성) SliverAppBar (Flutter Widget of the Week) SliverAppBar classCustomScrollView 와 통합된 Material Design 앱 바입니다.앱 바는 툴바와 TabBar , FlexibleSpaceBar 등의 다른 위젯으로 구성됩니다. 앱 바는 일반적으로 하나 이상의 일반적인 동작을 IconButton 으로 표시하며 , 덜 일반적인 작업을 위해 PopupMenuButton이 뒤에 올 수도 있습니다.https://youtu.be/R9 C5 KMJKluE공식 문서 코드 우리가 CustomScrollView를 사용하다 보면 내부에서 앱 바를 사용하고 싶을 때가 있다. 하지만 appBar 같은 파라미터가 존재하지도 않고 AppBar 위젯은 넣을 수도 없게 되어 있다. 이럴 때 커스텀 스크롤뷰 안에서 앱 바를 어떻게 삽입할 수 있을까? .. 2025. 7. 14. Flutter[플러터] / AboutDialog를 사용해서 라이센스 표시하기 (어바웃다이얼로그, 저작권 정보, 앱 버전 번호, 라이선스, showAboutDialog) AboutDialog (Flutter Widget of the Week) AboutDialog class정보 상자입니다. 애플리케이션 아이콘, 이름, 버전 번호, 저작권 정보가 표시되는 대화 상자이며, 애플리케이션에서 사용하는 소프트웨어의 라이선스를 표시하는 버튼도 있습니다.AboutDialog를 표시하려면 showAboutDialog를 사용합니다.https://youtu.be/YFCSODyFxbE공식 문서 코드 앱을 출시하기 이전, 버전 번호, 허가증과 같은 법률 정보와 용어들을 표시할 공간이 필요할 것이다. 심지어 앱 스토어에서는 이러한 모든 형식의 절차를 따르지 않으면 앱을 출시 허가를 내려주지 않기 때문에 이러한 저작권, 라이센스등을 반드시 명시해놔야 한다.이처럼 아주 중요한 절차이기 때문에 반드시 필요한 사항인데 이것을 손쉽게 만들어 줄 수 있는 위젯이 있으니 바로 .. 2025. 7. 9. 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. 이전 1 2 3 4 ··· 6 다음 반응형
