Binary & Beyond

로컬 데이터베이스 Hive를 활용하며, 깔끔한 UI와 객체지향 구조를 갖춘 경량 블로그 앱을 만들어 봅니다.기능 설명1. 글 목록 화면 (PostListPage)Hive에 저장된 글을 불러와 목록으로 표시각 글은 카드 형태로 표시되며:제목, 내용 일부, 댓글 개수 표시홀/짝수 행마다 배경색 다르게 적용각 글을 탭하면 상세 페이지로 이동플로팅 버튼(➕) 클릭 시 글쓰기 화면으로 이동2. 글 작성 화면 (PostWritePage)제목과 내용 입력 후 저장 가능저장 시 Hive에 새 Post 객체로 추가저장 완료 후 글 목록 화면으로 이동3. 글 상세 화면 (PostDetailPage)선택한 글의 제목 + 전체 내용 표시글 삭제 버튼 → Hive에서 해당 글 제거 후 목록으로 이동목록으로 버튼 → 이전 화면으..

Gemini App에서 사용되는 플러그인diodio는 Dart 및 Flutter 앱에서 HTTP 통신을 보다 쉽고 강력하게 처리할 수 있도록 도와주는 비동기 HTTP 클라이언트 라이브러리입니다.기능설명GET, POST, PUT, DELETE 지원RESTful API에 필요한 모든 메서드 지원인터셉터 (Interceptor)요청/응답 전후에 가로채서 처리 가능 (예: 인증 토큰 자동 삽입)FormData 업로드파일/폼데이터 업로드에 최적화 (multipart/form-data)타임아웃 설정연결, 수신, 요청 타임아웃 각각 설정 가능진행률 표시다운로드/업로드 진행 상황 추적 가능자동 재시도실패한 요청을 자동으로 재시도 (옵션)쿠키 관리내장 CookieJar 또는 사용자 지정 Cookie 설정 가능기본 사용법..

포토 스티커 앱필수 플러그인image_picker Flutter 앱에서 이미지 또는 비디오를 카메라 또는 갤러리에서 선택할 수 있도록 해주는 공식 플러그인입니다. https://pub.dev/packages/image_picker image_picker | Flutter packageFlutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.pub.dev기능설명갤러리에서 이미지 선택사용자의 기기에서 이미지 파일을 가져옴카메라로 사진 촬영즉석에서 카메라 실행 후 촬영갤러리/카메라에서 동영상 선택 또는 촬영이미지뿐 아니라 비디오도 지원크기 제한, 압축 설정ma..

Google Map 관련 필수 플러그인google_maps_flutterFlutter에서 Google 지도 기능을 앱 내에 직접 통합할 수 있게 해주는 공식 플러그인입니다. Android와 iOS 플랫폼 모두에서 사용할 수 있으며, Flutter 앱에 지도 위젯을 삽입하고 다양한 지도 상호작용을 구현할 수 있습니다.플러그인 이름: google_maps_flutter플랫폼 지원: Android, iOS공식 문서: https://pub.dev/packages/google_maps_flutter google_maps_flutter | Flutter packageA Flutter plugin for integrating Google Maps in iOS and Android applications.pub.dev..

영상통화에 어플리케이션 개발시 고려할 기술적 요소들Flutter로 영상통화 어플리케이션을 만들기 위해서는 다음과 같은 기술적인 준비와 고려사항이 필요합니다.크게는 영상 처리, 네트워크 통신, 권한 관리, UI/UX 설계, 백엔드 서버 구성, 보안 및 성능 최적화로 나눌 수있습니다.1. 영상통화 기능 구현 (RTC 기술)Flutter 자체는 영상 처리 기능이 없기 때문에, WebRTC 기반의 외부 SDK를 사용해야 합니다.주요 영상통화 SDK (Flutter에서 사용 가능한 것):SDK설명AgoraFlutter 플러그인 제공. 안정성 높고 문서 풍부. 무료 요금제 있음.ZEGOCLOUD실시간 통화, 채팅, 라이브 지원. UI 위젯까지 제공.100ms빠른 개발을 위한 Prebuilt UI 제공. 음성/영상통..

