반응형 전체 글119 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. Flutter[플러터] / ListTile 을 사용하여 리스트에 타일만들기 (카드, 행, 나열) ListTile (Flutter Widget of the Week) ListTile class일반적으로 텍스트와 앞뒤 아이콘을 포함하는 고정 높이의 단일 행입니다.목록 타일은 1~3줄의 텍스트를 포함하며, 선택적으로 아이콘이나 체크박스와 같은 다른 위젯이 측면에 배치됩니다. 타일의 아이콘(또는 다른 위젯)은 leading 및 trailing 매개변수로 정의됩니다. 첫 번째 텍스트 줄은 선택 사항이 아니며 title 로 지정합니다. 선택 사항 인 subtitle 은 추가 텍스트 줄에 할당된 공간을 차지하며, isThreeLine 이 true인 경우 두 줄을 차지합니다. dense 가 true인 경우, 이 타일의 전체 높이와 title 및 subtitle 위젯을 감싸는 DefaultTextStyle 의 크기가 줄어듭니다.제목이 줄 바꿈되지 않도록 하고, subtitle이 줄.. 2025. 6. 10. Flutter[플러터] / ListView 를 사용하여 스크롤 가능한 리스트 만들기 (목록, controller, 컨트롤러, 상호작용) ListView (Flutter Widget of the Week) ListView class선형적으로 배열된 위젯의 스크롤 가능한 목록입니다.ListView 는 가장 일반적으로 사용되는 스크롤 위젯입니다. 스크롤 방향으로 자식 위젯들을 하나씩 표시합니다. 교차 축에서 자식 위젯들은 ListView를 채워야 합니다.null이 아닌 경우 itemExtent 는 자식이 스크롤 방향으로 지정된 범위를 갖도록 합니다.null이 아닌 경우, prototypeItem은 스크롤 방향에서 자식 위젯이 주어진 위젯과 동일한 크기를 갖도록 합니다.itemExtent 나 prototypeItem을 지정하는 것은 자식이 스스로 범위를 결정하도록 하는 것보다 효율적입니다. 예를 들어 스크롤 위치가 크게 바뀌는 경우, 스크롤 장치가 자식의 범위에 대한 사전 지식을 활용하여 작업을 절약할 수 있기.. 2025. 6. 9. Flutter[플러터] / FractionallySizedBox 를 사용하여 부모 사이즈에 맞게 반응형 위젯 만들기 (fractional, 비율, 크기, 사이즈, 유동적) FractionallySizedBox (Flutter Widget of the Week) FractionallySizedBox class자식 위젯의 크기를 전체 사용 가능 공간의 일부로 지정하는 위젯입니다. 레이아웃 알고리즘에 대한 자세한 내용은 RenderFractionallySizedOverflowBox를 참조하세요.https://youtu.be/PEsY654EGZ0공식 문서 코드 흔히들 앱에서 위젯을 배치할 때 지정된 값이 아닌 "MediaQuery,sizeOf(Context).width * 0.8" 같이 화면의 길이에 비례하여 사이즈를 지정해 본 적이 있을 것이다. 그렇다면 이번엔 화면의 길이에 비례하여 사이즈를 지정하는 것이 아닌 부모에 비례하여 사이즈를 제작해야 한다면 어떻게 하겠는가? 이럴 때 사용할 수 있는 것이 바로 FractionallySizedBox 위젯이다.이 Fract.. 2025. 6. 8. Flutter[플러터] / AnimatedOpacity 를 사용하여 서서히 나타나는 위젯 만들기 (오파시티, 부드럽게, 사라지는, 변경하기, 애니메이션, 인트로, 스플래쉬, Splash) AnimatedOpacity (Flutter Widget of the Week) AnimatedOpacity class주어진 불투명도가 변경될 때마다 지정된 기간 동안 자식의 불투명도를 자동으로 전환하는 불투명도의 애니메이션 버전입니다.불투명도를 애니메이션으로 구현하는 작업은 자식을 중간 버퍼에 그려야 하기 때문에 상대적으로 비용이 많이 듭니다.https://youtu.be/QZAvjqOqiLY 공식 문서 코드 앱을 시작했을 때 앱을 제작한 회사라든지 뭐 로고 같은 것이 나오는 화면, 스플래쉬 화면을 본 적이 있을 것이다. 그런 화면에서 주로 로고들은 처음엔 보이지 않았다가 서서히 보이게 된다. 그니까 처음엔 투명도가 0이어서 완전 투명이었다가 나중엔 1이 되면서 그냥 불투명이 되어버리면서 그렇게 보이게 된다는 것이다.이러한 동작을 아주 간단하게 실행시켜주는 위젯이 있는데 바로 An.. 2025. 6. 7. Flutter[플러터] / Stack 을 사용하여 위젯을 겹쳐서 배치하기 (겹치기, 포개기, 중첩, 스택, 포지션, Positioned) Stack(Flutter Widget of the Week) Stack class위젯의 자식 요소를 상자의 가장자리를 기준으로 배치하는 위젯입니다.이 클래스는 여러 자식 요소를 간단한 방법으로 겹치게 하려는 경우에 유용합니다.예를 들어 텍스트와 이미지를 겹쳐 놓고 그라디언트를 적용한 다음 아래쪽에 버튼을 붙인 경우입니다.https://youtu.be/liEGSeD3Zt8Stack 위젯의 각 자식 위젯은 위치가 지정되거나 지정되지 않습니다. 위치가 지정된 자식 위젯은 null이 아닌 속성을 하나 이상 가진 Positioned 위젯에 래핑된 위젯입니다. 스택은 모든 위치가 지정되지 않은 자식 위젯을 포함하도록 크기가 조정되며, 이 자식 위젯들은 정렬 (기본값은 왼쪽에서 오른쪽으로 읽는 환경에서는 왼쪽 위 모서리, 오른쪽에서 왼쪽으로 읽는 환경에서는 오른쪽 위 모서리).. 2025. 6. 6. Flutter[플러터] / ConstrainedBox ConstrainedBox (Flutter Widget of the Week) ConstrainedBox class자식 위젯에 추가적인 제약을 부과하는 위젯입니다.예를 들어, 자식의 최소 높이를 50.0 논리 픽셀로 지정하려면 제약 조건 const BoxConstraints(minHeight: 50.0) 으로 다음을 사용할 수 있습니다.https://youtu.be/o2KveVr7adg예시 코드 앱을 구성할 때 오는 데이터가 얼마나 오는지 혹은 위젯을 배치할 건데 그 위젯의 크기를 예측 불가능 할 때 어떻게 해야 할까? 이런 상황에서는 레이아웃이 깨질 가능성이 생기는데 이럴 때 안전하게 크기를 제한하는 용도로 사용되는 것이 ConstrainedBox 위젯이다.ConstrainedBox 위젯은 자식 위젯에 제약 조건(BoxConstraints)을 적용하기 위해 사용하는 위젯이다.이 .. 2025. 6. 5. Flutter[플러터] / Semantics 을 사용하여 스크린 리더에 화면 정보를 제공하기 (UI 정보 제공, 시멘틱, 화면 판독기, 접근성) Semantics (Flutter Widget of the Week) Semantics class위젯의 의미에 대한 설명으로 위젯 트리에 주석을 달은 위젯입니다.보조 기술, 검색 엔진 및 기타 의미 분석 소프트웨어에서 응용 프로그램의 의미를 확인하는 데 사용됩니다.https://youtu.be/NvtMt_DtFrQ예제 코드 시각장애인들이 우리가 플러터로 만든 앱에 들어오는 일이 생긴다면 어떻게 될까? 시각장애를 갖고 있다면 스크린 리더기를 사용한다는 선택지가 주어진다. 이 스크린 리더기라는 것은 말 그대로 스크린의 항목들을 읽어주는 역할을 가지고 있는데 예를 들어 내가 구글 앱을 켜고 싶다. 그러면 화면 아무 곳을 터치하면 스크린 리더기가 소리로 여기에는 어떠한 앱이 있습니다. 하고 소리를 내준다. 시각장애인들은 이 정보를 바탕으로 스마트폰의 화면을 보게 되는데 여기서 문.. 2025. 6. 4. 이전 1 2 3 4 5 6 7 8 다음 반응형
