본문 바로가기

반응형

Flutter & Dart

[Flutter] Flutter 라우팅 관리, fluro로 깔끔하게 처리하기 Flutter 앱이 커질수록 페이지 이동(Route) 관리는 점점 복잡해집니다.Navigator.push()만 계속 사용하다 보면,라우트 이름 관리가 힘들고파라미터 전달이 지저분해지고딥링크 대응이 어려워집니다이럴 때 유용한 라우팅 패키지가 바로 fluro입니다.📌 fluro란?fluro는 Flutter에서 사용하는 고급 라우팅 라이브러리로,URL 기반 라우팅파라미터 전달딥링크 처리중앙 집중식 Route 관리를 쉽게 구현할 수 있게 도와줍니다.📦 pub.devhttps://pub.dev/packages/fluro✅ fluro의 주요 특징🌐 웹 스타일 URL 라우팅📦 Path Parameter 지원🧭 중앙 Router 관리🔗 딥링크 대응 가능🪶 비교적 가벼운 구조📥 설치 방법 dependenc.. 더보기
[Flutter] Flutter ScreenUtil로 반응형 UI 쉽게 만들기 Flutter는 하나의 코드베이스로 다양한 해상도와 화면 크기를 지원할 수 있다는 장점이 있습니다. 하지만 실제로 작업하다 보면 기기마다 글자 크기, 여백, 버튼 크기가 달라 보이는 문제를 자주 겪게 됩니다.이 문제를 가장 깔끔하게 해결해주는 라이브러리가 바로 flutter_screenutil입니다.이 글에서는 ScreenUtil의 개념부터 실무에서 사용하는 방법까지 정리해보겠습니다.1. ScreenUtil이란?flutter_screenutil은 디자인 기준 해상도를 정해두고, 실제 기기 해상도에 맞게 자동으로 크기를 변환해주는 라이브러리입니다.즉,"디자이너가 준 시안 크기 그대로 코딩하면, 모든 기기에서 비슷하게 보이도록 만들어준다"라는 개념입니다.2. ScreenUtil 설치하기pubspec.yaml.. 더보기
[Flutter] GetX 장단점 완벽 정리: 장점과 단점을 한눈에 Flutter에서 상태관리(State Management)는 앱 개발의 핵심 중 하나입니다.setState, Provider, Bloc, Riverpod 등 다양한 방법이 있지만, 최근 많은 개발자가 선택하는 방법 중 하나가 바로 GetX입니다.이번 글에서는 GetX의 장단점을 실제 개발 사례와 함께 살펴보겠습니다.1. GetX란?GetX는 Flutter에서 상태관리, 라우팅, 의존성 관리(Dependency Injection) 등을 간단하게 구현할 수 있는 패키지입니다.주요 특징:상태관리(State Management)라우팅(Routing)의존성 관리(Dependency Injection)하나의 패키지로 이 모든 기능을 제공하기 때문에, 앱 구조를 간단하게 만들고 코드 양을 줄일 수 있는 장점이 있습니.. 더보기
[Flutter] GetX와 ListView로 동적 리스트 관리하기 Flutter에서 리스트를 보여줄 때, 데이터가 변경되면 UI를 자동으로 갱신하고 싶을 때가 있습니다.이럴 때 GetX 상태관리를 활용하면 간단하고 효율적으로 상태 변화를 UI에 반영할 수 있습니다.이번 글에서는 GetX와 ListView를 사용하여 동적 리스트를 구현하는 방법을 살펴봅니다.1. GetX 설치먼저 pubspec.yaml에 GetX 패키지를 추가합니다. dependencies: flutter: sdk: flutter get: ^4.6.5dependencies: flutter: sdk: flutter get: ^4.6.5그리고 flutter pub get을 실행합니다. 2. Controller 생성GetX의 핵심은 Controller입니다.데이터를 관리하고 UI와 연결할 수 있는 클.. 더보기
[Flutter] Getx 와 Hive 같이 사용하는 방법 Flutter에서 Hive와 GetX를 함께 사용하는 방법Hive와 GetX는 Flutter에서 데이터 관리와 상태 관리를 위한 강력한 도구들입니다. Hive는 로컬 데이터베이스로 데이터를 쉽게 저장하고 조회할 수 있게 해주며, GetX는 상태 관리와 네비게이션을 효율적으로 처리할 수 있도록 도와줍니다. 두 라이브러리를 함께 사용하면, 데이터베이스 상태를 쉽게 관리하면서도 앱의 상태를 효율적으로 업데이트할 수 있습니다.1. 프로젝트 설정먼저 pubspec.yaml에 Hive와 GetX 패키지를 추가합니다. 또한 hive_flutter 패키지도 함께 추가하여 Flutter 앱과 Hive를 연동합니다.dependencies: flutter: sdk: flutter hive: ^2.0.0 hive_.. 더보기
[Flutter] Flutter에서 Hive 사용법 Hive란?Hive는 Flutter에서 빠르고 효율적인 로컬 데이터 저장을 위한 NoSQL 데이터베이스입니다. 이 데이터베이스는 빠른 읽기/쓰기를 제공하며, 작은 규모의 앱에서 성능이 뛰어납니다. 또한, 다양한 데이터 타입을 지원하고, 객체 지향적인 데이터 구조를 활용할 수 있기 때문에 앱 개발에서 매우 유용합니다.1. Hive 패키지 설치Hive를 사용하려면 먼저 pubspec.yaml 파일에 Hive 패키지를 추가해야 합니다. 또한, hive_flutter라는 패키지도 추가해주어야 Flutter 환경에서 Hive를 사용할 수 있습니다. dependencies: flutter: sdk: flutter hive: ^2.0.0 hive_flutter: ^1.1.0그 후 pub get 명령어를 실.. 더보기
[Flutter] 플러터 무한 스크롤 구현하기 Flutter + GetX로 무한스크롤 구현하기안녕하세요 오늘은 Flutter와 GetX를 활용해서 무한스크롤(Infinite Scroll) 리스트를 만드는 방법을 정리해보겠습니다.보통 앱에서 리스트 끝까지 내리면 자동으로 다음 데이터를 불러오는 기능이 필요하죠. 예를 들어 뉴스 피드, 쇼핑몰 상품 리스트, 채팅 로그 등이 여기에 해당합니다. 프로젝트 준비우선 get 패키지를 pubspec.yaml에 추가해줍니다.dependencies: flutter: sdk: flutter get: ^4.6.6 Controller 만들기리스트 데이터를 관리할 Controller를 만듭니다.import 'package:flutter/material.dart';import 'package:get/get.dart.. 더보기
[Flutter] 파일 뷰어를 만들어보자 [power_file_viewer_v2] Flutter 앱에서 TXT, PDF, DOCX 등 다양한 파일을 손쉽게 열람할 수 있는 방법을 찾고 계신가요? 오늘은 power_file_viewer_v2 패키지를 활용해 파일 뷰어를 만드는 방법을 단계별로 소개합니다. 1. 패키지 설치먼저 pubspec.yaml 파일에 power_file_viewer_v2를 추가합니다. dependencies: flutter: sdk: flutter power_file_viewer_v2: ^1.0.5 # 최신 버전 확인 필요터미널에서 다음 명령어로 패키지를 설치합니다. flutter pub get2. 기본 사용법PowerFileViewer 위젯을 사용하면 간단하게 파일을 열 수 있습니다. import 'package:flutter/material.dart.. 더보기

반응형