반응형 animation27 Flutter[플러터] / flutter_slidable 패키지 사용법 (스와이프, 슬라이더, ListTile, 리스트 타일, Dismissible, SlidableAction) flutter_slidable (Flutter Widget of the Week) package:flutter_slidable방향성 있는 슬라이드 동작과 해제가 가능한 슬라이드 목록 항목에 대한 Flutter 구현입니다.https://youtu.be/QFcFEpFmNJ8 리스트 타일이 나열되어 있고 그중에서 자신이 원하는 아이템을 선택하고 그 화면에서 그 아이템에 대한 어떠한 동작을 결정하게 하려면 어떠한 방식이 가장 좋을까? 가장 좋은 방식 중 하나로는 그 아이템을 드래그, 슬라이드 동작을 진행하여 몇 가지 작업을 보여주는 것일 것이다. 이러한 동작을 쉽게 구현할 수 있게 도와주는 위젯이 바로 이번에 알아볼 package:flutter_slidable이다.이 flutter_slidable 패키지는 슬라이드 가능한 리스트 항목(Slidable list items)을 만들기 위한 매우 .. 2025. 8. 14. Flutter[플러터] / animations 패키지 사용법 (화면 전환 효과, 애니메이션, 페이드, OpenContainer, SharedAxisTransition, FadeThroughTransition) animations (Flutter Widget of the Week) package:animations이 패키지에는 일반적으로 원하는 효과를 위한 미리 제작된 애니메이션이 포함되어 있습니다.https://youtu.be/HHzAJdlEj1c앱에서 다른 화면으로 넘어갈 때 우리는 어떠한 전환 효과를 넣어 주는가? Hero 위젯을 사용하여 특정한 위젯을 이동시키는 느낌을 줄 수도 있고 혹은 라우터 동작하는 부분을 FadeTransition으로 감싸서 페이드 효과를 먹여줄 수도 있을 것이다. 하지만 이러한 위젯들을 사용하여 만든 전환 효과는 너무 뻔하고 재미가 없는 경우가 대부분이다. 하지만 이 package:animations를 사용하면 Material motion 기반의 고급 전환 효과를 손쉽게 사용할 수 있다. 일단 사용하기 위해선 먼저 프로젝트의 pubspec.y.. 2025. 7. 22. 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[플러터] / 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[플러터] / 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[플러터] / 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[플러터] / Drawer 를 사용하여 측면 메뉴 패널 만들기 (드로월, tool bar, navigation, 왼쪽 액션바, 시트, sheet, 탐색 툴바) Drawer (Flutter Widget of the Week) Drawer class애플리케이션의 탐색 링크를 표시하기 위해 Scaffold 의 가장자리에서 수평으로 슬라이드 되는 Material Design 패널입니다.이 구성 요소에는 NavigationDrawer 라는 Material 3 버전이 있는데 , 이는 Material 3에 맞게 구성된 애플리케이션에 더 적합합니다( ThemeData.useMaterial3 참조 ).https://youtu.be/WRj86iHihgY공식 문서 코드 페이지가 많아지고 기능이 많아지는데 그것을 공통화면에서 그 페이지들로 넘어가게 하려면 가장 좋은 방법은 무엇일까? 당연하게도 메뉴를 제작하여 메뉴에서 이동하게 만드는 것이다. 그 메뉴는 상단에 위치해 있는 앱 바가 될 수도 있고 하단에 위치해 있는 내비게이션바가 될 수도 있다.. 2025. 6. 24. Flutter[플러터] / TabBar 를 사용하여 스와이프 시 화면이 넘어가는 탭 만들기 (탭 바, TabBarView, DefaultTabBarController, 드래그, 네비게이션 바, 페이지, 앱바, 툴바) TabBar (Flutter Widget of the Week) TabBar classMaterial Design의 기본 탭 바.기본 탭은 콘텐츠 창 상단, 상단 앱 바 아래에 배치됩니다. 주요 콘텐츠 목적지를 표시합니다.일반적으로 AppBar 의 AppBar.bottom 부분 으로 생성되고 TabBarView 와 함께 사용됩니다.https://youtu.be/POtoEH-5l40공식 문서 코드 앱의 상단에 앱바가 위치해 있는 부분에서 카테고리 기능이 동작되거나 툴바 동작이 진행돼야 하는 상황이 오기 마련이다. 이럴 때 우리는 어떻게 제작을 해야 할까? 그 질문에 대한 대답은 TabBar 위젯을 쓰라는 것이다.이 TabBar 위젯은 카테고리나 화면을 나누어 사용자 경험을 단순하고 직관적으로 구성하고 싶을 때 사용하는데 탭 기반의 내비게이션을 구현할 때 주로 Tab.. 2025. 6. 23. Flutter[플러터] / TweenAnimationBuilder 를 사용하여 애니메이션 컨트롤러를 사용하지 않고 애니메이션 동작 넣기 (트윈애니메이션빌더, 대상 값) TweenAnimationBuilder (Flutter Widget of the Week) TweenAnimationBuilder class대상 값이 변경될 때마다 위젯 의 속성을 대상 값으로 애니메이션 화하는위젯 빌더입니다.애니메이션 속성의 유형( Color , Rect , double 등)은 제공된 트윈 의 유형 (예: ColorTween , RectTween , Tween 등)을 통해 정의됩니다.트윈 은 애니메이션의 대상 값도 정의합니다. 위젯이 처음 빌드될 때 Tween.begin 에서 Tween.end 까지 애니메이션이 실행됩니다. 새 트윈 에 새 Tween.end 값 을 지정하면 언제든지 새 애니메이션을 실행할 수 있습니다. 새 애니메이션은 현재 애니메이션 값(이전 트윈이 완료된 경우 이전 트윈 의 Tween.end 일 수 있음 )에서 새 트윈 의 Tween.end 까지 실행됩니다... 2025. 6. 21. Flutter[플러터] / DraggableScrollableSheet 를 사용하여 UI 크기 조절 기능 구현하기 (사이즈, 스크롤, 드래그, 드래그블스크롤브시트) (Flutter Widget of the Week) DraggableScrollableSheet class드래그 제스처 에 응답하여 스크롤 가능한 요소의 크기를 제한에 도달할 때까지 조절한 다음 스크롤하는 스크롤 가능한 요소의 컨테이너입니다.https://youtu.be/Hgw819mL_78공식 문서 코드 우리가 흔히 여러 프로그램들을 쓰다 보면 느낄 수 있는 공통적인 사항들이 있다. 바로 크기를 사용자가 직접 UI 의 크기를 설정할 수 있다는 건데 벌써 비주얼 스튜디오 코드나 안드로이드 스튜디오만 보더라도 툴바라든지 여러 화면의 요소들의 크기를 직접 조절할 수 있게 되어 있다. 이러한 기능을 구현려면 크기 조절에 유연한 DraggableScrollableSheet 위젯을 사용해 줄 수 있다.이 DraggableScrollableSheet 위젯은 화면의 .. 2025. 6. 17. Flutter[플러터] / AnimatedCrossFade 를 사용하여 페이드 효과 넣기 (전환, 패이드, 서서히, fade in, fade out, 애니메이션, 크로스 페이드) AnimatedCrossFade (Flutter Widget of the Week) AnimatedCrossFade class두 개의 주어진 자식 요소 사이를 크로스 페이드하고, 두 요소의 크기 사이에서 애니메이션을 적용하는 위젯입니다.애니메이션은 crossFadeState 매개변수를 통해 제어됩니다. firstCurve 와 secondCurve는 두 자식 요소의 불투명도 곡선을 나타냅니다. firstCurve 는 반전되어 Curves.linear 처럼 점점 커지는 곡선을 제공할 때 페이드 아웃됩니다. sizeCurve 는 페이드 아웃하는 자식 요소의 크기와 페이드 인하는 자식 요소의 크기 사이에서 애니메이션을 적용하는 데 사용되는 곡선입니다.이 위젯은 너비가 같은 두 위젯을 페이드 처리하는 데 사용됩니다. 두 자식 위젯의 높이가 다른 경우, 애니메이션이 실행되는 동안 위젯의 위쪽 가장.. 2025. 6. 16. Flutter[플러터] / DataTable 을 사용하여 정렬 기능 있는 표 만들기 (데이터, 테이블, Colums, Rows, sort) DataTable (Flutter Widget of the Week) DataTable classMaterial 2 설계 사양을 따르는 데이터 테이블입니다.열 크기는 표의 내용에 따라 자동으로 조정됩니다. 이 위젯을 사용하여 많은 양의 데이터를 표시하려면 각 열의 크기를 조정하기 위해 한 번, 그리고 표의 레이아웃을 조정할 때 한 번, 총 두 번 측정해야 하므로 비용이 많이 듭니다.https://youtu.be/ktTajqbhIcY공식 문서 코드 이러한 상황이 생길 수 있다. 보여주고 싶은 중요한 데이터가 있고 그 데이터를 표로 정리해서 보여주고 싶을 때. 이럴 때에는 어떤 위젯을 사용해야 할까? Table 위젯? 물론 훌륭한 선택이다. 다만 더 쉽고 마테리얼 디자인을 따르는 좋은 위젯이 있는데 바로 DataTable 이다.이 DataTable 은 행(Row)과 열(Co.. 2025. 6. 13. 이전 1 2 다음 반응형
