Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
Tags
- spring
- 백준
- Java
- JPA
- python
- 스프링부트
- springboot
- 자바스크립트
- Oracle
- 스프링 부트 쇼핑몰 프로젝트 with JPA
- postgresql
- 네트워크
- 리눅스
- CS
- 스프링
- 파이썬
- backjoon
- CS지식
- 데이터베이스
- 플러터
- Spring Security
- 자료구조
- baekjoon
- 데이터
- DB
- 자바
- Flutter
- javascript
- 프로그래머스
- 시큐리티
Archives
- Today
- Total
Jin's Dev Story
[Flutter] 반응형 스크린 사이즈 본문
현재 기기의 스크린 사이즈 출력하고 싶은 경우
MediaQuery.of(context).size.width; //폭 (LP단위)
MediaQuery.of(context).size.height; //높이 (LP단위)
MediaQuery.of(context).padding.top; //기기의 상단바 부분 높이 (LP단위)
MediaQuery.of(context).devicePixelRatio; //이 기기는 1LP에 픽셀이 몇개 들어있는지
화면 폭에 따라 위젯을 다르게 보여주고 싶은 경우
MediaQuery.of(context).size.width < 600
? Home()
: 큰화면에서보여줄다른위젯()
화면 폭에 따라 스타일 변경하고 싶은 경우
Text(
'글자임',
style: TextStyle(
fontSize: MediaQuery.of(context).size.width > 600 ? 30 : 16,
)
)
→ 함수로 빼도 됨
(class들 바깥 아무데나)
fontsize1(c){
if (MediaQuery.of(c).size.width > 600){
return 30;
} else {
return 16;
}
}
Text(
'글자임',
style: TextStyle(
fontSize: fontsize1(context),
)
)
⇒ 한 번에 모든 글자를 스타일주고 싶다면 ThemeData() 안에 넣으면 됨
→ Theme() 위젯으로 감싸면 중간에 ThemeData()를 하나 만들 수 있는데 거기에 넣어도 됨
스타일 변경 라이브러리
- auto_size_text
- Text 위젯에서 글자가 특정 글자 수를 넘을 때 자동으로 점 3개로 생략하거나, 폰트 사이즈를 설정한 대로 줄일 수 있음
- reponsive_sizer
- width: Adaptive.w(20) 이러면 위젯의 폭을 화면크기의 20%로 설정 가능
- TextStyle(fontSize: 15.sp) 이러면 글자크기를 화면크기에 비례해서 설정 가능
⇒ 근데 글자사이즈는 이렇게 하면 너무 큰 화면에선 글자가 너무 커져서 직접하는게 낫다.
assets 이미지도 해상별로 준비
- 이미지 넣고 싶으면
- assets 폴더에 넣고 pubspec.yaml 파일에 등록하고 Image.asset() 여기서 사용
- assets안에 2.0x 폴더랑 3.0x 폴더 만들고 거기에 똑같은 이미지를 넣음→ MediaQuery.of(context).devicePixelRatio가 1~2면 2.0x에 있는 이미지를 씀
- → MediaQuery.of(context).devicePixelRatio가 2~3이면 3.0x에 있는 이미지를 씀
- assets/my_icon.png assets/2.0x/my_icon.png assets/3.0x/my_icon.png assets/4.0x/my_icon.png
'Web & Android > Flutter' 카테고리의 다른 글
[Flutter] 팝업 버튼 (0) | 2023.10.17 |
---|---|
[Flutter] 유용한 패키지들 (0) | 2023.09.23 |
[Flutter] notification 알림 주는 법 (1) | 2023.09.23 |
[Flutter] GridView, CustomScrollView 프로필 페이지 만들기 (0) | 2023.09.23 |
[Flutter] Provider : store 여러개 & GET 요청 (0) | 2023.09.23 |