🐋 Flutter

개요서버용 라즈베리파이에 Code-Server를 설치한 후 코딩에 대한 제약 사항이 많이 개선되었다.아이패드에서 내 개인 Code-Server로 접속하여 NodeJS API 구현을 하는 등, 개발 취미에 대한 자유도가 많이 높아졌다. (디스코드 봇도 code-server를 통해 성공적으로 구현 완료). Code-Server 만세!!!!요즘에 Flutter Web을 통해 이런저런 실험을 진행하고 있는데, Flutter Web도 Headless-server를 근본으로 포트를 구성하여 Chrome이나 기타 브라우저에서 디버그가 가능하게 구현이 되어있는 듯했다.근데 이 녀석, 만약 외부에 접근할 수 있는 환경이라면, Code-Server를 통해서도 충분히 Flutter 개발이 가능하다면 어떨까?라는 생각이 들어..

1) 개요 플러터를 입문한 지 어느덧 3년 차가 되어간다. 그동안 상태관리툴로써 Provider를 가장 많이 사용해 왔었지만 언젠가는 Deprecated 된다는 Provider의 창시자의 말에 충격을 받게 되었다. 다른 상태관리툴을 익혀야 될 때가 된 것 같아 알아보던 도중 GetX와 BLoC에 눈을 들이게 되었는데 GetX의 경우엔 10개월째 패키지 업데이트가 이뤄지지 않고 있고 BLoC패턴의 경우는 간단한 프로젝에 어울리지 않으며 난이도가 어렵기 때문에 마지막으로 Provider의 계승자인 RiverPod을 알게 되었다. RiverPod 은 Provider의 철자에서 순서만 바뀐 단어이며 Provider에서 컴파일러 중에 발생하는 오류, 여러 문제점들을 최대한 개선하여 RiverPod으로 배포가 되었..

최근에 토이프로젝트로 진행 중인 Flutter Web 사이트의 버전을 바꾸게 될 일이 생겨 업데이트를 하려 하는데 문제가 생겼다. 최신버전을 반영한 이후 Flutter web의 빌드파일을 서버에 적용을 한 후 접속을 해보는데 캐시 된 이전 페이지가 그대로 보이는 것이다. 문제를 확인해 보니 플러터 웹은 main.dart.js를 가져오게 되는데 이 파일은 자바스크립트 파일이다 보니 갱신을 하려면 쿼리를 파라미터를 추가하여 버전을 올려줘야 신규 main.dart.js를 웹브라우저에서 인식을 하고 가져오는 것이다. 그럼 해결방법을 적어보도록 하겠다. 1.Flutter Web을 빌드한다 (flutter build web --web-renderer canvaskit --release) 2. 이후 빌드된 폴더에 이..

몇 시간 동안 삽질해서 겨우 알아낸 오류 하나를 잡게 되었다. 원인은 Flutter의 외부 dependency인 flutter_sounds를 사용하려고 추가를 한 다음 IOS에서 빌드를 하려 하는데 deploy버전이 안 맞는 등 각종 오류가 폭발하다가 flutter clean 또는 IOS 폴더를 통째로 지우고 flutter create . 를 쓰는 방법을 해봤다. 물론 해결은 안 됐다. 그리고 최종적으로 직면한 오류가 Undefined symbol: ___gxx_personality_v0 인데 Xcode 내에서 빌드를 하여도 동일한 문제가 발견되었던 것을 보았다. 구글에 여기저기 찾아보니 깃허브에서 해결방법을 올려준 것을 보았고 M1 맥북에서 자주 발생하는 오류로 보였다. IOS buildSetting에..

이번에 사용자 정보를 담는 위젯을 꾸미고 있었는데 한 가지 문제가 발생했다. Row안에 Text를 넣었는데 글자 수가 너무 많을 경우 잘리는 현상이 발견했던 것이다. Text속성에 overFlow 옵션을 적용해주는 방법을 사용하려 했지만, 이 방법은 부모 위젯의 사이즈가 지정되어야 잘리는 현상을 해결할 수 있는 것 같았다. 그래서 찾은 방법이 Flexible을 알게 되었다. Row나 Column 위젯에서 남은 자리를 전부 채우도록 설정하는 위젯인데, 아래 코드처럼 Flexible을 부모로서 감싸주면 해결이 가능하다. Row( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( '이름:'..

이번에 FutureBuilder를 구현하면서 한 가지 문제를 발생했다. snapshot.hasData 와 snapshot.hasError를 구현하는데 Future 함수에서 오류가 발생하면 hasError로 넘겨 오류 상태를 표시하도록 하려고 했다. 그런데 hasData는 잘 불러와도 hasError는 작동이 안 되던 것이다. 찾아보니 StackOverflow에서 나랑 비슷한 사례를 발견했다. 아래 코드가 나와 같은 케이스이다. try { var response = await http.get(url); // Success if (response.statusCode == 200) { [...] } // Failure else { return Future.error("Error"); } } catch (e) ..