Flutter 不同终端适配方案
Flutter 是一个跨平台的移动应用框架，能够在 iOS 和 Android 设备上运行。但是，随着不同设备的出现，屏幕尺寸和分辨率的差异也变得越来越大。因此，如何让 Flutter 应用程序在不同终端上适配成为了一个重要的课题。本文将介绍 Flutter 不同终端适配方案，并提供一个自定义适配类的实现方法。
一、常见手机的分别率
在了解 Flutter 适配方案之前，我们需要了解常见手机的分别率。苹果手机的分别率有多种，例如苹果 6 的分辨率是 1334x750 像素，苹果 6plus 的分辨率是 1920x1080 像素，等等。 Android 手机的分别率也各不相同，例如 1920x1080、2400x1080、2560x1440 等。
二、Flutter 不同终端屏幕适配方案
Flutter 提供了多种屏幕适配方案，例如使用 MediaQuery、LayoutBuilder、FittedBox 等Widget 来实现屏幕适配。然而，这些方法都有其局限性，例如 MediaQuery 只能获取当前屏幕的宽高，而 LayoutBuilder 和 FittedBox 则需要手动计算和设置屏幕尺寸。
这里，我们将介绍使用 flutter_screenutil 插件来实现 Flutter 屏幕适配。flutter_screenutil 是一个流行的 Flutter 插件，用于调整屏幕和字体大小。使用该插件可以让您的 UI 在不同尺寸的屏幕上都能显示合理的布局。
flutter_screenutil 的核心代码如下：
```dart
import 'package:flutter/material.dart';
class ScreenUtil {
static ScreenUtil instance = new ScreenUtil();
// 设计稿的设备尺寸
double width;
double height;
bool allowFontScaling;
static MediaQueryData _mediaQueryData;
static double _screenWidth;
static double _screenHeight;
static double _pixelRatio;
static double _statusBarHeight;
static double _bottomBarHeight;
static double _textScaleFactor;
ScreenUtil({this.width = 1080, this.height = 1920, this.allowFontScaling = false,});
static ScreenUtil getInstance() {
return instance;
}
void init(BuildContext context) {
MediaQueryData mediaQuery = MediaQuery.of(context);
_mediaQueryData = mediaQuery;
_pixelRatio = mediaQuery.devicePixelRatio;
_screenWidth = mediaQuery.size.width;
_screenHeight = mediaQuery.size.height;
_statusBarHeight = mediaQuery.padding.top;
_bottomBarHeight = mediaQuery.padding.bottom;
_textScaleFactor = mediaQuery.textScaleFactor;
}
}
```
三、自定义适配类
使用 flutter_screenutil 插件可以实现 Flutter 屏幕适配，但是该插件有一定的局限性，例如无法自定义适配逻辑。因此，我们可以自定义一个适配类来实现更灵活的屏幕适配。
自定义适配类的实现方法如下：
```dart
class AdaptiveScreen {
static double screenWidth;
static double screenHeight;
static double pixelRatio;
static void init(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
screenWidth = mediaQuery.size.width;
screenHeight = mediaQuery.size.height;
pixelRatio = mediaQuery.devicePixelRatio;
}
static double adaptiveWidth(double designWidth) {
return screenWidth * (designWidth / 375);
}
static double adaptiveHeight(double designHeight) {
return screenHeight * (designHeight / 667);
}
}
```
使用该自定义适配类，我们可以轻松地实现屏幕适配，例如：
```dart
Container(
width: AdaptiveScreen.adaptiveWidth(200),
height: AdaptiveScreen.adaptiveHeight(100),
child: Text('Hello, World!'),
)
```
Flutter 不同终端适配方案有多种，包括使用 flutter_screenutil 插件和自定义适配类。选择合适的适配方案可以让您的 Flutter 应用程序在不同终端上都能显示合理的布局。
