Don't think! Just do it!

종합 IT 기술 정체성 카오스 블로그! 이... 이곳은 어디지?

flutter 앱 제작기 10

[소셜차트] 앱 제작기 #14. 프로필 수정 화면

사진이나 소개 같은 프로필 정보를 수정하는 화면을 만들었어. 별건 아닌데 ㅎ 은근 짜증 ㅎ text 업로드하는 건 뭐 크게 난이도 있는 건 아니니까 스킵하고 사진 업로드하는 것만 전체적으로 설명하자면 image picker로 갤러리나 카메라로 사진 선택 후 로컬 변수에 저장. 로컬 변수에 저장된 이미지를 image cropper로 보내서 유저가 size 변경. 최종 파일을 firebase storage로 보내고 다운로드 url 확보 firestore userDB에 업데이트 이런 순서가 되겠지? 여기에 사용한 package는 image_picker와 image_cropper야 👇👇👇 https://pub.dev/packages/image_picker image_picker | Flutter Package ..

[소셜차트] 앱 제작기 #12. 댓글 기능 & 기타 잡다!

사실 이제 소셜차트의 핵심적인 부분을 구현해야 하는데.. 그건 아직 생각이 정리가 안되서 ㅋㅋㅋ 눈에 보이는 것들부터 우선 처리하고 있어. 유저가 포스팅을 하는 건 했으니 이제 댓글을 달아 보자고.. 포스팅이랑은 다르게 댓글은 그냥 keyboard에 붙어 다니는 bottomsheet에 textfield를 붙여서 구현했어. 물론 수정해야할 것들이나 추가해야 할 것들이 매우 많지만 일단 기능 구현에만 중점을 두고 작업했고 댓글 리스트를 위한 위젯은 유저 포스팅 리스트에 사용했던 infinite_scroll_pagination을 또 사용했어. infinite_scroll_pagination 매우 좋아! 이거 하면서 골때렸던게 keyboard를 따라다니는 bottomsheet 였는데 일반적으로는 매우 완벽하게 ..

[소셜차트] 앱 제작기 #10. Tap to scroll top

bottom tab navigator에서 tab을 누르면 스크롤이 처음으로 올라가고, 또 tab을 누르면 뒤로가기. IOS에서 흔한 동작이야.. 그런데 ㅋㅋㅋㅋ 결론부터 이야기 하자면 못했어..... ㅅㅂ... React Native에서는 react navigation으로 여차저차 구현했는데;;; Flutter에서는 좌절이네;;; ㅋㅋㅋㅋ 다 내 머리가 나쁜 탓이지! ㅠㅠㅠㅠㅠㅠㅠㅠ 사실 flutter에서 scroll on top 기능은 간단해.👇 controller.scrollController.animateTo( 0.0, duration: const Duration(milliseconds: 300), curve: Curves.linear, ); //or controller.scrollControlle..

[소셜차트] 앱 제작기 #8. 글쓰는 페이지

일단은 지금 제작중인 소셜차트라는 앱이 소셜네트워킹 앱이어서 사용자들이 글을 쓸 수 있도록 해야 해. 페이스북이나 트위터처럼 말이지. 이거 말고도 구현해야 할 것들이 굉장히 많지만 글을 쓸 수 있는 환경부터 만드는 게 더미 데이터를 넣으면서 테스트하기 좋을 거 같아서 글쓰는 페이지부터 만들고 있어. 1차적으로 해쉬태그와 url을 자동으로 인식해서 link preview를 보여주는 정도로만 구현중이야. 먼저 textfield에 hashtag와 url을 꾸며주는 건 detactable_text_field라는 flutter package를 사용했고👇 https://pub.dev/packages/detectable_text_field detectable_text_field | Flutter Package Tex..

[소셜차트] 앱 제작기 #7. 네비게이션 시스템 뒤집어 엎기.

