모바일 개발

이제 플러터를 이용하여 웹까지 지원을 하고 웹에 맞게 최적화까지 끝났으면 배포를 해서 전세계에서 자랑할 차례입니다 무료로 호스팅을 해줄수 있는곳 중 가장 인기 있는 서비스는 크게 두가지입니다. firebase hosting github pages 이 글에서는 firebase를 이용해서 hosting하는 법을 알려드리겠습니다 시작하기 전에 현재 프로젝트가 웹을 지원하도록 설정해주세요! (만약 안되어있으면 여기 참고해주세요) 먼저 Firebase CLI 부터 설치를 합니다 터미널에서 npm install -g firebase-tools 을 실행합니다 더보기 만약 npm도 안깔려있다면 (맥 사용자라면) brew install node 를 실행해서 설치해줍니다 firebase --version 명령어를 통해 제..

플러터가 2.0으로 업데이트가 되면서 본격적으로 웹을 지원하게 되었습니다. 이 글에서는 기존 플러터 프로젝트에 웹을 지원하도록 하는 방법을 배워볼게요 준비 사항은 자신이 진행하고 있던 플러터 프로젝트 (물론 새로운 프로젝트를 만들어서 사용해도 됩니다) 플러터 2.0 버젼 (만약 이전 버젼이면 여기서 업그레이드하는 법을 알 수 있습니다) 먼저 터미널에서 프로젝트 최상위 프로젝트로 이동합니다 명령어 flutter create . 를 쳐줍니다 조금만 기다리면 web 폴더가 생성되었음을 볼 수 있습니다! 이제 ide에서 device를 chrome으로 선택해주고 run을 하면 해줍니다 콘솔 창에 다음과 같이 뜰 것입니다. 처음으로 앱을 만들 때는 시간이 조금 걸립니다 그리고 크롬이 열리면서 프로젝트가 실행된 것을..

먼저 현재 설치되어있는 flutter sdk의 버젼을 확인해봅니다 터미널에 다음 명령어를 칩니다. flutter --version 저의 경우에는 1.22 버젼이었습니다 한국 기준으로 3월4일에 플러터는 2.0 버젼이 출시되었습니다 해당 버젼으로 업그레이드를 하는 방법은 정말 간단합니다 flutter upgrade 을 쳐주시고 조금만 기다리면 설치가 완료되었습니다! 혹시 모르니 flutter --version 을 한 번 더 쳐보면 정상적으로 업데이트가 된 것을 볼 수 있습니다. 플러터 2에는 어떠한 것을 할수있을까요?? 가장 매력적으로 느껴지는 기능은 웹 지원이라고 생각합니다! 기존 프로젝트에 웹 지원을 설정하는 방법은 여기서 볼 수 있습니다

첫 번째로는 가장 많이 이용하게 될 flutter inspector를 한번 알아보겠습니다 예시로 사용할 앱은 역시나 기본 프로젝트인 counter 앱인데요 살짝만 다듬었습니다. 기존의 텍스트를 길게 만들어주고, row로 감싸주고, 왼쪽에는 아이콘을 하나 넣어줬어요 딱히 의미가 있는건 아니고 디버깅을 할 때 더 많은 예시를 보여주기 위해서 UI 요소를 더 넣어봤어요 Row( children: [ Icon( Icons.play_arrow, size: 50, ), Text( '만약에 길어지면 어떻게 해야할까? 글씨가 짤리지는 않을까???! 약간 걱정되네요', ), ], ), 자! 그러면 devtools를 열어줘야하는데 먼저 디버깅 모드로 앱을 실행할게요 (저는 VS Code를 쓰는데, 안드로이드 스튜디오도 거..