플러터 responsive_framework 라이브러리 v1.0 변경사항

자동스케일링을 지원하던 플러터의 responsive_framework가 

v1.0을 맞이하여 큰수정에 들어갔다..
당황할수 있으니 정리를 해둔다.

builder: (context, child) => ResponsiveWrapper.builder(

        ClampingScrollWrapper.builder(context, child!),

        defaultScale: true,

        breakpoints: const [

          ResponsiveBreakpoint.resize(420, name:MOBILE),

          ResponsiveBreakpoint.autoScale(800, name:TABLET),

          ResponsiveBreakpoint.resize(1200, name:DESKTOP),

          ResponsiveBreakpoint.autoScale(2400, name:'XL'),

        ],

      ),

위에꺼가 기존

아래꺼는 신규 v1.0 이후

      builder: (context, child) => ResponsiveBreakpoints.builder(

        child: Builder(

          builder: (context) {

            return ResponsiveScaledBox(

              width: ResponsiveValue<double>(

                context,

                conditionalValues: [

                  Condition.equals(name: MOBILE, value: 400),

                  Condition.equals(name: TABLET, value: 600),

                  Condition.equals(name: DESKTOP, value: 800),

                  Condition.equals(name: '4K', value: 800),

                ],

              ).value,

              child: child!,

            );

          },

        ),

        breakpoints: const [

          Breakpoint(start: 0, end: 450, name: MOBILE),

          Breakpoint(start: 451, end: 800, name: TABLET),

          Breakpoint(start: 801, end: 1920, name: DESKTOP),

          Breakpoint(start: 1921, end: double.infinity, name: '4K'),

        ],

      ),

음 내생각에는 이 프레임웍을 사용하는 이유는 리사이즈 보다는 스케일링이 주요하다.

따라서 브레이크포인트를 4개를 정의를 했으니까 각각의 사이즈에 맞는 스케일링을 

처리해주면 된다.

중요한 포인트는 conditionalValues 배열인데

여기서 모바일은 너비값이 400으로 간주하고 스케일링

테블릿은 너비값이 600으로 간주하고 스케일링

데스크탑과 그이상은 너비값이 800으로 간주하고 스케일링 

하라는 뜻이다.

물론 빌더 속성에서 SafeArea를 설정해줘서 처리해야 하는 부분까지 포함하려면

그럴수도 있다.  이때는 ResponsiveBreakpoints.builder를 SafeArea로 감싸야한다.