본문 바로가기
관리자

Programming-[CrossPlatform]/Flutter

 (35)
[제철음식 알리미] 1. 화면구성: Stack, Navigator, PageView 제철음식 알리미 앱을 제작하며 학습했던 내용들을 정리한다.  1. Stack 플러터의 화면은 기본적으로 Stack으로 구성되어있다. Stack에 페이지를 한 겹씩 쌓아나가는 구조이다. 화면 전환을 할 때 Stack에 페이지들을 쌓을 수도 있지만 이전 stack을 없애고 새로운 stack만 존재하도록 할 수 있다. 그리고 뒤로가기를 누르면 하나의 Stack을 제거하는 구조이다. 1.1 페이지 스택 쌓기 원리 이해제철음식 알리미에서는 홈, 검색 페이지가 있다. 페이지 전환 시 스택과 관련된 로직은 아래와 같다. 앱에 접속하면 홈 페이지 스택이 쌓인다.검색 버튼을 누르면 검색 페이지 스택이 추가로 쌓인다.이 상태에서 뒤로 가기를 누르면, 검색 페이지 스택이 제거되면서 이전 홈 페이지 스택으로 돌아간다.홈 페이..
[링크, TIL] 안드로이드 앱 배포 https://whoyoung90.tistory.com/79 Archieve 해주고 Dist" data-og-host="whoyoung90.tistory.com" data-og-source-url="https://whoyoung90.tistory.com/79" data-og-url="https://whoyoung90.tistory.com/79" data-og-image="https://blog.kakaocdn.net/dna/cgHEkj/hyW6CmfBIK/AAAAAAAAAAAAAAAAAAAAAH5vGebAsqOBXfHgzNJ-or_WUtGeHSCKju4TS1QX39en/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=mAV%2BCgYiUnZe9AbMSl4q5MEwh8I%3D
[sf] gnb 추가: pushReplacementNamed, bottomNavigationBar GNB 요소를 추가했다.  1. bottomNavigationBar homeScreen의 Scaffold에 bottomNavigationBar 속성으로 BottomNavigationBar 클래스를 추가해주면 된다. GNB를 홈과 마이페이지에서 동일하게 사용하기 위해서 BottomNavBar 클래스로 공통화하였다. 그리고 각 페이지로 이동했음을 표시해주기 위해서 selectedIndex와 onItemTapped 함수를 인자로 넘겨주었다. selectedIndexGNB에서 홈과 마이페이지를 구분하기 위한 변수값이다. homeScreen에서는 0으로 정의했다. Enum으로 빼주면 더 좋을 것 같긴하다. myPageScreen에서는 1 값으로 적용했다.  onItemTapped이 변수는 일급객체로 Functio..
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..

티스토리툴바