반응형
늦을 수록 힘든 작업은 다국어 작업, font 작업, color 공통화 등이 있는거 같다.
늦을 수록 고쳐야 하는 것들이 마른 미역 한봉지 물에 넣은 것 만큼 늘어 난다....
Flutter 프로젝트에 원하는 폰트 적용하기
요약
1. 사용할 폰트를 프로젝트 내로 위치 시킨다.
2. .yaml 파일에 폰트를 정의한다.
3. 폰트를 사용한다.
우선 사용할 폰트를 다운 받고 프로젝트 내에 위치 시킨다.
assets > font 폴더를 만들고 (option : 원하는 폴더를 만들어도 된다. )
fonts: 부분의 주석을 해제한다.
.yaml 파일은 띄어쓰기에 민감하기 때문에 주석 해제후 사용하면 띄어쓰기에 신경 쓰지 않아서 좋다.
상대 경로를 복사하여
pubspec.yaml 의
family 이하 부분을 아래 처럼 수정한다.
asset: 파일의 위치
style: italic // italic 이라면
weight : 폰트 weight
폰트 사용하기
TextStyle(
fontSize: 16,
fontFamily: 'Manrope',
fontWeight: FontWeight.w700,
)
적용하기
Text(
"어떤 font를 적용 하는 것이 가장 좋을까요? \n 你好 こんにちは Hola ! \n 기본",
style: TextStyle(
fontSize: 16,
),
),
Text(
"어떤 font를 적용 하는 것이 가장 좋을까요? \n 你好 こんにちは Hola ! \n Manrope w200",
style: TextStyle(
fontSize: 16,
fontFamily: 'Manrope',
fontWeight: FontWeight.w200,
),
),
Text(
"어떤 font를 적용 하는 것이 가장 좋을까요? \n 你好 こんにちは Hola ! \n ",
style: TextStyle(
fontSize: 16,
fontFamily: 'Manrope',
fontWeight: FontWeight.w700,
),
),간단하게 적용 완료!
pubspec.yaml
- family: 이름이 꼭 폰트 이름이어야 하는 걸까?
nope
이렇게 파일이름, 혹은 폰트 이름이 아니라도 가능하다.
family 에는 TextStyle에서 사용할 이름을 정의하면 된다.
한글 적용 가능한 폰트라면 변경되고 아니면 기본 폰트로 적용된다.
그렇다면 어떻게 프로젝트에 간단하게 적용할 수 있을까?
ThemeClass 에 미리 정의해두고 사용할 수 있다.
* theme 사용시 const 위젯 내부 사용 불가!
textTheme: const TextTheme(
headline1: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontSize: 16,
fontFamily: 'Gowun',
fontWeight: FontWeight.w600,
),
headline2: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontSize: 16,
fontFamily: 'Gowun',
fontWeight: FontWeight.w400,
),
),적용하기
Text(
"어떤 font를 적용 하는 것이 가장 좋을까요? \n 你好 こんにちは Hola ! \n ",
style: Theme.of(context).textTheme.headline1,
),theme 수정시 hotReload 혹은 재빌드 해야 확인 가능하다.
반응형