[Flutter] 플러터 반응형 디자인을 위한 글씨 크기 조절 Fitted Box, AutoSizeText, screenutil (Adjust font size for Flutter responsive design)

플러터에서 반응형 디자인을 위해 최적화된 글씨크기를 적용하는 코드를 작성해보자. 총 두 가지 방법을 준비했다. Let's write a code that applies optimized font size for reactive design in platters. I prepared a total of two methods. 

 

특히, 해당 포스팅은 flutter screenutil 라이브러리와 함께 사용하는 방법을 알려줄 것이다.

In particular, the posting will tell you how to use it with the flutter screenutil library.

flutter_screenutil:

screenutil은 디바이스의 가로와 세로에 대해 상대적인 크기를 지정할 수 있다. 플러터에서 그냥 적은 숫자는 절댓값이고, screenutil에서 사용하는 sp, w, h는 상댓값이다. 철자에서 예상해볼 수 있듯, w는 가로에 대해, h는 세로 길이에 대해 상대적이다. 

Screenutil can specify a size relative to the width and length of the device. In platters, just a small number is the absolute value, and in screenutil, sp, w, and h are the relative values. As you can expect from the spelling, w is relative to the horizontal and h to the vertical.

 

하지만 한계가 존재하는데, max값을 지정해야하는 등 screenutil과 절댓값을 유동적으로 사용해야할 때, 텍스트를 글에 맞추어야할 때 이것을 사용할 수 있다. 

But there is a limit. The limit is when you need to use screenutil and absolute values fluidly, such as specifying a max value, and when you need to fit the text into the text. Therefore, we will use the following method.

 

 

1. FittedBox 사용

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

fittedBox를 사용하면 부모 위젯의 크기에 맞출 수 있다. fit : BoxFit.contain 속성을 통해 딱 맞는 사이즈로 정해줄 수 있다. 이 때 단점은, width나 height만 지정할 경우, 글자 수에 따라 원하지 않는 결과가 나올 수 있다는 것이다. 그러므로 되도록이면 둘 다 지정해주는 것이 좋은 것 같다.

FittedBox allows you to fit the size of the parent widget. Fit: BoxFit.conain property allows you to set the fitted size. The disadvantage in this case is that if only width or height is specified, unwanted results may occur depending on the number of characters. Therefore, it would be better to designate both if possible.

 

 

2. auto_size_text 사용

auto_size_text:

pubspec 파일에 다음과 같이 명시하여 라이브러리를 다운받아, auto size text를 사용할 수 있다. 해당 라이브러리는 min과 max값을 지정해줄 수 있다. screenutil등의 라이브러리와 함께 사용하면 시너지를 낼 수 있다. screenutil는 상댓값이므로, 기기 사이즈에 따라 한없이 커질 수 있다. 하지만 이 때 절댓값으로 max값을 지정해준다면, 그 이상 커지지 않도록 설정해줄 수 있다. 

You can download the library by specifying in the pubspec file as follows, and use the auto size text. The library can specify min and max values. Synergy can be created when used with libraries such as screenutil. Since screenutil is a relative value, it may be infinitely larger depending on the size of the device. However, if you specify the max value as the absolute value at this time, you can set it not to be larger than that.

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

 

 

 

 

 

 

---

내용에 오류가 있을 경우 언제든 댓글 부탁드립니다 :)

Feel free to comment if you have a problem with the content or grammar.