Don't think! Just do it!

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

Flutter 42

[소셜차트] 앱 제작기 #11. 운수 좋은 날..

이제는 대가리가 Flutter에 맞춰지는지 스트레스도 덜 받고 왠지 모르게 이런 저런 것들을 잡다한 것들을 마이 했단 말이지.. infinite scroll 새로 고침, user profile에 더미 데이터 => DB 연결, insight card에 사용자 정보 가져오기, link preview Image provider에 에러 수정.. 뭐 한참 많아.. 크으~ 오늘 운이 좋은 걸? 이런 날일수록 조심해야지! % git add . % git commit -m "블라블라" % git push origin main 크 완벽해! ... 집에서 맥북으로 보니까 ios 폴더에서 저짓을 해놨네?;;;; 으하하하하하미ㅏ넝리ㅏㅓㅁ닝러ㅣㅁ나렁 사무실 컴터에 남아있을건데 왜 그러냐고?? ㅋㅋㅋㅋㅋㅋ 난 사무실에는 맥 스튜..

[소셜차트] 앱 제작기 #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..

[소셜차트] 앱 제작기 #9. 무한 스크롤

유저가 작성한 인사이트 카드를 여러사람에게 맞춰 보여주는 건 쉽지 않은 일이겠지? ㅋㅋ 아마 Query가 마이 복잡해 질거야. 앱에서 firestore에 다이렉트로 못 할 수도 있고.. 이럴 경우에는 Backend에서 해야겠지. 그렇다고 손놓고 있으면 등신이고. 걍 일단 시간순으로 정렬해서 listview로 보여주자고.. Insight card는 단순하게 header, body, bottom 이렇게 3부분으로 나뉘는데 header에는 chart의 요약 정보가 들어갈거고 body에는 유저, 카드 내용이, 그리고 bottom에는 스크랩, 댓글 달기, 외부 공유를 할 수 있는 버튼이 있어. header와 bottom은 구현해야할 게 엄청 많으니까 일단 body만 읽어와서 뿌려줄건데 처음에는 귀엽게 10개를 고..

[소셜차트] 앱 제작기 #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..

[Flutter] getx page&controller 재사용

get으로 Page랑 controller를 만들고 이걸 여러 군데에서 재사용해야 할 때가 있어. 뭐 Page(Widget)야 그냥 쓰면 되는데 GetxController의 instance가 독립적으로 생성되게 하기 위해서는 binding할 때 tag 옵션을 줘야해. 예를 만들어 보자구. 먼저 3개의 파일을 만들었어. page_text.dart, page_text_controller.dart 마지막으로 page_text_binding.dart get으로 page 기본 구성이라고 할 수 있어. 내용은 아래와 같고, //page_test.dart class PageTest extends GetView {//Getview로 선언하면 const PageTest({super.key}); static const ro..

[소셜차트] 앱 제작기 #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에 데이터가 잘 들어가는 것도 ..

[Flutter] loading 화면

CircularProgressIndicator라고 위젯이 하나 있는데 뭐 별건 아니고 동글동글 도는 녀석이지. 보통 서버와 통신하거나 할 때 화면이 정지된 상태로 가만히 기다리면 이상하잖아? ㅋㅋ 그래서 돌돌이를 돌려놓는거지 ㅋ 단순히 이 위젯을 설명할 건 아니여~ 뭘 할거냐면 이 돌돌이를 돌려놓을 때 화면이 스크롤이 된다거나, 버튼이 또 눌린다거나 할 수도 있어서 그걸 좀 막고 싶을 때 있잖아? 배경도 좀 뿌옇게 처리해서 유저한테 컨트롤 못합니다~ 하고 알려주고 ㅋ👇 이걸 구현하려면 우선 Stack에다가 children으로 Offstage로 감싸진 CircularProgressIndicator와 ModalBarrier 위젯을 사용해. 말만 들어도 쀨이 딱 오지 않아? ㅎㅎㅎ 그림을 보면 쫌 쉽지 👇 S..

[소셜차트] 앱 제작기 #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만 넣으면 될 것 같아. ..

반응형