Develop/Flutter 35

Flutter에서 YouTube 검색 및 영상 조회 방법 총정리 (2024)

YouTube API를 사용하지 않고 Flutter에서 YouTube 검색을 구현하는 방법을 찾고 있나요? 아니면 YouTube API 사용량 초과 오류를 해결하고 싶으신가요? 🤔오늘은 YouTube API 없이 검색하는 방법, youtube_explode_dart 패키지를 활용한 영상 조회 방법, 그리고 검색 필터 적용법까지! 최신 YouTube 검색 구현 방법을 완벽 정리해드립니다. 🚀🔥 1. YouTube API 없이 검색하는 방법 (검색 URL 활용)✅ YouTube 검색 URL 구조YouTube의 기본 검색 URL은 다음과 같습니다:https://www.youtube.com/results?search_query=검색어하지만 여기에 **특정 조건(필터)**을 추가할 수도 있습니다.🎯 You..

Develop/Flutter 2025.03.31

[Flutter] Google Maps API 설정 및 사용 방법 (Android & iOS)

Flutter에서 Google Maps SDK를 사용하여 Android와 iOS 앱에서 구글 지도를 표시하는 방법을 정리했습니다.이 글에서는 Google Maps API Key 설정 방법과 실제 구글 지도를 띄우는 예제를 다룹니다. ✅ 1. Google Maps API 활성화 및 API Key 생성 Google Maps를 사용하려면 먼저 Google Cloud Console에서 API를 활성화하고 API Key를 생성해야 합니다. 1️⃣ Google Cloud Console에서 API 활성화1. Google Cloud Console에 접속2. 프로젝트 선택 또는 새 프로젝트 생성3. API 및 서비스 → 사용자 인증 정보 → 사용자 인증 정보 만들기 → API 키 클릭4. 생성된 API 키 복사 (AIz..

Develop/Flutter 2025.03.13

[Flutter] Expanded 위젯 설명 및 사용 방법

Flutter에서 레이아웃을 구성할 때 Expanded 위젯은 Row, Column, Flex 위젯 내에서 자식 위젯들이 남은 공간을 차지하도록 확장할 수 있게 해주는 중요한 위젯입니다. Expanded는 주어진 공간을 유연하게 배분하며, 레이아웃을 동적으로 조정하는 데 유용합니다.Expanded 위젯이란?Expanded 위젯은 부모 위젯(Row, Column, Flex)이 갖고 있는 남은 공간을 차지하도록 자식 위젯을 확장하는 역할을 합니다. 즉, Expanded로 감싼 위젯은 가능한 최대 크기로 확장되며, 여러 개의 Expanded 위젯이 있을 경우 비율을 조정할 수도 있습니다.📌 주요 특징Row, Column, Flex 위젯 내에서만 사용할 수 있음자식 위젯이 가용 가능한 공간을 최대로 차지하도록..

Develop/Flutter 2025.03.06

[Flutter] Local Database : hive_ce & hive_ce_flutter 소개 및 사용법

Flutter Hive_ce & Hive_ce_flutter 소개 및 사용법1. Hive_ce & Hive_ce_flutter란?hive_ce와 hive_ce_flutter는 Flutter에서 사용 가능한 경량 로컬 데이터베이스입니다.특히 Hive_ce는 NoSQL 방식으로 데이터를 저장하며, 빠른 속도와 쉬운 사용법이 장점입니다.📌 주요 특징:Key-Value 기반의 로컬 데이터 저장SQL 없이 사용 가능 (NoSQL)Flutter와 완벽한 호환 (hive_ce_flutter 사용)파일 기반 스토리지 (데이터가 파일로 저장됨)안드로이드 & iOS 지원Flutter 웹에서도 사용 가능2. Hive_ce & Hive_ce_flutter 설치flutter pub add hive_ce hive_ce_flut..

Develop/Flutter 2025.03.04

[Flutter] 밑에서 올라오는 팝업 위젯 (Bottom Sheet)

Flutter에서 화면 아래에서 위로 올라오는 팝업을 만들려면 showModalBottomSheet 또는 showBottomSheet을 사용하면 됩니다.1️⃣ showModalBottomSheet (모달 바텀시트)• 화면을 덮는 반투명 배경이 추가됨 (다른 영역 클릭 시 닫힘)• 닫을 때는 Navigator.pop(context) 사용 🔧 예제: showModalBottomSheet 사용import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext..

Develop/Flutter 2025.03.04

[Flutter] 커스텀 버튼들 클래스를 만들어 재사용하는 방법

1️⃣ page_object.dart 파일 생성 및 버튼 클래스 추가 프로젝트 구조 예시:lib/ ├── main.dart ├── pages/ │ ├── home_page.dart (버튼을 사용하는 페이지) │ ├── login_page.dart (버튼을 사용하는 페이지) ├── widgets/ │ ├── page_object.dart (공통 버튼 정의) 🔧 lib/widgets/page_object.dartimport 'package:flutter/material.dart';/// 구글 로그인 버튼class GoogleSignInBtn extends StatelessWidget { final VoidCallback onPressed; const GoogleSignInBtn({s..

Develop/Flutter 2025.02.28

[Flutter] PNG 이미지를 버튼으로 추가하는 방법

1️⃣ assets 폴더에 이미지 추가1. 프로젝트의 assets 폴더에 다운로드한 PNG 이미지를 넣습니다.• 예: assets/images/google_signin_button.png2. pubspec.yaml에서 assets 경로를 추가합니다. ✅ pubspec.yaml 수정flutter: assets: - assets/images/google_signin_button.png ⚠️ 주의:• assets: 들여쓰기(공백 2칸) 유지• flutter clean && flutter pub get 실행하여 변경 사항 반영2️⃣ 구글 로그인 버튼 추가 🔧 방법 1: GestureDetector로 터치 이벤트 감지import 'package:flutter/material.dart';class Goog..

Develop/Flutter 2025.02.28

[Flutter] ThemeData 위젯의 모든 argument 설명

ThemeData({ Brightness? brightness, // 앱의 밝기 (light 또는 dark) MaterialColor? primarySwatch, // 기본 색상 팔레트 Color? primaryColor, // 기본 색상 Color? primaryColorLight, // 밝은 기본 색상 Color? primaryColorDark, // 어두운 기본 색상 Color? accentColor, // 강조 색상 (deprecated, 대신 colorScheme.secondary 사용) Color? scaffoldBackgroundColor, // Scaffold의 배경 색상 Color? backgroundColor, // 배경 색상 Color? canvasColor, // Material 위..

Develop/Flutter 2025.02.28

Flutter BLoC 패턴: 정의와 사용법

Flutter에서 상태 관리는 필수적인 요소이며, 다양한 방법이 존재합니다. 그중에서도 BLoC (Business Logic Component) 패턴은 명확한 구조와 유지보수성을 제공하는 강력한 패턴입니다. 이번 글에서는 BLoC 패턴이 무엇인지, 어떻게 동작하는지, 그리고 실습 예제를 통해 사용법을 익혀보겠습니다.1. BLoC 패턴이란?BLoC 패턴은 Flutter에서 상태를 관리하는 방법 중 하나로, 비즈니스 로직을 UI와 분리하여 관리합니다. flutter_bloc 패키지를 활용하면 간단하게 상태를 관리할 수 있으며, 이벤트(Event)와 상태(State)의 흐름을 명확하게 정의할 수 있습니다.BLoC 패턴의 핵심 개념Event (이벤트): 사용자 입력이나 특정 동작에 의해 발생하는 트리거 (예: ..

Develop/Flutter 2025.02.27

Homebrew로 설치한 Flutter 업그레이드 방법 (MacOS)

Brew를 통해 설치한 Flutter는 brew upgrade 명령어로 업데이트할 수 있습니다. 1️⃣ Homebrew 및 Flutter 최신 상태로 업데이트brew update # Homebrew 업데이트brew upgrade flutter # Flutter 최신 버전으로 업그레이드 2️⃣ Flutter 버전 확인 및 업그레이드 업그레이드 후 Flutter 버전을 확인하세요.flutter --version 최신 버전으로 업그레이드되지 않았다면 강제 업그레이드합니다.flutter upgrade --force 3️⃣ Flutter 캐시 정리 및 패키지 다시 받기 업그레이드 후 불필요한 캐시 파일을 삭제하고 패키지를 다시 다운로드하세요.flutter cleanflutter ..

Develop/Flutter 2025.02.27