采用flutter開發APP已經1年多了，平時開發的過程中踩過很多坑，今天想分享一個flutter應用跨平臺適配的解決方案，目的是讓你的flutter應用可以靈活高效的自動適配各種平臺，實現UI最大化復用，業務邏輯代碼在不同平臺間能夠共享，支持根據屏幕方向實時選擇不同的布局樣式。
下圖描述了flutter-adapter的整體實現方案，我們在APP的入口處設置當前APP所運行的平臺，這個平臺可以在實際使用的時候動態設置，然后對于每個widget，我們只需要實現特定平臺的樣式適配即可。個別widget在不同平臺的表現可能僅僅是部分屬性的數值不同而已，對于屬性值的垮平臺適配我們提供了一個通用的函數superObjectAdapter去解決這個問題。個別按鈕的點擊事件在不同平臺執行的邏輯可能不一樣，我們提供了superFunctionAdapter函數來解決不同函數調用的跨平臺適配難題。
不同平臺適配效果
使用方式
flutter_adapter插件內置了4類平臺，分別是：手機（TEAdaptPlatform.phone）、手機橫屏（TEAdaptPlatform.phoneLandscape）、pad橫屏（TEAdaptPlatform.padLandscape）、pad豎屏（TEAdaptPlatform.padPortrait）。如果你只適配部分平臺，那么只需要對待適配的widget實現特定平臺的build函數即可，其他未適配的平臺默認會返回Phone的樣式。
使用的時候只需要在APP的入口處采用ScreenAdaptWidget，然后設置當前APP需要適配的平臺名稱即可。
如果你需要擴展適配的平臺，對于StatelessWidget只需要實現一個繼承自FlexibleStatelessWidget的抽象類，然后實現新平臺的build函數并注冊該平臺即可；對于StatefulWidget只需要實現一個繼承自FlexibleState的抽象類，然后實現新平臺的build函數并注冊該平臺即可。
插件使用示例：
ScreenAdaptWidget(
platform: TEAdaptPlatform.phone.toString(),
autoOrientation: true, // 是否根據屏幕方向自適應布局
child: 任意widget
)),
如果你的某個StatelessWidget需要適配特定平臺，只需要將該widget繼承自FlexibleStatelessWidget，然后實現特定平臺的build函數即可。
StatelessWidget適配示例：
class MyStatelessPage extends FlexibleStatelessWidget {
@override
Widget buildPhone(BuildContext context) {
return Text('Phone',style: TextStyle(fontSize: 18.0),);
}
@override
Widget buildPadPortrait(BuildContext context) {
return Text('PadPortrait',style: TextStyle(fontSize: 22.0),);
}
@override
Widget buildPadLandscape(BuildContext context) {
return Text('PadLandscape',style: TextStyle(fontSize: 30.0),);
}
}
StatefulWidget適配示例：
如果你的某個StatefulWidget需要適配特定平臺，只需要將該StatefulWidget對應的的State繼承自FlexibleState，然后實現特定平臺的build函數即可，例如：
class MyStatefulPageState extends FlexibleState<MyStatefulPage> {
@override
Widget buildPhone(BuildContext context) {
return Text('Phone',style: TextStyle(fontSize: 18.0),);
}
@override
Widget buildPadPortrait(BuildContext context) {
return Text('PadPortrait',style: TextStyle(fontSize: 22.0),);
}
@override
Widget buildPadLandscape(BuildContext context) {
return Text('PadLandscape',style: TextStyle(fontSize: 30.0),);
}
}
普通Widget適配示例：
1、如果你的某個widget需要在不同平臺中改變個別屬性的值，那么只需要對特定的屬性值進行跨平臺適配即可，flutter_adapter提供了superObjectAdapter函數來解決屬性值的跨平臺適配難題。
2、如果你的某個函數需要在不同平臺中執行不同的邏輯，那么只需要對特定的函數執行邏輯進行跨平臺適配即可，flutter_adapter提供了superFunctionAdapter函數來解決不同函數調用的跨平臺適配難題（例如：可以讓一個按鈕的點擊事件在不同平臺中執行不同的邏輯）。
class MyNormalPage extends StatelessWidget {
final String textStr;
MyNormalPage(this.textStr);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('page normal'),
),
body: Column(
children: <Widget>[
GestureDetector(
onTap: () {
superFunctionAdapter(context, {
TEAdaptPlatform.phone.toString(): () {
print('tab me on ${TEAdaptPlatform.phone.toString()}');
},
TEAdaptPlatform.padPortrait.toString(): () {
print('tab me on ${TEAdaptPlatform.padPortrait.toString()}');
},
});
},
child: Container(
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.only(bottom: 30.0),
width: double.infinity,
height: 100.0,
color: superObjectAdapter(context, {TEAdaptPlatform.phone.toString(): Colors.yellow, TEAdaptPlatform.padPortrait.toString(): Colors.greenAccent}),
child: Center(
child: Text(
'$textStr ${superObjectAdapter(context, {
TEAdaptPlatform.phone.toString(): "[Phone]",
TEAdaptPlatform.padPortrait.toString(): "[PadPortrait]"
})}',
style: TextStyle(
fontSize: superObjectAdapter(context, {TEAdaptPlatform.phone.toString(): 18.0, TEAdaptPlatform.padPortrait.toString(): 38.0}),
color: Colors.black),
),
),
),
),
],
),
);
}
}
擴展需要適配的平臺：
插件內置的3個平臺在實際使用的過程中可能不夠用，因此我們提供了用戶自定義平臺的適配解決方案。
StatelessWidget適配新平臺：
對于StatelessWidget只需要實現一個繼承自FlexibleStatelessWidget的抽象類，然后實現新平臺的build函數，之后注冊該平臺即可。
abstract class CustomFlexibleStatelessWidget extends FlexibleStatelessWidget {
@protected
Widget buildNewPlatform(BuildContext context) {
return buildPhone(context); // by default, you can return the phone's style
}
@protected
void initAdapter() {
super.initAdapter();
addAdapter(Constant.newPlatform, buildNewPlatform);// register new Platform
}
}
StatelessWidget適配新平臺示例：
class MyStatelessPage extends CustomFlexibleStatelessWidget {
@override
Widget buildPhone(BuildContext context) {
return Text('Phone',style: TextStyle(fontSize: 18.0),);
}
@override
Widget buildPadPortrait(BuildContext context) {
return Text('PadPortrait',style: TextStyle(fontSize: 22.0),);
}
@override
Widget buildNewPlatform(BuildContext context) {
return Text('buildNewPlatform',style: TextStyle(fontSize: 30.0),);
}
}
StatefulWidget適配新平臺：
對于StatefulWidget只需要實現一個繼承自FlexibleState的抽象類，然后實現新平臺的build函數，之后注冊該平臺即可。
abstract class CustomFlexibleState<T extends StatefulWidget> extends FlexibleState<T> {
@protected
Widget buildNewPlatform(BuildContext context) {
return buildPhone(context); // by default, you can return the phone's style
}
@protected
void initAdapter() {
super.initAdapter();
addAdapter(Constant.newPlatform, buildNewPlatform);// register new Platform
}
}
StatefulWidget適配新平臺示例：
class MyStatefulPageState extends CustomFlexibleState<MyStatefulPage> {
@override
Widget buildPhone(BuildContext context) {
return Text('Phone',style: TextStyle(fontSize: 18.0),);
}
@override
Widget buildPadPortrait(BuildContext context) {
return Text('PadPortrait',style: TextStyle(fontSize: 22.0),);
}
@override
Widget buildNewPlatform(BuildContext context) {
return Text('NewPlatform',style: TextStyle(fontSize: 30.0),);
}
}
