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 |