openflutter / flutter_screenutil Goto Github PK
View Code? Open in Web Editor NEWFlutter screen adaptation, font adaptation, get screen information
Home Page: https://pub.dartlang.org/packages/flutter_screenutil
License: Apache License 2.0
Flutter screen adaptation, font adaptation, get screen information
Home Page: https://pub.dartlang.org/packages/flutter_screenutil
License: Apache License 2.0
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
return MaterialApp();
}
}
I don't think that it's necessary to use context,
you can get screen width like this,
import 'package:flutter/material.dart';
import 'dart:ui';
final num vh = MediaQueryData.fromWindow(window).size.height;
Is it possible to translate comments/documentation to English? It's hard to follow development and issues.
大佬请问下如果是android混合项目,是不是每个Flutter页面都要写一次init
Hi,
I am a first time user of your library, and there's something I should be doing wrong but I can't find out. I'm testing your lib with a simple app running in a pixel 2 virtual device (1920x1080). And this is how I init the lib as per the documentation:
ScreenUtil.instance = ScreenUtil(width:1080, height:1920, allowFontScaling: true)..init(context);
When I try to use setWidth for a value of 200 in this device it returns a value of 76.19 which is wrong. Looking at the source code I see how you do:
setWidth(double width) => width * scaleWidth;
and scaleWidth is:
get scaleWidth => _screenWidth / instance.width;
This is where things get weird. _screenWidth following mediaquery documentation is measured in Logical pixels but in the ScreenUtil constructor we must provide physical pixels. So the reason I get 76 instead of 200 (or a value close to it because I'm running on a device with the designed resolution) is because the scaleWith is calculated with 683.42/1080 , and it should be 1080/1080 = 1.
I know it must be me doing something I shouldn't because I don't see any bug opened about this problem. But there's no much to it. Could you help here?
Cheers.
一张图片,通过setWidth和setHeight设置好宽高,在不同的分辨率下,这张图片的显示区域不一致。
由于Flutter里TextSpan的字体大小并不会跟随系统字体大小,当使用setSp设置TextSpan 中的TextStyle的fontSize后,把系统字体调大,TextSpan里的字体反而会变小。
TextSpan span = new TextSpan(
style: new TextStyle(color: Colors.black87, fontSize: screenUtil.setSp(36)),
text: text);
解决方法是直接使用 setWidth来设置这类字体大小
TextSpan span = new TextSpan(
style: new TextStyle(color: Colors.black87, fontSize: screenUtil.setWidth(36)),
text: text);
适配用setHeight去iphone x高度设置会有问题
Any plans to migrate the plugin to use the AndroidX support library? It would really help since lot of plugins are migrating the AndroidX.
if you use 'flutter run --release', this plugin does no work
手机类型:MX3
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(375),
color: Colors.blue,
child: Text('我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24, false),
)),
),
在 iphone XR 还有部分安卓上 显示长方形?
设计稿一般都是按照宽度来的,所以高度在这里起什么作用?求大佬解惑
字体适配有点困惑,设计稿里是fontsize:26px,用
ScreenUtil().setSp(26)} 转换后,增大到30-40多,明显与设计稿效果不符合,求指教!
根据屏幕宽度适配:width:ScreenUtil().setWidth(540);
根据屏幕高度适配:height:ScreenUtil().setHeight(200);
适配字体大小:fontSize:ScreenUtil().setSp(28,false);
这样使用会不会生效?
外面嵌套HomeSliverAppBar,里面一个listview列表数据。用ScreenUtil去设置ListView列表中的文字大小,滑动列表App会卡死。
release包的界面和debug的界面不一样,有部分组件不能显示或者显示不完全。后来我使用MediaQuery去设置高宽,release和debug呈现的界面就一样了。
如题。flutter单位不是dp嘛,不太明白返回一个px值有什么用?我还得在用的时候把比例再除回去是吗?
我有一个布局需要在不同的手机上保持布局的比例,元素的高度和宽度都是用setWidth
设置的,这在大部分元素上工作正常,但是当涉及到文字字体时,出了点问题。
例如下面这段代码,在Android 1080x1920手机上显示正常,但是在 Android 1440x2960手机上,文字的底部显示不出来。(“五”字底部的那一横被截掉)
Container(
height: screenUtil.setWidth(50),
child: Text(
"周五",
style: TextStyle(color: color, fontSize: screenUtil.setSp(45)))
)
//If you wang to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
THANKS for all of you guys for convenience you brought to us! here is a small problem:
the comment of the code, the " if you wang to" maybe is " if you want to ". I'm appreciated if someone can correct the misspelling.
设置了字体不随系统改变,但是app在运行时进入后台后,调整系统字体大小,app的字体还是会随着系统字体大小改变,把app进程杀掉重新进入之后字体又恢复了。这个有什么方法解决吗?
fontSize: ScreenUtil(allowFontScaling: true).setSp(50),等价于fontSize: 25,
用ScreenUtil 设置高度 在iPhone6 上没问题 iPhone8P上高度不够 iphoneX上又超出了,按 iPhone6的尺寸初始化的 750*1334。请问这个问题怎么解决
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(375),
color: Colors.blue,
child: Text('我的宽度:${ScreenUtil().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(24, false),
)),
),
在 iphone XR 还有部分安卓上 显示长方形?
I think this library is needed for responsive screen, but I cannot understand the reason why I have to set the initial width and height of device? What these variables mean?
ScreenUtil({
this.width = 1080,
this.height = 1920,
this.allowFontScaling = false,
});
以上是你的源码,但你的文档中说allowFontScaling默认为true,而且setSp只有一个参数,文档中还传了allowFontScaling。。。。
flutter: ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building MainApp(dirty):
flutter: MediaQuery.of() called with a context that does not contain a MediaQuery.
flutter: No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().
flutter: This can happen because you do not have a WidgetsApp or MaterialApp widget (those widgets introduce
flutter: a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.
flutter: The context used was:
flutter: MainApp(dirty)
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #0 MediaQuery.of (package:flutter/src/widgets/media_query.dart:480:5)
flutter: #1 ScreenUtil.init (package:flutter_screenutil/flutter_screenutil.dart:35:44)
flutter: #2 MainApp.build (package:bmatch_flutter/main.dart:11:65)
flutter: #3 StatelessElement.build (package:flutter/src/widgets/framework.dart:3774:28)
flutter: #4 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3721:15)
flutter: #5 Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
flutter: #6 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3701:5)
flutter: #7 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3696:5)
flutter: #8 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2950:14)
flutter: #9 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:12)
flutter: #10 RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:909:16)
flutter: #11 RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:880:5)
flutter: #12 RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure> (package:flutter/src/widgets/binding.dart:826:17)
flutter: #13 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2266:19)
flutter: #14 RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:825:13)
flutter: #15 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:712:7)
flutter: #16 runApp (package:flutter/src/widgets/binding.dart:756:7)
flutter: #17 main (package:bmatch_flutter/main.dart:5:16)
flutter: #18 _startIsolate.<anonymous closure> (dart:isolate/runtime/libisolate_patch.dart:289:19)
flutter: #19 _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12)
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
屏幕状态变化,屏幕旋转后屏幕的宽高数值不会跟随反转,导致的UI异常
我在screenutil里采用了默认的不跟随系统字体大小;但是启动APP后,调整系统字体大小,使用setSp设置fontSize的文字大小会跟随变化。然后把APP退出再启动后,字体大小恢复正常。
我猜测使用setSp计算的字体大小在系统字体大小调整后并没有重新计算。
///这里应该直接返回而不是再乘以设备像素比例_statusBarHeightPx * _pixelRatio,可以查看MediaQuery.padding变量的代码注释,Padding中设置间距数值单位是px,而不是dp
static double get statusBarHeightPx => _statusBarHeightPx;
///问题同上
static double get bottomBarHeightPx => _bottomBarHeightPx;
什么时候加上各种尺寸单位的转换?例如:dp和px互转。
可否设计为无侵入的使用方式,在程序启动的时候初始化, 使用的时候只需要调用公共的转换方法。 传入数值就好。不必每个页面都要去写一遍?
setheight 方法的参数 的单位是dp?
padding: EdgeInsetsDirectional.only(bottom: 10),
有没有一个可以设置单一像素的方法,类似setSp
我没有设置他,变高 了
有两个问题:
1.需要用一个BuildContext去做初始化,这样无法在initState等方法中调用,而有时初始化动画参数必然需要在initState中使用。
2.调用语法太长,不太优雅。
建议:
代码如下
class ScreenUtils {
static double get screenWidth => window.physicalSize.width / window.devicePixelRatio;
static double get screenHeight => window.physicalSize.height / window.devicePixelRatio;
///单位换算,750总是等于屏幕宽度
static double upx(double num) {
return num/750.0*screenWidth;
}
}
double upx(double num) {
return ScreenUtils .upx(num);
}
任何需要调用的地方只需
upx(xxx)
upx(750) 总是会等于屏幕宽度
首先, 文档中说传入的设计稿尺寸是物理像素值, 例如750x1334.
然后计算比例的实现是这样的:
///实际的dp与设计稿px的比例
get scaleWidth => _screenWidth / instance.width;
_screenWidth = mediaQuery.size.width;
_screenWidth是逻辑像素值, 比一个物理像素值instance.width, 这结果是有问题的.
应该这样计算:
get scaleWidth => _screenWidth * _pixelRatio / instance.width;
最后setWidth()方法传入设计稿上的像素值, 比如设计稿上一个按钮宽40像素:
ScreenUtil.getInstance().setWidth(40)
我认为这样才是对的.
请指教.
我在使用该库时,发现iphone X/XS/XS max /XR中与其他屏幕的设备显示不一致,其中也包括字体问题.
具体表现为,较其余设备widget更高,间距更大,字体缺没有太大变化,导致像被左右挤压了一样.
设计稿使用sketch,画板为iphone8,大小为750*1334,除以上设备以外,其余均比较正常,求解决方法.
你好,我直接在main ScreenUtil.instance = ScreenUtil(uiWidth: 375.0,uiHeight: 667.0)..init();
然后其余的地方只要用ScreenUtil.instance.setSp
这种,开发时没问题,但是一旦生成了apk就不行了,请问是为什么。
我是看了你的博客来的,我用的是ui,然后没用context,因为在main中没有context。
大神 你的0.4.0版本 设置字体 和老版本不一样了吗?不是用px了? 原来的字体全部变大了。
想请问一下,如果我有多个页面相互跳转,每个页面都会有自己的 Scaffold
,那这时候我是否需要在每个页面加载时都进行一次初始化呢?还是说我只需要在 main
这个整体入口初始化一次就OK?
另我还有个问题,就是我想做一个独立的控件出来,比如一个独立的按钮放到一个 util
的类里调用,这时我需要设置按钮的宽和高,但我想直接在 util
里调用 screenutil
来设置,此时我是否还需要初始化?如果要的话那莫非每次调用这个方法创建按钮的时候都要初始化一次吗?
谢谢啦!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.