flutter路由管理框架，flutter 路由管理插件

Flutter初探--常用依赖包

国外地址：

国内镜像：

以 flutter_screenutil 为例

路由框架 annotation_route

状态管理 provider

UI适配 flutter_screenutil

刷新控件 flutter_easyrefresh

网络请求 dio

toast控件 fluttertoast

图表库 charts_flutter

网络监听 connectivity

事件总线 event_bus

日历组件 table_calendar

官方webview webview_flutter

第三方webview flutter_webview_plugin

该篇文章为常用依赖包总结，用来记录所需要的常用依赖包，后续会不断扩充内容~

相关问答

Q1: 前端常用的框架有哪些？

前端三大框架，是Angular、React、Vue，这三个框架现在是最为流行也是最多人用的框架。

React：

1.声明式设计：React采用声明范式，可以轻松描述应用。

2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活：React可以与已知的库或框架很好地配合。

优点：

1.速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

2.跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。

3.模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。

4.单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构5.同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。缺点：React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

Vue：

Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。

它有以下的特性：

1.轻量级的框架

2.双向数据绑定

3.指令

4.插件化

优点：

1.简单：官方文档很清晰，比Angular简单易学。

2.快速：异步批处理方式更新DOM。

3.组合：用解耦的、可复用的组件组合你的应用程序。

4.紧凑：~18kbmin+gzip，且无依赖。

5.强大：表达式无需声明依赖的可推导属性(computedproperties)。

6.对模块友好：可以通过NPM、Bower或Duo安装，不强迫你所有的代码都遵循Angular的各种规定，使用场景更加灵活。

缺点：

1.新生儿：Vue.js是一个新的项目，没有angular那么成熟。

2.影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

3.不支持IE8。

Angular：

Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中。

它有以下的特性：

1.良好的应用程序结构

2.双向数据绑定

3.指令

4.HTML模板

5.可嵌入、注入和测试

优点：

1.模板功能强大丰富，自带了极其丰富的angular指令。

2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；3.自定义指令，自定义指令后可以在项目中多次使用。

4.ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

5.angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点：

1.angular入门很容易但深入后概念很多,学习中较难理解。

2.文档例子非常少,官方的文档基本只写了api,一个例子都没有,很多时候具体怎么用都是google来的,或直接问misko,angular的作者。

3.对IE6/7兼容不算特别好,就是可以用jQuery自己手写代码解决一些。

4.指令的应用的最佳实践教程少,angular其实很灵活,如果不看一些作者的使用原则,很容易写出四不像的代码,例如js中还是像jQuery的思想有很多dom操作。

5.DI依赖注入如果代码压缩需要显示声明。

Q2: flutter 导航以及传参方式

flutter 导航方式有基本路由和命名路由

1、基本路由

======================================

2.命名路由

2.1命名路由无参数

第一步：创建路由表

第二步：将路由表赋值给MaterialApp的routers

第三步：通过Navigator跳转到name对应的组件

命名路由传参方式2种

2.2命名路由传参方式1

前面两步同2.1命名路由无参数

第三步：通过Navigator跳转到name对应的组件(多加一个参数如下)

参数的获取方式：

=========================================

2.2命名路由传参方式2

第一步：创建路由表

第二步：使用MaterialApp的onGenerateRoute 将路由表赋值给MaterialApp的routers （这里就不能给routers在赋值了，因为路由跳转先从MaterialApp的routers表里查找，如果查到了就跳转了，如果查不到才会走到这里onGenerateRoute）

这里把onGenerateRoute抽出来

Login组件需要添加arguments参数在构造函数里面

第三步：通过Navigator跳转到name对应的组件(多加一个参数如下)

=========================================

路由替换

返回跟路由

Q3: Flutter状态管理--GetX的简单使用

一、前言

Flutter开发，就需要对各种状态的管理，就是在请求数据的时候需要实时变化，各种交互变化等，在没有使用GetX之前使用Provider,用Provider的时候觉得真香，挺方便的，需要刷新的时候直接 notifyListeners(); 用了GetX之后觉得Provider太繁琐了。这边介绍下GetX的使用以及常用的方法。

二、 GetX

GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。

1、相关优势：

三、使用

1、第一步 引入get

2、第二步

修改入口、配置路由

3、路由

Routes类

Pages类

4、状态管理

我一般一个page对应一个controller， controller来处理逻辑，控制page.

简单使用

5、依赖注入

依赖注入也是我喜欢的，可以减少很多工作。

第一步

第二步

6、跨页面交互

7、黑暗模式

可以参考前期写的博客。 黑暗模式的适配

Q4: Flutter混合开发实战

之前开发了一个纯Flutter的项目，结果接到个新的需求需要使用Flutter单独开一个模块集成到原有的android项目中

下面分享一下如何集成现有的项目和如何继承以及碰到的问题

1.首先第一步 修改gradle

因为 Flutter 当前仅支持为 x86_64，armeabi-v7a 和 arm64-v8a 构建预编（AOT）的库 所以我们需要修改gradle的文件限制 APK 中支持的架构，从而避免 libflutter.so找不到引起的崩溃

2.新建一个FlutterModel的工程

2.使用aar文件 因为所有工程统一使用jenkins打包所以我们放在本地肯定是不合适的

说以我们需要 打包aar并上传服务器

上传完成后在android中引用

在开发中遇到的问题

1.关于android和Ios中的跳转传参问题

这个问题在android端还是比较方便的 但是的在Ios端并不怎么好实现

最终决定使用flutter_boost来完成android和Ios与Flutter的通信操作

flutter_boost github地址：

集成文档：

集成文档给出了 但是没有android的 尴尬

下满分享下android的集成

（1）在flutter的 pubspec.yaml工程中添加

（2）修改android工程

使用本地工程的时候需要在工程共添加

使用aar的时候不需要添加

（3）在android工程中添加对应的条状路由配置

（4）在使用默认的flutter_boost启动界面的时候可能碰到状态栏丢失的情况

所以最好集成BoostFlutterActivity写一个新的activity方便处理状态栏和activity进出动画

（5）跳转并传参

//params 传多个参数可以使用json的形式

2.在flutter中的网络框架使用的dio结果在ios的弹出loading的时候出现卡顿现象

解决方式：1.服务换证书 （但是后台太忙暂时没有支持的人员）

2.ios使用原生的loading解决

3.在使用dio的时候出现ios部分手机 网络请求缓慢问题

解决方法：请求的时候使用http 2.0协议

插件地址：

flutter路由管理框架的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于flutter 路由管理插件、flutter路由管理框架的信息别忘了在本站进行查找喔。