screen_ratio_adapter
A new Flutter package.Based on screen rectangle with wide orientation adaptation, height scrolling or leave blank. Looks just like the design. No more repetitive moving of bricks for adapting screens. 长得就像设计稿一样。再也不为适配屏幕重复搬砖。
设计稿如同模特上挂着的衣服，但是强行穿在不同设备上，就成了买家秀，要么左右不对称，甚至撑破。
TOC
基于一种理念
一套多售，这是批量订制而不是私人定制。
服装设计稿——>加工厂批量生产不同尺码——>顾客选购——>着身；
中间环节由本插件代码处理
原理
还记得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 |
测试release模式下效果
Additional arguments:--release
使用方式
点赞加星小礼物
复制粘贴人人爱
如有BUG记小本
携尔长刀来相砍
dependencies:
screen_ratio_adapter: ^latest version
import 'package:screen_ratio_adapter/screen_ratio_adapter.dart';
///设计稿尺寸，单位应是pt或dp
var uiSize = BlueprintsRectangle(414, 896);
//void main() => runApp(MyApp());
void main() {
FxWidgetsFlutterBinding.ensureInitialized(
uiBlueprints: uiSize);
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
builder: FxTransitionBuilder(builder: null),//勿忘
);
}
}
————————————————————————
Container(
child: Text("W= 415"),
width: 415.w
height: 80.h)；//❌
Container(
child: Text("W= 415"),
width: 415
height: 80)；//✅