openflutter / flutter_screenutil

Flutter screen adaptation, font adaptation, get screen information

OpenFlutter

微信公众号

What's OpenFlutter

OpenFlutter is a open source organization of Flutter.OpenFutter is a central place for all community made Flutter packages.

---

什么是 OpenFlutter

OpenFlutter 是一个 Flutter 的开源组织。OpenFutter 致力于成为第三方 Flutter 包集中地。

---

OpenFlutter makes it easier.
Join us!
OpenFlutter 让 flutter 开发更简单。
加入我们！
Welcome to share the Flutter project to OpenFlutter.
随时欢迎分享 Flutter 项目到 OpenFlutter。

If you have any quetions or want to be member of OpenFluter, just e-mail me.

如果你有任何问题或者想成为OpenFlutter的一员，可以给我发邮件。

[email protected]

现有项目大致介绍

OpenFlutter
本组织相关一些介绍
about OpenFlutter intro

FlutterInAction
一些 flutter 相关文章收集项目
A collection of excellent articles about flutter.

tobias
支付宝插件
alipay plugin

fluwx
微信插件
wechat plugin

flutter_image_compress
图片压缩库,使用桥接原生实现,效率高于 dart 压缩
use kotlin/oc to compress image

tencent_cos
腾讯 cos 插件,上传图片使用
tencent cos plugin, upload picture to tencent

Flutter-Notebook
日更的 FlutterDemo 合集，今天你 fu 了吗 ,包含一些 demo,值得一试
some demo for flutter,everyday update

PullToRefresh
一些 UI 效果的实现,内含丰富 gif 图
UI solution, rich GIF demonstration.

flutter_ScreenUtil
屏幕适配的一个实现方案,欢迎关注
Screen adaptation scheme

loadmore
滚动到底加载更多,只支持 listview,易于使用
loadmore for listview, easy use.

flutter_gesture_password
九宫格解锁(手势解锁)
unlock with gesture

flutter_oktoast
仿 android toast 插件 纯 dart 实现
like android toast, pure flutter library ,not have native code.

flutter_navigation_bar
解决官方例子会不停销毁重建的问题
resolve gallery demos navigation bar will dispose's problem.

mmkv_flutter
mmkv库的flutter插件,mmkv是一个c++编写的高速key value库
mmkv library's flutter plugin, mmkv is a high-speed key value library written by c++.

flutter_ok_image
加载网络图片的框架,支持重试/失败/超时/加载动画
load net image,support retry/error/loading/timeout

rammus Plugin for AliCloud Push
阿里云推送插件。

flutter_page_indicator
Page indicator for flutter, with multiple build-in layouts. Forked from best-flutter.
酷炫的指示器，多达６种指示器样式。

neeko
Simple video player widget based on video_player.
基于video_player的播放器控件。

k_chart
Flutter K-Chart. K线图。

mini_calendar
Date component developed with Flutter, plans to support display, swipe left and right, add date mark, radio, display week, etc.
使用Flutter开发的日期组件，计划支持显示，左右滑动，添加日期标记，单选，显示星期等功能。

flutter_screenutil's Issues

高度适配问题

用ScreenUtil 设置高度 在iPhone6 上没问题 iPhone8P上高度不够 iphoneX上又超出了，按 iPhone6的尺寸初始化的 750*1334。请问这个问题怎么解决

English?

Is it possible to translate comments/documentation to English? It's hard to follow development and issues.

貌似在苹果模拟器上，scale 的比例有问题

api 使用方式感觉耦合度高，可否改善下？

可否设计为无侵入的使用方式，在程序启动的时候初始化， 使用的时候只需要调用公共的转换方法。 传入数值就好。不必每个页面都要去写一遍？

'setWidth' and 'setHeight' params should be double type.

iphoneX

TextSpan 中的TextStyle 不能使用 screenUtil.setSp来设置字体大小

由于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);

v0.4.0 设置字体问题

大神 你的0.4.0版本 设置字体 和老版本不一样了吗？不是用px了？ 原来的字体全部变大了。

大佬请问下如果是android混合项目，是不是每个Flutter页面都要写一次init

大佬请问下如果是android混合项目，是不是每个Flutter页面都要写一次init

设置wi'd'h't

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 还有部分安卓上 显示长方形？

启动APP后，调整系统字体大小，使用setSp设置fontSize的文字大小会跟随变化

我在screenutil里采用了默认的不跟随系统字体大小；但是启动APP后，调整系统字体大小，使用setSp设置fontSize的文字大小会跟随变化。然后把APP退出再启动后，字体大小恢复正常。

我猜测使用setSp计算的字体大小在系统字体大小调整后并没有重新计算。

对于各种类型的尺寸不是那么完美.

比如:设置i6为标椎,设置位置,长度,有时候在不同机型上显示位置不太一样.

width: ScreenUtil().setWidth(680.0),

希望能给statusBarHeight也加一个dp返回值

如题。flutter单位不是dp嘛，不太明白返回一个px值有什么用？我还得在用的时候把比例再除回去是吗？

MediaQuery.of() called with a context that does not contain a MediaQuery

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: ════════════════════════════════════════════════════════════════════════════════════════════════════

setWIdth 和 setHeight 没有考虑设备的分辨率

一张图片，通过setWidth和setHeight设置好宽高，在不同的分辨率下，这张图片的显示区域不一致。

全面屏用setWidth和setHeight相同的值出来的是长方形

The release version does not work

什么时候加上各种尺寸单位的转换？

什么时候加上各种尺寸单位的转换？例如：dp和px互转。

Maybe there is a misspelling in readme file.

//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.

文字的高度和宽度没有按比例缩放

