八月又过了一半了，真心觉得日子飞逝。今天来聊聊在Flutter中如何做iPad和平板的适配。
一、Flutter适配iPad和平板的原理
其实吧，在Flutter中适配各种尺寸像iPad、平板甚至现在Flutter可以支持web、Desktop之后，有更多的屏幕适配。试着想一想我们在ios、Android原生中怎么做的适配？
首先，我们的知道屏幕是什么尺寸的，然后给不同尺寸的屏幕定义一个范围，如：手机屏幕在一个范围内，pad在一个范围内。然后在获取当前的横竖屏状态，根据屏幕尺寸和横竖屏状态，给屏幕设置一个layout布局。
其实，在Flutter中也一样。很多第三方库中设置了当屏幕最小边的范围小于600时就是手机屏幕。大于600就是pad...
< 600: mobile
600 < ScreenSize < 950: tablet
大于950: desktop
定义好标准后，第三方库做的无非就是定义一些widget wrapper，(包装类)。一些定义设置值得方法。仅此而已。
二、Flutter中的适配iPad和平板第三方库
在pub.dev中有很多第三方适配
2.1 device_preview
这个库虽然不是用来做iPad和平板适配功能的，但是它还挺有意思的。
引入库，这里就不多说了。在我们引入库之后，我们使用它包装Flutter App。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
locale: DevicePreview.locale(context), // Add the locale here
builder: DevicePreview.appBuilder, // Add the builder here
home: HomePage(),
);
}
}
然后，在运行我们的App，之后再手机或者平板，最好我们运行在web上，现在flutter不是支持web了吗。我们就会看到类似这样的界面。
它帮我们生成了一个适配展示页面，我们可以选择不同的机型，然后它会对应生成在该机型上，我们的App会如何展示，还挺好玩的。大家可以试试：
有兴趣的可以去看看pub.dev上的介绍，挺有意思的。去试试吧~
2.2 breakpoint
breakpoint这个库，它定义了很多屏幕尺寸的范围，以及它为了适应不同屏幕尺寸，它也对相应的屏幕尺寸范围定义了很多附加的变量，比如说像gridview这种布局的有多少列，列与列之间的间距，padding，margin值有多少，等等。这些在不同尺寸范围下都是不同的。都是为了响应式布局。为了让布局在不同尺寸屏幕上看起来都很自然，不突兀。
使用的话，大家可以去看看pub.dev上的介绍，使用也很简单，但是呢，它只是提供了breakpoint的定义和重写，没有对widget进行一些封装wrapper。所以使用其他就显得不是很方便。
那有没有那种可以躺平的那种呢，简简单单，不用想事，调用哥widget一包装就搞定两套布局的呢？答案是肯定的！！
2.3 responsive_builder
2.3.1 默认和修改机型尺寸定义
这个库预定义了不同机型的尺寸范围：
static const RefinedBreakpoints _defaultRefinedBreakPoints =
const RefinedBreakpoints(
// Desktop
desktopExtraLarge: 4096,
desktopLarge: 3840,
desktopNormal: 1920,
desktopSmall: 950,
// Tablet
tabletExtraLarge: 900,
tabletLarge: 850,
tabletNormal: 768,
tabletSmall: 600,
// Mobile
mobileExtraLarge: 480,
mobileLarge: 414,
mobileNormal: 375,
mobileSmall: 320,
);
当然，你也可以根据自己的需求修改标准，可以单个页面修改也可以整个App修改：
全局Screen breakpoints修改：
void main() {
ResponsiveSizingConfig.instance.setCustomBreakpoints(
ScreenBreakpoints(desktop: 800, tablet: 550, watch: 200),
);
runApp(MyApp());
}
单个页面修改：
ScreenTypeLayout(
breakpoints: ScreenBreakpoints(
tablet: 600,
desktop: 950,
watch: 300
),
mobile: Container(color:Colors.blue)
tablet: Container(color: Colors.yellow),
desktop: Container(color: Colors.red),
watch: Container(color: Colors.purple),
);
2.3.2 在需要定义不同布局的地方使用ScreenTypeLayout
在responsive_builder库中，它帮我们定义了widget wrapper包装类，我们只需要调用ScreenTypeLayout，然后在不同分类中传入对应的布局，就可以在不同机型上完成布局的适配，有两种方式，mobile为必传布局
// Construct and pass in a widget per screen type
ScreenTypeLayout(
mobile: Container(color:Colors.blue)
tablet: Container(color: Colors.yellow),
desktop: Container(color: Colors.red),
watch: Container(color: Colors.purple),
);
// Construct and pass in a widget builder per screen type
ScreenTypeLayout.builder(
mobile: (BuildContext context) => Container(color:Colors.blue),
tablet: (BuildContext context) => Container(color:Colors.yellow),
desktop: (BuildContext context) => Container(color:Colors.red),
watch: (BuildContext context) => Container(color:Colors.purple),
);
因为它的库文件也比较少，如果说你需要适配iPad和table横竖屏，也就是说横屏样式和竖屏不一样，你也可以魔改一下，加一个tabletLandScape属性，想必这也不难。不要问为什么，偶就是这么玩的。💯
但是也可以这么玩，不需要魔改啦~
ScreenTypeLayout(
mobile: OrientationLayoutBuilder(
portrait: (context) => Container(color: Colors.green),
landscape: (context) => Container(color: Colors.pink),
),
tablet: OrientationLayoutBuilder(
portrait: (context) => Container(color: Colors.green),
landscape: (context) => Container(color: Colors.pink),
),
);
类似这种，加一个OrientationLayoutBuilder包装类，其实他就是自己帮你计算了横竖屏，并吧相应的布局传入而已。
2.3.2 如果说，我们并不是需要修改布局，仅仅是布局相同只是有些尺寸在不同屏幕上不同，间距不同而已。这里也提供了方法。
Container(
padding: EdgeInsets.all(getValueForScreenType<double>(
context: context,
mobile: 10,
tablet: 30,
desktop: 60,
)
),
child: Text('Best Responsive Package'),
)
使用getValueForScreenType方法，设置不同机型的值。
这个库使用就这么简单了，系不系很简单？
2.4 responsive_framework
这个库呢，并没有定义像BreakPoint这些玩意，使用这个库后，它会自己计算当前屏幕，自动缩放页面的布局，使其页面显示效果更好，它不单单只是放大字体大小等，它会整体缩放。
它的原理：无非就是计算屏幕的宽高比，然后使用SizedBox包裹布局，并搭配FittedBox控件来做缩放。
具体的话，可以看看pub.dev上的介绍，可以搭配responsive_builder一起使用。
三、响应式布局widget使用
3.1 Android 中的响应式
像在Android中用来做响应式布局的有ConstraintLayout约束布局、Fragments、Svg图等来适配不同屏幕尺寸
3.2 iOS 中的响应式
而在iOS中用来做响应式布局的有Auto Layou、Size Classes、UIStackView等
3.3 Flutter中的响应式控件
在Flutter中响应式也有很多：MediaQuery(可以获取屏幕尺寸，屏幕的横竖屏状态)、LayoutBuilder、OrientationBuilder、Expanded和Flexible、FractionallySizedBox、AspectRatio;
其原理无非就是获取屏幕区域的尺寸，横竖屏大小，尺寸不设置固定值使用比例等布局。
具体使用大家就看看这篇文章吧，写的很详细。
《How to build responsive layout in Flutter》
四、结语
在Flutter中，ipad或者平板适配与iOS和Android原生中适配大同小异，根据机型，横竖屏设置不同的屏幕布局和尺寸大小。
Ending...
