Search
▪️

Responsive & Adaptive User Interfaces and Apps

MediaQuery allows to fetch information about the device orientation, measures, user settings etc
MediaQuery.of(context).size.height을 통해서 전체 화면의 크기를 확인할 수 있다.
0.6곱 0.4곱으로 1크기 만큼이면 Scroll 불가해야하는데 여전히 Scrollable하다. 이는 AppBar 계산을 하지 않았기 때문이다. 이 때, AppBar 계산해서 빼줬는데도 여전히 Scrollable하다. 이는 StatusBar 계산을 하지 않았기 때문이다.
** AppBar: appBar.preferredSize.height
** StatusBar: MediaQuery.of(context).padding.top
Text의 사이즈도 TextScaleFactor을 통해서 얼만큼의 scale이 필요한지 알 수 있다.
** MediaQuery.of(context).textScaleFactor
Main 화면에 차지하고 있는 depth_level 1의 responsive height를 구했으면, 그 다음 depth_level에 대해서도 구해줘야 한다. 이 때 사용하는 것이 LayoutBuilder이다.
LayoutBuilder(builder: ,)
constraints라 함은 0 < height / width < infinity이다.
constraints.maxHeight * 0.x
0.x의 합은 1이 되어야 한다.
MediaQuery가 Device에 대한 정보를 줬다면, LayoutBuilder는 Widget에 적용할 수 있는 Contraints들을 줄 수 있다.
Padding 처리
top
MediaQuery.of(context).viewInsets.top + x
bottom
MediaQuery.of(context).viewInsets.bottom + x
left
MediaQuery.of(context).viewInsets.left + x
right
MediaQuery.of(context).viewInsets.right + x
final mediaQuery = MediaQuery.of(context)도 길어지는 코드에 대해 관리할 수 있는 좋은 기법이다. (생성자를 계속 호출 하지 않아도 되기 때문에 효율적이기도 하다.)
Flutter가 아닌 Dart에서 이용하고 있는 target platform을 detect할 수 있다.
import ‘dart:io’;를 해준다. (dart의 모든 import들이 들어가 있다.)
Platform.isIOS 와 같이 check한다.
platform 구분하고 나서 appbar 설정 시, PreferredSizeWidget 타입을 명시 해야 한다. (삼항 연산자로 넣으면 dart는 두 케이스에 대해 타입을 추론할 수 없다.)
platform 전환 시 AppBar와 Body에 대해 바꿀 게 많은데 바꾸고 나서 height의 값이 안 먹는 곳이 있을 수 있다. (top notch와 bottom app drawer task manager때문에 말이다.) 이는 body를 SafeArea로 감싸면서 해결할 수 있다.
화면을 Rotation 했을 때에 대한 처리를 하거나 Rotation을 불가능하게 만들어야 Responsive의 기본 충족할 수 있다.
Rotation 지원할 때는 if문이나 Switch Widget을 통한 처리 필요하다.
Rotation 지원 없을 때는 다음과 같은 과정들이 필요하다.
1.
import 'package:flutter/services.dart'
2.
main 문에 SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitUp,]); 를 추가한다.
** Widget Initialization 관련 Binding Error가 나타난다면 WidgetsFlutterBinding.ensureInitiailized(); 를 main 문에 추가한다. 이를 처릴 해줘야 하는 이유는 Widget이 Binding된 previously created instance를 리턴 받고 System Chrome이 되어야 하기 때문이다. (System Chrome을 적용하기 위해선 instance가 미리 필요한 것이다.)