플러터로 SNS어플 만들기 5. font 적용하기

오늘은 너무나도 딱딱한 글씨체를 좀 바꿔줄꺼에요.

 

그래서 메인페이지의 앱바에 텍스트로 레터링 로고를 넣으려고합니다.

 

이렇게 바꿔줄꺼에요.

 

 

 

 

오늘 작업할 내용

 

1. 구글폰트 다운로드

 

2. font 폴더만들기

 

3. yaml파일설정

 

4. 적용

 

5. 전체테마 글씨체변경

 

 

 

1. 구글폰트 다운로드

 

우선 저는 구글 폰트를 다운받았는데, 제일만만한게 구글폰트입니다.

 

구글에 그냥 검색어에 구글폰트 라고 치시고 여기로 들어갑니다.

 

 

자기가 원하는 글자를 여기 빨간 동그라미 부분에 치시고 원하는 미리보기를 한번 찾아보세요.

사각형으로 뜨는거는 영어전용인가? 한글은 지원안하나봐요.

그리고 원하는걸 클릭합니다.

 

 

 

저기 Download family 누르면 다운로드가 진행되요.

그리고 압축을 풀어주세요.

그리고 압축이 풀리면 ttf 파일을 이동시킬거에요.

 

 

2. font 폴더만들기

 

저번에 assets이라는곳에 image폴더를 만든거처럼 font 라는 폴더를 만들어줍니다.

fonts라고 적어도되고 asdfjasfe라고 적어도 되고 폴더명은 자기마음대로 해도 되나, 일반적으로 상식적으로 생각할수있는 범위에서 적어주시면 좋습니다. 

 

압축풀면 ttf 파일이 나오죠? 그걸 저렇게 옴겨주세요.

 

그리고 pubspec.yaml 파일로 갑니다.

 

3. yaml파일설정

 

저번에 assets 할때와 마찬가지로 여기도 띄어쓰기 유의해서 잘적어주세요

family에 들어가는 이름은 자기가 지정하는건데 그냥 글씨체 진짜 이름 적어주세요.

 

그리고 경로를 잘적어줍니다.  저기 파란네모박스처럼요.

 

 

4. 적용

 

그럼이제 메인페이지 앱바로 와서

appbar 타이틀에 아래처럼 적어줍니다.

 

 

 

그리고나서 조금 꾸며볼게요

 

 

네 타이틀을 가온대로 만들고, 앱바를 흰색으로 주고 타이틀색깔을 검정색으로 줫어요.

 

떠혀니그램 글자와 홈스크린입니다. 라는 글자가 다르죠?

이렇게 한개한개 지정해줄수도 있고,

 

앱전체의 폰트를 지정해줄수도 있어요.

 

그거 살짝 해볼게요.

 

 

5. 전체테마 글씨체변경

 

main.dart 로와서 앱최상단을 감싸는게 머티리얼 앱 이잖아요

거기다가 테마를 저렇게 주면됩니다.

그러면 글씨가 다 바껴요.

요건 테마적용부분은 다른대도 쓰이는게 있겟죠? 전체 테마바꿔야할때?

뭐 예를들면 나이트모드 테마로 바꾸는거처럼

 

그럼 오늘은 여기까지 할게요~!

 

 

-----------------공지-------------------

23년 버전 앱강의를 오픈했습니다. 관심있으신분은 클릭 ㅋㅋ

2023.07.29 - [코딩생초보를 위한 플러터 빠르게 한바퀴] - 1. create project

1. create project

개인과외 문의 saran.flutter@gmail.com