Flutter
使用Flutter一直是拒绝的，感觉追不动新技术了。但是当看到用的人越来越多，flutter的书籍已经全面超过OC和Swift了。是时候低下还有几许青丝的头了，虽然学不精，但我学的广。!_!
一、准备工作
找一些网上的免费资料学起来，flutter中文网站看一个大概，一般感觉看不下去，先看个大概吧。然后详细的学习Flutter实战，将所有的代码都敲一遍。做到所有的功能自己实现。
建议使用Mac来开发，那么搭建环境会比较方便。Flutter使用Stable Channel，直接上最新的版本，虽然有一点坑，碰到问题后网上的解决方法有点少。但是办法总比困难多，学习的太顺利，记住的东西太少。
Dart语言的学习感觉花一点时间过一下就好，简单的定义变量，函数，集合看一下，够用。
二、安装及升级
注意：/Public/Flutter/flutter是我本地的路径，需要替换。
- 参考https://flutter.dev/community/china上的描述，将flutter从下载到本地。
git clone -b stable https://github.com/flutter/flutter.git - 执行
flutter doctor进行dart SDK的下载。 -
vim .bash_profile中添加export PATH=~/Public/Flutter/flutter/bin:$PATH。 -
source .bash_profile让PATH生效。 - 在android studio和VS code安装flutter插件。
-
flutter upgrade在/Users/arthurwang/Public/Flutter/flutter 安装flutter路径中进行。
三、 常用布局
- Container： 只有一个子Widget。默认充满，包含了padding、margin、color、宽高、decoration等。
- Padding： 只有一个子Widget。只用于设置Padding，常用于嵌套child，给child设置padding。
- Center：只有一个子Widget。只用于居中显示，常用于嵌套child，给child设置居中。
- Stack：可以有多个子Widget。子Widget堆叠在一起。
- Column：可以有多个子Widget。垂直布局。
- Row： 可以有多个子Widget。水平布局。
- Expanded：只有一个子Widget。在Column和Row中充满。（不会超出父视图）
- ListView：可以有多个子Widget。
- Align: 只有一个子Widget。 绝对布局，可以设置位置。
- SizeBox： 强制设置它的孩子宽度或者高度为指定值。传width、height、child。
明白这些布局的使用，基本能够满足页面的布局。
四、组件
- MaterailApp：作为APP顶层的主要入口，可配置主题，多语言，路由等。
- Scaffold： 用户页面承载Widget，包含appbar、snackbar、drawer等material design设定。
- AppBar： 用于Scaffold的appbar，内有标题、二级页面返回按键等。
- Text：显示文本，可通过style设置TextStyle来设置字体样式等。
- RichText： 福文本。设置TextSpan，可以拼接出富文本场景。
- TextField： 文本输入框。
- Image： 图片加载。
- FlatButton： 按键点击。
明白基本组件，可以构建一般页面了。
五、 网络请求
有两种思路（1）通过flutter和native交互，发送url和params到native，然后返回结果。（2）通过flutter和native交互，从native获取params然后在flutter进行网络请求。
考虑到Android的网络第三方库使用注解来实现请求，所以放弃了思路（1），尝试思路（2）并封装请求。
网络请求官方推荐第三方库Dio。
class ApiService {
// 单例配置
static ApiService get apiService => _getInstance();
static ApiService _apiService = ApiService._internal();
// 网络请求配置
static const _platform = const MethodChannel("******");
static Dio _dio = Dio();
String? _baseUrl;
static const int _GET = 0;
static const int _POST = 1;
// 初始化
factory ApiService() => _getInstance();
static ApiService _getInstance() {
return _apiService;
}
ApiService._internal() {
_dio.options.connectTimeout = 5000;
_dio.options.receiveTimeout = 3000;
_dio.options.contentType = Headers.formUrlEncodedContentType;
_dio.options.responseType = ResponseType.json;
_setBaseUrl();
}
Future<void> _setBaseUrl() async {
try {
String? baseUrl = await _platform.invokeMethod("***") as String?;
if (null != baseUrl) {
_dio.options.baseUrl = baseUrl;
_baseUrl = baseUrl;
}
} on PlatformException catch (e) {
// Do nothing
}
}
Future<Map<String, dynamic>?> _request(
int type, String url, Map<String, String>? params) async {
if (null == _baseUrl) {
await _setBaseUrl();
}
Map<String, String>? tokenParams;
try {
Map<String, String>? paramsMap;
if (null != params) {
paramsMap = Map();
paramsMap["params"] = json.encode(params);
}
tokenParams = Map<String, String>.from(
await _platform.invokeMethod("***", paramsMap));
} on PlatformException catch (e) {
// Do nothing
}
print("ApiService url is $url, params is $tokenParams");
Response<Map<String, dynamic>>? response;
try {
switch (type) {
case _GET:
response = await _dio.get(url, queryParameters: tokenParams);
break;
case _POST:
response = await _dio.post(url, queryParameters: tokenParams);
break;
}
} on DioError catch (e) {
print("$url 错误 ${e.message}");
throw RequestError(kUnknownError, "服务器走失了，请稍后重试");
}
print("$url response is $response");
if (0 != response?.data?["status"]) {
throw RequestError(response?.data?["status"], response?.data?["msg"]);
} else {
print("ApiService response.data is ${response?.data}");
return response?.data;
}
}
// 网络请求
// 获取信息
Future<UserInfoEntity> getUserInfo() async {
Map<String, dynamic>? response =
await _request(_GET, "url/url/url", null);
if (null != response) {
return UserInfoEntity().fromJson(response);
} else {
throw RequestError(kUnknownError, "服务器走失了，请稍后重试");
}
}
采用工厂模式创建一个网络请求，在创建时设置好配置。之后添加新的接口，只需要在底部依次添加。
Future<UserInfoEntity> getUserInfo() async {
Map<String, dynamic>? response =
await _request(_GET, "url/url/url", null);
if (null != response) {
return UserInfoEntity().fromJson(response);
} else {
throw RequestError(kUnknownError, "服务器走失了，请稍后重试");
}
}
采用处
try {
UserInfoEntity entity = await ApiService.apiService.getUserInfo();
userInfoData = entity.data;
notifyListeners();
} on RequestError catch (e) {
print("e.message is ${e.message}, e.code is ${e.code}");
}
其中的UserInfoEntity为定义的Model，RequestError为自定错误类型。
六、 Json转Model
强烈推荐Android Studio的插件FlutterJsonBeanFactory，使用方法参照官网。如果要修改或重建Model，那么将之前的model删除再创建一次。有一些小的修改，可以用alt+J来刷新。
注意：Json数据如果不能“Make”，那么可以试下将最后一个逗号删除。
七、 状态共享
当用户信息此数据需要用在很多页面，那么考虑采用官方推荐的provider来实现刷新Widget。
void main() => runApp(ChangeNotifierProvider<PersonalCenterProviderModel>.value(
value: PersonalCenterProviderModel(),
child: MyApp(),
));
建议将Provider添加到顶部，方便在任何页面中获取UserInfo。
class PersonalCenterProviderModel with ChangeNotifier {
UserInfoData? userInfoData;
void refreshUserInfo() async {
try {
UserInfoEntity entity = await ApiService.apiService.getUserInfo();
userInfoData = entity.data;
notifyListeners();
} on RequestError catch (e) {
print("e.message is ${e.message}, e.code is ${e.code}");
}
}
}
PersonalCenterProviderModel类中可以添加很多方法来更新数据。
PersonalCenterProviderModel _model =
Provider.of<PersonalCenterProviderModel>(context);
backgroundImage: NetworkImage(_model.userInfoData?.portrait ?? defaultImage),
使用方式，当userInfo中的portrait发生改变时，那么页面会重建。
PersonalCenterProviderModel _model =
Provider.of<PersonalCenterProviderModel>(context, listen: false);
_model.refreshUserInfo();
如果仅仅是获取model来调用方法，那么将listen设置为false。
八、Flutter和Native交互
参考module集成到iOS和Android。
iOS的使用方式
- (void)initialFlutterVC
{
FlutterEngine *flutterEngine = [[FlutterEngine alloc] initWithName:@"my flutter engine"];
[flutterEngine run];
[GeneratedPluginRegistrant registerWithRegistry:flutterEngine];
self.flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
[self initialFlutterMethods];
self.flutterViewController.modalPresentationStyle = UIModalPresentationFullScreen;
}
打开Flutter页面
- (void)personalButtonDidClick:(id)sender
{
[self presentViewController:self.flutterViewController animated:YES completion:nil];
}
记得提前初始化flutterEngine，可以加快打开的速度。
Android的使用方式
flutterEngine = new FlutterEngine(this);
flutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());
FlutterEngineCache.getInstance().put(engine_personal_center, flutterEngine);
提前初始化flutterEngine
btn_jump.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(FlutterActivity.
withCachedEngine(engine_personal_center).build(HomeActivity.this));
}
});
通过缓存打开Flutter页面。
添加交互方法
final String CHANNEL = "qji_flutter/getUserInfo";
MethodChannel methodChannel = new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL);
methodChannel.setMethodCallHandler(new MethodChannel.MethodCallHandler() {
@Override
public void onMethodCall(@NonNull MethodCall call, @NonNull MethodChannel.Result result) {
switch (call.method) {
case "*":
result.success(API.SERVER_URL);
break;
case "*":
String paramsStr = call.argument("params");
Gson gson = new Gson();
Type jsonType = new TypeToken<HashMap<String, String>>() {
}.getType();
HashMap<String, String> params = gson.fromJson(paramsStr, jsonType);
result.success(ParamManager.Companion.token(params));
break;
case "*":
EventMessage<String> eventMessage = new EventMessage<>();
eventMessage.setTag(EVENT_LOGOUT);
EventBus.getDefault().post(eventMessage);
UserAccount.getInstance().logout();
break;
case "*":
String path = call.argument("imagePath");
if (null == path || path.isEmpty()) {
result.error("1", "上传失败", null);
} else {
uploadImageToOSS(path, result);
}
break;
case "*":
// DO Nothing
break;
default:
result.notImplemented();
break;
}
}
});
iOS与Android的用法类似，注意必须是同一个flutterEngine，不然会找不到。
九、iOS打包
如果打包的证书不是debug或release，那么需要FLUTTER_BUILD_MODE设置为Release才能进行Ad-hoc和Release打包。
在../qiji_flutter/.ios/Flutter/flutter_export_environment.sh中添加
export "FLUTTER_BUILD_MODE=Release"。
网友评论