비디오 플레이어에 사용되는 패키지video_playerFlutter에서 동영상 재생 기능을 구현할 수 있게 해주는 공식 패키지입니다.video_player 자체에는 전체화면 기능이 없고, 전체화면/회전/시스템 UI 숨김은 Flutter의 SystemChrome, MediaQuery 등을 통해 직접 구현해야 합니다.1. 주요 기능파일 동영상 재생: 로컬 디바이스에 저장된 mp4 등네트워크 동영상 재생: HTTP/HTTPS URL (YouTube 스트림 등은 불가)재생 / 일시정지 / 탐색(seek) 제어음소거 / 볼륨 / 반복재생 지원전체화면 모드 직접 구현 가능비디오 재생 위치 추적 가능기본적인 UI는 제공 안 함 → 사용자가 직접 구성해야 함항목내용패키지명video_player버전^2.9.5 (2024..

가속도 센서 패키지 설치sensors_plus 패키지란?sensors_plus는 Flutter 앱에서 기기의 센서(가속도계, 자이로스코프, 자기장 등) 데이터를 쉽게 사용할 수 있도록 도와주는 인기 있는 플러그인입니다.다.패키지 링크: pub.dev/packages/sensors_plus주요 센서 기능센서설명accelerometerEventStream()가속도계: 기기의 x, y, z축 방향 가속도 측정 (기기 흔들기 감지 등)gyroscopeEventStream()자이로스코프: 회전 속도 측정 (게임/AR 앱에서 방향 추적)userAccelerometerEventStream()중력 제외한 사용자 가속도 측정magnetometerEventStream()자기장 측정 (디지털 나침반 구현 시 사용) 예시: ..

기상청 단기예보 API 활용 신청하기회원 가입후 활용신청 가능 합니다. 기상청_단기예보 ((구)_동네예보) 조회서비스 | 공공데이터포털 기상청_단기예보 ((구)_동네예보) 조회서비스초단기실황, 초단기예보, 단기((구)동네)예보, 예보버전 정보를 조회하는 서비스입니다. 초단기실황정보는 예보 구역에 대한 대표 AWS 관측값을, 초단기예보는 예보시점부터 6시간까지의 예보를,www.data.go.kr프로젝트 구조Android, Windows, Web 만 적용합니다.iOS는 나중에.. Flutter Dependencies 추가pubspec.yamldependencies: flutter: sdk: flutter intl: '^0.20.2' flutter_compass: '^0.8.1' permissio..

PageController를 사용해 슬라이드를 제어Timer.periodic으로 3초마다 다음 페이지로 이동마지막 이미지에 도달하면 처음으로페이지 이동에는 animateToPage를 사용해 부드러운 전환을 구현dispose()에서 타이머와 컨트롤러 정리전체 코드import 'dart:async';import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: '자동 이미지 갤러리', theme: ThemeData( ..

블로그앱 구성상단 Appbar의 타이틀 "tistory", 색상은 f9e000, 굵은 글씨, 중앙정렬Appbar 우측에 '홈' 버튼 생성, 클릭하면 'https://bigdown.tistory.com/' 로 이동AppBar 좌측에 뒤로가기 버튼을 추가하여 웹 브라우저의 뒤로 가기 기능을 수행스마트폰의 뒤로 가기 버튼을 누르면 이전 페이지로 이동하도록 WillPopScope을 활용하여 처리 Webview에서는 'https://bigdown.tistory.com/' 로 접속, 자바스크립트 등의 기능 활성화Webview 좌측 하단에 '방명록' 플로팅 버튼을 추가하고 클릭하면 'https://bigdown.tistory.com/guestbook'으로 이동pubspec.yam에 'webview_flutter' 플..

Flutter의 상태 관리 기본 개념 (setState vs. Provider)Flutter에서 UI는 **상태(State)**에 따라 변경됩니다. 상태 관리(State Management)는 어떻게 데이터를 관리하고 UI에 반영할지를 결정하는 중요한 개념입니다.1. 상태(State)란?상태(State)란 UI가 변경될 때 필요한 데이터를 의미합니다.예를 들어, 버튼 클릭 시 카운터가 증가하는 앱을 만든다면, 카운터 값(int counter)이 상태가 됩니다.StatelessWidget → 변하지 않는(정적인) UIStatefulWidget → 사용자 입력이나 이벤트에 따라 변경되는 UI2. setState() (기본적인 상태 관리 방법)setState()는 StatefulWidget 내에서 간단한 상태..

Flutter의 배치(Layout) 관련 위젯Flutter에서 UI를 구성할 때 배치(Layout) 관련 위젯을 사용하여 요소들을 정렬하고 배치할 수 있습니다.배치 관련 위젯은 크게 단일 요소 배치, 수직/수평 정렬, 겹쳐 배치, 그리드 배치 등으로 나눌 수 있습니다. 1. Container (기본 배치 및 스타일링)Container는 크기, 패딩, 마진, 정렬, 색상 등을 설정할 수 있는 가장 기본적인 배치 위젯입니다. 예제: 크기, 정렬, 색상 적용Container( width: 200, height: 100, alignment: Alignment.center, // 내부 콘텐츠 정렬 decoration: BoxDecoration( color: Colors.blue, // 배경색 b..

Flutter의 디자인 관련 위젯Flutter는 Material Design과 Cupertino(iOS 스타일)을 지원하며, 다양한 디자인 관련 위젯을 제공합니다.UI를 꾸미고 스타일을 적용하는 데 유용한 주요 위젯을 정리해보겠습니다.1. 컨테이너 (Container)Container는 박스(Box) 형태의 UI 요소로, 크기 조정, 배경색, 테두리, 그림자 등을 적용할 수 있습니다. Container( width: 200, height: 100, alignment: Alignment.center, decoration: BoxDecoration( color: Colors.blue, // 배경색 borderRadius: BorderRadius.circular(15), // 둥근 모서리 ..

Flutter의 제스처(Gesture) 관련 위젯Flutter에서는 사용자의 터치, 스와이프, 탭, 길게 누르기 등의 입력을 감지하는 제스처(Gesture) 위젯을 제공합니다.이러한 위젯을 활용하면 버튼, 드래그 가능한 UI, 애니메이션 등의 다양한 상호작용을 구현할 수 있습니다.1. GestureDetector (가장 기본적인 제스처 감지 위젯)GestureDetector는 사용자의 다양한 터치 이벤트를 감지할 수 있는 기본 위젯입니다.import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @overrid..

Flutter의 텍스트 관련 위젯Flutter에서 텍스트를 표시하고 스타일을 지정하는 데 사용할 수 있는 여러 위젯이 있습니다. 대표적으로 Text, SelectableText, RichText 등이 있으며, 각 위젯의 특징과 사용법을 살펴보겠습니다.1. 기본 텍스트 위젯 (Text)Flutter에서 텍스트를 표시하는 가장 기본적인 위젯입니다.1.1. 기본 사용법Text("Hello, Flutter!")단순한 텍스트를 화면에 표시할 때 사용합니다.1.2. 스타일 적용 (TextStyle)Text( "Hello, Flutter!", style: TextStyle( fontSize: 24, // 글자 크기 fontWeight: FontWeight.bold, // 굵기..

Hello, Flutter1. 새로운 Flutter 프로젝트 생성Android Studio 실행Welcome to Android Studio 화면에서New Flutter Project 클릭또는 File → New → New Flutter Project 선택Flutter 프로젝트 유형 선택Flutter Application 선택 후 Next프로젝트 설정Project name: hello_flutter (프로젝트 이름)Flutter SDK Path: Flutter SDK 경로 선택Project location: 저장할 폴더 선택Description: (선택 사항) 프로젝트 설명 입력Platforms: Android와 iOS를 기본 활성화Create 클릭하여 프로젝트 생성2. "Hello Flutter" 코드..

Flutter vs. React Native 비교Flutter와 React Native는 크로스 플랫폼 앱 개발을 위한 대표적인 프레임워크입니다. 하지만 기술 스택, 성능, 개발 방식, UI 렌더링 방식 등 여러 측면에서 차이가 있습니다. 아래에서 두 프레임워크를 비교해 보겠습니다.1. 기본 개념 및 개요항목FlutterReact Native개발사GoogleMeta (Facebook)출시 연도2017년2015년언어DartJavaScript (React.js 기반)렌더링 방식Skia 엔진을 사용한 자체 렌더링네이티브 브릿지를 통한 네이티브 컴포넌트 사용핵심 철학자체 UI 엔진 사용으로 일관된 UI 제공네이티브 컴포넌트를 사용해 네이티브와 유사한 UX 제공Flutter: Skia 엔진을 사용하여 모든 UI를..

Flutter란?Flutter는 Google에서 개발한 오픈소스 UI 프레임워크로, 하나의 코드베이스로 Android, iOS, 웹, 데스크톱, 임베디드 시스템에서 실행되는 애플리케이션을 개발할 수 있습니다. Dart 언어를 사용하며, 성능이 뛰어나고 빠른 개발 속도를 제공합니다.Flutter의 주요 특징크로스 플랫폼 개발한 번의 코드 작성으로 Android, iOS, 웹, Windows, macOS, Linux 등의 다양한 플랫폼을 지원합니다.Hot Reload(핫 리로드)코드 변경 사항을 즉시 반영하여 빠른 개발과 실험이 가능합니다.자체 렌더링 엔진(스키아)Flutter는 네이티브 위젯이 아닌 자체 렌더링 엔진(Skia)을 사용하여 UI를 직접 그립니다. 이를 통해 일관된 디자인과 부드러운 성능을 제..

Dart 3.0의 새로운 클래스 제한자 (Class Modifiers)Dart 3.0에서는 클래스의 상속 및 구현을 제한하는 새로운 키워드(제한자) 가 도입되었습니다.이를 통해 코드의 안정성을 높이고, 명확한 의도를 표현할 수 있습니다.1. Dart 3.0의 클래스 제한자 종류키워드설명예제sealed동일한 파일 내에서만 상속 가능sealed class Animal {}interface인터페이스로만 사용 가능interface class Animal {}final상속 불가 (변경 불가능한 클래스)final class Animal {}base상속 가능하지만, 하위 클래스도 base, final, sealed이어야 함base class Animal {}2. sealed (봉인 클래스, 제한된 상속)sealed ..

Dart 3.0의 향상된 switch 문Dart 3.0에서는 switch 문이 크게 향상되어 패턴 매칭(Pattern Matching), 표현식(switch expression), 가드 절(Guard Clause) 등을 지원합니다.이제 switch 문을 더욱 간결하고 강력하게 사용할 수 있습니다.1. switch 표현식 (switch expression)Dart 3.0에서는 switch 문을 표현식(expression)으로 사용하여 값을 반환할 수 있음.1.1. 기존 switch 문 (Dart 2.x)String getColorMeaning(String color) { switch (color) { case 'red': return '정지'; case 'yellow': re..

Dart 3.0의 레코드 (Records)Dart 3.0에서 도입된 레코드(Records) 는 여러 개의 값을 하나의 그룹으로 묶어서 반환하거나 전달할 수 있는 튜플(Tuple) 형태의 데이터 구조입니다.기존 List나 Map 없이 여러 개의 값을 직접 반환할 수 있음클래스나 구조체를 만들지 않고도 여러 데이터를 그룹화 가능구조 분해(Destructuring) 를 통해 개별 변수에 쉽게 할당 가능가변 레코드와 불변 레코드 지원1. 레코드 기본 사용법1.1. 레코드 생성void main() { var record = ('Alice', 30, true); print(record); // ('Alice', 30, true)}여러 개의 값을 하나의 레코드로 묶어서 저장 가능1.2. 레코드의 개별 값 접근vo..

Dart Completer (커스텀 비동기 처리)Dart에서 Completer 는 Future를 수동으로 제어할 수 있는 객체입니다.즉, 비동기 작업을 직접 완료하거나, 실패 처리할 때 사용됩니다.1. Completer란?Future는 일반적으로 비동기 작업이 자동으로 완료되지만,Completer를 사용하면 개발자가 Future를 수동으로 완료(complete)하거나 오류 처리(completeError)할 수 있음.비동기 작업의 흐름을 개발자가 직접 제어할 때 유용.2. Completer 기본 사용법2.1. Completer를 사용하여 비동기 데이터 반환import 'dart:async';Future fetchData() { Completer completer = Completer(); Future...

Dart의 Stream (비동기 데이터 스트림)Dart에서 Stream은 비동기 데이터의 연속적인 흐름을 처리하는 기능입니다.Future는 단일 비동기 결과를 반환하지만,Stream은 여러 개의 비동기 데이터를 순차적으로 전달할 수 있습니다.Stream이 필요한 경우네트워크 요청을 통해 실시간 데이터 수신 (예: WebSocket)센서 데이터 처리 (예: GPS, 가속도 센서)버튼 클릭 이벤트 감지파일 다운로드 진행 상황 모니터링오디오/비디오 스트리밍 데이터 처리1. Stream 기본 개념비동기적으로 여러 개의 데이터를 순차적으로 처리이벤트 기반으로 동작하며 데이터가 발생할 때마다 수신listen()을 사용하여 구독(subscribe)한 번만 사용할 수도 있고, 여러 구독자(multicast)와 공유 가..

Dart 비동기 프로그래밍 (Asynchronous Programming)Dart는 비동기 프로그래밍(Asynchronous Programming)을 지원하여 네트워크 요청, 파일 읽기, 데이터베이스 작업과 같이 시간이 걸리는 작업을 효율적으로 처리할 수 있습니다. Dart의 비동기 프로그래밍 핵심 요소:Future: 비동기 작업을 나타내는 객체async & await: 비동기 함수 정의 및 실행Stream: 여러 개의 비동기 데이터를 순차적으로 처리1. Future란?Future는 미래에 완료될 값(비동기 작업의 결과)을 나타내는 객체시간이 걸리는 작업이 완료되면 결과 값을 반환하거나 예외를 발생Future는 단일 값을 반환함 (여러 값 처리 시 Stream 사용)1.1. Future 기본 사용법Fut..

Dart 개발자 가이드 (코딩 스타일 & 협업 가이드)Flutter 프로젝트에서 여러 개발자가 협업할 때 일관된 코드 스타일을 유지하고, 효율적으로 협업할 수 있도록 Dart 코딩 가이드를 제공한다. 아래 가이드는 Google Dart 공식 스타일 가이드를 기반으로 협업에 최적화된 내용을 포함하고 있다.1. 코드 스타일 & 컨벤션1.1. 코드 정리 및 자동화코드 자동 정렬 (dart format)모든 Dart 파일은 dart format을 사용해 자동 정렬한다.dart format .또는 VS Code에서 Shift + Alt + F 를 사용하여 코드 정렬 가능. 코드 스타일 자동 검사 (flutter analyze)코드 스타일을 자동으로 검사하고, 문제를 발견했을 때 경고 또는 오류를 표시한다.flut..

제네릭(Generics), 스태틱(Static), 캐스케이드 연산자(Cascade Operator)Dart의 객체지향 프로그래밍(OOP)에서는 제네릭(Generic), 정적 변수/메서드(Static), 캐스케이드 연산자(Cascade Operator) 를 사용하여 유연하고, 효율적인 코드 작성이 가능합니다.1. 제네릭 (Generics)제네릭(Generic)은 데이터 타입을 일반화하여 다양한 타입의 객체를 처리할 수 있도록 하는 기능입니다.Dart에서는 리스트(List), 맵(Map), 클래스, 함수에서 제네릭을 활용할 수 있습니다.1.1 제네릭을 사용하지 않은 경우void main() { List names = ["Alice", "Bob", "Charlie"]; names.add(100); // 의..

Dart 믹스인 (Mixin)Mixin은 Dart에서 다중 상속 없이 코드 재사용성을 높이는 방법입니다.클래스에 추가적인 기능을 제공하면서도 클래스 계층 구조를 단순하게 유지할 수 있습니다.1. Mixin 개념다중 상속이 불가능한 Dart에서 코드 재사용을 위해 사용됨with 키워드를 사용하여 기존 클래스에 믹스인 기능 추가 가능상속(Inheritance)과 다름 (Mixin은 부모-자식 관계가 아님)인터페이스(implements)와도 다름 (Mixin은 강제 구현 필요 없음)2. Mixin 기본 문법mixin Swimmable { void swim() { print("수영할 수 있습니다. 🏊"); }}class Fish with Swimmable {}void main() { Fish fis..

Dart 객체지향 프로그래밍 (OOP) - Class와 ObjectDart는 객체지향 프로그래밍(OOP: Object-Oriented Programming)을 지원하는 언어입니다.OOP의 핵심 개념인 클래스(Class), 객체(Object), 생성자(Constructor), 상속(Inheritance), 다형성(Polymorphism), 캡슐화(Encapsulation), 추상 클래스(Abstract Class), 인터페이스(Interface), 믹스인(Mixin) 등을 지원합니다.1. 클래스(Class)와 객체(Object)Dart에서 클래스는 객체를 생성하는 틀(템플릿) 역할을 하며, 객체는 클래스의 인스턴스(Instance) 입니다.1. 1 클래스 정의 및 객체 생성class Person { St..

Dart에서 화살표 함수 (=>) 사용하기Dart의 화살표 함수(Arrow Function) 는 단순한 함수 표현식을 간결하게 작성할 수 있도록 도와줍니다.=> 기호를 사용하여 함수 본문을 한 줄로 줄일 수 있습니다.1. 화살표 함수 기본 문법1.1 기본 함수일반적인 함수:int add(int a, int b) { return a + b;}화살표 함수로 변환:int add(int a, int b) => a + b;차이점:{ return ... } 대신 =>를 사용하여 한 줄로 작성 가능세미콜론(;)을 함수 본문 끝에 추가해야 함결과는 동일void main() { print(add(3, 5)); // 8}2. 반환값이 없는 경우 (void)화살표 함수는 void 함수에도 사용할 수 있습니다.2.1 일반..

Dart의 예외 처리 (try - catch - finally)Dart에서는 예외(Exception)가 발생할 수 있는 코드를 안전하게 실행하기 위해 try-catch-finally 문을 제공합니다.예외 처리는 프로그램의 갑작스러운 중단을 방지하고, 오류를 처리하여 정상적으로 동작하도록 돕습니다.1. 예외(Exception)란?Dart에서 예외는 실행 중에 발생하는 예기치 않은 오류를 의미합니다.예를 들어, 0으로 나누기, 없는 리스트 요소 접근, 네트워크 연결 오류 등이 예외에 해당합니다. 예외가 발생하면 프로그램이 중단되므로 이를 방지해야 합니다.void main() { int a = 10, b = 0; print(a ~/ b); // 오류 발생 (정수를 0으로 나눌 수 없음)}- 위 코드는 In..