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螢幕適配 ，一種一勞永逸的全域性適配方式