我有一个布局需要在不同的手机上保持布局的比例，元素的高度和宽度都是用setWidth设置的，这在大部分元素上工作正常，但是当涉及到文字字体时，出了点问题。

例如下面这段代码，在Android 1080x1920手机上显示正常，但是在 Android 1440x2960手机上，文字的底部显示不出来。(“五”字底部的那一横被截掉)

Container(
    height: screenUtil.setWidth(50),
    child:  Text(
      "周五",
      style: TextStyle(color: color, fontSize: screenUtil.setSp(45)))
)

好像有点问题,可以讨论一下

///这里应该直接返回而不是再乘以设备像素比例_statusBarHeightPx * _pixelRatio，可以查看MediaQuery.padding变量的代码注释，Padding中设置间距数值单位是px，而不是dp
static double get statusBarHeightPx => _statusBarHeightPx;
///问题同上
static double get bottomBarHeightPx => _bottomBarHeightPx;

setheight 方法的参数 的单位是dp？

setheight 方法的参数 的单位是dp？

屏幕旋转

屏幕状态变化，屏幕旋转后屏幕的宽高数值不会跟随反转，导致的UI异常

关于初始化设备大小的问题！

想请问一下，如果我有多个页面相互跳转，每个页面都会有自己的 Scaffold，那这时候我是否需要在每个页面加载时都进行一次初始化呢？还是说我只需要在 main 这个整体入口初始化一次就OK？

另我还有个问题，就是我想做一个独立的控件出来，比如一个独立的按钮放到一个 util 的类里调用，这时我需要设置按钮的宽和高，但我想直接在 util 里调用 screenutil 来设置，此时我是否还需要初始化？如果要的话那莫非每次调用这个方法创建按钮的时候都要初始化一次吗？

谢谢啦！

AndroidX migration

Any plans to migrate the plugin to use the AndroidX support library? It would really help since lot of plugins are migrating the AndroidX.

不明白为什么要设置初始高度？还有`st.setHeight()`

设计稿一般都是按照宽度来的，所以高度在这里起什么作用？求大佬解惑

设置字体的时候Setsp是像素吗？

fontSize: ScreenUtil(allowFontScaling: true).setSp(50)，等价于fontSize: 25,

有没有一个可以设置单一像素的方法，比如我想给Padding设个值

padding: EdgeInsetsDirectional.only(bottom: 10),

有没有一个可以设置单一像素的方法，类似setSp

单例模式构造不需要写成私有吗？

根据屏幕宽度适配：width:ScreenUtil().setWidth(540);
根据屏幕高度适配：height:ScreenUtil().setHeight(200);
适配字体大小：fontSize：ScreenUtil().setSp(28,false);
这样使用会不会生效？

使用后状态栏变得好高!!!

我没有设置他,变高 了

x系列设备显示效果不一致

我在使用该库时,发现iphone X/XS/XS max /XR中与其他屏幕的设备显示不一致,其中也包括字体问题.
具体表现为,较其余设备widget更高,间距更大,字体缺没有太大变化,导致像被左右挤压了一样.
设计稿使用sketch,画板为iphone8,大小为750*1334,除以上设备以外,其余均比较正常,求解决方法.

适配问题

适配用setHeight去iphone x高度设置会有问题

ScreenUtil 打release包的问题

release包的界面和debug的界面不一样，有部分组件不能显示或者显示不完全。后来我使用MediaQuery去设置高宽，release和debug呈现的界面就一样了。

用ScreenUtil去设置ListView列表中的文字大小，滑动列表卡死的情况

外面嵌套HomeSliverAppBar，里面一个listview列表数据。用ScreenUtil去设置ListView列表中的文字大小，滑动列表App会卡死。

The method '/' was called on null.

Weird sizes returned when using setWidth / setHeight

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.

MediaQuery.of() called with a context that does not contain a MediaQuery.

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;

scaleWidth计算的有问题.

首先, 文档中说传入的设计稿尺寸是物理像素值, 例如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)

我认为这样才是对的.
请指教.

简化的建议

有两个问题：
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) 总是会等于屏幕宽度

mian函数直接初始化

你好，我直接在main ScreenUtil.instance = ScreenUtil(uiWidth: 375.0,uiHeight: 667.0)..init();然后其余的地方只要用ScreenUtil.instance.setSp这种，开发时没问题，但是一旦生成了apk就不行了，请问是为什么。
我是看了你的博客来的，我用的是ui，然后没用context，因为在main中没有context。

文档和你的代码不匹配啊

ScreenUtil({
    this.width = 1080,
    this.height = 1920,
    this.allowFontScaling = false,
  });

以上是你的源码，但你的文档中说allowFontScaling默认为true,而且setSp只有一个参数，文档中还传了allowFontScaling。。。。

ScreenUtil.screenWidth   打包release版本在真机上 获取的值是0

手机类型：MX3

字体适配

字体适配有点困惑，设计稿里是fontsize:26px，用
ScreenUtil().setSp(26)} 转换后，增大到30-40多，明显与设计稿效果不符合，求指教！

app运行时仍能受系统字体影响

设置了字体不随系统改变，但是app在运行时进入后台后，调整系统字体大小，app的字体还是会随着系统字体大小改变，把app进程杀掉重新进入之后字体又恢复了。这个有什么方法解决吗？

What is the meaning of initial size and width?

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?

The release version does not work

if you use 'flutter run --release', this plugin does no work

适配问题

优化前

优化后

你好，在redux 应用中如此使用报下面的异常

如果需要把工具类使用到margin padding上好像不能使用

设置widt'h

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 还有部分安卓上 显示长方形？