[Flutter]반응형 앱, flutter_screenutil vs responsive_framework

앱을 만들다 보면, width, height를 고정값으로 설정할 경우 

장비가 달라 질때마다 오버플로우가 발생하거나, 한쪽으로 치우쳐지는 경우가 종종 발생한다. 

이를 해결하기 위해서 반응형앱을 만들어야하는데 

플러터 라이브러리중에  flutter_screenutil 라는 라이브러리가 이를 손쉽게 구현할 수 있다는 것을 알게 되었다. 

 

flutter_screenutil | Flutter package

flutter_screenutil 말고도 

responsive_framework | Flutter package

 

하지만 flutter_screenutil이 likes 수가 많다. 

그래서 고민은 이 2개의 라이브러리 중 어떤 것을 선택해야할지 모르겠다였다.

이를 비교해보기로 했다. 

1. 기능성

flutter_screenutil

• 크기 조정: 위젯의 크기, 패딩, 마진, 폰트 크기 등을 반응형으로 설정할 수 있습니다.
• 편리한 사용: w, h, sp, r 등의 단위를 사용하여 코드에서 직관적으로 크기를 지정할 수 있습니다.
• 다양한 화면 크기 지원: 다양한 기기의 해상도와 화면 크기에 맞춰 자동으로 조정됩니다.

responsive_framework

• 브레이크포인트 기반 레이아웃: 미디어 쿼리와 유사하게 브레이크포인트를 설정하여 레이아웃을 조정할 수 있습니다.
• 유연한 레이아웃 변경: 특정 화면 크기에서 위젯의 배치를 변경할 수 있습니다.
• 페이지 스케일링: 전체 페이지의 스케일링을 지원하여 화면 크기에 맞게 전체 UI를 조정합니다.

2. 설정 및 사용 편의성

flutter_screenutil

• 설정: 비교적 간단한 설정으로 시작할 수 있습니다.
• 사용법: 크기 조정을 위해 코드에 직접 w, h, sp, r 등을 사용하여 명시적으로 설정합니다.
• 코드 유지보수: 각 위젯의 크기를 개별적으로 조정하므로 코드가 길어질 수 있습니다.

responsive_framework

• 설정: 브레이크포인트를 설정하고 래퍼 위젯을 사용하여 레이아웃을 조정합니다.
• 사용법: 레이아웃 전체에 적용되는 설정을 통해 UI를 조정하므로 코드가 깔끔해질 수 있습니다.
• 코드 유지보수: 브레이크포인트 기반으로 설정하면 코드의 유지보수가 용이해집니다.

3. 성능

flutter_screenutil

• 성능: 위젯 크기 조정이 단순하기 때문에 성능에 큰 영향을 미치지 않습니다.
• 효율성: 각 위젯의 크기를 개별적으로 조정하므로 효율적일 수 있습니다.

responsive_framework

• 성능: 브레이크포인트와 전체 페이지 스케일링을 사용하여 성능에 약간의 영향을 미칠 수 있습니다.
• 효율성: 브레이크포인트를 통해 레이아웃을 한 번에 변경할 수 있어 효율적일 수 있습니다.

4. 확장성 및 커스터마이징

flutter_screenutil

• 확장성: 프로젝트 규모가 커질수록 각 위젯에 크기 조정을 적용하는 것이 번거로울 수 있습니다.
• 커스터마이징: 개별 위젯의 크기를 세밀하게 조정할 수 있습니다.

responsive_framework

• 확장성: 브레이크포인트를 설정하여 레이아웃을 조정하므로 프로젝트가 커지더라도 관리가 용이합니다.
• 커스터마이징: 전체 레이아웃을 한 번에 조정할 수 있으며, 특정 화면 크기에서만 변경할 수 있습니다.

5. 프로젝트 요구 사항

• 프로젝트의 복잡성: 단순한 레이아웃 조정만 필요한 경우 flutter_screenutil이 더 적합할 수 있습니다. 반면, 복잡한 레이아웃 변화가 필요한 경우 responsive_framework가 더 나을 수 있습니다.
• 팀의 선호도: 팀이 선호하는 방식이나 기존에 익숙한 방식에 따라 선택할 수 있습니다.
• 미래의 확장성: 프로젝트가 커질 것을 예상한다면 브레이크포인트 기반의 responsive_framework가 더 적합할 수 있습니다.