screen_ratio_adapter 3.0.0
screen_ratio_adapter: ^3.0.0 copied to clipboard

A new Flutter package for screen atio adapter,Low invasion cost.Based wide adaptation,height Scroll or leave blank.It's not a utility class.

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

实践报告 #

下图警戒区为故意超出一个单位的示例图

\设备androidAndroidiOS
设备分辨率1080x1794720x21601242x2688
h/w1.6663.02.164
屏幕密度比率ρ2.6251.23.0
UI稿1(300x510) h/w =1.7过长过短过短
适配比率ρ(300x510)3.602.404.14
UI稿1(414x896) h/w =2.16过长过短不变
适配比率ρ(414x896)2.6081.7393.0

已上传pub.dev ️❤️❤️点赞😘😘

已上传github ️❤️❤️加星😘😘

测试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);//✅

参考及鸣谢 #

一种粗暴快速的Android全屏幕适配方案

flutter 屏幕适配

flutter屏幕适配 ,一种一劳永逸的全局适配方式

5
likes
130
pub points
76%
popularity

A new Flutter package for screen atio adapter,Low invasion cost.Based wide adaptation,height Scroll or leave blank.It's not a utility class.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on screen_ratio_adapter