Flutter Package Sizer

2023. 10. 25. 08:49·Flutter
728x90

Package
Sizer : 다양한 화면 크기 (해상도)에 맞게 UI를 자동으로 저정해 주는 패키지입니다.

Sizer 사용법
▶ MainPage.dart (Sizer 패키지를 적용할 파일)에 SizerUtil.init() 메서드를 추가합니다.
▶ 반드시 LayoutBuilder 와 OrientationBuilder 사용해야 합니다.
▶ 코드는 MainPage 클래스 안에 있는 build() 메서드의 코드를 수정합니다. 
▶ Scaffold() 메서드를 감싸는 형태로 수정합니다.

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      return OrientationBuilder(
        builder: (context, orientation) {
          SizerUtil().init(constraints, orientation);
          return Scaffold(
            /*... 코드 생략 ...*/
          );
        },
      );
    },
  );
}


▶ Sizer 파라미터는 다음과 같습니다.
.h 화면 너비의 입력된 %만큼 차지
.w 화면 높이의 입력된 %만큼 차지
.sp 텍스트 크기를 %만큼 적용

▶ 기존 너비, 높이 입력 부분에 맞는 파라미터를 입력해 주면 %만큼 적용됩니다.


Sizer 코드 적용
▶ 기존에는 적용될 사이즈를 기입했다면, Sizer는 %만큼 적용되기 때문에 수정이 필요합니다.

Container(
//width: 312.0,
//height: 180.0,
// 아래는 Sizer 코드 적용
width: 73.0.w,
height: 19.5.h,
),



▶ 텍스트도 동일한 방식으로 적용하면 됩니다.

Text(
'Text Title : New Year!',
style: TextStyle(
fontFamily: 'Gill Sans',
//fontSize: 30,
// Sizer 코드 적용
fontSize: 21.0.sp,
color: const Color(0xffffffff),
),
textAlign: TextAlign.left,
),

 

728x90
LIST

'Flutter' 카테고리의 다른 글

Flutter - 컬렉션 타입  (2) 2023.11.01
Flutter - 문자열 처리  (3) 2023.11.01
StatefulWidget의 LifeCycle(생명주기)  (2) 2023.09.19
생성자와 널 세이프티 이해하기  (0) 2023.07.22
Flutter Setstate ?  (0) 2023.07.18
'Flutter' 카테고리의 다른 글
  • Flutter - 컬렉션 타입
  • Flutter - 문자열 처리
  • StatefulWidget의 LifeCycle(생명주기)
  • 생성자와 널 세이프티 이해하기
Mr. Joo
Mr. Joo
  • Mr. Joo
    삽질의 시작
    Mr. Joo
  • 전체
    오늘
    어제
    • 분류 전체보기 (216) N
      • Flutter (70)
      • Android (9)
      • Swift (5) N
      • React (11)
      • 인공지능 (4)
      • CS (10)
      • 개발 뉴스 (104) N
      • IT 기기 (1)
      • 알면 유용한 정보 (2)
  • 인기 글

  • 태그

    react
    Dart 기초
    기술
    개발
    이슈
    플러터
    DART
    기술 뉴스
    앱개발
    앱
    앱 개발
    오늘의 기술 뉴스
    오늘의 개발 뉴스
    오늘의 뉴스
    Flutter
    오늘의 이슈
    개발 이슈
    뉴스 모음
    개발 뉴스
    뉴스
  • 최근 댓글

  • 최근 글

  • 250x250
  • hELLO· Designed By정상우.v4.10.3
Mr. Joo
Flutter Package Sizer
상단으로

티스토리툴바