# Flutter Web

31개의 포스트
post-thumbnail

Flutter Web 개발일지(1) - 커스텀 폰트 적용하기

백만년만에 다시 시작하는 주인장의 블로그 쓰기입니다. 모든 개발자들이 그러하듯이 새로운 기능을 개발하는 것은 좋아하지만 이를 글로 쓰려하는 것은 너무나 귀찮아하고 싫어하죠. 그러다보면 이전에 힘들게 구현했던것도 시간이 지나면 잊게 되어 또 상당수의 시간을 소모하게 되죠 이러한 실수를 되풀이 하지 않게 하기 위해 이제부터 기록을 남겨 보려 합니다. 주인장!!! 아는 척 그만하시고, 그래서 뭐를 얘기 해주실건가요? Flutter Web에 대해 개발을 하며 경함하고,알게 된 내용들을 정리해보려 합니다. 그 첫번째 주제로는 Custom Font 적용하는 방법입니다! "응? 그걸 왜 다뤄요? 그건 그냥 pubspec.yaml에 정의하면 되는거 아니에요?" 네.. 당연히 맞습니다! 하지만 Flutter에서 지원하지 않는 폰트를 적용해야 하는 요구가 발생했을 경우에는요? (바로 제가 그런 경험을 했습니다...) ![](https://velog.velcdn.com/images/gunwng

2023년 9월 14일
·
0개의 댓글
·
post-thumbnail

[Flutter Web] 트래픽에 대해서

생존코딩 사이트를 플러터로 클론하여 배포하였다. 처음으로 과금이 되었다. 700메가면 내가 월 500원씩 주고 사용하는 cafe24 의 한달 허용 트래픽 800메가에 육박한다. 뭔가 잘 못 되어가고 있다는 생각이 든다. 빌드된 폴더 용량이 50메가 정도 되었다. 한글 폰트 안 깨지게 하려고 폰트 6개 넣은 것 삭제 png, jpeg 을 webp로 변환하여 7메가 까지 줄였다. 배포하고 추이를 살펴보자.

2023년 9월 1일
·
0개의 댓글
·

[Flutter] Web에서 GestureDetector 와 InkWell 의 차이

GestureDetector : 마우스 오버시 커서 그대로 InkWell : 마우스 오버시 커서 변경됨

2023년 8월 29일
·
0개의 댓글
·

[Flutter] Web에서 GestureDetector 와 InkWell 의 차이

GestureDetector : 마우스 호버시 커서 그대로 InkWell : 마우스 호버시 커서 변경됨

2023년 8월 29일
·
0개의 댓글
·

[Flutter] web 주소 뒤에 # 제거하기

원인 Flutter 웹의 경우 기본으로 주소 뒤에 # 이 붙는다. 해결 다음 페이지에 해결 방법이 있음 https://docs.flutter.dev/ui/navigation/url-strategies

2023년 8월 16일
·
1개의 댓글
·
post-thumbnail

[Flutter] Web에 컬러 이모지 사용

웹 이모지 Flutter 웹은 기본적으로 흑백 이모지가 적용됨 Flutter 3.10 릴리즈 노트 확인 기존 Noto Emoji 가 Noto Color Emoji 로 변경되어 있음 적용 방법 기본 설정을 수정할 수 있음 https://docs.flutter.dev/platform-integration/web/initialization web/index.html에 컬러 이모지 설정 추가 적용 후 컬러로 잘 나옴. 하지만 새로 로딩시 잠시동안 깨진 글자로 보이는 이슈가 남아 있음. 일단 무시 ![](https://velog.velcdn

2023년 8월 6일
·
0개의 댓글
·
post-thumbnail

[Flutter] Web 최초 로딩시 한글 깨짐 해결

생존코딩 홈페이지 운영비 절감으로 Flutter Web으로 재작성 중 한글 깨짐 웹페이지 로딩시 잠시동안 한글이 다 깨진다. 스샷 찍기 힘들어서 패스. 1초쯤 후에 제대로 나옴 원인 Flutter 에 한글 폰트가 없어서 그런 듯 GoogleFonts 라이브러리 여기도 한글로 된 게 없음 Noto Sans KR 폰트 설정 한글 폰트를 직접 설정하기로 함 Google Fonts 사이트에서 Noto Sans KR 폰트를 다운로드 폰트 복사 폰트 설정 추가 pubspec.yaml 에 폰트 설정 추가 테마

2023년 8월 5일
·
1개의 댓글
·
post-thumbnail

[Flutter web] url 링크에 # 빼기

Flutter Web # > Flutter Web을 빌드하면 링크에 #이 껴있음. 상당히 거슬리는... 실제로 호스팅 서버에 빌드 코드를 올려도 domain.com/#/ 이런 식으로 설정되어서 url path가 좀 이상하게 됩니다. 해결방법 > 두 가지 해결법이 존재합니다. > >1. flutterwebplugin 을 쓰는 방법 flutterwebplugin설정으로 # 없애는 튜토리얼 이 영상 추천해유... >2. url_strategy 를 쓰는 방법 근데 url_strategy 이게 훨씬 편해유... > >flutterwebplugin 을 쓰게 되면 mobile app

2023년 8월 4일
·
2개의 댓글
·
post-thumbnail

단어 암기 앱

이번에 정보처리기사 시험을 보고 약 1주일이 조금 넘게 지났습니다. 가채점 결과는 합격이지만 시험 전 날 밤새 공부하고 시험을 봤었고 정신이 반 쯤 나가버린채로 풀어서 결과가 나오기 전 까지는 모르겠습니다.. 이번 시험의 후기는 아예 모르겠는 문제 3문제 정도 빼고는 난이도 자체가 엄청 어렵다고 느끼지는 않았지만 풀고 나오니 실수한 문제만 4문제가 보여서 멘탈이 많이 힘들었습니다. 다행히 운좋게 반 쯤 찍어서 맞은 문제도 한 두문제 보여 가채점 했을 때는 조금 안도했던 시험이었습니다. 그래도 아직 불안하네요.. 결과 발표일인 9월 1일까지는 불안할 것 같습니다. 저는 원래 공부할 때 쓰면서 공부하는 것이 너무 귀찮아서 보통 컴퓨터로 타이핑해서 정리하고 그것을 외우는 방식을 자주 했었는데 이게 정리한 것을 보고 외우다보면 A단어 다음 B단어가 나오는것을 이미 알고 있어서 이게 외워진건지 안외워진건지 감도 안오고 자체적으로 테스트 해볼때도 A단어를 보려다 B단어까지 보게되어 자체적

2023년 8월 2일
·
1개의 댓글
·
post-thumbnail

[Flutter] Flutter Web Naver Maps JavaScript API v3 연동

시작하기에 앞서 네이버 지도 API v3는 Flutter에서 IOS와 Android는 플러그인과 WebView를 이용해 사용할 수 있지만, 플러그인이 웹 환경을 지원하지 않아 네이버 지도를 띄울 수 없습니다. Web Dynamic Map 서비스가 있지만, JavaScript로만 작동해서 Flutter에서 바로 사용할 수가 없습니다. 하지만 IFrameElement를 이용하면 웹 환경에서도 네이버 지도를 사용할 수 있게 됩니다. 이번 포스트에서는 API 사용 설정부터 웹 환경에서 네이버 지도 사용하는 방법까지 작성해보겠습니다. API 사용 설정 > https://www.ncloud.com/product/applicationService/maps > 네이버 지도 API 이용 신청하기 및 결

2023년 3월 9일
·
3개의 댓글
·

GitLab CI Flutter Web 적용기

개요 환경 : Flutter/Web , vultr server , GitLab 주 최소 1회 빌드 업무를 반복하며 최소 10분 이상 드는 빌드 업무를 없에고자 GitLab CI를 통해 버전 관리와 빌드 업무 자체를 푸시와 함께 진행하도록 설정 하였습니다. GitLab CI GitLab CI 는 .gitlab-ci.yml 파일을 활용해 파이프라인 개념으로 진행 됩니다 > 파이프라인 이란 build-test-deploy-cleanup등 이어지는 작업들을 의미합니다. 직접 작성한 ci.yml파일 stages 파이프라인을 구성하는 방법 stages: 각 단계를 의미하며 위에서 아래로 순차적으로 진행됨 각 동작에서 stage: value 를 통해 순서 지정이 가능 도커이미지 image: "cirrusci/f₩lutter:latest" # 사용할 도커 이미지 도커 이미지는 https://hub.docker.com/ 사이트에서 필요한 언어, 버전에 해당하는

2022년 12월 30일
·
0개의 댓글
·

Django와 Flutter web 결합시 발생하는 문제

친구와 같이 사이드 프로젝트를 하던 도중 Django를 이용해 Flutter을 띄워 사용자에게 보여줄 일이 생겼다. 위와 같이 사용한다고 해서 적용해 본 결과 첫번째 문제가 발생했다 루트는 사용하는 페이지가 별도로 존재하기 때문에 과 같은 느낌으로 바꿔야했고 이렇게 바꿀시 127.0.0.1:8000/app 으로 접근하면 index.html은 찾아지는데 flutter.js와 같은 스크립트, 에셋 등은 index.html에서 127.0.0.1:8000/flutter.js과 같은 방식으로 접근해서 Django path의 'app/'에 걸리지 못해 flutter_redirect를 타지 못한것이다 이 문제를 해결하기 위해서는 index.html에서 base를 href="/app/"와 같이 바꾸거나 flutter web 빌드시 flutter build web --base-href "/app/" 이와같이 진행하면 해결된다 AWS의 Lambda에 올릴시에

2022년 12월 28일
·
0개의 댓글
·
post-thumbnail

Firebase flutter-web hosting 하기

Flutter로 만들어진 web 소스를 firebase hosting을 사용해 호스팅 해보기 사전 준비 환경 android studio(혹은 vscode) IDE에서 flutter(dart) plugin 세팅 신규프로젝트 생성 > 코드 수정 > firebase 설정 > 호스팅 순으로 진행할 것이다. 1. Flutter 프로젝트 생성 Android Studio를 이용하여 신규 flutter 프로젝트를 만든다. https://blog.yena.io/studynote/2020/02/04/Android-Flutter-Install.html (studio에 flutter plugin 설치 참조) 신규 Flutter 프로젝트 선택 Flutter project 세팅 (SDK 경로 세팅 확인) ![](

2022년 12월 14일
·
2개의 댓글
·

[flutter web] ios에서 font 글꼴 적용이 안되는 문제

을 한 뒤 firebase 에 배포하였는데 안드로이드 폰 인터넷에선 폰트까지 잘 적용이 되었는데 아이폰에서 폰트가 적용이 되지 않는 문제점을 발견. [해결방법] 웹을 빌드할때 랜더링을 canvaskit 으로 랜더링 해주면 된다고 한다. 저렇게 웹을 다시 빌드 후 재 배포하였더니 깔끔하게 해결되었다. canvaskit 과 html 의 차이점을 알고싶다면? https://bigstar-vlog.tistory.com/77 [참고처] https://stackoverflow.com/questions/72644930/google-notosans-font-not-displaying-correctly-on-ios-in-flutter-web-app

2022년 11월 22일
·
0개의 댓글
·
post-thumbnail

[Flutter Web]google_maps 구글 지도 사용하기

Flutter Web에서 Google_Maps 사용하기 바로 시작하겠습니다. https://pub.dev/packages/googlemapsflutter https://pub.dev/packages/googlemapsflutter_web 이렇게 두가지 패키지 설치 해주시고 lib/web/index.html에 들어가서 물론 그전에 구글 개발자센터에서 키 발급 받아서 - https://developers.google.com/maps mykey에 넣어주시면 > 웹이었다면 바로 됐을 텐데.. 당연히 될거라 생각 했지만

2022년 10월 28일
·
0개의 댓글
·

[Flutter WEB]

목적 플러터 웹 namedrouting 시에 404에러가 발생하는 에러 해결 방법 문서화 내용 에러 내용 www.homepage.com 으로 접속 시에는 접속이 가능하지만 www.homepage.com/home 으로 접속 시에 404 에러가 발생하였음 새로고침을 방지할 위젯을 stf 위젯으로 변경하고 위와 같은 코드를 작성하여서 해결하였음. 결과 굿

2022년 10월 14일
·
0개의 댓글
·
post-thumbnail

[Flutter web] Flour 패키지로 라우팅하기

0. 기존에 사용하던 라우팅 방식 웹에서 화면 전환시에 앱과 같은 애니메이션이 보인다면 꽤나 낯설게 느껴질 것이다. 그러나 Named Route로의 화면 전환에서는 애니메이션을 설정해줄 수가 없었다. 정확하게 말하자면 transitionDuration: Duration(seconds: 0) 이 코드를 추가해줄 수 없었다. 바로 이 방식 말이다. 프로젝트 개발 초기단계라 뒷 일은 미래의 나에게 맡겨두었다. 코드, 일단 잘 돌아가면 된다. -과거의 나- 하지만 아주 치명적인 문제를 발견했다. 새로고침시 웹 초기 화면으로 진입 딥링크 불가 어딜가도 /#/ 주소만 뜬다. ![](https://images.velog.

2021년 12월 9일
·
0개의 댓글
·
post-thumbnail

[Flutter web] nginx에 수정본 올리기

배포만 하면 끝난게 아닌가요? 네 아닙니다. 수정을 해야합니다 선생님. 수정한걸 nginx에 올려놔야 한답니다. 저는 두 개의 폴더를 만들어주었습니다. 1번 플젝 파일 2번 build 폴더 3번째 폴더는 삭제를 안해준 것 뿐... 가 들어가있습니다

2021년 11월 1일
·
0개의 댓글
·
post-thumbnail

[Flutter web] 배포하기 (nginx 설정+EC2 인스턴스 생성)

0. AWS에서 EC2인스턴트 생성하기 1 단계: Amazon Machine Image(AMI) 선택 -> 우분투 서버 선택 2 단계 : 인스턴스 유형 설정 -> 저 같은 경우는 c4선택 나머지는 별도의 선택없이 넘어갔습니다 1. 키체인 생성하기 키 페어 -> 생성할 인스턴스 선택하고 키 페어 생성 누르기 ![](https://images.velog.io/images/513sojin/post/9ec43cdf-5025-4800-afdc-

2021년 10월 17일
·
0개의 댓글
·
post-thumbnail

개인 프로젝트 - Coolors 클론 진행상황(07/28)

1.개인 프로젝트 진행상황 > > 어제의 목표 팔레트 화면에서 ViewModel 제작하여 기능 구성하기 로그인시 보여지는 위젯 마무리(아이콘 클릭했을때 나오는 위젯도 정리) 오늘의 달성률은 40%정도 되는것 같다. 2번째 목표는 시작도 못하였고 ViewModel 구성에 많은 시간을 할애했다. 1,3,4번째 아이콘이 클릭이 되었을 경우에 대한 기능을 구현을 하였고 3,5번 아이콘에 대한 기능을 아직 구현하지 못하였다. 2. 프로젝트 진행에 따른 소회(?),반성,다음 구현 목표 > 어제 프로젝트 진행도에 대한 글을 따로 작성을 하지 않았다. 어제는 해당 프로젝트의 ReadMe파일을 작성하였다. 프로젝트의 결과만큼이나 해당 파일이 중요하다고 생각하였기 때문이다. R

2021년 7월 28일
·
0개의 댓글
·