flutter网络框架以及相关要点

# flutter网络框架相关

# dio以及生态

https://pub.dev/packages/retrofit

# app内抓包界面

https://pub.dev/packages/network_inspector

https://pub.dev/packages/chucker_flutter 带ui

https://pub.dev/packages/chuck_interceptor

https://pub.dev/packages/requests_inspector

https://pub.dev/packages/dio_log

https://pub.dev/packages/network_logger

# 日志打印

https://pub.dev/packages/pretty_dio_logger

https://pub.dev/packages/dio_http_formatter 非常漂亮的日志格式化输出

https://pub.dev/packages/curl_logger_dio_interceptor

https://pub.dev/packages/pretty_http_logger/versions

# 监控

https://pub.dev/packages/dio_firebase_performance

# cookie管理

https://pub.dev/packages/cookie_jar

https://pub.dev/packages/dio_cookie_manager

# token刷新

https://pub.dev/packages/fresh_dio

https://pub.dev/packages/dio_refresh_bot

# auth

https://pub.dev/packages/oauth_dio

# 重试

https://pub.dev/packages/dio_smart_retry

# 缓存管理

https://pub.dev/packages/dio_cache_interceptor

https://pub.dev/packages/dio_http_cache like Rxcache (opens new window) in Android., Dio-http-cache uses sqflite (opens new window) as disk cache, and LRU (opens new window) strategy as memory cache. Inspired by flutter_cache_manager (opens new window).

# 本地代理

https://pub.dev/packages/shelf_proxy

https://pub.dev/packages/http_proxy

# 证书锁定

https://pub.dev/packages/ssl_pinning_plugin

https://pub.dev/packages/http_certificate_pinning

# 下载

https://pub.dev/packages/flutter_downloader

https://pub.dev/packages/simple_downloader

# http2

https://pub.dev/packages/dio_http2_adapter

# json转dart工具

https://github.com/fluttercandies/JsonToDart

在这里插入图片描述

# dio封装

https://blog.csdn.net/qq_35364808/article/details/111829424

https://juejin.cn/post/6844904190838325262 代码地址: https://github.com/yuexunshi/flutter_demo 对错误的处理比较完善

https://juejin.cn/post/6844904098643312648

https://github.com/JunAILiang/flutter_dio_util 带四篇文章和四个视频 https://www.liujunmin.com/flutter/dio_encapsulation.html 完成度并不太高: https://github.com/dhola-hardik/flutter_api_call_dio/blob/main/lib/api/api_utils.dart

https://pub.dev/packages/network_manager

https://juejin.cn/post/7101238139254997006 dio的分层封装

# 网络框架包装层

不要直接使用dio或原生桥接api,而是包一层,方便自己业务有关的处理,以及随时切换实现.

HttpApi.postJson(url, args,
    success: (data){
      debugPrint("0-->"+data.toString());
    },
    fail: (code,msg){
      debugPrint("fail-->"+code+","+msg);
    });

1
2
3
4
5
6
7
8

包装类:

typedef Success<T> = Function(T data);
typedef Fail = Function(String code, String msg);

class HttpApi {
  static IHttpApi? _api = null;

  static set api(IHttpApi value) {
    _api = value;
  }

  static void postJson(
    String arg_url,
    Map<String, Object> arg_json, {
    String? loadingText,
    Success? success,
    Fail? fail,
  }) {
    if (_api != null) {
      return _api!.postJson(arg_url, arg_json,loadingText: loadingText,success: success,fail: fail);
    }
    fail?.call("-1","IHttpApi has no impl");

  }
}

abstract class IHttpApi {
  void postJson(String arg_url, Map<String, Object> arg_json,{
    String? loadingText,
    Success? success,
    Fail? fail,
  });
}

///纯用作http后台接口的声明类
abstract class IHttpUrl {}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# json转dart

网络框架返回map,然后自己调xxx.fromJson(map)

使用as代码生成插件经常会报错.

直接用网站生成 https://app.quicktype.io/

