아기개발자의 성장일기

저의 웹은 정적 페이지이고 깃헙 호스팅을 이용하고 있습니다. [1] 종종 사파리에서 흐리게 나올 때가 있음 (크롬에서는 안그런 듯) [2] 종종 텍스트 스타일이 설정 해준 것과 다르게 나오는 경우가 있음 이것은 html 렌더러를 사용했을 때 주로 발생했던 것 같습니다. (html 렌더러 몇번, canvaskit 렌더러 몇번 이렇게 정량적으로 테스트를 안했어서 정확하지는 않아요!) [3] 웹 > PDF 내보내기 짤림 이슈 리포팅 함. html, canvaskit 렌더러 둘다 그렇다고 테스트 해주심. https://github.com/flutter/flutter/issues/91671#issuecomment-942055373 [Proposal] Support Print Web app To PDF from t..

Build and release a web app 문서를 봐주면 됩니다. 문서의 목차는 아래와 같은데요! 웹에서 이미지 처리 웹 렌더러 선택 축소 출시를 위한 앱 빌드 웹에 배포 저는 간단한 웹이여서 이미지 처리 / 렌더러 선택 / 축소를 건너뛰고 릴리즈 빌드 & 배포만 해보겠습니다! 웹은 Image를 표시 하는 표준 위젯을 지원합니다. 그러나 웹 브라우저는 신뢰할 수 없는 코드를 안전하게 실행하도록 구축되었기 때문에 모바일 및 데스크톱 플랫폼과 비교하여 이미지로 수행할 수 있는 작업에는 특정 제한이 있습니다. 문서에 위와 같이 적혀있는 부분은 일단 배포해보고 보려고 합니다. (+ 저는 로컬 이미지 하나 사용하는 데 별 문제 없었습니다) [1] 출시를 위한 앱 빌드 아래 명령을 사용해서 배포용 앱을 빌드..

다양한 스타일이 혼합된 텍스트를 쓰고 싶을 때 RichText 위젯을 사용해주면 됩니다. 예를들어 아래 예제처럼 중간 텍스트에만 볼드 처리를 하고 싶을 때 사용합니다. RichText는 TextSpan 으로 구성된 트리로 이루어집니다. 문서의 예제처럼 Hello의 children으로 bold랑 world를 두기 싫으면 이렇게 할 수 도 있습니다. UI는 똑같이 구성됩니다. RichText( text: TextSpan( children: [ TextSpan(text: 'Hello '), TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)), TextSpan(text: ' world!'), ]) ) [ 추천 ] 다양한 Use Case를 ..

package:flutter/foundation.dart 안에 있는 describeEnum 를 이용하여 enum value의 short description 을 구할 수 있습니다. 즉 아래 예제에서 처럼 'Day.monday' 가 아니라 'monday' 를 구할 수 있다는 뜻! [ 실 사용 예제 ] enum Language { KOR, ENG } enum value를 뷰(CupertinoSegmentedControl)에 그대로 뿌리고 싶을 때 사용해주었습니다! (Language.KOR 이런 식으로 뷰에 보여지면 안되니까..) import 'package:flutter/foundation.dart'; int _segmentedIndex = Language.KOR.index; Map _segments() {..

[ Flutter Web Support ] Flutter 2.0 릴리즈 노트 > Flutter web support hits the stable milestone 을 보면 Flutter 2.0 부터 stable channel 에 web support가 가능해졌습니다! (2021년 3월에 Flutter 2.0 나왔어요) same codebase로 앱(iOS, 안드로이드) 뿐만 아니라 웹도 배포할 수 있습니다! web support를 지원하는 초기 릴리즈는 세가지 시나리오에 포커스를 맞추고 있습니다. 1. Progressive web apps (PWAs) : 웹의 범위를 데스크톱 앱의 기능과 결합하는 점진적 웹 앱 2. Single page apps (SPAs) : 한 번 로드되고 인터넷 서비스와 데이터를..

플러터 버전 업그레이드 글에서 해준 것은 맥에 설치된 flutter SDK 버전을 업데이트한 것입니다. 해당 Flutter SDK를 flutter SDK path로 참조하고 있는 다른 프로젝트들도 모두 같은 플러터 버전을 쓰게 되겠죠? 그럼 프로젝트 별로 다른 버전을 쓰고 싶다면 어떻게 해야할까요? (파이썬 가상환경처럼 아주 간단하고 깔끔하게 프로젝트별로 다르게 환경을 설정할 수 없는 것 같습니다.... 🥲) [1] 배경지식 > pubspec file의 Dart, Flutter SDK 버전 제약 조건 - 문서: https://dart.dev/tools/pub/pubspec#sdk-constraints # Dart SDK constraints pubspec.yaml 의 네모친 부분은 Dart SDK의 버전..

Upgarding Flutter 문서 에 해당하는 내용입니다. [1] 배경지식 > channels Flutter는 네가지 release channels 을 가집니다. (stable, beta, dev, master) 그래서 Flutter SDK releases 를 보면 각 채널별로 버전 리스트가 있습니다. Upgrading Flutter 문서를 보면 stable 채널을 사용하기를 권장하고 있고, 아래 명령어로 현재 나의 채널을 찍어보면 stable로 나오는 것을 보아 디폴트값이 stable 인것 같습니다. flutter channel [2] Upgrading the Flutter SDK and packages Flutter SDK와 너의 앱이 의존하고 있는 패키지들을 모두 업데이트하려면 너의 app의 r..

Version constraints 문서를 보면 버전 제약 조건을 caret syntax (^1.2.3) 또는 traditional syntax ('>=1.2.3 =1.2.3 =1.2.3 =0.1.2

Developing packages & plugins 문서를 보고 flutter package를 만들고 pub.dev 에 publish 해보겠습니다. [1] 패키지 구성요소 package의 최소 구성요소로는 - pubspec.yaml 파일 (package name, version, author 등이 명시되어있는 파일) - lib 디렉토리 (코드 모음) 가 있습니다. [2] 패키지 타입 패키지 타입에는 두 종류가 있는데요 - Dart Pacakage - Plugin Pacakage Dart Packacage는 단순히 Dart 파일만 제공하는 패키지 입니다. 보통 유틸리티 함수들을 패키지로 제공하거나 플랫폼 별 분기가 필요없는 파일을 제공하고 싶을 때 사용하는 것 같습니다. Plugin Package는 Fl..

Marquee Widget 만들기 (1) - alternate 에서 이어지는 글입니다. 이 글에서는 1번 타입 (계속 한방향으로 흘러가는 Marquee) 을 만들어본 것을 기록합니다. 참고로 Marquee는 flutter package가 이미 몇개있는데, text 하나만 받을 수 있게 구현되어있더라구요,, 저는 이미지 + text로 된 list를 받을 수 있는 위젯으로 만들어보려고 합니다. text만 scroll하기 원하신다면 이미 잘되어있는 package를 쓰시기를 추천드립니다. [1] 코드 이렇게 Marquee 위젯을 만들어주고 앱에서 테스트 해봅니다. [2] 코드 설명 이전 글의 alternate marquee와 다른 점은 build 메소드와 scroll 메소드 밖에 없는 데요 이거 위주로 살펴보겠..