반응형 flutter111 Flutter[플러터] / SnackBar 를 사용하여 화면에 알림 메시지 띄우기 (경고 창, 스낵바, showSnackBar, native, Kotlin, 토스트) SnackBar (Flutter Widget of the Week) SnackBar class화면 하단에 잠깐 표시되는 선택적 작업이 포함된 가벼운 메시지입니다.SnackBar 를 표시하려면 메시지를 설명하는 ScaffoldMessenger.of(context).showSnackBar() 인스턴스를 전달하여 호출합니다.SnackBar가 표시되는 시간을 제어하려면 기간을 지정합니다 .TalkBack이나 VoiceOver가 활성화되어 있어도 동작이 포함된 스낵바의 시간제한은 적용되지 않습니다. 이는 AccessibilityFeatures.accessibleNavigation 으로 제어됩니다.페이지 전환 시 스낵바는 다른 페이지의 위치로 부드럽게 애니메이션이 적용됩니다. 예를 들어, SnackBar.behavior 가 SnackBarBehavior.floating 으로 설정되.. 2025. 6. 25. 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[플러터] / Image 를 사용하여 이미지 넣기 (사진, 네트워크, 인터넷 이미지, 파일, 로딩, 로더, 코틀린, 네이티브, image_picker, 이미지 가져오기) Image (Flutter Widget of the Week) Image class이미지를 표시하는 위젯입니다.https://youtu.be/7oIAs-0G4mw공식 문서 코드 앱을 제작할 때에 필수불가결하게 있어야 하는 요소가 있는데 뭐니 뭐니 해도 바로 Image, 즉 사진이다. 앱에 이 사진이 어떤 종류 든 간에 일단 들어가야 보는 맛이 난다. 없는 앱이 있다면 진짜 간소한 기능만 가지고 있는 앱이거나 사진이 필요 없을 정도로 기본에 충실하게 디자인을 완벽하게 해 놓은 앱일 것이다. Flutter 를 배우게 되면 가장 먼저 배우는 위젯 중에 하나가 Image 위젯인데 한번 거기서 조금만 더 심도 있게 Image 위젯에 대하여 알아보겠다.하위 속성속성명타입기본값설명imageImageProvider–표시할 이미지의 소스를 정의함widthdouble?null이미지의.. 2025. 6. 22. 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[플러터] / CupertinoActionSheet 를 사용하여 iOS 스타일로 모달 팝업 만들기 (액션 중 하나 선택, 액션 바텀 시트, 쿠퍼티노, 선택지, 인터페이스) CupertinoActionSheet (Flutter Widget of the Week) CupertinoActionSheet classiOS 스타일의 작업 시트입니다.액션 시트는 사용자에게 현재 상황과 관련된 두 가지 이상의 선택지를 제시하는 특정 스타일의 알림입니다. 액션 시트에는 제목, 추가 메시지, 그리고 액션 목록이 포함될 수 있습니다. 제목은 메시지 위에 표시되고, 액션은 이 콘텐츠 아래에 표시됩니다.이 작업 시트는 표준 iOS 작업 시트 제목 및 메시지 텍스트 스타일과 일치하도록 제목과 메시지의 스타일을 지정합니다.표준 iOS 작업 시트 버튼처럼 보이는 작업 버튼을 표시하려면 이 작업 시트에 지정된 작업 에 대해 CupertinoActionSheetAction 을 제공하세요.다른 버튼과 별도로 iOS 스타일 취소 버튼을 포함하려면 이 작업 시트에 지정된 cancelButton 에.. 2025. 6. 20. Flutter[플러터] / ToggleButtons 를 사용하여 선택이 가능한 버튼 만들기 (토글, 옵션, select) ToggleButtons (Flutter Widget of the Week) ToggleButtons class토글 버튼 세트.자식 목록은 direction 을 따라 배치됩니다. 각 버튼의 상태는 isSelected 에 의해 제어되는데, isSelected 는 버튼이 선택되었는지 선택되지 않았는지 여부를 판별하는 부울 값 목록입니다. 두 값 모두 목록의 인덱스를 기준으로 연관됩니다. isSelected 의 길이는 자식 목록의 길이와 일치해야 합니다.이 구성 요소에는 Material 3 버전인 SegmentedButton 이 있는데 , 이는 Material 3에 대해 구성된 애플리케이션에 더 적합합니다(ThemeData.useMaterial3 참조)https://youtu.be/kVEguaQWGAY공식 문서 코드 앱을 구성할 때 빠질 수 없는 요소 중에 뭐가 있을까? 나는 그것들.. 2025. 6. 19. Flutter[플러터] / ColorFiltered 를 사용하여 이미지 색 조정하기 (조절, 컬러, Hue, BlendMode, 블랜드 모드) ColorFiltered (Flutter Widget of the Week) ColorFiltered class자식에 ColorFilter를 적용합니다.이 위젯은 지정된 ColorFilter 에 따라 child 콘텐츠 의 각 픽셀에 독립적으로 함수를 적용합니다. BlendMode를 사용하여 Color를 적용하려면 ColorFilter.mode 생성자를 사용하세요. child 아래에 있는 콘텐츠에 ColorFilter를 적용해야 하는 경우에는 BackdropFilter 위젯을 대신 사용하세요.https://youtu.be/F7Cll22Dno8공식 문서 코드 기본적으로 플러터에서는 이미지에 color 값으로 색을 넣어줄 수 있다. 그런데 막상 해보면 자신이 원하는 그런 색이 입혀지거나 변동되는 것이 아닌 그냥 그 색이 되어버리는 불상사가 발생하곤 한다. 예를 들어 아래 코드처럼 작성.. 2025. 6. 18. 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[플러터] / AlertDialog 를 사용하여 알림 창 띄우기 (다이얼로그, showDialog, 경고, 대화 상자, 팝업) AlertDialog (Flutter Widget of the Week) AlertDialog classMaterial Design 알림 대화 상자.알림 대화상자(기본 대화상자라고도 함)는 사용자에게 확인이 필요한 상황을 알려줍니다. 알림 대화상자에는 제목(선택 사항)과 작업 목록(선택 사항)이 있습니다. 제목은 콘텐츠 위에 표시되고 작업은 콘텐츠 아래에 표시됩니다.https://youtu.be/75CsnyRXf5I 공식 문서 코드 사용자에게 어떠한 것을 알리려고 하는 상황이 오기 마련이다. 이럴 때엔 토스트 메시지를 보여주는 것도 좋지만 가장 좋은 방법은 소위 팝업 창이라고 말하는 다이얼로그를 보여주는 것이다. 특히나 No/Yes 선택지가 있는 다이얼로그를 일일이 만들기에는 귀찮은 면이 있는데 그것을 아주 쉽고 빠르게 만들어줄 수 있는 위젯이 바로 AlertDialog 위.. 2025. 6. 15. Flutter[플러터] / Slider 를 사용하여 네이티브로 음량 조절 바 만들기 (소리 바, slider, bar, control, 컨트롤, Kotlin, Native, 패키지 X) Slider (Flutter Widget of the Week) Slider classMaterial Design 슬라이더.다양한 값 중에서 선택하는 데 사용됩니다.https://youtu.be/ufb4gIPDmEs 공식 문서 코드 앱에서 음량 조절을 하게 만들고 싶을 수 있다. 그럴 때에는 음량 조절을 어떻게 하게 만들어야 할까? 사용자가 직접 값을 입력? 물론 좋다. 하지만 뭐니뭐니 해도 예로부터 음량 조절은 드래그로 값을 조절할 수 있는 '바'로 만드는 것이 국룰이었다.여기서 Slider 위젯이 그 역할을 아주 간단하게 만들어줄 수 있다. Slider 는 값의 범위를 신속하게 바꾸고 싶고 사용자 경험을 더 만족시켜 줄 수 있는 위젯이다. Slider 를 알아보면서 코틀린과 연결하여 음량 조절 기능도 만들어보자.하위 속성속성명타입기본값설명valuedouble–현.. 2025. 6. 14. 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. Flutter[플러터] / SelectableText 를 사용하여 선택되는 텍스트 구현하기 (복사 가능 글자, 카피) SelectableText (Flutter Widget of the Week) SelectableText class단일 스타일을 적용한 선택 가능한 텍스트입니다.대신 SelectionArea 또는 SelectableRegion을 사용하는 것을 고려해 보세요. 이는 텍스트 위젯을 포함하되 이에 국한되지 않는 위젯 하위 트리에서 선택을 가능하게 합니다.SelectableText 위젯은 단일 스타일로 텍스트 문자열을 표시합니다. 레이아웃 제약 조건에 따라 문자열은 여러 줄에 걸쳐 표시되거나 모두 한 줄에 표시될 수 있습니다.https://youtu.be/ZSU3ZXOs6hc공식 문서 코드 폰에서 뉴스 기사나 그런 것을 볼 때 간혹 그 텍스트를 복사하려고 할 때가 생긴다. 그럴 때에는 텍스트를 꾹- 하고 누르면 선택이 되면서 복사할 수 있는 콘텍스트 메뉴(Context menu) 가 나오.. 2025. 6. 12. Flutter[플러터] / Container 를 사용하여 박스 만들기 (컨테이너, 상자) Container (Flutter Widget of the Week) Container class일반적인 페인팅, 위치 지정, 크기 조정 위젯을 결합한 편리한 위젯입니다.컨테이너는 먼저 자식 요소를 패딩 ( 장식에 있는 테두리에 의해 팽창됨 )으로 둘러싼 다음, 패딩 된 범위에 추가 제약 조건을width 적용합니다( 그리고 둘 중 하나가 null이 아닌 경우 제약 조건으로 포함). 그런 다음 컨테이너는 여백 height 에서 설명된 추가 빈 공간으로 둘러싸입니다.페인팅하는 동안 컨테이너는 먼저 주어진 변형을 적용한 다음 패딩 된 범위를 채우도록 장식을 칠하고, 그다음 자식을 칠하고, 마지막으로 패딩된 범위를 채우는 전경 장식을 칠합니다.자식이 없는 컨테이너는 들어오는 제약 조건이 제한되지 않는 한 최대한 크게 만들려고 노력하지만, 제한되지 않은 경우에는 최대한 작게 만.. 2025. 6. 11. 이전 1 2 3 4 5 6 ··· 8 다음 반응형
