Skip to content

F
flutter_screenutil

__卓原 / flutter_screenutil

通知 10
Star 0
Fork 0
F
flutter_screenutil

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 cff6d047 编写于 作者: L LiZhuoyuan
浏览文件
操作

2.0.0

上级 77699ad6
隐藏空白更改
内联 并排
Showing with 91 addition and 78 deletion
CHANGELOG.md
浏览文件 @ cff6d047
......@@ -2,10 +2,14 @@
* @Author: zhuoyuan93@gmail.com
* @Date: 2018-10-16 19:43:03
* @LastEditors: zhuoyuan93@gmail.com
* @LastEditTime: 2020年1月14日 12:11:02
* @LastEditTime: 2020年6月20日 11:20:02
* @Description: Update log
-->
#2.0.0
- Use `MediaQueryData.fromWindow(window)` instead of `MediaQuery.of(context)`, no context parameter required
- API changes, please note
#1.1.0
- support ExtensionMethod Dart-SDK-2.6.0
- you can use 'width: 50.w' instead of 'width: ScreenUtil().setWidth(50)'
......
README.md
浏览文件 @ cff6d047
......@@ -18,12 +18,13 @@ github: https://github.com/OpenFlutter/flutter_screenutil
### Add dependency：
Please check the latest version before installation.
If there is any problem with the new version, please use the previous version
```
dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^1.0.2
flutter_screenutil: ^2.0.0
```
### Add the following imports to your Dart code:
......@@ -48,13 +49,16 @@ Be sure to set the page in the MaterialApp's home(ie the entry file, just set it
//fill in the screen size of the device in the design
//default value : width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.init(context);
ScreenUtil.init(context); //flutter_screenuitl < 1.2
ScreenUtil.init(); //flutter_screenuitl >= 1.2
//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.init(context, width: 750, height: 1334);
ScreenUtil.init(context, width: 750, height: 1334); //flutter_screenuitl < 1.2
ScreenUtil.init(width: 750, height: 1334); //flutter_screenuitl >= 1.2
//If you want to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl < 1.2
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl >= 1.2
```
......@@ -189,7 +193,7 @@ class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);
return ExampleWidget(title: 'FlutterScreenUtil Demo');
}
......@@ -244,10 +248,10 @@ class _ExampleWidgetState extends State<ExampleWidget> {
),
],
),
Text('Device width:${ScreenUtil.screenWidth}px'),
Text('Device height:${ScreenUtil.screenHeight}px'),
Text('Device width:${ScreenUtil.screenWidthDp}dp'),
Text('Device height:${ScreenUtil.screenHeightDp}dp'),
Text('Device width:${ScreenUtil.screenWidth}dp'),
Text('Device height:${ScreenUtil.screenHeight}dp'),
Text('Device width:${ScreenUtil.screenWidthPx}px'),
Text('Device height:${ScreenUtil.screenHeightPx}px'),
Text('Device pixel density:${ScreenUtil.pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'),
Text('Status bar height:${ScreenUtil.statusBarHeight}dp'),
......@@ -286,8 +290,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false);
setState(() {});
},
),
......@@ -302,7 +305,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
print(
'Bottom safe zone distance dp:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
print(
'Status bar height px:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px
'Status bar height dp:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit dp
print(
'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}');
print(
......
README_CN.md
浏览文件 @ cff6d047
......@@ -23,12 +23,13 @@ csdn博客工具介绍:https://blog.csdn.net/u011272795/article/details/82795477
### 安装依赖：
安装之前请查看最新版本
新版本如有问题请使用上一版
```
dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil: ^1.0.2
flutter_screenutil: ^2.0.0
```
### 在每个使用的地方导入包：
......@@ -52,13 +53,16 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
//填入设计稿中设备的屏幕尺寸
//默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.init(context);
ScreenUtil.init(context); //flutter_screenuitl < 1.2
ScreenUtil.init(); //flutter_screenuitl >= 1.2
//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(context, width: 750, height: 1334);
ScreenUtil.init(context, width: 750, height: 1334); //flutter_screenuitl < 1.2
ScreenUtil.init(width: 750, height: 1334); //flutter_screenuitl >= 1.2
//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl < 1.2
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl >= 1.2
```
......@@ -198,9 +202,9 @@ class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init(context);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init();
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);
return ExampleWidget(title: 'FlutterScreenUtil示例');
}
......@@ -255,10 +259,10 @@ class _ExampleWidgetState extends State<ExampleWidget> {
),
],
),
Text('设备宽度:${ScreenUtil.screenWidth}px'),
Text('设备高度:${ScreenUtil.screenHeight}px'),
Text('设备宽度:${ScreenUtil.screenWidthDp}dp'),
Text('设备高度:${ScreenUtil.screenHeightDp}dp'),
Text('设备宽度:${ScreenUtil.screenWidth}dp'),
Text('设备高度:${ScreenUtil.screenHeight}dp'),
Text('设备宽度:${ScreenUtil.screenWidthPx}px'),
Text('设备高度:${ScreenUtil.screenHeightPx}px'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'),
......@@ -295,8 +299,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false);
setState(() {});
},
),
......@@ -310,11 +313,10 @@ class _ExampleWidgetState extends State<ExampleWidget> {
print(
'底部安全区距离:${ScreenUtil.bottomBarHeight}dp'); //Bottom safe zone distance，suitable for buttons with full screen
print(
'状态栏高度:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit px
'状态栏高度:${ScreenUtil.statusBarHeight}dp'); //状态栏高度 , 刘海屏会更高，单位dp
print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}');
print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}');
print(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
......
README_PT.md
浏览文件 @ cff6d047
......@@ -18,12 +18,13 @@ github: https://github.com/OpenFlutter/flutter_screenutil
### Adicionando a dependência：
Por favor, verifique a última versão antes da instalação.
Se houver algum problema com a nova versão, use a versão anterior
```
dependencies:
flutter:
sdk: flutter
# add flutter_screenutil
flutter_screenutil: ^1.0.2
flutter_screenutil: ^2.0.0
```
### Adicione o seguinte import em seu código Dart:
......@@ -48,13 +49,16 @@ Certifique-se de definir as dimensões na paginal inicial do MaterialApp (ou sej
//Preencha o tamanho da tela do dispositivo no protótipo de design
//Valor padrão: width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.init(context);
ScreenUtil.init(context); //flutter_screenuitl < 1.2
ScreenUtil.init(); //flutter_screenuitl >= 1.2
//Se o design é baseado no iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.init(context, width: 750, height: 1334);
ScreenUtil.init(context, width: 750, height: 1334); //flutter_screenuitl < 1.2
ScreenUtil.init(width: 750, height: 1334); //flutter_screenuitl >= 1.2
//Se você quer definir que o tamanho da fonte seja ajustado de acordo com a opção "tamanho da fonte" na acessibilidade do sistema
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl < 1.2
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: true); //flutter_screenuitl >= 1.2
```
......@@ -182,7 +186,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
@override
Widget build(BuildContext context) {
///Define o tamanho de ajuste (preenche o tamanho da tela do dispositivo no design). Se o design é baseado no tamanho do iPhone6 (iPhone6 ​​750*1334)
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);
print('Largura do dispositivo:${ScreenUtil.screenWidth}'); //Largura do dispositivo
print('Altura do dispositivo:${ScreenUtil.screenHeight}'); //Altura do dispositivo
......@@ -235,11 +239,11 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
),
],
),
Text('Largura do dispositivo:${ScreenUtil.screenWidth}px'),
Text('Altura do dispositivo:${ScreenUtil.screenHeight}px'),
Text('Largura do dispositivo:${ScreenUtil.screenWidth}dp'),
Text('Altura do dispositivo:${ScreenUtil.screenHeight}dp'),
Text('Densidade de pixels do dispositivo:${ScreenUtil.pixelRatio}'),
Text('Distância segura do rodapé:${ScreenUtil.bottomBarHeight}px'),
Text('Altura da status bar:${ScreenUtil.statusBarHeight}px'),
Text('Distância segura do rodapé:${ScreenUtil.bottomBarHeight}dp'),
Text('Altura da status bar:${ScreenUtil.statusBarHeight}dp'),
Text(
'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil().scaleWidth}',
textAlign: TextAlign.center,
......
example/android/build.gradle
浏览文件 @ cff6d047
......@@ -2,6 +2,7 @@ buildscript {
repositories {
google()
jcenter()
maven { url "http://download.flutter.io" }
}
dependencies {
......@@ -13,6 +14,7 @@ allprojects {
repositories {
google()
jcenter()
maven { url "http://download.flutter.io" }
}
}
......
example/ios/Flutter/flutter_export_environment.sh
浏览文件 @ cff6d047
#!/bin/sh
# This is a generated file; do not edit or check into version control.
export "FLUTTER_ROOT=D:\flutter"
export "FLUTTER_APPLICATION_PATH=D:\Project\flutter_ScreenUtil\example"
export "FLUTTER_ROOT=D:\Develop\flutter"
export "FLUTTER_APPLICATION_PATH=D:\Develop\Project\flutter_screenutil\example"
export "FLUTTER_TARGET=lib\main.dart"
export "FLUTTER_BUILD_DIR=build"
export "SYMROOT=${SOURCE_ROOT}/../build\ios"
export "FLUTTER_FRAMEWORK_DIR=D:\flutter\bin\cache\artifacts\engine\ios"
export "OTHER_LDFLAGS=$(inherited) -framework Flutter"
export "FLUTTER_FRAMEWORK_DIR=D:\Develop\flutter\bin\cache\artifacts\engine\ios"
export "FLUTTER_BUILD_NAME=1.0.0"
export "FLUTTER_BUILD_NUMBER=1"
example/lib/main.dart
浏览文件 @ cff6d047
......@@ -26,7 +26,7 @@ class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
//Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);
return ExampleWidget(title: 'FlutterScreenUtil Demo');
}
......@@ -81,10 +81,10 @@ class _ExampleWidgetState extends State<ExampleWidget> {
),
],
),
Text('Device width:${ScreenUtil.screenWidth}px'),
Text('Device height:${ScreenUtil.screenHeight}px'),
Text('Device width:${ScreenUtil.screenWidthDp}dp'),
Text('Device height:${ScreenUtil.screenHeightDp}dp'),
Text('Device width:${ScreenUtil.screenWidthPx}px'),
Text('Device height:${ScreenUtil.screenHeightPx}px'),
Text('Device width:${ScreenUtil.screenWidth}dp'),
Text('Device height:${ScreenUtil.screenHeight}dp'),
Text('Device pixel density:${ScreenUtil.pixelRatio}'),
Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}dp'),
Text('Status bar height:${ScreenUtil.statusBarHeight}dp'),
......@@ -123,8 +123,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false);
setState(() {});
},
),
......@@ -132,8 +131,8 @@ class _ExampleWidgetState extends State<ExampleWidget> {
}
void printScreenInformation() {
print('Device width px:${ScreenUtil.screenWidth}'); //Device width
print('Device height px:${ScreenUtil.screenHeight}'); //Device height
print('Device width dp:${ScreenUtil.screenWidth}'); //Device width
print('Device height dp:${ScreenUtil.screenHeight}'); //Device height
print(
'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density
print(
......@@ -148,5 +147,6 @@ class _ExampleWidgetState extends State<ExampleWidget> {
'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print(
'The ratio of height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
print('System font scaling:${ScreenUtil.textScaleFactor}');
}
}
example/lib/main_zh.dart
浏览文件 @ cff6d047
......@@ -31,7 +31,7 @@ class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: false);
return ExampleWidget(title: 'FlutterScreenUtil示例');
}
......@@ -86,10 +86,10 @@ class _ExampleWidgetState extends State<ExampleWidget> {
),
],
),
Text('设备宽度:${ScreenUtil.screenWidth}px'),
Text('设备高度:${ScreenUtil.screenHeight}px'),
Text('设备宽度:${ScreenUtil.screenWidthDp}dp'),
Text('设备高度:${ScreenUtil.screenHeightDp}dp'),
Text('设备宽度:${ScreenUtil.screenWidthPx}px'),
Text('设备高度:${ScreenUtil.screenHeightPx}px'),
Text('设备宽度:${ScreenUtil.screenWidth}dp'),
Text('设备高度:${ScreenUtil.screenHeight}dp'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'),
......@@ -126,8 +126,7 @@ class _ExampleWidgetState extends State<ExampleWidget> {
floatingActionButton: FloatingActionButton(
child: Icon(Icons.title),
onPressed: () {
ScreenUtil.init(context,
width: 1500, height: 1334, allowFontScaling: false);
ScreenUtil.init(width: 1500, height: 1334, allowFontScaling: false);
setState(() {});
},
),
......
lib/screenutil.dart
浏览文件 @ cff6d047
......@@ -3,7 +3,7 @@
* email: zhuoyuan93@gmail.com
*/
import 'package:flutter/material.dart';
import 'dart:ui';
class ScreenUtil {
static ScreenUtil _instance;
......@@ -19,7 +19,6 @@ class ScreenUtil {
/// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false.
bool allowFontScaling;
static MediaQueryData _mediaQueryData;
static double _screenWidth;
static double _screenHeight;
static double _pixelRatio;
......@@ -33,7 +32,7 @@ class ScreenUtil {
return _instance;
}
static void init(BuildContext context,
static void init(
{num width = defaultWidth,
num height = defaultHeight,
bool allowFontScaling = false}) {
......@@ -43,19 +42,14 @@ class ScreenUtil {
_instance.uiWidthPx = width;
_instance.uiHeightPx = height;
_instance.allowFontScaling = allowFontScaling;
MediaQueryData mediaQuery = MediaQuery.of(context);
_mediaQueryData = mediaQuery;
_pixelRatio = mediaQuery.devicePixelRatio;
_screenWidth = mediaQuery.size.width;
_screenHeight = mediaQuery.size.height;
_statusBarHeight = mediaQuery.padding.top;
_bottomBarHeight = _mediaQueryData.padding.bottom;
_textScaleFactor = mediaQuery.textScaleFactor;
_pixelRatio = window.devicePixelRatio;
_screenWidth = window.physicalSize.width;
_screenHeight = window.physicalSize.height;
_statusBarHeight = window.padding.top;
_bottomBarHeight = window.padding.bottom;
_textScaleFactor = window.textScaleFactor;
}
static MediaQueryData get mediaQueryData => _mediaQueryData;
/// 每个逻辑像素的字体像素数，字体的缩放比例
/// The number of font pixels for each logical pixel.
static double get textScaleFactor => _textScaleFactor;
......@@ -66,23 +60,27 @@ class ScreenUtil {
/// 当前设备宽度 dp
/// The horizontal extent of this size.
static double get screenWidthDp => _screenWidth;
static double get screenWidth => _screenWidth / _pixelRatio;
///当前设备高度 dp
///The vertical extent of this size. dp
static double get screenHeightDp => _screenHeight;
static double get screenHeight => _screenHeight / _pixelRatio;
/// 当前设备宽度 px
/// The vertical extent of this size. px
static double get screenWidth => _screenWidth * _pixelRatio;
static double get screenWidthPx => _screenWidth;
/// 当前设备高度 px
/// The vertical extent of this size. px
static double get screenHeight => _screenHeight * _pixelRatio;
static double get screenHeightPx => _screenHeight;
/// 状态栏高度 dp 刘海屏会更高
/// The offset from the top
static double get statusBarHeight => _statusBarHeight / _pixelRatio;
/// 状态栏高度 dp 刘海屏会更高
/// The offset from the top
static double get statusBarHeight => _statusBarHeight;
static double get statusBarHeightPx => _statusBarHeight;
/// 底部安全区距离 dp
/// The offset from the bottom.
......@@ -90,9 +88,9 @@ class ScreenUtil {
/// 实际的dp与UI设计px的比例
/// The ratio of the actual dp to the design draft px
double get scaleWidth => _screenWidth / uiWidthPx;
double get scaleWidth => screenWidth / uiWidthPx;
double get scaleHeight => _screenHeight / uiHeightPx;
double get scaleHeight => screenHeight / uiHeightPx;
double get scaleText => scaleWidth;
......
pubspec.yaml
浏览文件 @ cff6d047
name: flutter_screenutil
description: A flutter plugin for adapting screen and font size.Guaranteed to look good on different models
version: 1.1.0
version: 2.0.0
homepage: https://github.com/OpenFlutter/flutter_screenutil
environment:
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或