Don't think! Just do it!

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

Flutter/Flutter Study 26

[Flutter] Firestore에서 Elastic app search

Full text search 검색 기능이 필요한데 firestore를 DB로 사용하고 있다면 망한거야! firestore는 검색 기능이 없거든!!!! ㅋㅋㅋㅋ 뭐 망할 것 까지는 없고 ㅋㅋ firestore full text search라고 한번만 검색해도 솔루션이 있다는 걸 알거야 ㅎㅎㅎ 따라하는 것만 남았을 뿐! firebase에서 제공하는 Full text search 방법은 3가지야 Elastic search, algolia, typesense. 이 세가지를 모두 테스트해봤는데 개인적으로는 Elastic search가 사용하기에 가장 적합한 것 같아.. algolia는 query request 횟수를 믿을 수가 없고 typesense는 array 형태의 자료에서 검색이 불가능해. 순서를 간단하게..

[Flutter] Getting visible items on scroll view

listView같은 scroll view 에서 화면에 어떤 item(widget)이 보이고 있는지 확인해야 할 때가 있어. 현재 보여지고 있는 아이템을 헤더에 표시해야 한다거나 동영상이 자동으로 재생되어야 한다거나 할때 말야.👇 그렇게 흔하게 요구되는 기능은 아니라 몰라도 되지만 내가 만드는 앱에서는 필수적인 기능이라서 ㅎ 해볼거야. 우선 이 기능은 inview_notifier_list 패키지를 사용하면 대부분 해결될거라 생각해. https://pub.dev/packages/inview_notifier_list inview_notifier_list | Flutter Package A Flutter package that builds a listview and notifies when the widgets..

[Flutter] Firestore pagination(무한스크롤)

무한 스크롤 같은 거 구현할 때 스크롤이 끝부분에 다달았을 때 DB나 API 서버를 통해서 새로운 데이터를 가져와야 하잖아? 이런 걸 Pagination이라고 해. 보통 리스트 형태의 데이터를 뿌려주는 API 들은 page 옵션이 별도로 있어. 그래서 pagination 구현할 때 그 page 옵션을 사용하면 되지. page 옵션이 없더라도 특정 데이터의 날짜를 기준삼아 정렬하고 읽어온 데이터 갯수를 pagination에 활용할 수도 있어. 뭐 API 서버는 이렇다 치고, Firestore에서도 여러가지 pagination을 위한 기능을 제공하고 있어.👇👇 https://firebase.google.com/docs/firestore/query-data/query-cursors 쿼리 커서로 데이터 페이지 ..

[Flutter] Bad state: Future already completed

나같은 경우 네트워크에서 로드하는 이미지의 사이즈를 이미 알아내서 위젯을 그릴려고 completer를 사용했는데 가끔씩 이미지 로드에 실패하고 Bad state: Future already completed라는 에러가 뜨더라고;;;; 코드는 아래와 같은데 어떤 이유에서건 imageProfiver listener가 여러번 수행되서 그런 거 같아. ... CachedNetworkImage( imageUrl: imageUrl, width: 50, imageBuilder: (context, imageProvider) { Completer completer = Completer(); imageProvider .resolve(const ImageConfiguration()) .addListener(ImageStre..

[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. 기본 설정 ..

[Flutter] loading 화면

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

[Flutter] Firebase auth email link login

Firebase auth에서 email password 로그인 말고 email link 로 로그인하는게 있어. 그냥 email, password하면 되지 왜 사서 고생이냐고? firebase 방식이 email이랑 password만 입력하면 바로 계정을 만들 수 있어. email을 소유자 확인없이 말이지! 물론 email verification을 하면 돼. 기능도 있고. 내가 등신인지 모르겠다만..자! 생각을 해보자. 그림 보면 심플! 👇 그런데 말이지! 만약 악의적인 사용자가 훔친 이멜 주소로 회원 가입을 시도해. 앱은 verification을 보내고 기다릴텐데 그 동안 이멜 진짜 주인이 가입을 시도한다 치자! 그럼 어떻게 돼? 실제 이멜 주인은 10분을 기다렸다가 다시 가입하던지, 아니면 비번 찾기를 ..

[Flutter] GetX

Flutter 문서에서 상태관리 잘 모르면 닥치고 프로바이더 쓰라고 그랬다. 그래서 프로바이더 열심히 쓸라고 그랬는데;;;; 이새끼들 뭐야... 더 좋은 게 있었잖아? Likes가 무려 10559! getX! 당연히 그럼 getX 써야지..설치! %flutter pub add get main.dart에서 App을 GetMaterialApp으로 감싸주란다. 그런데 이건 Get.to()나 Get.back()같은 route management 할 때만 필요한 과정이라고 안쓸거면 안해도 된단다. 써보지 뭐. import 'package:get/get.dart'; void main() => runApp(GetMaterialApp(home: Home())); 그리고 Controller 하나 만들고 그 안에 coun..

[Flutter] JSON, 직렬화???, Model, Firestore withConverter

2022.10.12 - [Flutter/Flutter Study] - [Flutter] - Firebase firestore [Flutter] - Firebase firestore React native에서는 React Query가 있어서 디따 편하게 했는데;;; 찾아보니까 Flutter에는 대표적으로 사용되는 React Query처럼 대표적으로 많이 사용되는 패키지는 없는 듯해... 음 뭐 그렇다고 Firestore 테 engschool.tistory.com 이전에 firestore 테스트할 때 읽는 방식이 매우 요상했어! 한마디로 등신처럼 스트림 설정하고 등신처럼 읽었지. 뭐 나도 공부해가면서 하는 거니까 ㅋㅋㅋ //이렇게 등신처럼 스트림 설정하고 final Stream userTextStream =..

반응형