Don't think! Just do it!

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

Flutter 42

[Flutter] Iphone Local ip address

앱에서 자기 자신의 ip주소를 얻어와야 할 때가 있는데.. 음... 특히 내 경우는 hot spot 상태에서 폰의 local ip address하고 폰에 붙은 클라이언트들의 ip address를 읽어와야 할 때가 있어. 그래서 해봤음. 기본적인 아이디어는 이래. dart:io 패키지-> NetworkInterface class를 통해 hot spot용 네트워크 인터페이스가 생겼는지 확인하고 로컬 ip 주소를 가져왓! dart_ping 패키지를 사용해 2 ~ 255 까지 핑 쐇! 핑이 있는 ip 주소 업데이트! 참 쉽죠? main을 보자! 👇 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:ither..

Flutter 2023.03.20

[소셜차트] 앱 제작기 #16. 차트!

무슨 데이터 좀 구해서 볼라면 미친듯이 검색해야 하잖아? 하다 못해 서로 다른 두 차트(데이터)의 상관 관계를 보려면 미친 액셀 노가다를 해야 하지. 매우 간단한 것조차 말이야. 게다가 대다수의 사람들은 이런 것조차 못한단 말야. 진짜 요즘처럼 정보격차가 극심한 시대가 있었나 싶어. 정보는 돈이니까 즉! 정보 격차는 빈부 격차라는 소리지. 암튼 이런 문제를 좀 해결하고 싶어서 만드는 앱 이름이 소셜차트야. 차트위에 여러가지 데이터를 보기 쉽게 나타내고 서로 정보를 공유할 수 있도록 돕는 툴이야 ㅋㅋㅋ 차트가 핵심기능이라는 소리지! ㅋㅋㅋ 근데 이놈에 핵심기능 구현하는게 지옥이네 ㅋㅋㅋ 물론 내가 덜떨어져서 그렇겠지만 말이야! 일단 차트를 처음부터 쌩짜로 구현하고자 하는 욕망도 있지만 시간이 매우 부족해서..

[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 형태의 자료에서 검색이 불가능해. 순서를 간단하게..

[소셜차트] 앱 제작기 #15. Full Text search

Full Text Search... 뭐... 그냥 간단하게 검색 기능이야. 소셜차트 DB는 firestore인데 firestore는 검색 기능을 제공하지 않기 때문에 외부의 도움을 받아야 해. Full text search engine이라고 검색하면 많은 것들이 나오는데 firebase에서 제안하는 건 Elastic, Algolia, Typesense 이렇게 3가지야.👇 각각은 모두 firebas extension을 제공해서 비교적(?) 간편하게 full-text search를 구현할 수 있어. 가격 이 서비스들은 모두 자체 클라우드를 지원하고 있는데 이걸 사용하자니 비용이 조금 걱정되더라고. 엘라스틱은 시작이 한화로 월 10만원이 넘고;;; 초기 스타트업이 내기는 조금... 싫다규 ㅠㅠ 알골리아는 비교..

[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..

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

[소셜차트] 앱 제작기 #13. 좋아요 기능 (Distributed Counter)

하아... 누가 간단한 KiCad 알바 좀 하자고 해서 했는데;;; 2주를 날렸어... ㅠㅠ 화딱지나... 암튼 앱 개발 속행!! 좋아요! 기능은 매우 보편적이지.. 그런데 이게 은근히 짜증나... 우선 누가 좋아요를 눌렀는지 기록해야하고, 그리고 몇개의 좋아요인지도 알아내야 해. 난 firestore를 사용중이니 그걸 기준으로 하자면 단순하게 좋아요를 누른 사람을 기록하는 건 간단해. 그냥 sub collection 하나 만들고 user id를 포함한 문서를 계속 더하거나 빼면 되니까. 그런데 말이지.... 다른 DB는 모르겠지만 적어도 firestore에서는 좋아요를 카운트하는 일은 간단하지가 않아;; 왜냐하면 firestore에서 허용되는 문서 업데이트 주기가 초당 1회이기 때문이지;; 전세계에서 ..

[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 쿼리 커서로 데이터 페이지 ..

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

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

[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..

반응형