flutter_screenutil plug
flutter screen adaptation scheme, so you can show reasonable layout of the UI on different screen sizes!
Note : This plugin is still in the development stage, some API might not be available.
Installation depends:
Check out the latest version before installing
# Add dependent flutter_screenutil: ^ 0.5 . . 3
In place of use of each import packages:
import 'package:flutter_screenutil/flutter_screenutil.dart';
Attributes
| Attributes | Types of | Defaults | description |
|---|---|---|---|
| width | double | 1080px | The width of the device design draft units px |
| height | double | 1920px | The height of the apparatus design draft units px |
| allowFontScaling | bool | false | Whether to set the font size is scaled to the "font size" accessibility system |
Initialization and set adaptation size and font size to be scaled according to whether the "font size" accessibility system
Before using, please set the width and height of good design draft, passing design draft of the width and height (in px) certain page setup (ie import documents, can be set once) in MaterialApp the home in order to ensure that each using the previously set a good adaptation size:
// fill in the design draft device screen size // Default width: 1080px, height: 1920px, allowFontScaling: to false ScreenUtil.instance = ScreenUtil.getInstance () .. the init (context); // if the draft design is based iPhone6 the sized (750 * 1334 of iPhone6) ScreenUtil.instance ScreenUtil = (width: 750 , height: 1334 of ) the init .. (context); // set the font size is scaled to the "font size" accessibility system defaults to false ScreenUtil.instance ScreenUtil = (width: 750 , height: 1334 of , allowFontScaling: to true ) .. the init (context);
use:
Adaptation size:
Incoming design draft px Size:
The screen width is adapted width: ScreenUtil.getInstance().setWidth(540),
According to the height of the screen adaptation height: ScreenUtil.getInstance().setHeight(200),
It may be used ScreenUtil() alternatively ScreenUtil.getInstance(), for example:ScreenUtil().setHeight(200)
note
According setWidth height adaptation can do to ensure that no deformation (when you want a square of the time)
setHeight method is to be adapted in height, at the same time you want to control the use of the actual height of the display on a screen in the UI.
// Initialization sized ScreenUtil.instance ScreenUtil = (width: 750 , height: 1334 of ) the init .. (context); Print ( ' pixel density devices: $ {} ScreenUtil.pixelRatio ' ); Print ( ' equipment is high: ScreenUtil.screenHeight} {$ ' ); Print ( ' the device width: ScreenUtil.screenWidth $ {} ' );
Adaptation font:
Incoming design draft px Size:
// passed font size, default is not scaled according to "font size" option auxiliary systems (allowFontScaling can be set at initialization ScreenUtil) ScreenUtil.getInstance (). SetSp ( 28 ) // Incoming font size, according to the system "font size" option to zoom in aid (if one does not follow the global allowFontScaling place settings) ScreenUtil (allowFontScaling: to true ) .setSp ( 28 ) // for Example: Column ( crossAxisAlignment: CrossAxisAlignment.start, Children: <Widget> [ text ( ' my text size on the design draft is 25px, will not change with the scale text system ' , style: TextStyle ( Color: Colors.black, fontSize:. ScreenUtil.getInstance () setSp ( 24- ))), Text ( ' My text size is in the design draft 25px, will change with the scale text system ' , style: TextStyle ( Color: Colors.black, fontSize: ScreenUtil (allowFontScaling: to true ) .setSp ( 24- ))) , ], )
Other related api:
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例
ScreenUtil.getInstance().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil.getInstance().scaleHeight // 实际高度的dp与设计稿px的比例Complete demo sample code:
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter_ScreenUtil', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'FlutterScreenUtil Demo'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { //Provided adaptation size (screen size the device is filled design draft) If the design draft is designed iPhone6 sized (750 * 1334 of iPhone6) ScreenUtil.instance ScreenUtil = (width: 750 , height: 1334 of ) the init .. (context ); Print ( ' width of the device: ScreenUtil.screenWidth $ {} ' ); // device width Print ( ' height of the device: ScreenUtil.screenHeight $ {} ' ); // device height Print ( ' pixel density devices: $ { } ScreenUtil.pixelRatio ' ); // Device Pixel Density Print ( ' the bottom of the safe areas from: $ {} ScreenUtil.bottomBarHeight DP ' ); //Safe Zone Distance Bottom, Suitable for Buttons with Full Screen Print ( ' Status Bar Height: $ {} ScreenUtil.statusBarHeight DP ' ); // the Status bar height, Will BE IN AREAS OF COMMUNICAITIONS Unit of Notch PX Print ( ' DP and the actual width of the design draft the ratio px: $ {ScreenUtil.getInstance () ScaleWidth.} ' ); Print ( ' actual height of the design draft px dp ratio: $ {ScreenUtil.getInstance (). ScaleHeight} ' ); Print ( ' width and font the ratio of the larger design draft: $ {ScreenUtil.getInstance () * ScreenUtil.pixelRatio ScaleWidth.} ' ); Print ( ' . height with respect to the design draft enlarged scale: $ {ScreenUtil.getInstance () scaleHeight * ScreenUtil.pixelRatio } '); print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'); return Scaffold( appBar: AppBar( title: Text(widget.title), ), floatingActionButton: FloatingActionButton( onPressed: () { print( 'ScreenUtil.getInstance().width：${ScreenUtil.getInstance().width}'); print('ScreenUtil().width：${ScreenUtil().width}'); }, child: Icon(Icons.accessible_forward), ), body: new Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Row( children: <Widget>[ Container( width: ScreenUtil.getInstance().setWidth(375), height: ScreenUtil.getInstance().setHeight(200), color: Colors.red, child: Text( '我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp', style: TextStyle( color: Colors.white, fontSize: ScreenUtil.getInstance().setSp(24), ), ), ), Container( width: ScreenUtil.getInstance().setWidth(375), height: ScreenUtil.getInstance().setHeight(200), color: Colors.blue, child: Text('我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp', style: TextStyle( color: Colors.white, the fontSize:. ScreenUtil.getInstance () setSp ( 24 ), )), ), ], ), The Text ( ' width of the device: $ {} ScreenUtil.screenWidth PX ' ), the Text ( ' height of the device: $ {} ScreenUtil.screenHeight PX ' ), the Text ( ' width of the device: $ {} ScreenUtil.screenWidthDp DP ' ), the Text ( ' height of the device: $ {} ScreenUtil.screenHeightDp DP ' ), the Text ( ' draft design width: $ {. ScreenUtil.getInstance ()} width ' ), the Text ( ' pixel density devices: $ {ScreenUtil.pixelRatio} ' ), the Text ( ' the bottom of the safe areas from: $ {ScreenUtil.bottomBarHeight} dp' ), The Text ( ' Status Bar Height: $ {} ScreenUtil.statusBarHeight dp ' ), the Text ( ' the proportion of the actual width dp and the design draft px: $ {ScreenUtil.getInstance (). ScaleWidth} ' , textAlign: the TextAlign. Center, ), the Text ( ' the proportion of the actual height of the design draft px dp of: $ {ScreenUtil.getInstance () ScaleHeight.} ' , textAlign: TextAlign.center, ), SizedBox ( height:. ScreenUtil.getInstance () setHeight ( 100 ) , ), the Text ( ' system Font scaling: ScreenUtil.textScaleFactory $ {} ' ), the Column ( crossAxisAlignment: CrossAxisAlignment.start, Children: <the Widget> [ the Text ( ' my text size on the design draft 24px, will not change with the scale text system ' , style: TextStyle ( Color: Colors.black, fontSize:. ScreenUtil.getInstance () setSp ( 24- ))), text ( 'My text size on the design draft 24px, will change with the scale text system ' , style: TextStyle ( Color: Colors. Black, fontSize: ScreenUtil (allowFontScaling: to true ) .setSp ( 24- ))), ], ) ], ), ), ) ; } }
Summary: The study of the use flutter_ScreenUtilto adapt Flutter of APP application, should be noted that this plug-in again escalating, so use the time to use the latest version.
github Address: https://github.com/OpenFlutter/flutter_screenutil