Flutter 第三方 flutter_screenutil(屏幕适配)

这篇具有很好参考价值的文章主要介绍了Flutter 第三方 flutter_screenutil(屏幕适配)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。

推荐一篇写的非常不过的文章:Flutter应用框架搭建(二)屏幕适配

安装+导入

flutter_screenutil: ^5.9.0
import 'package:flutter_screenutil/flutter_screenutil.dart';

举例

iPhone 12 mini

初始化

初始化 - 设置参考尺寸1

ScreenUtilInit

flutter flutter_screenutil,Flutter,flutter

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(750, 1334),//  iphone6 750 1334       iphone 12 mini 1080 2340
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (_ , child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'First Method',
          // You can use the library anywhere in the app even in theme
          theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
          ),
          // home: child,
          initialRoute: Home.routeName,
          routes: {
            Home.routeName: (context) => Home(),
          },
        );
      },
      // child: Home(),
    );
  }

}

初始化 - 设置方式2

ScreenUtil.init

可以在每个页面设置

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter_ScreenUtil',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: 'FlutterScreenUtil Demo'),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    //设置尺寸(填写设计中设备的屏幕尺寸)如果设计基于360dp * 690dp的屏幕
    ScreenUtil.init(context, designSize: const Size(360, 690));
    ...
  }
}

使用这种方式只需在使用 flutter_screenutil 前进行初始化即可,一般放在根路由即第一个页面加载的时候进行初始化。

注意:ScreenUtil.init 不能在 MyApp 中进行初始化,会报如下错误 No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets. 因为这个时候还没加载 MaterialApp 无法使用 MediaQuery.of(context ) 获取到屏幕宽高

关于上面两种初始化方法,flutter_screenutil 作者推荐使用第二种方式。

使用

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
print('系统宽: $screenWidth');//375.0
print('系统高: $screenHeight');//812.0

double utilWidth = ScreenUtil().screenWidth;
double utilHeight = ScreenUtil().screenHeight;
print('ScreenUtil宽: $utilWidth');//设备宽度 375.0
print('ScreenUtil高: $utilHeight');//设备高度 812.0

double pixelRatio = ScreenUtil().pixelRatio ?? 0.0;
print('pixelRatio  $pixelRatio');//设备的像素密度 3.0

double bottomBarHeight = ScreenUtil().bottomBarHeight;
print('bottomBarHeight  $bottomBarHeight');//底部安全区距离,适用于全面屏下面有按键的 34.0

double statusBarHeight = ScreenUtil().statusBarHeight;
print('statusBarHeight  $statusBarHeight');//状态栏高度 刘海屏会更高 50.0

double textScaleFactor = ScreenUtil().textScaleFactor;
print('textScaleFactor  $textScaleFactor');//系统字体缩放比例 1.0

double scaleWidth = ScreenUtil().scaleWidth;// 实际宽度设计稿宽度的比例 0.5
print('scaleWidth  $scaleWidth');
double scaleHeight = ScreenUtil().scaleHeight;// 实际高度与设计稿高度度的比例 0.6
print('scaleHeight  $scaleHeight');

Orientation orientation = ScreenUtil().orientation;// 屏幕方向 .portrait
print('orientation  $orientation');

设置屏幕的Container的宽度是屏幕宽度的一半

/// 宽高是宽度的 0.5 倍 , 显示正方形
Container(
  width: 0.5.sw,
  height: 0.5.sw,
  color: Colors.green,
),

根据宽度进行设置

//方式一:
ScreenUtil().setWidth(540)  //根据屏幕宽度适配尺寸

//方式二:
540.w

根据高度进行设置

//方式一:
ScreenUtil().setHeight(200) //根据屏幕高度适配尺寸(一般根据宽度适配即可)

//方式二:
200.h

根据宽度或高度中的较小者进行调整

//方式一:
ScreenUtil().radius(200)    //根据宽度或高度中的较小者进行调整

//方式二:
200.r

字体大小适配

ScreenUtil().setSp(24)      //字体大小适配

//方式一:
Text("Hello", style: TextStyle(fontSize: ScreenUtil().setSp(24)),),

//方式二:
Text("Hello", style: TextStyle(fontSize: 24.sp),),

除了上面 4 种扩展属性以外,还提供了 sm 以及 swsh

sm :取数值本身与 sp 的值最小的值,如 12.sm 则取 1212.sp 的值进行比较,取最小的值。
sw :screen width 的缩写,即屏幕宽度,作用是按屏幕宽度比例返回值。如 0.2.sw 则返回屏幕宽度的 20%,1.sw 则是整个屏幕宽度
sh :screen height 的缩写,及屏幕高度,作用与 sw 类似,返回指定比例的屏幕高度值。如 1.sh 为整个屏幕高度

注意

如果使用sp去设置字体,那么字体会根据屏幕的宽高缩放字体的,如果需要设置成,所有屏幕的字体大小都一样的可以像下面这么设计:

全局设置:

MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Flutter_ScreenUtil',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  builder: (context, widget) {
    return MediaQuery(
      ///设置文字大小不随系统设置改变
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
      child: widget,
    );
  },
  home: HomePage(title: 'FlutterScreenUtil Demo'),
),

Text 单独设置:

Text("text", textScaleFactor: 1.0)

其他 Api

除了适配的 api 以外,flutter_screenutil 还提供了很多实用的 api ,如下 :