# 页面状态StatusView

loading,error,empty

https://github.com/skyNet2017/flutter_loading

https://github.com/chimon2000/async_loader

class StatusView extends StatefulWidget {
  StatusView({
    Key? key ,
    required this.child, // 需要加载的Widget
    required this.todoAfterError, // 错误点击重试
    required this.errMsg ,
    this.emptyMsg = "内容为空,点击可刷新",
    this.loadingStatus = LoadingStatus.idle,
  }) : super(key: key);

1
2
3
4
5
6
7
8
9

大概是这些范畴:

关于网络框架设计封装的扯淡 (opens new window)

# 其他

# 开发框架(状态管理,路由,依赖管理等)

https://pub.dev/packages/get getX

https://pub.dev/packages/flutter_modular 有点像getx

# 成套ui组件

https://pub.dev/packages/flutter_neumorphic 浮雕风格的ui组件

https://pub.dev/packages/velocity_x demo地址 https://vx-demo.web.app/ 比较漂亮

# 工具类

https://pub.dev/packages/flustars

https://pub.dev/packages/common_utils

https://pub.dev/packages/basic_utils

https://pub.dev/packages/nb_utils

# 页面状态工具

# 页面loading,error,empty

# 下拉刷新上拉加载更多

https://github.com/fluttercandies/loading_more_list

https://pub.dev/packages/liquid_pull_to_refresh

# 屏幕适配

https://juejin.cn/post/6844903693955891208 flutter_ScreenUtil https://github.com/OpenFlutter/flutter_ScreenUtil

# form表单工具

主要推荐下面这个: 自带各种ui和验证功能

https://pub.dev/packages/flutter_form_builder

FormBuilderCheckbox - Single checkbox field
FormBuilderCheckboxGroup - List of checkboxes for multiple selection
FormBuilderChoiceChip - Creates a chip that acts like a radio button.
FormBuilderDateRangePicker - For selection of a range of dates
FormBuilderDateTimePicker - For Date, Time and DateTime input
FormBuilderDropdown - Used to select one value from a list as a Dropdown
FormBuilderFilterChip - Creates a chip that acts like a checkbox
FormBuilderRadioGroup - Used to select one value from a list of Radio Widgets
FormBuilderRangeSlider - Used to select a range from a range of values
FormBuilderSegmentedControl - For selection of a value using the CupertinoSegmentedControl widget as an input
FormBuilderSlider - For selection of a numerical value on a slider
FormBuilderSwitch - On/Off switch field
FormBuilderTextField - A Material Design text field input

其他:

https://pub.dev/packages/snippet_coder_utils

https://pub.dev/packages?q=form

https://pub.dev/packages/form_validator

https://pub.dev/packages/reactive_forms

https://pub.dev/packages/form_builder_validators

https://pub.dev/packages/form_field_validator

# 开关

https://pub.dev/packages/flutter_switch

# 输入时联想

https://pub.dev/packages/flutter_typeahead autocomplete

https://pub.dev/packages/dropdown_search

# 选择相关

# 各种选择: 单选,多选

https://pub.dev/packages/smart_select 各种样式的单选多选

https://pub.dev/packages/multi_select_flutter

# 下拉单选

https://pub.dev/packages/dropdown_button2

# 日期,时间选择

基本都是Android日历风格,没有滚轮风格

https://pub.dev/packages/date_time_picker

https://pub.dev/packages/datetime_picker_formfield

https://pub.dev/packages/syncfusion_flutter_datepicker

下面是滚轮风格

https://pub.dev/packages/flutter_picker 内置日期,时间,也有自定义数据源的通用选择

# 通用三级选择

https://pub.dev/packages/flutter_levels_picker 逐级懒加载

# 滑块,区域选择

https://pub.dev/packages/syncfusion_flutter_sliders

# 中国省市区三级选择

https://github.com/hanxu317317/city_pickers

# 通用三级选择

https://pub.dev/packages/flutter_levels_picker

# 选图

https://pub.dev/packages/image_picker

# 选文件

https://pub.dev/packages/file_picker 用的是原生的系统选择界面,界面真tm丑

# pdf查看

https://pub.dev/packages/syncfusion_flutter_pdfviewer

https://pub.dev/packages/flutter_neat_pdf_viewer 逐页pdf查看 A flutter plugin for handling PDF files. Works on both Android & iOS. Originally forked from (https://github.com/CrossPT/flutter_plugin_pdf_viewer).

# pdf编辑和查看

https://pub.dev/packages/pdf

https://pub.dev/packages/syncfusion_flutter_pdf

# 输入框内容格式化

https://pub.dev/packages/mask_text_input_formatter

# 控制原生的键盘

https://pub.dev/packages/keyboard_actions

# 现成界面

# 登录注册界面

https://pub.dev/packages/flutter_login

# 验证码输入界面

https://pub.dev/packages/pin_code_fields

# 自动填充验证码功能

https://pub.dev/packages/sms_autofill

# 信用卡输入

https://pub.dev/packages/flutter_credit_card

# 数据操作

# 加解密/数据指纹

# 压缩和解压

https://pub.dev/packages/archive Zip /tar/gzip...

# 常用ui小组件-toast/snackbar/notification/dialog

https://github.com/fluttercandies/flutter_smart_dialog

https://pub.dev/packages/another_flushbar

https://pub.dev/packages/awesome_notifications

# webview

A Flutter plugin that allows you to add an inline webview, to use an headless webview, and to open an in-app browser window.

https://pub.dev/packages/flutter_inappwebview

# 文件存储

https://pub.dev/packages/file_support

# kv存储

https://pub.dev/packages/hive 纯dart

# 数据库

https://pub.dev/packages/sqflite SQLite plugin for Flutter (opens new window). Supports iOS, Android and MacOS

https://pub.dev/packages/floor room风格的sqlite操作,底层是sqflite

https://pub.dev/packages/sqfentity ORM,类似greendao

# 定位和地图

https://pub.dev/packages/geolocator

https://pub.dev/packages/google_maps_flutter

https://pub.dev/packages/location

https://pub.dev/packages/flutter_map based off of 'leaflet.js' (opens new window)

# 图表

https://pub.dev/packages/syncfusion_flutter_charts

https://pub.dev/packages/charts_flutter Material Design风格预览: https://google.github.io/charts/flutter/gallery.html

# 文本text

https://pub.dev/packages/auto_size_text

# 富文本

# 富文本编辑器

https://pub.dev/packages/syncfusion_flutter_datepicker

# debug功能

# ui

https://pub.dev/packages/device_preview 预览当前界面在其他任何系统上的效果,非常牛逼

https://pub.dev/packages/flex_color_scheme Use FlexColorScheme to make beautiful color scheme based Flutter Material design themes

https://github.com/fluttercandies/fconsole 类似微信小程序的 v-console

# 便捷api

# 各种扩展方法

https://github.com/ReinBentdal/styled_widget/wiki/Widgets 对常用样式,widget的封装,简化调用

https://github.com/orgs/fluttercandies/repositories?q=extend&type=all&language=&sort= 多种系统widget的功能扩展

# 观察者

https://pub.dev/packages/event_bus

# 开发辅助

assets自动生成 https://github.com/fluttercandies/assets_generator

# 组件选型/汇总

https://github.com/orgs/fluttercandies/repositories?type=all 全面,更新及时

https://juejin.cn/post/6844904008830681101 Flutter 必备开源项目-2019

# 开发脚手架

https://github.com/iotjin/jh_flutter_demo

https://github.com/yuexunshi/flutter_demo

# 成套ui组件

https://bruno.ke.com/page/guide/bruno

# 完整项目

https://juejin.cn/post/7037321681915871269 appFlowy 真的是 Notion 的替代品? 一周暴涨 star 9k 多

https://github.com/CarGuo/gsy_flutter_demo 各种 Flutter 独立例子

https://github.com/CarGuo/gsy_github_app_flutter 项目涉及各种常用控件、网络、数据库、设计模式、主题切换、多语言、Redux等 GSY新书：《Flutter开发实战详解》 (opens new window)

# 图书

https://guoshuyu.cn/home/wx/ Flutter完整开发实战详解系列，GSY Flutter 系列专栏整合

# web调试跨域问题

https://pub.dev/packages/webdev

https://pub.dev/packages/webdev_proxy

# 方案1 代理服务器-项目级别

和vue的代理服务器一样的原理,需要侵入项目代码

参考: https://juejin.cn/post/6844904080179986440

用到的库:

https://pub.dev/packages/shelf

https://pub.dev/packages/shelf_cors_headers

基于官方的本地代理服务器shelf_proxy,修改源码:

https://pub.dev/packages/shelf_proxy

增加对cookie的修改:


void transferCookies(http.StreamedResponse clientResponse) {
  String? cookie = clientResponse.headers['set-cookie'];
  if(cookie == null || cookie.isEmpty){
    return;
  }
//服务器要发送多个 cookie，则应该在同一响应中发送多个 Set-Cookie 标头。
  Cookie cookie2 = Cookie.fromSetCookieValue(cookie);
  cookie2.secure = true;
  cookie2.httpOnly = false;
  cookie2.domain = LocalProxyConfig.localHost;
  clientResponse.headers['set-cookie'] = cookie2.toString()+";SameSite=None;";

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 方案2 chrome禁用跨域-pc级别-推荐

利用工具改dart源码里chrome的配置

https://pub.dev/packages/flutter_cors

安装:

dart pub global activate flutter_cors

配置命令路径

Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):

