[Flutter] 반응형으로 스크린 사이즈 대응하기 & 유용한 패키지

반응형으로 스크린 사이즈 대응하기

• 적용하고자 하는 곳의 Widget build() 함수 아래에 MediaQuery 클래스를 작성하기
  • 단, context로는 Material App이 상위에 있어야 함.
  • 그리고 .size 라고 하면 현재 유저 기기의 화면정보를 알려주게 된다.
  • 종류(LP 단위)
    • .width는 가로
    • .height는 세로
    • .padding.top은 상태바 윗 여백
    • .devicePixelRatio는 해상도
      • 1LP에 몇 px가 들어가는지
    • .highContrast 고대비옵션이 켜져있는지
    • .textScaleFactor 폰트 사이즈를 얼마나 키우고 사용하는지

  @override
    Widget build(BuildContext context) {
  
      MediaQuery.of(context).size.width;
  }
  

• 중요 이미지를 보이고자 할 경우
  • 해상도에 따라 다르게 보이기에 해상도 별 다른 이미지를 넣어야 한다.
  • 그래서 assets 폴더에 파일을 저장한다고 하면
    • 2.0x 폴더에 해상도가 기존의 2배인 파일을 넣어둔다고 했을 때
    • devicePixelRatio 가 1~2면 자동으로 해당 폴더에서 가져다 사용하게 된다고 한다.
    • 물론 3.0x( devicePixelRatio == 2~3 )도 마찬가지
• 사용시 편리한 라이브러리
  • auto_size_text
    • Text 위젯에서 글자가 특정 글자 수를 넘길 때 자동으로 점 3개로 생략 또는 폰트사이즈를 설정한 대로 줄일 수 있다.
    • 주소: https://pub.dev/packages/auto_size_text
  • responsive_sizer
    • width: Adaptive.w(20) 이러면 위젯의 폭을 화면 크기의 20%로 설정가능
    • TextStyle(fontSize: 15.sp)이러면 글자 크기를 화면크기에 비례해서 설정가능
    • 주소: https://pub.dev/packages/responsive_sizer
  • photo_view
    • Pinch 제스쳐라고 손가락 두 개로 사진을 줌인 할 수 있으며, 기본적인 갤러리, 캐러셀, UI도 쉽게 구현할 수 있도록 제공한다.
    • 주소: https://pub.dev/packages/photo_view
  • simple_animations
    • 애니메이션을 만들기 위한 StatefulWidget, Animation, Tween, Controller 가 모두 있는 위젯 패키지
    • 주소: https://pub.dev/packages/simple_animations
    • 예시: https://github.com/felixblaschke/simple_animations/blob/main/example/example.md#stateless-animation
  • flutter_launcher_icons
    • 설치시 뜨는 앱 런처 아이콘을 바꾸고 싶으면 사이즈별로 필요한데 터미널 명령어 하나로 생성할 수 있다.
    • 패키지 설치 후 큰 아이콘 용 파일 하나 준비 후 터미널 명령하면 끝.
    • 주소: https://pub.dev/packages/flutter_launcher_icons
  • get
    • 플러터 문법을 매우 쉽게 바꿔준다.
      • 페이지 네비게이션
      • 다이얼로그, 스낵바
      • Provider 기능
      • shared_preference 기능
      • 간단한 번역기능
      • 유저가 입력한 데이터 Validation
    • 주소: https://pub.dev/packages/get
  • shimmer
    • shimmer 이펙트를 넣을 수 있다.(로딩시 효과?)
    • 주소: https://pub.dev/packages/shimmer
  • flutter_staggered_grid_view
    • 사이즈가 다양한 GridView 만들 때 사용하면 편리
    • SliverGrid로는 만들 수 없음.
    • 주소: https://pub.dev/packages/flutter_staggered_grid_view
  • lottie
    • 애니메이션 효과있는 JSON 파일을 플러터에서 재생해준는 패키지
    • 주소: https://pub.dev/packages/lottie
    • 예시: https://xvrh.github.io/lottie-flutter-web/#/
  • pull_to_refresh
    • 위, 아래로 당기면 코드를 실행해주는 위젯 제공
    • 주소: https://pub.dev/packages/pull_to_refresh
  • fl_chart
    • 이쁜 차트 제공
    • 주소: https://pub.dev/packages/fl_chart
  • flutter_background_geolocation(유료)
    • 폰이 대기상태일 때도 백그라운드에서 계속 위치 추적해주는 패키지
    • 주소: https://pub.dev/packages/flutter_background_geolocation
  • font_awesome_flutter
    • 유명한 Font Awesome 5버전 아이콘 사용 가능
    • 주소: https://pub.dev/packages/font_awesome_flutter
  • flutter_secure_storage
    • shared_preference와 동일한데 암호화해서 저장해줌
    • 주소: https://pub.dev/packages/flutter_secure_storage