[Flutter] 반응형 글씨 크기 조절

앱 개발을 하다보면 font-size를 고정값으로 뒀을 때 디바이스마다 화면 크기가 달라 화면마다 글씨 크기가 다르게 나오게 된다.
그래서 플러터에서 반응형 디자인을 위해 글씨 크기 최적화가 필요하다.

그래서 두가지 방법의 라이브러리를 사용할 것이다.

flutter_screenutil

1. 설치

• pubspce.yaml에 flutter_screenutil를 추가

dependencies:
  flutter_screenutil: ^5.9.3

• pub get 하기

2. 코드 작성

• screenutil은 디바이스의 가로와 세로에 대해 상대적인 크기를 지정할 수 있다.
• screenutil에서 사용하는 sp, w, h는 상댓값이다.

SizedBox(
  width: 38.w, height: 20,
  child: FittedBox(fit: BoxFit.contain, 
    child: Text(userNickName, style: TextStyle(color:Colors.grey, fontSize: 18.sp, )),
  ),
),

auto_size_text

1. 설치

• pubspce.yaml에 auto_size_text를 추가

dependencies:
  auto_size_text: ^3.0.0

• pub get 하기

2. 코드 작성

AutoSizeText(title,
  maxFontSize: 25,
  style: TextStyle(
   fontSize: 20.sp, 
   fontWeight:FontWeight.bold, 
   color: Colors.black, 
  ), 
  textAlign: TextAlign.left, 
),