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

複製代碼

參考及鳴謝

一種粗暴快速的Android全屏幕適配方案

flutter 屏幕適配

flutter屏幕適配 ，一種一勞永逸的全局適配方式