Flutter 오토스케일링 설정

플러터로 배포를 하다보면 내핸드폰에서는 잘보이는게

옆에있는 애한테는 화면이 작아서 겁나크게 보일때가 있다.

작은해상도에는 작게스케일링 해서 보여주면 딱좋겠는데

요즘에 이런 작은해상도처리는 뭐랄까

반응형이다 뭐다 해가지고 부트스트랩 처럼 해상도에따라

small mid large xlarge 등에따라서 배치가 바뀌는 스타일로

많이 유도되곤했다..  근데 한편으로 이런생각도든다.

그냥 작게 보여지면 안되냐??

그 고민을 플러터 쓰는 사람들도 했겠지.. 

몇일 찾아다니다가 기막힌 디펜던시를 찾았다

바로바로

responsive_framework   이놈이다!!

이놈이 대단한것이 해상도에따라 어떨때는 스케일링으로 

어떨때는 반응형으로 이렇게 분리처리 할수있게 도와준다.

호오!! 요즘 Flip이나 멀티테스킹이 뭐니해서 창을 따로내고

뭐이러면서 작은해상도에따른 처리가 아주 짜증났다.

아이폰도 미니 뭐 이런거 나오면서 아주 작은 해상도로 난리도 아니다

이제 이런 개ㅈ만한 디바이스에서도 이런고민없이

자동스케일링이 되는것이다~ 붸리굿~

스키아엔진으로 랜더링하니까 작게 스케일링되는게 문제가 

안될거 같은데.. 라고 생각했었지..

사용법:

먼서 pubspec.yaml 파일에서 디펜던시 추가

responseive_framwork: ^

그리고 main함수가 있는 dart파일의 MaterialApp 이나 CupertinoApp의

빌드메서드에서  (당연히 GetMaterialApp된다.. ㅋㅋㅋ)

다음처럼 기술한다.

return MaterialApp(

    builder: (context, child) => ResponsevieWrapper.builder(
        ClampingScrollWrapper.builder(context, child!),
        defaultScale: true,
        breakpoints: [
            ResponsiveBreakpoint.resize(420, name:MOBILE),
            ResponsiveBreakpoint.autoScale(800, name:TABLET),
            ResponsiveBreakpoint.reszie(1200, name:DESKTOP),
            ResponsiveBreakpoint.autoScale(2400, name:'XL'),
        ]
    ),
    //아래쪽 불라불라
);

내용은

1~419까지는 스케일 420~799까지는 사이징 800~1199까지는 스케일
1200~2399까지는 사이징 2400이상은 스케일이다.

여기서 스케일이 퍼센트로 줄어드는 거고 사이징이 반응형이라고 생각하면된다.

요로코롬 사용하면된다. 그리고 이프레임워크에 반응형 콜롬이라던가 이런 위젯도
있고 ScrollWrap 모드도 여러개가 있다.. 물론 기본만하려면 위와같이 하면되는데
그외에 스케일이 되면서 특정구간에 반응형으로 바뀌면서 어쩌구 ~
하는 디테일을 녹여내고 싶다면 좀더 연구해서 적용하면된다.

어쨌든 아주좋고..  

음..  이거 없었으면 어떡할뻔 했냐..