Flutter Web Study

김민진·2022년 3월 24일
0

개발공부

목록 보기
5/9

Flutter Web 학습을 통해 배운 내용을 정리해 보았다.

(Cache 삭제)[https://developers.kakao.com/tool/clear/og]

카카오에서 캐시 삭제를 지원해주어서 이용하고 있다.

OG TAG

해당 태그를 통해서 미리보기 등의 이미지를 바꾸어주었다.

	<link rel="icon"  href="favicon.ico"/>
    <meta property="og:image" content="icons/192x192.png"/>

위의 방법으로 메인아이콘을 변경해주었고
아래의 방법을 통해서 서브아이콘? 미리보기 아이콘? 의 이미지를 변경 해 주었다.

처음에는 URL만 등록이 가능한 줄 알았는데 프로젝트 경로를 작성해주니 변경이 가능했다.

 <meta name="description" />

부분을 통해서는 미리보기 등의 설명이 바뀌었고

<title> "" </title>

부분을 통해서는 url 이름이 바뀌었다.

build 부분에 직접 타이틀을 넣어주어도 된다.


  Widget build(BuildContext context) {
    return MaterialApp(
      title: "title",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'noto_sans_kr',
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

웹 빌드시 렌더러 모드가 존재한다.

  1. auto
    사용할 렌더러를 자동으로 선택해준다. 앱이 모바일 브러우저에서 실행시에는 html모드
    데스크탑 브라우저에서 실행할 경우에는 canvaskit 모드로 변환해준다.
  2. html
    항상 html모드를 사용한다. 성능보다 다운로드 크기를 최적화 하는 경우에 해당 옵션을 선택한다.
  3. canvaskit
    항상 완벽한 성능과 완벽한 필섹 일관성을 우선시 한다면 선택한다.

경험해보니 html은 각 모바일마다 폰트가 서로다르다. 아이폰 se 기종에서는 폰트가 볼드체로 나와버리고 아이폰 12 급 기종에서는 폰트가 여리여리해서 깨지고...

그래서 canvaskit으로 실행했더니 아이폰에서는 동일한 폰트와 사이즈로 나온다

하지만 갤럭시는 별개로 봐야할 것 같다. 어떠한 모드던지 동일하게 지혼자 독특한 폰트로 나온다

profile
dart,c#,java 개발자! 잡다하게 해서 문제될게 없다!

0개의 댓글