반응형 flutter116 #2 The Three Trees (세 가지 트리 구조) https://ch5c.tistory.com/147 [한국어 번역] How Flutter Works: The Three Trees #DecodingFlutter (2/6)https://www.youtube.com/watch?v=xiW3ahr4CRU.인트로 (Intro)0:00CRAIG LABENZ:“How Flutter Works” 에피소드 2에 다시 오신 것을 환영합니다.0:10이전 에피소드에서 저는 Flutter가 주로 세 가지 서로 다른 트리 구조에ch5c.tistory.com위젯이란 무엇인가플러터는 선언형 API를 제공하는데 각각의 위젯은 불변(immutable)이며 일회용(disposable) 임.즉, UI의 해당 부분이 변경될 필요가 있을 때마다 위젯은 버려지고 새로 생성되게 된다는 것인데 .. 2026. 1. 17. [한국어 번역] How Flutter Works: The Three Trees #DecodingFlutter (2/6) https://www.youtube.com/watch?v=xiW3ahr4CRU.인트로 (Intro)0:00CRAIG LABENZ:“How Flutter Works” 에피소드 2에 다시 오신 것을 환영합니다.0:10이전 에피소드에서 저는 Flutter가 주로 세 가지 서로 다른 트리 구조에 의해 동작한다고 살짝 언급했습니다.0:13하나는 우리가 Flutter 개발자로서 직접 작성하는 위젯(widget)으로 가득 찬 트리,0:17하나는 우리가 거의 직접 작성하지는 않지만 항상 상호작용하게 되는 엘리먼트(element)로 가득 찬 트리,0:21그리고 마지막 하나는 가끔씩 직접 작성하기도 하는 렌더 오브젝트(render object)로 이루어진 트리입니다.0:30위젯이 가장 눈에 띄는 개념이므로, 먼저 위젯부터.. 2026. 1. 17. #1 Architecture (아키텍처) https://ch5c.tistory.com/145 [한국어 번역] How Flutter Works: Architecture #DecodingFlutter (1/6)https://www.youtube.com/watch?v=0Xn1QhNtPkQ&t=2s소개 (Introduction)0:00CRAIG LABENZ:“How Flutter Works”의 첫 번째 에피소드에 오신 것을 환영합니다.이 시리즈는 총 6부작으로, 여러분이 작성한 Dart 코드가 Flutter라ch5c.tistory.comFlutter란 무엇인가Flutter는 선언형(declarative)이며 멀티 플랫폼을 지원하는 UI 프레임워크라고 설명하고 있는데 여기서 선언형이라는 것이 무엇일까? 선언형에 대해서 아래와 같이 설명하고 있다. 여러.. 2026. 1. 14. [한국어 번역] How Flutter Works: Architecture #DecodingFlutter (1/6) https://www.youtube.com/watch?v=0Xn1QhNtPkQ&t=2s소개 (Introduction)0:00CRAIG LABENZ:“How Flutter Works”의 첫 번째 에피소드에 오신 것을 환영합니다.이 시리즈는 총 6부작으로, 여러분이 작성한 Dart 코드가 Flutter라는 방대한 세계 속으로 배포된 이후 어떤 일이 벌어지는지를 탐구합니다.0:11이 에피소드들을 통해 다루는 정보는 가볍게 흥미로운 내용부터 모든 Flutter 개발자에게 꼭 필요한 핵심 지식까지 다양할 것입니다.0:18하지만 분명히 해두자면, 이 모든 내용은 Flutter 앱을 어떻게 작성하는지가 아니라, Flutter 자체가 어떻게 동작하는지에 관한 것입니다.🎵 (밝은 음악)0:32오늘은 Flutter의 아.. 2026. 1. 14. Flutter / Hot Reload 단축키 지정하기 (키맵, 수정하기, 복구하기, 단축키 안됨, keymap) 우리가 플러터로 개발을 할 때 가장 좋은 편의 기능을 뽑으라고 한다면 무엇일까? 난 자신 있게 바로HotRestart / HotReload 기능이라고 할 것이다.그런데 안드로이드 스튜디오를 사용해서 개발을 하고 있다면 좀 불편함을 느끼는 사항이 있을 것인데 바로 Hot Reload에 지정되어 있는 단축키가 안 먹는다는 것이다. 아무리 코드 내에서 Ctrl + ₩를 눌러도 화면이 갱신되지 않을 것을 것이고 혹은 이상한 제미나이가 뜨는 사람도 있을 것이다.이는 제대로 안드로이드 스튜디오에서 키맵핑이 되지 않아서 발생하는 문제인데 그것을 해결해 볼 것이다.가장 먼저 Settings를 열어준다.그런 후 Keymap에 들어가서 검색창 옆에 있는 Find Shortcut을 클릭한다.저 창이 열렸다면 키보드로 아무거.. 2025. 11. 14. 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[플러터] / 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[플러터] / device_info_plus 패키지 사용법 (device_info, 디바이스 정보, 장치, 유연성, 플랫폼, 안드로이드, iOS, 웹, 환경, 실행 정보) device_info_plus (Flutter Package of the Week) package:device_info_plusFlutter 애플리케이션 내에서 현재 장치 정보를 가져옵니다.https://youtu.be/8T3g6HU5Odo앱을 제작할 때 실행되는 디바이스에 맞춰 UI 크기를 조절해야 할 때가 있다. 또한 안드로이드에서는 머테리얼 디자인을 사용한 UI를 보여주고 iOS에서는 쿠퍼티노 디자인에 맞춰 보여주려고 할 수 있다. 그렇다면 이러한 UI를 제작하기 위해선 가장 먼저 무엇이 필요할까? 바로 그 앱이 실행되는 디바이스의 정보가 필요하다. 앱이 안드로이드에서 실행되는지 iOS에서 실행되는지에 대한 정보가 필요한데 그러한 정보를 쉽게 얻을 수 있게 만들어주는 패키지가 바로 package:device_info_plus이다.이 device_info_plus 패키지는 애플리케이.. 2025. 7. 19. Flutter[플러터] / location 패키지 사용법 (로케이션, 현재 위치 정보, 지도, GPS, 권한, 허용) location (Flutter Package of the Week) package:location이 Flutter 플러그인은 Android와 iOS에서 위치 정보를 가져오는 기능을 제공합니다. 또한 위치가 변경되면 콜백을 제공합니다.https://youtu.be/65qbtJMltVk앱에서 자신의 위치 정보를 표시하려면 어떻게 해야 할까? 네이티브(Kotlin)로 제작하여 위치 정보를 받아오기 위한 동의를 받고 실질적인 값을 받아오는 것도 하나의 방법일 수 있다. 하지만 여기에 더 쉽고 빠르게 위치 정보를 표시할 수 있게 도와주는 location 패키지가 있다. location 패키지는 디바이스의 위치(위도, 경도 등)를 가져오거나 실시간 위치 추적을 구현할 수 있게 해주는 강력한 패키지로 이 패키지는 iOS와 Android 모두 지원하며, 위치 권한 요청과 설정 확인도 .. 2025. 7. 18. 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. 이전 1 2 3 4 ··· 8 다음 반응형
