跟我学企业级flutter项目:如何将你的项目简单并且快速屏幕自适应

12 篇文章 0 订阅
kg_density是一款简洁的Flutter屏幕适配解决方案,无需侵入代码即可帮助已有项目快速适应不同尺寸屏幕。通过简单的集成和配置,如KgDensity.initKgDensity(375),以及在MaterialApp中使用KgDensity.initSize(),可以实现页面的完美适配,避免文字丢失和布局错乱问题。适配前后对比明显,适用于不想在页面代码中添加额外适配逻辑的情况。
摘要由CSDN通过智能技术生成

前言

你的flutter在小屏幕手机上出现文字丢失了么?
你的flutter应用在小屏幕手机上排版出错了么?
你的flutter应用在大屏幕手机上布局错乱了么?
你在用flutter_screenutil做屏幕自适应么?
今天我来给大家介绍一款简单不侵入代码的自适应。
如果你有如下需求:

  1. 旧的flutter想快速屏幕适应各种手机
  2. 页面代码中不想增加关于适配屏幕的代码

kg_density

代码地址:https://github.com/smartbackme/KgDensity

kg_density 是一个极简的屏幕适配方案,可以快速的帮助已经开发好的项目适配屏幕

开始集成

dependencies:
  kg_density: ^0.0.1

以下机型来自 iphone5s

登录适配之前
在这里插入图片描述

登录适配之后

在这里插入图片描述

图表页面适配之前

在这里插入图片描述

图表页面适配之后

在这里插入图片描述

其他页面适配之前
在这里插入图片描述

其他页面适配之后

在这里插入图片描述

使用方法:

  1. 创建 FlutterBinding

class MyFlutterBinding extends WidgetsFlutterBinding with KgFlutterBinding {

  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding.instance == null) MyFlutterBinding();
    return WidgetsBinding.instance!;
  }
}

  1. MaterialApp 配置

MaterialApp(
              ///定义主题
              theme: ThemeData(),
              builder: KgDensity.initSize(),

            );

  1. 启动前的配置

    void main() {
      ///初始化
      KgDensity.initKgDensity(375);
      MyFlutterBinding.ensureInitialized();
      ///运行
      runApp(App());
    }

注意说明:

  1. KgDensity.initSize(builder: ??)

为了方便其他builder配置,代码中专门增加其他builder

使用方法

    builder: KgDensity.initSize(builder: EasyLoading.init()),

  1. KgDensity.initKgDensity(375)

数字配置的是按照设计稿件的最窄边来配置的

若不使用KgDensity 进行适配,请不要init

  1. 正确获取size
    MediaQuery.of(context).size

请不要使用 window.physicalSize,MediaQueryData.fromWindow(window)

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二蛋和他的大花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值