Flutter随笔

2020-11-19

简介

Flutter设计初衷并不是为了和其它平台进行混合开发，它的目的是为了打造一个完整的跨平台应用程序。目前能以不错的体验运行在安卓和iOS上, 后面可能还有web. 本文记录一下学习Flutter遇到的坑.

1,flutter中的网络请求无法被抓包(需要代码中配置).

关于为什么不可以抓包参考:https://www.jianshu.com/p/aba21adc04b5

关于Charles抓包配置参考: https://www.jinhuizhao.top/2018/11/20/Charls%E6%8A%93%E5%8C%85%E9%85%8D%E7%BD%AE/#more

最终我的解决方法:继承HttpOverrides抽象类, 覆盖createHttpClient方法配置自己的ip和自己在抓包软件设置的端口!

自定义类代码:DebugHttpOverride.dart

import 'dart:io';

class DebugHttpOverride extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext context) {
    return super.createHttpClient(context)..findProxy = _findProxy;
  }

  static String _findProxy(url) {
    // proxySettings 当作 findProxyFromEnvironment 的 environment
    return HttpClient.findProxyFromEnvironment(url, environment: {
      "http_proxy": '192.168.5.232:8686',
      "https_proxy": '192.168.5.232:8686',
    });
  }
}

main.dart中:

void main() {
  if (Constants.isDebug()) {
    HttpOverrides.global = DebugHttpOverride();
  }
 runApp(RuiguApp());
}

2, flutter依赖的全局context

context本质是一个element,是一个真正显示在界面上的东西. 而万物皆Widget中的Widget其实是一个布局的配置类! 所以导航跳转,获取顶层视图这类方法必须依赖一个context. 而页面必须在build方法才能拿到context. 非常不利于一些拿不到context情况下的封装和业务分离.知道找到一个非常好用的库one_context: https://pub.dev/packages/one_context

one_context介绍: https://blog.csdn.net/weixin_48636410/article/details/107335443

有了这个就可以随意用全局context了!再也不用担心当前页面在不在init有没有build完成!
Toast显示隐藏

 OneContext().overlay.addOverlay(
    overlayId: kCostomOverlayId,
    builder: (context) {
      ///TODO 
      return 自定义Widget;
    };
/// 2秒后隐藏    
await Future.delayed(Duration(milliseconds: duration));
OneContext().overlay.removeOverlay(kCostomOverlayId);    
);

Loading显示隐藏

 OneContext().showProgressIndicator(
    backgroundColor: Colors.transparent,
    builder: (context) {
      ///TODO 
      return 自定义Widget;
    };
/// hidden    
OneContext().hideProgressIndicator();
);

其他更多不一一列举, 反正就是很好用!

OneContext().pushNamed('/detail_page');
OneContext().pop();
OneContext().context();
OneContext().showBottomSheet(...);
...

3, flutter中的json和model的互转.

flutter中无法动态获取类和对象的信息,类似java中的反射和iOS中的runtime! 所以很遗憾无法自动实现json和model转换!

我的解决方法: 抓包或者postman中获取接口返回数据,copy到https://app.quicktype.io/ 进行dart语言的转换!可以直接由json=>建好的model+转换方法,直接copy到代码中即可!

使用:

/// json转model
UserInfo userInfo = userInfoFromJson(response['data']);

///model转json
Map userMap = userInfo.toJson();