개발/Flutter

카카오 로그인 통합하기: Android Key Hash와 iOS Bundle ID 문제 해결 가이드

서론 카카오 로그인 통합의 중요성 및 일반적인 문제 소개 이 글에서 해결할 주요 에러: "invalid android_key_hash or ios_bundle_id or web_site_url" Java 버전 확인 및 JDK 설치 필요성: 카카오 로그인 통합을 위한 첫걸음으로, 올바른 Java 개발 환경 설정이 필수 Java 버전 확인 방법 명령어: java --version JDK 설치 방법 Homebrew를 이용한 OpenJDK 11 설치 명령어: brew install openjdk@11 JDK 경로 설정 .zshrc 파일을 통한 경로 설정 명령어: echo 'export PATH="/opt/homebrew/opt/openjdk@11/bin:$PATH"' >> ~/.zshrc 설정 적용: sourc..

Flutter :: GoRouter

1. 화면 등록 import 'dart:convert'; import 'package:culture_app/detail_screen.dart'; import 'package:culture_app/home_screen.dart'; import 'package:culture_app/model/festival_model.dart'; import 'package:culture_app/onboarding_screen.dart'; import 'package:go_router/go_router.dart' show GoRoute, GoRouter; final router = GoRouter( routes: [ GoRoute( path: '/', builder: (context, state) => const Onboa..

Flutter :: Riverpod 개념, ProviderScrope, Model, State, StateNotifierProvider, Notifier, ConsumerStatefulWidget, ConsumerState, ret.watch()

1. Riverpod의 장점 특징 1.1. 안전한 컴파일 Provider를 사용할 때 처럼 더 이상 ProviderNotFoundException 예외가 발생하지 않고, 로딩 상태를 처리하는 것을 걱정하지 않아도 됩니다. Riverpod를 사용하면 코드가 컴파일되어 작동합니다. 1.2. 제한없는 Provider Riverpod는 Provider에서 영감을 얻었지만 동일한 유형의 여러 Provider를 지원하는 것과 같은 주요 문제 중 일부를 해결합니다. 비동기 Provider를 기다리고 있습니다. 어디에서나 Provider를 추가할 수 있습니다. 1.3. Flutter에 의존하지 않습니다. Flutter에 의존하지 않고 Provider를 생성/공유/테스트합니다. 여기에는 BuildContext 없이 Pr..

Flutter :: Riverpod / GoRouter / state, provider, notifier 선언 / 페이징 / http

0. pubspec.yaml 에 기초 프로젝트 설정하기 name: culture_app description: A new Flutter project. publish_to: 'none' version: 1.0.0+1 environment: sdk: '>=3.0.0

Flutter :: Color 저장해서 변수로 재사용하기

아래와 같이 자주 쓰는 색을 변수로 저장하여, 재사용성이 높아져 코드의 유지보수성이 증가한다. import 'package:flutter/material.dart'; // Basic Color const Color kWhiteColor = Color(0xFFFFFFFF); const Color kBlackColor = Color(0xFF000000); // System Color const Color kSystemErrorColor = Color(0xFFFC444F); const Color kSystemSuccessColor = Color(0xFF30E181); const Color kSystemWarningColor = Color(0xFFFFD362); // Color Pallette const Col..

Flutter :: TextStyle 저장하여 관리하기

여러 텍스트 스타일을 미리 저장해두고, import 'package:culture_app/constant_color.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; // ...을 알려주세요 TextStyle kGrade1 = TextStyle( fontSize: 30.sp, color: kBlackColor, fontWeight: FontWeight.w700, height: 1.2, ); // ...을 알려주세요 TextStyle kHeadline1 = TextStyle( fontSize: 24.sp, color: kBlackColor, fontWeight: F..

Flutter :: API 통신 모듈화하기 / Dio helper / JWT token / cache interceptor

1. 배경 데이터베이스에서 데이터를 가져와 앱 프론트에 표시할 때, 서버와 API통신하는 경우가 많은데, API 통신 코드를 모듈화하여 유지보수가 용이하게 할 필요성이 있었다. 다양한 기능을 가진 Interceptor를 옵션에 추가해 개발 시 디버깅이 편하게 해야 했다. 2. 요구사항 2.1. dio https://pub.dev/packages/dio dio | Dart Package A powerful Http client for Dart, which supports Interceptors, FormData, Request Cancellation, File Downloading, Timeout etc. pub.dev 인기있는 http 라이브러리다. 다양한 기능이 포함되어있다. 2.2. alice htt..

Flutter :: 앱 아이콘(app_icon.png) 설정하기

1. 배경 매번 하는 일인데, 배포 심사할 때만 하다보니 까먹는 경우가 잦아 정리하려고 한다 2. 의존성 추가하기 flutter_launcher_icons: "^0.11.0" https://pub.dev/packages/flutter_launcher_icons flutter_launcher_icons | Dart Package A package which simplifies the task of updating your Flutter app's launcher icon. pub.dev 3. flutter_launcher_icons.yaml 루트 폴더에 앱 아이콘의 경로 및 기타 정보를 설정하는 yaml 파일을 생성한다. flutter_icons: android: "launcher_icon" ios: tr..

Flutter 츠누봇 [Pull Request] :: [학식] 페이지 UI 퍼블리싱

Flutter 츠누봇 [Pull Request] :: [학식] 페이지 UI 퍼블리싱 https://github.com/cnu-bot/cnubot-client-app/pull/22 [학식] 페이지 UI 퍼블리싱 by CheolheeLee0 · Pull Request #22 · cnu-bot/cnubot-client-app Describe your changes 영상으로 확인하기 학식 페이지 UI 개발 1. 공통 컴포넌트 설계 cafeteria_button.dart (1, 2, 3, 4학, 긱사, 생과대 식당 선택 버튼) cafeteria_listview.dart (1, 2, 3, 4학, 긱사, 생과대 식당 선택 L github.com 1. 요구사항 - 디자인 참고하여 UI 개발 - 공통 컴포넌트 설계 - ..

Flutter 츠누봇 [Pull Request] :: [소식] 페이지 API 연동

Flutter 츠누봇 [Pull Request] :: [소식] 페이지 API 연동 https://github.com/cnu-bot/cnubot-client-app/pull/20 [소식] 페이지 API 연동 by CheolheeLee0 · Pull Request #20 · cnu-bot/cnubot-client-app Describe your changes #18 영상으로 확인하기 디자인 변경사항 적용 상단 Logo 상단 Home Button bottom navigation bar svg icon, color NoticeModel 필드 수정 nullable : boardNum, picUrl, period API에 맞추어 필드 추가 백마광장 github.com 1. 요구사항 2. 작업내용 영상으로 확인하기 ..

Flutter 츠누봇 [Pull Request] :: [소식] 페이지 UI 퍼블리싱

Flutter 츠누봇 [Pull Request] :: [소식] 페이지 UI 퍼블리싱 https://github.com/cnu-bot/cnubot-client-app/issues/11 [소식] 페이지 UI 퍼블리싱 · Issue #11 · cnu-bot/cnubot-client-app Feature Description 소식 페이지 퍼블리싱을 진행합니다. 아직 백엔드 API작업이 완료되지 않아서 더미데이터로 작업하셔야할 것 같습니다. UI만 작업하면 됩니다. Todo list 소식 페이지 UI작업 백마광 github.com 1. 요구사항 - 아래 디자인을 바탕으로 UI 개발 - 데이터는 임시로 더미데이터를 생성하여 진행 2. 작업내용 영상으로 확인하기 https://www.youtube.com/shorts..

Flutter 츠누봇 [Pull Request] :: flutter_lints rules 추가

Flutter 츠누봇 [Pull Request] :: flutter_lints rules 추가 https://github.com/cnu-bot/cnubot-client-app/pull/17 feat: flutter_lints rules 추가 by CheolheeLee0 · Pull Request #17 · cnu-bot/cnubot-client-app Describe your changes flutter lints에 여러 옵션이 있어서 필요할 것 같은 부분 추가해두었습니다! linter: rules: avoid_print: true // release모드에서 출력 안되게 변경 prefer_single_quotes: true // single quote 통일 requir github.com 1. 요구사항 ..

Flutter 츠누봇 [Pull Request] :: clean & 3-layered architecture 적용

Flutter 츠누봇 [Pull Request] :: clean & 3-layered architecture 적용 https://github.com/cnu-bot/cnubot-client-app/pull/9 refactor: apply clean & 3-layered architecture by CheolheeLee0 · Pull Request #9 · cnu-bot/cnubot-client-app Describe your changes refactor: apply clean & 3-layered architecture docs: Add Architecture info, freezed command API 연동 테스트 완료했습니다 dioHelper - provider - repository - contr..

Flutter 츠누봇 [Pull Request] :: 의존성 추가, 화면 비율 설정

Flutter 츠누봇 [Pull Request] :: 의존성 추가, 화면 비율 설정 https://github.com/cnu-bot/cnubot-client-app/pull/3 Add dependencies, Add Pull Request Template and Set the reference design size ratio to iPhone 12 mini for easy UI development. ( Description #1 #2 #4 Fixes #1 #2 #4 Type of change New feature (non-breaking change which adds functionality) This change requires a documentation update Checklist: My co..

Flutter :: 키보드 위에 버튼 고정시키는 방법 (Alignment.bottomCenter)

https://youtube.com/shorts/u_hzF982xbI?feature=share 배경 초중고 학생들을위한 체력측정 앱 개발 중에, 키보드 위에 확인 버튼위젯을 고정할 일이 생겼는데 이슈들이 발생해서 정리하고자 한다. 요구사항 1. 키보드 바로 위에 '확인' 버튼이 있어야 함 2. 키보드에 입력 데이터가 가려지면 안됨 3. 버튼을 선택할 때 키보드가 없어져야 함 해결방법 double bottomViewInsets = MediaQuery.of(context).viewInsets.bottom; bool keyboardOn = bottomViewInsets != 0;// 키보드 존재 여부 판단 키보드가 올라가면 키보드의 높이만큼 bottomViewInsets이 증가하는 점을 이용해 키보드가 올라왔..

Flutter Firestore 구조

Firestore 구조 CollectionReference DocumentReference

Flutter + Firebase 채팅 기능 시연

1. 채팅 기능 1.1. 채팅 어플 https://www.youtube.com/watch?v=ot5ctOZe2X0&ab_channel=DynamicCoding 1.2. 채팅 백엔드 https://www.youtube.com/watch?v=I6UCPL1svOA&ab_channel=DynamicCoding 1.3. 추가할 기능 채팅 UI 개선 말풍선 크기를 채팅 메시지와 맞게 수정 메시지가 1개 이상인 채팅방만 보이도록 수정 카카오 로그인 uid 사용 대화 상대방 검색 시 부분 문자열로도 검색 가능하도록 수정 2. 카카오 로그인 2.1. pub.dev 라이브러리 https://pub.dev/packages/kakao_flutter_sdk kakao_flutter_sdk | Flutter Package A f..

Flutter Devtools 개념 이해

1. Flutter Devtools 개념 이해 1) Flutter devtools 설치 Flutter devtools 사용 사진 Flutter devtools의 기능 Flutter 앱의 UI 레이아웃과 상태를 검사 Flutter 앱에서 UI 버벅거림 성능 문제를 진단 Flutter 또는 Dart 명령줄 앱의 소스 수준 디버깅 Flutter 또는 Dart 명령줄 앱에서 메모리 문제를 디버그 실행 중인 Flutter 또는 Dart 명령줄 앱에 대한 일반 로그 및 진단 정보 확인 Flutter devtools 설치 (VS code) VS Code 명령 팔레트에서 Dart: Open DevTools 명령 입력 Terminal에서 devtools 설치 flutter pub global activate devtoo..

Flutter :: SharedPreference

Shared Preferences 사용법에 대해서 알아본다. Shared Preferences는 key-value 형태의 데이터를 디스크에 저장해서 사용하는 방법으로 기존의 안드로이드 앱 개발에서도 자주 사용되어 왔다. 로그인이 필요한 앱을 개발할 때 사용자의 ID와 패스워드 등을 기억하는 기능을 구현할 때 이용할 수 있다. 18 : getPref를 통해 key에 따른 value를 반환한다. 22 : key, value를 세팅한다.

Flutter & Firebase :: QuerySnapshot vs DocumentSnapshot

QuerySnapshot collection을 받아온다. DocumentSnapshot QuerySnapshot.docs를 사용하면 collection 안의 documents를 List형태로 받아올 수 있다.

Flutter 2.8 발표

https://medium.com/flutter/announcing-flutter-2-8-31d2cb7e19f5 Announcing Flutter 2.8 A new release of Flutter: and a look back on a year of growth medium.com 요약 며칠 전, 12월 9일에 Flutter 2.8 발표가 있었습니다. 저는 모바일 성능 향상과 WebView 3.0 업데이트 소식이 제일 반가웠는데요. Flutter 2.8에서 크게 변화가 있었던 내용을 5가지로 정리해봤습니다. 1️⃣ 모바일 퍼포먼스 Flutter 2.8로 업그레이드하는 것만으로 앱이 더 빠르게 시작되고 더 적은 메모리를 사용한다고 합니다. 2️⃣ 로그인 위젯 Firebase를 사용하여 인증을 처리하는 로..

Flutter에서 Null Safety를 사용하는 이유

Flutter 2.0 업데이트, null safety 적용 Flutter 2.0 업데이트 이후 dart 언어에 null safety가 적용되었다. null으로 인한 런타임 에러를 방지하여 개발자의 생산성을 높일 수 있다. 유저가 실수로 체크하지 못한곳에서 발생하는 NullPointerException같은 에러를 조기에 방지하고 실제로 돌아가는 어셈블리상에서 null체크를 다시 안하기 때문에 성능적 이득도 있다. 자세히 말하면, null safety는 변수가 null을 허용하는지 구분하기 위한 개념인데 기본적으로 null을 허용하지 않는다. dart 언어는 null safety를 지원하지 않았기 때문에 변수 값이 초기화 되지 않았거나 null 값을 전달하면 컴파일 에러는 발생하지 않고 런타임 과정에서 오류..

Flutter firebase 연동

fbtest0001 기본 crud 동작하는 버튼으로 컨트롤 create // instance 가져오기 FirebaseFirestore firebaseFirestore = FirebaseFirestore.instance; // 데이터 Create firebaseFirestore .collection('books') .doc('flutter2') .set({'page': 411, 'purchase?': false, 'title': '플러터 배우기'}); read // 데이터 Read firebaseFirestore .collection("books") .doc("flutter2") .get() .then((DocumentSnapshot ds) { Map data = ds.data() as Map; title..

Flutter :: StreamBuilder vs FutureBuilder

streambuilder / futurebuilder는 firebase를 연동하며 자주 만날 수 있는 친구들이다. firebase안에 data들이 있는데, 그것들이 변할 때, 정보를 계속적으로 읽는 역할을 한다. Futurebuilder 한 번만 가져온다. StreamBuilder 변화가 발생할 때마다 연속적으로 계속 가져온다 1) CollectionReference로 접근하여 특정 Document 하나의 data 읽기 Future _getProduct() async { try { CollectionReference products = FirebaseFirestore.instance.collection('Products'); await products .doc(arguments.docsName) .get..