Flutter屏幕适配,简单粗暴的全局适配方式

screen_ratio_adapter😘😘 一个Flutter package ,屏幕适配器，入侵成本极低。基于宽度方向适应，高度滚动或留空。并不是一个screen_util。再也不为适配屏幕重复搬砖。

设计稿如同模特上挂着的衣服，但是强行穿在不同设备上，就成了买家秀，要么左右不对称，甚至撑破。

基于一种理念

一套多售，这是批量订制而不是私人定制。

服装设计稿——>加工厂批量生产不同尺码——>顾客选购——>着身；

中间环节由本插件代码处理

原理

还记得Android原生上今日头条适配方案吗？就是修改运行时获取的设备屏幕密度比率常数。这个方案很早之前就有人提出过只是人微言轻传播的不好。

对于用户来说屏幕就是一个矩形（至少目前的主流设备）；而主流移动设备已经培养多年用户上下滑动屏幕的习惯；

主流设备变得更“窄”；

基于以上三点，以屏幕宽度适配通用性高，实现效果好。至于实际设备高/宽与设计比例的差异处理，自行留白或纵向改为scrollWidget

实践报告

\设备	android	Android	iOS
设备分辨率	1080x1794	720x2160	1242x2688
h/w	1.666	3.0	2.164
屏幕密度比率ρ	2.625	1.2	3.0
UI稿1（300x510) h/w =1.7	过长	过短	过短
适配比率ρ(300x510)	3.60	2.40	4.14

| |

|
| UI稿1（414x896) h/w =2.16 | 过长 | 过短 | 不变 |
| 适配比率ρ(414x896) | 2.608 | 1.739 | 3.0 |

| | | |

|
| | | | |

使用方式

点赞加星小礼物
复制粘贴人人爱
如有BUG记小本
携尔长刀来相砍

已上传pub.dev ️

已上传 github ️)

##复制粘贴
dependencies:
  screen_ratio_adapter: ^0.0.2

import 'package:screen_ratio_adapter/screen_ratio_adapter.dart';
///设计稿尺寸，单位应是pt或dp
Size uiSize = Size(414, 896);
//void main() => runApp(MyApp());
void main() => runFxApp(MyApp(), uiSize: uiSize);

最后

Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心，但很多FLutter兴趣爱好者进阶学习确实资料，今天我把我搜集和整理的这份学习资料分享给有需要的人
领取地址：
Flutter：从认识到实战