ScreenUtil().pixelRatio :设备的像素密度
ScreenUtil().screenWidth :屏幕宽度,等同于 1.sw
ScreenUtil().screenHeight :屏幕高度,等同于 1.sh
ScreenUtil().bottomBarHeight :底部导航高度,如全屏底部按键的高度
ScreenUtil().statusBarHeight :状态栏高度
ScreenUtil().textScaleFactor :系统字体缩放比例
ScreenUtil().scaleWidth :实际宽度与设计图宽度的比例
ScreenUtil().scaleHeight :实际高度与设计图高度的比例
ScreenUtil().orientation :屏幕方向文章来源地址https://www.toymoban.com/news/detail-825654.html

到了这里,关于Flutter 第三方 flutter_screenutil(屏幕适配)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter 应用间跳转应用,实现唤起第三方App

    最近因为工作需求,做了应用间跳转应用,因为是一个flutter新手,所以在工作之余随便总结记录一下。 1.使用第三方用户登录,跳转到需授权的App。如QQ登录,微信登录等。需要用户授权,还需要\\\"返回到调用的程序,同时返回授权的用户名、密码\\\"。 2.应用程序推广,跳转到

    2024年02月05日
    浏览(69)
  • Flutter 与第三方 Native-SDK 的交互代理方案

    场景 在使用 Flutter 进行功能模块或者整体项目的开发时,如果需要(阶段性)频繁地和某个第三方 Native-SDK 进行交互,而该 Native-SDK 没有实现 Flutter 插件版本的情况下,如果直接把这部分交互 API 加入到原有的 channel 类里面,会使得该 channel 类变得臃肿,造成代码维护及迭代

    2024年02月02日
    浏览(41)
  • vscode配置flutter开发环境,不需要安装第三方安卓模拟器

    点击下方的安装包,获取 stable 发行通道的 Flutter SDK 最新版本:Flutter SDK 将压缩包解压,然后把其中的 flutter 目录整个放在你想放置 Flutter SDK 的路径中**(注意不要出现中文目录)** 配置Windows系统的环境变量,在 用户变量 一栏中,在Path中添加 flutterbin 目录的完整路径。例

    2024年02月10日
    浏览(66)
  • Flutter:使用url_launcher打开外部浏览器、拨打电话、发送短信、打开第三方app、打开应用商店下载应用

    Flutter中的 url_launcher 是一个用于打开URL的插件。它允许在Flutter应用程序中打开网址、发送电子邮件、拨打电话等操作。使用 url_launcher 插件,可以轻松地在应用程序中集成各种URL操作。 官方地址 https://pub-web.flutter-io.cn/packages/url_launcher 安装 打开网址 这里有两个注意点: 模拟

    2024年02月08日
    浏览(82)
  • Python第三方库安装教程、什么是第三方库

    Python有一个全球社区:https://pypi.org/,在这里我们可以搜索任何主题的Python第三方库。PyPI全称是Python Package Index,指的是Python包的索引,它由PSF(Python Software Foundation)来维护,并且展示全球Python计算生态。 我们需要学会利用PyPI的主站检索,找到我们使用和关心的Python第三方

    2024年02月03日
    浏览(108)
  • 引入第三方字体库 第三方字体库Google Fonts

    googlefonts官方网站 googlefonts中国网站 本人是在微信小程序中引入 在static中建一个文件夹font-family 例如字体链接:https://fonts.font.im/css?family=Kirang+Haerang 将该链接的返回的资源的复制到css文件中 font-family.css main.js引入 微信小程序不校验合法域名就能看到结果

    2024年02月16日
    浏览(58)
  • Python第三方库安装——使用vscode、pycharm安装Python第三方库

    在这里介绍vscode、Pycharm安装python第三方库的方法。 操作系统:windows10 专业版 环境如下: Pycharm Comunity 2022.3 Visual Studio Code 2019 Python 3.8 pip:23.0.1 pycharm是一款很强大的、专用于写python的ide。 小白式安装第三方库往往能给初学者一种 “高级感” ,而对于使用惯了Linux的人而言

    2024年02月03日
    浏览(78)
  • Python第三方库批量下载到本地,并离线批量安装第三方库

    鉴于公司内网安装的python版本为python3.6.5,而此时又需要安装第三方库pytest,本来是想直接在Python官网PyPI直接搜对应可匹配跑python3.6.5版本的pytest进行下载然后传到内网安装即可,但是发现pytest依赖别的第三方库,根据报错装了几个依赖的第三方库之后,发现还是一堆的问题

    2024年02月07日
    浏览(94)
  • 安卓玩机搞机-----没有第三方包 刷写第三方各种GSI系统 体验非官方系统

    很多安卓友友热衷与刷这些各种第三方包体验。但有个别机型第三方资源较少。而且有的机型要体验非官方系统却没有对应系统的第三方包。那可以体验下刷gsi系统来畅玩。今天的帖子就聊聊GSI系统的各种刷写操作和对应的故障解析、 💔💔💔💔💔💔💔💔💔什么是GSI 系

    2024年02月05日
    浏览(68)
  • 安卓玩机搞机----移植第三方rom修复 第三方GSI系统修复bug综合解析【一】

    很多朋友热衷与刷写第三方非当前机型官方系统的rom。和刷写第三方gsi等等。例如 米系列机型刷写Flyme 一加机型刷写miui oppo刷写gsi等等。 很多友友也会尝试自己移植第三方rom。但此类操作最大的问题在于修复可以开机后的bug,今天的教程综合说明下这类修复思路。资源步骤

    2024年02月07日
    浏览(87)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包