  export PATH="$PATH":"$HOME/.pub-cache/bin"

1
2
3
4

运行

fluttercors --disable

输出:

Patching /Users/hss/dev/flutter3.0.5/packages/flutter_tools/lib/src/web/chrome.dart
Deleting /Users/hss/dev/flutter3.0.5/bin/cache/flutter_tools.stamp
CORS checks are now disabled for Flutter's Chrome instance

1
2
3

编辑

上次更新: 2022/09/30, 21:58:18

← flutter状态管理 flutter图片相关→

flutter网络框架以及相关要点

# flutter网络框架相关

# dio以及生态

# app内抓包界面

# 日志打印

# 监控

# cookie管理

# token刷新

# auth

# 重试

# 缓存管理

# 本地代理

# 证书锁定

# 下载

# http2

# json转dart工具

# dio封装

# 网络框架包装层

# json转dart

# 页面状态StatusView

# 其他

# 开发框架(状态管理,路由,依赖管理等)

# 成套ui组件

# 工具类

# 页面状态工具

# 页面loading,error,empty

# 下拉刷新上拉加载更多

# 屏幕适配

# form表单工具

# 开关

# 输入时联想

# 选择相关

# 各种选择: 单选,多选

# 下拉单选

# 日期,时间选择

# 通用三级选择

# 滑块,区域选择

# 中国 省市区三级选择

# 通用三级选择

# 选图

# 选文件

# pdf查看

# pdf编辑和查看

# 输入框内容格式化

# 控制原生的键盘

# 现成界面

# 登录注册界面

# 验证码输入界面

# 自动填充验证码功能

# 信用卡输入

# 数据操作

# 加解密/数据指纹

# 压缩和解压

# 常用ui小组件-toast/snackbar/notification/dialog

# webview

# 文件存储

# kv存储

# 数据库

# 定位和地图

# 图表

# 文本text

# 富文本

# 富文本编辑器

# debug功能

# ui

# 便捷api

# 各种扩展方法

# 观察者

# 开发辅助

# 组件选型/汇总

# 开发脚手架

# 成套ui组件

# 完整项目

# 图书

# web调试跨域问题

# 方案1 代理服务器-项目级别

# 方案2 chrome禁用跨域-pc级别-推荐

# 中国省市区三级选择