GithubHelp home page GithubHelp logo

openflutter / flutter_screenutil Goto Github PK

View Code? Open in Web Editor NEW
3.8K 3.8K 481.0 3.6 MB

Flutter screen adaptation, font adaptation, get screen information

Home Page: https://pub.dartlang.org/packages/flutter_screenutil

License: Apache License 2.0

Dart 67.27% Objective-C 0.54% Shell 0.48% Kotlin 0.10% Ruby 1.75% Swift 0.34% HTML 1.25% CMake 13.11% C++ 15.16%
dart flutter scale screen screenutil

flutter_screenutil's Issues

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

适配问题

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

mian函数直接初始化

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

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.

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.

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

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

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

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

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

谢谢啦!

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

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

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

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

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;

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

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

字体适配

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

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

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

高度适配问题

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

ScreenUtil 打release包的问题

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

v0.4.0 设置字体问题

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

English?

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

屏幕旋转

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

文档和你的代码不匹配啊

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

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

简化的建议

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

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

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

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

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.

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

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)

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.