Flutter에서 sp, dp 사용하기

[Flutter]

Hevton 2023. 4. 21. 13:43

안드로이드에서는 절대적인 픽셀값(px) 대신 논리적인 크기(sp, dp)를 사용한다.

Flutter에서 기본적으로 있지는 않지만 라이브러리를 통해 이를 구현할 수 있다.

dependency에 다음을 추가한다.

responsive_sizer: ^3.1.1

그리고 MaterialApp()을 이렇게 감싸주기만 하면 된다.

ResponsiveSizer( 
  builder: (context, orientation, screenType) {
    return MaterialApp(
      home: HomePage(),
    );
  },
);

그리고 여태 넣던 숫자들을 이렇게 해주면 된다.

fontSize: 17.sp

화면 비율 기준으로의 설정도 가능하다.

ex) 15.w = 가로 15%

내가 진행해본 결과 여기서 dp는 사용하기가 좋지 않은 것 같다.

그래서 나는 텍스트 사이즈 뿐 아니라 너비 높이도 sp를 사용하고 있다.