[Flutter] flutter_screenutil 패키지 알아보기

flutter_screenutil

screenutil은 화면 및 글꼴 크기를 조정하기 위한 플러터 플러그인입니다.
표준 화면의 크기를 설정하고 UI를 구성하는 값을 표시하면 다른 크기의 화면에 자동으로 적절한 레이아웃이 됩니다.

이 라이브러리는 앱을 다양한 크기의 기기에 쉽게 적용할 수 있도록 만들었습니다. 

또한, 이 라이브러리는 앱 디자인 번호를 쉽게 신청할 수 있게 해줍니다. -> 디자이너와의 그만 싸우세요.

 

Principle of screenutil

이 function으로 표준 화면 크기와 위젯 크기를 설정하면 앱이 실행되는 단말기 화면 크기 비율에 따라 비율을 계산하고 위젯 크기를 제공합니다. 이것은 MediaQuery와 동일한 빙식입니다. 
또한 main function은 모바일 OS에서 제공하는 글꼴 크기 변경 기능을 무시하고 글꼴 크기를 설정합니다.

 

아래는 flutter_screenutil 패키지를 사용한 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter_ScreenUtil',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PracticeScreenUtil(),
    );
  }
}

class PracticeScreenUtil extends StatefulWidget {


  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<PracticeScreenUtil> {
  @override
  Widget build(BuildContext context) {

	// Set the fit size based on the size of the 360*690(dp)
    ScreenUtil.init(context, designSize: const Size(360, 690));

    return Scaffold(
      appBar: AppBar(
        title:Text('Screen Util')
      ),
        body:Center(
            child:Column(
              children: [
                Container(
                  width: 100,
                  height:100,
                  color: Colors.blue,
                  child:Text(
                      'hello',
                      style:TextStyle(
                          color: Colors.black,
                          fontSize: 15
                      )

                  ),
                ),
                Container(

				// Set width based on width of fit screen size 
                  width: ScreenUtil().setWidth(100),

				// Set height based on height of fit screen size 
                  height:ScreenUtil().setHeight(100),
                  color: Colors.red,
                  child:Text(
                      'hello',
                      style:TextStyle(
                          color: Colors.black,
                          fontSize: 15.sp
                      )

                  ),
                ),
                Container(

				// Set width based on width of fit screen size
                  width: 100.w,

				// Set height based on height of fit screen size
                  height:100.h,
                  color: Colors.yellow,
                  child:Text(
                      'hello',
                      style:TextStyle(
                          color: Colors.black,

						// Set a fontsize based on screen size. 
                          fontSize: ScreenUtil().setSp(15)
                      )

                  ),
                ),

              ],
            )
        ),

    );
  }
}

Code Result

https://pub.dev/packages/flutter_screenutil

flutter_screenutil | Flutter Package