前言

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

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

kg_density

代码地址：github.com/smartbackme…

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

开始集成

dependencies:
  kg_density: ^0.0.1

以下机型来自 iphone5s

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

登录适配之后

在这里插入图片描述

图表页面适配之前

在这里插入图片描述

图表页面适配之后

在这里插入图片描述

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

其他页面适配之后

在这里插入图片描述

使用方法：

创建 FlutterBinding


class MyFlutterBinding extends WidgetsFlutterBinding with KgFlutterBinding {

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

MaterialApp 配置


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

            );

启动前的配置


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

注意说明：

KgDensity.initSize(builder: ??)

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

使用方法

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

KgDensity.initKgDensity(375)

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

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

正确获取size

    MediaQuery.of(context).size

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

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

前言

kg_density

开始集成

使用方法：