Getx로는 제대로 된 Bottom tab navigator를 구현하기 힘들다는 블로그를 봤는데... 개뿔.. 잘만하더라.... 일단 기본 네비게이터로 구현했던 nested navigation 시스템에서는 좀 있어 보일라고 NavigationTree.dart라는 파일에서 모든 네비게이션 시스템이 관리되도록 하려고 했는데.... 👇👇 참... 등신짓이었어. 2022.10.21 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #2. 기본 설정 [소셜차트] 앱 제작기 #2. 기본 설정 ..

[소셜차트] 앱 제작기 #6. Profile & Notice Screen Layout

이전 작업 2022.10.24 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #5. Model and Firestore 1% [소셜차트] 앱 제작기 #5. Model and Firestore 1% 이전 작업 2022.10.22 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 2022.10.21 - [Flutter/Flutter Project] - [소셜차트] 앱 제작.. engschool.tistory.com 뭔가 로그인에 불만이 있거나 문제가 있는 양반들을 위한 ReportScreen을 제작했어. DB model도 만들고 firestore에 데이터가 잘 들어가는 것도 ..

[소셜차트] 앱 제작기 #5. Model and Firestore 1%

이전 작업 2022.10.22 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 [소셜차트] 앱 제작기 #4. 로그인 시스템 구성 2022.10.21 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기.. engschool.tistory.com 무언가 잘못되어 로그인이 되지 않을 때 사용자가 보고할 수 있는 페이지를 제작했고 그에 맞춰 firestore에 내용을 저장할 수 있도록 했어. 먼저 firebase firestore 데이터..

[소셜차트] 앱 제작기 #4. 로그인 시스템 구성

2022.10.21 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 [소셜차트] 앱 제작기 #3. Navigation 시스템 구성 2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #2. 기본 설정 [소셜차트] 앱 제작기 #2. 기본 설정 우선 프로젝트 생성. 👇 %flutter create --org com.petercircuitsoft socialchart --org 옵.. engschool.tistory.com 로그인은 Firebase authenticate를 사용해서 구현할거야. 이메일 로그인하고 소셜 로그인을 넣을건데 소셜 로그인은 Apple이랑 Google만 넣으면 될 것 같아. ..

[소셜차트] 앱 제작기 #3. Navigation 시스템 구성

2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #2. 기본 설정 [소셜차트] 앱 제작기 #2. 기본 설정 우선 프로젝트 생성. 👇 %flutter create --org com.petercircuitsoft socialchart --org 옵션으로 com.petercircuitsoft 줬는데 이건 우리 회사 도메인이야. 각자 회사 도메인 이름으로 하자. 제발~~ 이렇게 설정.. engschool.tistory.com 카카오가 터지는 바람에 몇일 블로그를 못썼네;;; 망할 카카오.. 다른데로 블로그를 옮길까봐! ㅎㅎ 일단 앱 만들던건 만들고 ㅋ 기본 설정까지하고 지나갔는데 약간 진도가 나갔어. 소셜차트는 4개의 탭으로 구성되는데 그리고 각 탭은 여러 개의 ..

[소셜차트] 앱 제작기 #2. 기본 설정

2022.10.14 - [Flutter/Flutter Project] - [소셜차트] 앱 제작기 #1. 시작하기 전에! [소셜차트] 앱 제작기 #1. 시작하기 전에! 나는 원래 임베디드 엔지니어였고 회사를 그만두기 전 마지막 타이틀은 인도지사장이었어 ㅋㅋ 앱 같은 건 만들어 본 적이 없어. 그야말로 무근본이지! 그런데 그렇다고 못할 건 없잖아 ㅋㅋ 무 engschool.tistory.com 자! 우선 프로젝트 생성. 👇 %flutter create --org com.petercircuitsoft socialchart --org 옵션으로 com.petercircuitsoft 줬는데 이건 우리 회사 도메인이야. 각자 회사 도메인 이름으로 하자. 제발~~ 이렇게 설정하면 bundle 이름이 com.peterc..

반응형