두잇뚜의 블로그

최근 크로스 플랫폼에 대한 관심이 많아지고 있다. 그 중에서 가장 관심이 높았던 것은 Flutter와 Kotlin Multiplatform Mobile(KMM)이었다. Flutter는 3.0 이후, 벌써 3.7 버전이 릴리즈 되었다. (이 마저도 시간이 꽤 지났다.) https://medium.com/flutter/whats-new-in-flutter-3-7-38cbea71133c What’s new in Flutter 3.7 Material 3 updates, iOS improvements, and much more! medium.com 그만큼 구글에서도 크로스 플랫폼에 대한 지원을 아낌없이 하고 있다고 봐도 될 것 같고, 그에 따라 여러가지 기업에서도 Flutter를 도입하는 사례가 늘고 채용공고도 ..

앱 개발을 할 때 Firebase는 뗄레야 뗄 수 없는 훌륭한 도구다. Firebase는 많은 도구가 있지만, Firestore는 그 중에서도 정말 유용하게 사용된다. 백엔드를 구축하기 어려운 상황에서 손쉽게 클라우스 데이터베이스를 사용할 수 있기 때문이다. 현재 진행중인 Flutter 프로젝트에서 Firestore 사용이 필요하기 때문에, 연동 과정을 정리한다. 먼저 터미널에서 아래 커맨드로 cloud_firestore 패키지를 추가한다. flutter pub add cloud_firestore 패키지 추가가 완료되었으므로, Firestore에 접근할 객체를 얻어야 한다. 놀랍게도 굉장히 간단하다. 아래 코드로 객체를 얻는다. db = FirebaseFirestore.instance; 이제 객체를 사용..

지난 포스팅에서 Firebase Hosting 배포를 위한 프로젝트와 CLI 설정을 마쳤다. 이를 기반으로 Flutter 프로젝트를 Firebase Hosting에 배포해보자. 1. Flutter 프로젝트 생성 본인이 사용하는 운영체제와 IDE를 사용해서 Flutter 프로젝트를 생성한다. 지금은 Firebase Hosting에 배포하는 것이 목적이므로 기본으로 생성되는 프로젝트로 충분하다. 적당히 프로젝트 이름과 설명을 작성한다. 플랫폼은 이 포스팅에선 Web만 선택해도 충분하다. 다른 플랫폼이 필요하면 추가하면 되기도 하고. 2. Flutter 프로젝트에 Firebase 설정 Flutter 프로젝트와 Firebase를 연동하기 위해선 간단한 설정이 필요하다. Firebase 프로젝트 콘솔로 이동하여 ..

Flutter가 Web을 지원하기 시작한지도 꽤 되었다. 최근 여러모로 Web이 있으면 유용할 것 같아서 이것저것 알아보고 있었는데, 모바일 개발자로써 React 같은 웹 프레임워크를 배우는 것은 좀 그랬다. 언어부터 시작해서 익숙치 않다보니..? 하지만 Flutter라면 얘기가 다르지. Flutter 3.0이 배포된 이후로 회사에서도 관심도가 높아졌고, Google의 Fuchsia도 수면위에 올라오기도 하고, Flutter의 장점들 때문에 찾는 기업도 많아지고 있다. 그래서 기술적 트렌드를 따라가기 위해 나도 관심이 꽤 가고 있는 상태. 이 상태라면 Flutter도 익숙해질 겸, Web 개발 해보자! 가 된 상태. 아무튼 그래서, Flutter로 개발한 Web을 Firebase Hosting에 올려보기..

go_router? Flutter 공식 유튜브의 Package of the Week에서, Flutter 라우팅 패키지인 go_router가 소개되었다. Flutter 공식 유튜브의 Package of the Week에서, Flutter 라우팅 패키지인 go_router가 소개되었다. go_router는 URL 기반의 API를 사용하여 화면들을 편리하게 탐색할 수 있는 선언적 라우팅 패키지이며, URL을 사용하여 네비게이션과 딥링크와 같은 네비게이션 관련 처리를 할 수 있다고 소개하고 있다. 제공하고 있는 기능으로는 다음과 같다. "user/:id" 와 같은 구문으로 경로와 쿼리 매개변수 분석 목적 경로에 대해 여러 화면 표시 Redirection을 지원한다. 앱의 상태에 따라 사용자를 다른 URL로 다시..

Flutter 2.0 버전이 릴리즈된지 1년 정도 지난 지금, Flutter 3.0이 릴리즈 됐다. 구글에 flutter를 검색하면 "Announcing Flutter 3" 가 나타난다. Google I/O를 통해 Flutter 3에 대해 알아보라고 한다. "Announcing Flutter 3" 페이지로 이동하여 조금 내리면, 위와 같은 글을 읽을 수 있다. 유튜브 혹은 미디움에서 자세한 내용을 확인하라는 내용이다. 살짝 언급된 내용을 보면, 다음과 같다. 1. macOS, Linux 지원 2. Flutter/Firebase 완전 지원 3. Apple Silicon 지원 4. 그리고 더 많은 것들. 1, 2번을 보고 정말 Flutter가 크로스 플랫폼을 지배하겠구나 생각이 들면서도, 정말 저렇게 많은 ..

이전 포스팅에서 다양한 Widget들을 배치하기 위해 Row와 Coulmn을 다뤄보았다. Row, Column에 많은 Widget을 배치하게 되어 화면을 넘어가게 되었을 때, 스크롤이 되지 않고 잘리는 모습을 확인할 수 있다. 이번 포스팅은 많은 Widget을 리스트 형식으로 배치하고 스크롤이 가능한 Widget인 ListView에 대해 알아 볼 것이다. 1. ListView를 생성하는 4개의 방법 우선, ListView를 생성하는 방법은 4개이다. ListView ListView.builder ListView.separated ListView.custom 이 포스팅에서 다룰 것은 1~3번의 방법이며, 4번은 Delegate란 개념이 포함되어 있어 추후 포스팅으로 미루겠다. 1번은 명시적으로 ListVi..

Flutter는 Widget으로 앱의 화면을 구성한다. Flutter는 데이터 또는 상태를 Widget으로 표현하는 어플리케이션이라고 보면 될 것 같다. (지극히 개인적인 이해) Widget은 크게 StatelessWidget과 StatefulWidget으로 나뉘며, Flutter 프로젝트를 생성하면 자동으로 만들어지는 main.dart를 보며 가볍게 이해해보도록 하겠다. 여기서 프로젝트 생성 시 작성되어 있는 주석은 모두 삭제하였다. 1. main.dart의 void main()과 MyApp void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. ..