본문 바로가기

플러터로 앱만들기14

플러터로 SNS어플 만들기 9.데이터베이스 만들기-파이어베이스 파이어스토어(firebase-firestore) 연결하기 1 자 드디어 데이터 베이스 라는걸 써볼거에요. 앱이든 웹이든 클라이언트와 서버 가 있어요. 클라이언트는 사용자눈에 보이는 모든걸 다룬다고 보면되고 서버는 뒤에 돌아가는거라고 하는데 이렇게 말하면 좀 추상적이긴하네요 어쨋든 우리는 지금 클라이언트 부분을 하고있었어요. 그런데 클라이언트에서 쓰는 대부분을 서버에서 받아와요. 처음엔 뭔말이야하겠지만 하다보면서 또 하다보면 그냥 직감적으로 쉽게 개념이 찾아와요, 모든지 처음엔 낯설지만 지식의 퍼즐이 맞춰지면서 잘 이해가 되니 어쨋든 시작합니다. 오늘의 작업내용 1. Firebase 란 2. Firebase 프로젝트 추가하기 3. Firebase 프로젝트에 앱등록하기 4. google-services.json 파일 다운받기 5. project 수준의 build.gr.. 2021. 5. 21.
플러터로 SNS어플 만들기 8.페이지뷰 활용하여 이미지 스와이핑 이번 포스트에는 페이지뷰(PageView)를 이용해서 여러장의 한포스트에 여러장의 사진을 담아서 오른쪽으로 스와이프해서 사진을 넘기는거를 해볼거에요. 금일 작업 내용 1.PageView 위젯 생성 2.AspectRatio 로 비율주기 3.Indicator 달아주기 4.Stack 사용하기 5.PageView.builder 사용하기 6.CurrentPage 표시하기 1.PageView 위젯 생성 먼저 기존에 이미지가 담긴 Container를 PageView로 감싸줘요. children 부분에 기존의 이미지가 담긴 Container 를 그냥 담아주면되요. 저는 3개 담아줬어요. 그럼 3장의 사진을 넘길수 있게되겠죠. 그런데 이런 사이즈 오류가 날거에요. 페이지뷰를 쓰기위해서는 부모위젯이 세로 사이즈를 가지고 .. 2021. 5. 19.
플러터로 SNS어플 만들기 7.하드코딩으로 레이아웃잡기 지난포스트에서 아래처럼 포스트카드를 30개가량 리스트 뷰로 뿌려봤는데요 이번엔 포스트 카드를 좀 그럴듯하게 꾸며볼거에요. 인스타그램 모양처럼요 이렇게 위에서부터 column형태로 제목칸,사진칸,하트등 이모티콘,댓글 이런씩으로 되어있는거요. 오늘의 작업 내용 1. 일단 하드코딩으로 레이아웃 구성하기 2. 사진 넣어보기 3. 하드코딩으로 다른부분 꾸미기 4. ListView.separated 로 바꾸기 1.일단 하드코딩으로 레이아웃 구성하기 PostCard가 있는 클래스로 가서 내용을 이렇게 구며줬어요. 당연 나중에는 구성이 바뀌겟지만 우선적으로 보는거에요. 사진칸에는 height 를 400으로 줬지만, 우선 시각적으로 레이아웃을 볼려고 저렇게 임시적으로 해둔거고 사실 사진칸은 유저가 실제로 올린 사진의 비.. 2021. 5. 17.
플러터로 SNS어플 만들기 6. ListView 이용하여 리스트뿌려주기 앱의 아이덴티티 를 조금 바꿔보고자 해요. 왜냐면 조카를 위한 sns 앱을 만들려고했는데 네이버밴드에서 그냥 하는게 나을거라고 생각되요 ㅋ 그래서 유아용품 SNS 앱으로 바꾸기로 했어요. 업체들이 유아용품 사진이랑 동영상올리고 그거 클릭하면 그냥 그 사이트로 링크로 연결되도록 할거에요 이것도 실제 사용은 못할수있지만 좀더 재미가있을거 같아서요.. 재미가있으면 집중력이 생기죠. 그래서 앱 아이콘이랑 앱이름도 바꿀건데 그건 나중에 하기로할게요 ㅋ 오늘의 작업 내용 1. ListView.bulder 일단 써보기 2. Class 단위의 위젯 만들기 3. Class에 인수전달하기 4. 랜덤색상 부여하기 1. ListView.bulder 일단 써보기 바텀 네비에보시면 홈, 그리드뷰,마이라이크 ,마이페이지 이렇게 4.. 2021. 5. 15.