Flutter8 [Flutter on Mac] 플러터 스플래쉬 이미지 적용하기 - 23.07.06 평소에 앱을 실행시키면 처음 로딩할 때 나오는 이미지가 있는데, 그 이미지를 splash 이미지라고 한다. 스플래쉬 이미지를 적용시키는 방법은 다음과 같다. 1. 플러터 스플래쉬(flutter_native_splash) 패키지 설치 flutter pub add flutter_native_splash 위 명령어를 터미널에 입력하여 flutter_native_splash 패키지를 설치한다. 2. 프로젝트의 루트 폴더에 flutter_native_splash.yaml 파일 생성 프로젝트의 루트 폴더는 pubspec.yaml 파일이 존재하는 위치이다. 이곳에 flutter_native_splash.yaml 파일을 생성하고 다음 코드를 입력하여 저장하였다. flutter_native_splash: # This p.. 2023. 7. 6. [Flutter on mac] 플러터 카카오 로그인 연동 과정 - 23.07.03 플러터 프로젝트에서 카카오 로그인 기능을 연동시키는 과정을 간단하게 기록한다. 참고한 링크는 다음과 같다. https://vlee.kr/4986 1. 카카오 개발자 사이트에서 어플리케이션 등록하기 카카오 개발자 사이트 로그인 새 어플리케이션 등록하기 안드로이드 플랫폼 먼저 등록 키 해시 값 생성하기 위한 명령어 입력 -> 키 해시 생성됨. keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64 ios 플랫폼도 번들 ID는 android 패키지명과 같이 입력하여 등록하였음 2. Kakao.. 2023. 7. 3. [Flutter on Mac] 로그인 페이지 + 파이어베이스 구글 로그인 구현 과정 정리 - 23.07.02 1. 로그인 페이지를 구성하는 데 참고한 영상 https://www.youtube.com/watch?v=Dh-cTQJgM-Q 초기 세팅으로부터 화면 구성하는 것만 살짝 참고함 2. VSCode에서 Firebase 구글 로그인 시 구현할 때 참고한 링크 (1) 로그인 관련 위젯과 화면 구성에 구글로그인 코드 엮는 거 참고 https://engschool.tistory.com/156 https://firebase.google.com/docs/auth/flutter/federated-auth?hl=ko#android_1 [ 최신 docs 코드 ] 제휴 ID 및 소셜 로그인 | Firebase 문서 Google I/O 2022에서 Firebase의 새로운 기능을 확인하세요. 자세히 알아보기 의견 보내기 제휴 I.. 2023. 7. 2. [Flutter on Mac] Firebase 설치 과정 상세기록 - 23.07.02 1. Firebase 사이트 구글 로그인해서 프로젝트 생성 2. 가장 오른쪽 플러터 버튼 누르면, 플러터로 플랫폼 등록 가능 CLI : Command Line Interface => 터미널을 통한 인터페이스 3. Firebase CLI 설치 - 터미널에 다음 실행 curl -sL https://firebase.tools | bash - 패스워드 입력하기 => 본인의 mac 비밀번호를 입력해야함!! - 설치 완료 모습 - 제대로 설치 되었는지 확인하기. 다음 내용 터미널에 치기 firebase login - y 누르면 웹 페이지에서 구글 로그인 창 떠서 로그인 하면 완료 - cli 잘 설치되었는지 확인하는 두번째 방법 firebase projects:list - flutter sdk랑 프로젝트는 이전에 생.. 2023. 7. 2. [Flutter on Mac] VSCode Flutter project 생성하기 새로 시작할 프로젝트의 기획 및 디자인 틀을 구성하고 나서, 이제 플러터 프로젝트를 생성해야했다. 예전에 윈도우 노트북으로 플러터 프로젝트를 vscode로 시작할 때, 안드로이드 스튜디오에서 가상 에뮬레이터를 설치하는 데에 에러가 나서 귀찮았던 기억이 있는데 맥에서는 XCode를 설치하면 별다른 추가 설치 없이 아이폰 에뮬레이터가 실행되는 것을 보고 역시 맥이 좋군! 이라는 생각이 들었다. VSCode에서 플러터 프로젝트를 새로 생성하는 과정을 참고한 링크들은 다음과 같다. [ 프로젝트 생성 관련 ] https://www.whatwant.com/entry/VSCode-Flutter-Create-Project [ 아이폰 에뮬레이터 실행 ] https://donggyu9410.medium.com/flutte.. 2023. 7. 2. [Flutter on Mac] 플러터 설치과정 정리 3탄(23.06.28) - VSCode세팅 이번엔 VSCode에서 Flutter Extension을 설치하면서 플러터 작업에 효율적인 몇가지 익스텐션과 Settings.json 파일을 수정해보았다. 1. Flutter 익스텐션 설치 플러터 익스텐션을 설치하면 자동으로 다트 익스텐션까지 같이 설치된다고 한다. 2. Error Lens 설치 에러렌즈는 코드를 작성시 문법적으로 틀린 부분이나 경고를 위한 부분에 렌즈를 비추는 것처럼 알려주는 기능을 한다. 괄호를 빼먹거나 세미콜론을 빼먹거나 하는 자잘한 실수들, const 같은 데이터 타입이 안맞는 경우 등 여러모로 도움이 되는 기능이어서 설치했다. 3. Pubspec Assist 설치 Pubspec.yaml 파일에 필요한 플러터 패키지 입력시에 보다 더 편하게 패키지를 설치할 수 있도록 해주는 기능이.. 2023. 6. 29. [Flutter on Mac] Apple Silicon M2 Pro 플러터 설치과정 정리 2탄(23.06.28) 맥에 플러터 설치과정 2탄 1탄에서는 Xcode와 Android Studio 설치까지 진행완료하였다. 이번엔 flutter SDK 설치 및 환경변수 설정을 해보려고 한다. 1. Flutter SDK for Apple Silicon 설치 (1) 플러터 사이트 접속 후 os에 맞는 zip 파일 다운 https://docs.flutter.dev/get-started/install/macos macOS install How to install on macOS. docs.flutter.dev 위 사이트에 들어가서 애플 실리콘용 zip 파일을 다운로드 받는다. (M2 Pro) (2) 터미널창에서 development 폴더 만들고 해당 폴더로 이동 cd ~/development를 처음 쳤을때 해당하는 디렉토리가 없다.. 2023. 6. 28. [Flutter on Mac] Apple Silicon M2 Pro 플러터 설치과정 정리 1탄(23.06.28) 1년 정도 개발자로서 몇가지 프로젝트를 하다보니 그 과정들을 기록하는 것에 대한 필요성을 느꼈다. 나를 어필할 수단으로도 사용이 가능하고, 개발하다보면 반복적으로 구글링하게되는 문제들이 있었기 때문이다. 웹 작업만 해오다가 이제 앱 제작을 해보고자 마음을 먹었고, 플러터의 수요가 높아지고 있다는 추세에 더불어 크로스 플랫폼을 지향하기 때문에 이번 프로젝트를 진행하면서 플러터로 작업하던 과정 중에 기억하면 좋을 사항들을 기록하려한다. 우선 맥북에서 플러터를 설치하는 과정이다. 안드로이드 스튜디오와 VSCode로 작업하는 두 가지 방법이 만연한 것 같은데 본인은 여러 익스텐션이 많은 VSCode를 좋아하기 때문에 해당 IDE를 기준으로 작업하기로 결정했다. 개발 기기는 23년도 맥북 14 Pro ( M2 P.. 2023. 6. 28. 이전 1 다음
