플러터/플러터 개발
-
오늘은 Lottie 파일을 이용해서 화면에 애니메이션을 추가하는 것을 구현해 볼거에요. 먼저 새로운 프로젝트를 만들고, 패키지를 다운로드 받아줘야겠죠? 패키지 다운로드 https://pub.dev/packages/lottie lottie | Flutter Package Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player. pub.dev 패키지 적용방법을 모르시는 분들은 아래 패키지 다운로드 방법 게시물을 참고해주세요. [플러터 기초] 패키지 다운로드 하는 방법 [플러터 기초] 패키지 다운로드 하는 방법 오늘은 패키지 다운로드 하는 방법을 알려드리겠습니다..
[플러터 개발] Lottie 패키지를 이용한 애니메이션 추가하기오늘은 Lottie 파일을 이용해서 화면에 애니메이션을 추가하는 것을 구현해 볼거에요. 먼저 새로운 프로젝트를 만들고, 패키지를 다운로드 받아줘야겠죠? 패키지 다운로드 https://pub.dev/packages/lottie lottie | Flutter Package Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player. pub.dev 패키지 적용방법을 모르시는 분들은 아래 패키지 다운로드 방법 게시물을 참고해주세요. [플러터 기초] 패키지 다운로드 하는 방법 [플러터 기초] 패키지 다운로드 하는 방법 오늘은 패키지 다운로드 하는 방법을 알려드리겠습니다..
2023.11.28 -
안녕하세요. 오늘은 BottomNavigationBar를 커스텀하는 걸 배워보겠습니다. 플러터에는 BottomNavigationBar라는 클래스가 있습니다. 하지만 오늘은 기존 클래스를 사용하지 않고 Container와 TabBar를 이용해 직접 바텀바를 만들어보려고 합니다. 그렇다면, "왜 기존에 있는 클래스를 사용하지 않고 직접 BottomBar를 만들어야할까?" 라는 생각이 드실 수도 있습니다. BottomBar를 직접 TabBar로 구현하는 이유는 조금 더 다양하게 커스터마이징하기 위해서 직접 구현하는 겁니다. 나중에 외주를 받거나, 혹은 특별한 경우에는 BottomBar에 더 많은 기능과 디자인을 요구하는 경우가 있습니다. 그렇기 때문에 BottomBar를 직접 구현하는 방법도 알아야 합니다! ..
[플러터 개발] BottomNavigationBar 직접 만들어보기안녕하세요. 오늘은 BottomNavigationBar를 커스텀하는 걸 배워보겠습니다. 플러터에는 BottomNavigationBar라는 클래스가 있습니다. 하지만 오늘은 기존 클래스를 사용하지 않고 Container와 TabBar를 이용해 직접 바텀바를 만들어보려고 합니다. 그렇다면, "왜 기존에 있는 클래스를 사용하지 않고 직접 BottomBar를 만들어야할까?" 라는 생각이 드실 수도 있습니다. BottomBar를 직접 TabBar로 구현하는 이유는 조금 더 다양하게 커스터마이징하기 위해서 직접 구현하는 겁니다. 나중에 외주를 받거나, 혹은 특별한 경우에는 BottomBar에 더 많은 기능과 디자인을 요구하는 경우가 있습니다. 그렇기 때문에 BottomBar를 직접 구현하는 방법도 알아야 합니다! ..
2023.11.09 -
오늘은 카카오톡 로그인을 구현하기 위한 준비를 해볼게요. kakao developers 회원가입 일단 kakao developers에 들어가서 회원가입 및 로그인 해주세요. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com kakao developers에서 앱 추가 '내 어플리케이션'에 들어가셔서 애플리케이션 추가하기를 눌러주세요! 그럼 위 그림처럼 앱 정보를 작성하는 화면이 나옵니다. 잘 작성하시고 저장을 누르시면 돼요! kakao developers 플랫폼 설정 우선, 플랫폼 설정을 해볼거에..
[플러터 개발] 카카오톡 로그인 구현하기오늘은 카카오톡 로그인을 구현하기 위한 준비를 해볼게요. kakao developers 회원가입 일단 kakao developers에 들어가서 회원가입 및 로그인 해주세요. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com kakao developers에서 앱 추가 '내 어플리케이션'에 들어가셔서 애플리케이션 추가하기를 눌러주세요! 그럼 위 그림처럼 앱 정보를 작성하는 화면이 나옵니다. 잘 작성하시고 저장을 누르시면 돼요! kakao developers 플랫폼 설정 우선, 플랫폼 설정을 해볼거에..
2023.07.31 -
안녕하세요. 오늘은 SHA 키 해시를 확인을 해보겠습니다. 안드로이드 스튜디오에서 Android 폴더 열기 안드로이드 스튜디오에서 'android'폴더에서 아무 파일이나 들어가셔서 'Open for Editing in Android Studio'를 클릭하셔서 안드로이드 폴더를 따로 열어줍니다. gradle signingReport 찾기 안드로이드 폴더를 따로 열어서 오른쪽 상단에 있는 Gradle 버튼을 눌러줍니다. 그럼 두번째 사진과 같은 창이 뜨면 왼쪽 위에 코끼리 모양 버튼을 눌러주세요 그럼 검색창 같은게 하나 뜰텐데요. 검색창에 'gradle signingReport'를 작성하시고, 엔터키를 누르시면 SHA 키 해시가 뜰거에요! SHA 키 해시 확인하기 오늘은 키 해시 확인하는 방법을 알아봤습니다..
[플러터 개발] SHA 키 해시 확인하기안녕하세요. 오늘은 SHA 키 해시를 확인을 해보겠습니다. 안드로이드 스튜디오에서 Android 폴더 열기 안드로이드 스튜디오에서 'android'폴더에서 아무 파일이나 들어가셔서 'Open for Editing in Android Studio'를 클릭하셔서 안드로이드 폴더를 따로 열어줍니다. gradle signingReport 찾기 안드로이드 폴더를 따로 열어서 오른쪽 상단에 있는 Gradle 버튼을 눌러줍니다. 그럼 두번째 사진과 같은 창이 뜨면 왼쪽 위에 코끼리 모양 버튼을 눌러주세요 그럼 검색창 같은게 하나 뜰텐데요. 검색창에 'gradle signingReport'를 작성하시고, 엔터키를 누르시면 SHA 키 해시가 뜰거에요! SHA 키 해시 확인하기 오늘은 키 해시 확인하는 방법을 알아봤습니다..
2023.07.28 -
안녕하세요! 오늘은 플러터 앱에서 폰트를 바꿔볼게요! 준비물 준비물은 원하는 폰트. ttf 파일이에요! 아직 원하는 폰트를 찾지 못하신 분들을 위해서 제가 기본적인 대표 폰트 사이트를 공유해 드릴게요! 이 사이트에서는 상업적으로 무료인 폰트들이 있으니까, 원하는 폰트 잘 찾아가세요! https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 디렉터리 생성 자 우선 폰트 파일을 플러터 앱 폴더에 넣어줘야겠죠? 플러터 프로젝트를 우클릭하고 "assets" 디렉터리를 새로 만들어줍니다. 이미지나 애니메이션을 넣느라 이미 있으신 분들도 계실 텐데요. 없으신 분들을 위해 알려드릴게요! 다음은 "assets" 파일에서 "fonts" 디렉터리를 또 만들어줍니다! "fonts" 디렉터리..
[플러터 개발] IOS, 안드로이드 앱 폰트 바꾸기안녕하세요! 오늘은 플러터 앱에서 폰트를 바꿔볼게요! 준비물 준비물은 원하는 폰트. ttf 파일이에요! 아직 원하는 폰트를 찾지 못하신 분들을 위해서 제가 기본적인 대표 폰트 사이트를 공유해 드릴게요! 이 사이트에서는 상업적으로 무료인 폰트들이 있으니까, 원하는 폰트 잘 찾아가세요! https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 디렉터리 생성 자 우선 폰트 파일을 플러터 앱 폴더에 넣어줘야겠죠? 플러터 프로젝트를 우클릭하고 "assets" 디렉터리를 새로 만들어줍니다. 이미지나 애니메이션을 넣느라 이미 있으신 분들도 계실 텐데요. 없으신 분들을 위해 알려드릴게요! 다음은 "assets" 파일에서 "fonts" 디렉터리를 또 만들어줍니다! "fonts" 디렉터리..
2023.06.06 -
안녕하세요! 오늘은 나만의 앱바를 만들어보는 시간을 가져보려고 합니다! 앱바는 메인 앱바, 뒤로 가기가 있는 서브 앱바를 만들어볼게요! 디렉터리 생성 우선 디렉터리와 dart 파일들을 만들어볼까요? 우선 디렉터리와 파일을 설명해 드릴게요. screen 디렉터리 : 페이지들을 저장하는 폴더 main_screen.dart : 메인 페이지의 코드를 작성할 파일 sub_screen.dart : 서브 페이지의 코드를 작성할 파일 widget 디렉터리 : 커스텀 위젯들을 저장하는 폴더 appbar 디렉터리 : 커스텀 앱바들을 저장하는 폴더 main_app_bar.dart : 메인 앱바의 코드를 작성할 파일 sub_app_bar.dart : 서브 앱바의 코드를 작성할 파일 이제 파일 하나씩 파고 들어가 볼까요?..
[플러터 개발] Flutter - 나만의 커스텀 앱바 만들어보기(AppBar)안녕하세요! 오늘은 나만의 앱바를 만들어보는 시간을 가져보려고 합니다! 앱바는 메인 앱바, 뒤로 가기가 있는 서브 앱바를 만들어볼게요! 디렉터리 생성 우선 디렉터리와 dart 파일들을 만들어볼까요? 우선 디렉터리와 파일을 설명해 드릴게요. screen 디렉터리 : 페이지들을 저장하는 폴더 main_screen.dart : 메인 페이지의 코드를 작성할 파일 sub_screen.dart : 서브 페이지의 코드를 작성할 파일 widget 디렉터리 : 커스텀 위젯들을 저장하는 폴더 appbar 디렉터리 : 커스텀 앱바들을 저장하는 폴더 main_app_bar.dart : 메인 앱바의 코드를 작성할 파일 sub_app_bar.dart : 서브 앱바의 코드를 작성할 파일 이제 파일 하나씩 파고 들어가 볼까요?..
2023.06.03 -
오늘은 아이콘 변경하는 방법을 알려드릴 거예요! 패키지 설치 우선 먼저 사용하는 flutter_launcher_icons 를 알려드릴게요! 링크 클릭하시면 정보를 얻을 수 있어요! https://pub.dev/packages/flutter_launcher_icons 우선 내 플러터에 설치를 해야겠죠?? 터미널에 아래 명령어를 써줍니다! flutter pub add flutter_launcher_icons 그리고 내가 준비한 아이콘을 프로젝트 폴더 안에 'assets'폴더를 만들어 그 폴더 안에 넣습니다! # 아이콘은 512 x 512 픽셀로 맞춰두면 좋아요! 스토어에 올릴 때 사용해야할 아이콘 규정이랍니다! 저는 폰트랑 애니메이션도 앱에 넣어서 따로 폴더를 만들어 놨습니다. 폰트랑 애니메이션 폴더는 사용..
[플러터 개발] 플러터에서 IOS, 안드로이드 아이콘 변경하기!오늘은 아이콘 변경하는 방법을 알려드릴 거예요! 패키지 설치 우선 먼저 사용하는 flutter_launcher_icons 를 알려드릴게요! 링크 클릭하시면 정보를 얻을 수 있어요! https://pub.dev/packages/flutter_launcher_icons 우선 내 플러터에 설치를 해야겠죠?? 터미널에 아래 명령어를 써줍니다! flutter pub add flutter_launcher_icons 그리고 내가 준비한 아이콘을 프로젝트 폴더 안에 'assets'폴더를 만들어 그 폴더 안에 넣습니다! # 아이콘은 512 x 512 픽셀로 맞춰두면 좋아요! 스토어에 올릴 때 사용해야할 아이콘 규정이랍니다! 저는 폰트랑 애니메이션도 앱에 넣어서 따로 폴더를 만들어 놨습니다. 폰트랑 애니메이션 폴더는 사용..
2023.05.31 -
오늘은 안드로이드 스튜디오에서 플러터로 개발할 때, 안드로이드와 iOS 버전을 변경하는 방법을 알아보겠습니다.' 플러터 버전 변경 먼저 플러터에서 버전을 변경하는 방법을 알아보겠습니다. pubspec.yaml파일에 들어가면 "version"이라고 써져있는 라인이 있습니다. version : 1.x.x+x 앞에 있는 "1.x.x"은 버전 이름이고요, "+x"는 빌드 번호입니다. 하지만 플러터 버전을 바꾼다고 안드로이드랑 iOS 버전이 바뀌는 건 아닙니다. 따로 설정을 해줘야 하는데요. 안드로이드 설정 방법 플러터 프로젝트 안에 있는 android 폴터에서 local.properties파일에 들어가줍니다. versionName이랑 versionCode를 각각 바꿔주면 되는데요, 아까 플러터에서 설정한 "1...
[플러터 개발] 안드로이드와 IOS 버전 변경 방법오늘은 안드로이드 스튜디오에서 플러터로 개발할 때, 안드로이드와 iOS 버전을 변경하는 방법을 알아보겠습니다.' 플러터 버전 변경 먼저 플러터에서 버전을 변경하는 방법을 알아보겠습니다. pubspec.yaml파일에 들어가면 "version"이라고 써져있는 라인이 있습니다. version : 1.x.x+x 앞에 있는 "1.x.x"은 버전 이름이고요, "+x"는 빌드 번호입니다. 하지만 플러터 버전을 바꾼다고 안드로이드랑 iOS 버전이 바뀌는 건 아닙니다. 따로 설정을 해줘야 하는데요. 안드로이드 설정 방법 플러터 프로젝트 안에 있는 android 폴터에서 local.properties파일에 들어가줍니다. versionName이랑 versionCode를 각각 바꿔주면 되는데요, 아까 플러터에서 설정한 "1...
2023.05.28