본문 바로가기
반응형

전체 글119

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.
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.
반응형

티스토리툴바