본문 바로가기
반응형

flutter111

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.
Flutter[플러터] / sqflite 패키지 사용법 (데이터베이스, SQite, CRUD, db) sqflite (Flutter Package of the Week) package:sqfliteFlutter 용 SQLite 플러그인입니다. iOS, Android, macOS를 지원합니다.https://youtu.be/HefHf5B1YM0가끔은 장치에 중요한 앱 데이터를 저장해야 할 때도 있다. 간단한 데이터라면 shared_preferences 같은 패키지를 사용하는 것도 좋은 방법일 수 있지만 구조화된 데이터를 저장해야 한다면 SQL 데이터베이스를 사용하게 될 것이다. 그러한 상황에서 Flutter 개발자들을 위해 SQLite의 사용을 위한 다양한 옵션이 있다. 그중 가장 유명한 패키지 중 하나인 sqflite를 알아보자.sqflite은 SQlite 데이터베이스를 사용할 수 있게 해주는 패키지이다. 이 패키지를 사용하면 로컬 디바이스에 영구적으로 데이터를 저장하고 .. 2025. 7. 13.
Flutter[플러터] / url_launcher 패키지 사용법 (링크, 인터넷, 사이트, 이동, 전화번호 호출, 메시지, 문자, 메시지, 이메일, 열기, 런처, 불러오기, 유튜브 앱 실행, 라이브러리, pub.dev) url_launcher (Flutter Package of the Week) package:url_launcherURL을 시작하기 위한 Flutter 플러그인입니다.https://youtu.be/qYxRYB1oszw 앱에서 URL을 눌렀을 때 새 인터넷 창이 열리면서 웹 사이트에 접속해 본 적이 있는가? 혹은 앱 자체에서 인터넷 브라우저가 열린다든지 아니면 유튜브 링크를 눌렀는데 유튜브에 들어가지면서 해당 영상으로 열린 적은 있는가? 그러한 모든 작업을 간단하게 실행시켜 주는 Flutter의 공식 패키지(publisher:flutterdev)가 있는데 그 패키지는 바로 url_launcher이다.url_launcher는 외부 애플리케이션(웹 브라우저, 전화, 이메일, 문자 메시지 등)을 실행하기 위해 사용하는 공식 패키지이다. 예를 들어, 사용자가 버튼을 눌렀을 때 웹 페이지를 .. 2025. 7. 12.
Flutter[플러터] / Stream이란 무엇일까? (뜻, 사용법, 스트림, 어싱크, 비동기, async*, yield*, 이벤트, 데이터, 지속적) Stream classhttps://youtu.be/nQBpOIHE4eE 앱을 만들다 보면 이런 상황이 생기지 않던가?사용자가 버튼을 누르면 결과가 나와야 하는데 서버에서 데이터를 받아오는데 시간이 걸리는 상황, 심지어 센서나 마이크, 위치 정보처럼 계속 변하는 데이터를 받아 와야 하는 상황..이럴 때 어떻게 데이터를 받아와야 할까? 당연하게도 데이터를 '한 번에' 받는 것이 아니라 '지속적으로, 계속 받아야'할 것이다.그럴 때 필요하고 사용할 수 있는 것이 바로 Stream이다.Stream은 비동기 이벤트의 연속된 흐름을 처리하기 위한 핵심 개념 중 하나이다.사용자 입력, 네트워크 응답, 실시간 데이터 업데이트 등 다양한 비동기 작업에 Stream을 활용할 수 있다.먼저 스트림의 타입을 봐보자.스트림의.. 2025. 7. 11.
Flutter[플러터] / async 패키지 사용법 (더 많은 비동기 함수, 라이브러리, 유틸리티, pub.dev, 어싱크, package, AsyncMemoizer, CancelableOperation, FutureGroup, StreamGroup) async (Flutter Package of the Week) package:asyncdart:async비동기 계산을 처리하는 스타일의 유틸리티 클래스를 포함합니다.https://youtu.be/r0tHiCjW2w0우리가 Dart로 코드를 짤 때 필연적으로 필요한 것이 바로 비동기 기능인데 우리는 그러한 기능을 사용할 때 외부 패키지가 아닌 Dart SDK에 내장된 비동기 지원 기능 라이브러리인 dart:async를 임포트 해서 사용하게 된다. 이렇게 임포트 해서 사용하면 async, await, Future, Stream등 다양한 비동기 클래스와 함수들을 사용할 수 있게 된다. 하지만 여기서 더 나아가서 더 많은 기능을 내포하고 있는 Dart의 공식 패키지(publisher:dart.dev)가 있다면 어떻게 될까? 바로 그 패키지가 async 패키지이다.이 asy.. 2025. 7. 10.
Flutter[플러터] / AboutDialog를 사용해서 라이센스 표시하기 (어바웃다이얼로그, 저작권 정보, 앱 버전 번호, 라이선스, showAboutDialog) AboutDialog (Flutter Widget of the Week) AboutDialog class정보 상자입니다. 애플리케이션 아이콘, 이름, 버전 번호, 저작권 정보가 표시되는 대화 상자이며, 애플리케이션에서 사용하는 소프트웨어의 라이선스를 표시하는 버튼도 있습니다.AboutDialog를 표시하려면 showAboutDialog를 사용합니다.https://youtu.be/YFCSODyFxbE공식 문서 코드 앱을 출시하기 이전, 버전 번호, 허가증과 같은 법률 정보와 용어들을 표시할 공간이 필요할 것이다. 심지어 앱 스토어에서는 이러한 모든 형식의 절차를 따르지 않으면 앱을 출시 허가를 내려주지 않기 때문에 이러한 저작권, 라이센스등을 반드시 명시해놔야 한다.이처럼 아주 중요한 절차이기 때문에 반드시 필요한 사항인데 이것을 손쉽게 만들어 줄 수 있는 위젯이 있으니 바로 .. 2025. 7. 9.
반응형