Programming-[CrossPlatform]/Flutter 25

Flutter 기본-23. 채팅앱 - 이미지 등록 및 조회, firebase storage

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. Image picker 설치, XFile Image Picker 사용자가 이미지를 업로드하는 기능을 image_picker라는 라이브러리를 통해 구현한다. https://pub.dev/packages/image_picker 다른 라이브..

Flutter 기본-22. 채팅앱 - 유저이름 표기, 다이얼로그(팝업)

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. 유저 이름 표기 추가하기 flutter_chat_bubble 작업 전 편의를 위해 pub.dev에서 제공하는 flutter_chat_bubble 라이브러리를 설치한다. https://pub.dev/packages/flutter_chat..

Flutter 기본-21. 채팅앱 - 채팅 UI 작성, 데이터 관리

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. 채팅 메시지 화면 새로 구성 기존 chat_screen에 있던 부분을 리팩토링한다. chatting/chat 폴더를 만들고 messages.dart 파일을 만들어 아래 코드를 작성해준다. import 'package:flutter/ma..

Flutter 기본-20. 채팅앱 - firebase database, 규칙 등록, authStateChanges

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. username 데이터베이스에 등록하기(추가 데이터 데이터베이스에 넣기) email, password는 firebase_auth 패키지가 담당했으나, 추가적인 정보는 cloud_firestore가 담당한다. user에 대한 추가정보를 ..

Flutter 기본-19. 채팅앱 - Login/out, Stream 및 Cloud firestore 적용

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. Signup 테스트 chat_screen 앞서 작성했던 char_screen에서 현재 로그인 유저 정보를 알아내는 메서드를 추가한다. 일단은 print()로 email이 콘솔상에서 출력되게만 해준다. //상기 class 및 create..

Flutter 기본-18. 채팅앱 - Firebase 연동, Signup 구현

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. 파이어베이스 프로젝트 생성 및 프로젝트 삽입 파이어베이스 파이어베이스는 완전 관리형 백엔드 서비스이다. 일반 데이터베이스를 이용하여 직접 커스터마이징하는 것보다 기본 기능들을 구축하는 것이 훨씬 간편하다. 다만 통계데이터 산출, 데이터..

Flutter 기본-17. 채팅앱 - 로그인 Validation

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. ValueKey 적용 각 TextFormField 부분이 Key 값을 가지고 있지 않아서 Flutter가 같은 타입의 위젯들을 구분할 수 없는 상태이다. 그래서 위 영상처럼 SIGNUP에 작성된 내용이 LOGIN에도 그대로 남게 된다...

Flutter 기본-16. 채팅앱 - TextFormField, inline if, AnimatedPositioned

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 1. TextFormField Login, Signup 버튼을 생성한 Row 아래에, 상위 Colmun의 children으로 Container를 추가해준다. Form 위젯을 추가하고 TextFormField를 추가한다. decoration ..

Flutter 기본-15. 채팅앱 - 로그인 기본 구조: Positioned, MediaQuery.of

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com in-app background image reference : https://wallpapercave.com/cartoon-chickens-wallpapers 이제 로그인 및 채팅이 가능한 채팅앱을 만든다. 이번 글에서는 UI 만들기에 집중한다. 강의에서 설명하는 것처럼 UI 작성에 익숙해지기 위한 과정으로 최대한 리팩토링을 자제하고 하나의 파일에 쭉 이어서 만든다. 앞서 배웠던 부분..

Flutter 기본-14. 날씨 앱 만들기 데이터, 이미지 연동, Key 개념 이해하기

Youtube 코딩셰프님의 강의를 요약 정리한 글이다. dart 언어나 이론 부분은 자바와 유사하여 대부분 제외하였고, flutter 기초 위주로 정리한다. https://www.youtube.com/@codingchef 코딩셰프 향후 대세가 될 플러터를 단계별로 맛있게 학습하실 수 있습니다! www.youtube.com 이제 앱을 완성한다. 앞서 배웠던 위젯 트리 구성이나 데이터 연동 부분 외에 직접 작업하면서 배웠던 점들을 기록한다. 강의에서 배운 부분들도 있지만, 대부분이 내가 마음대로 작성한거라 최적의 방식으로 코딩하지는 않았다. 나중에 best practice를 배우게 되면 더 좋을 것 같다. 1. 아이콘(그림 연동) 웹 이미지 연동 : Image.network(myUrl) 위 앱 화면의 그림상..