常用的Flutter第三方库 2022-05-17 周二
- 移动端
- 老章888
- 0
简介
不论是iOS开发，还是Android开发，使用第三方库是必不可少的。
现在，切换到Flutter，面临的第一个问题就是该用哪些第三方库？
所有代码都需要自己写？当然不会。
常用的第三方库概览
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.4
get: ^4.6.3
flutter_screenutil: ^5.5.2
linkify: ^4.1.0 #提取链接
flutter_swiper_plus: ^2.0.4
validation_textformfield: ^2.2.5
dio: ^4.0.6
connectivity_plus: ^2.3.0
device_info_plus: ^3.2.3
encrypt: ^5.0.1 #RSA加密
mz_rsa_plugin: ^0.0.4
shared_preferences: ^2.0.15
tab_indicator_styler: ^2.0.0
webview_flutter: ^3.0.4
dotted_line: ^3.1.0
group_button: ^5.0.1
cart_stepper: ^2.0.2
badges: ^2.0.2
flutter_tags_x: ^1.0.0
flutter_easyrefresh: ^2.2.1
fbutton_nullsafety: ^5.0.0
flutter和cupertino_icons也算作第三方，由此可见，离开第三方，根本就是寸步难行。
第三方库指定具体的版本是个好习惯；升级应该手动进行，防止静默升级带来不可预料的变故。
GetX
在配置文件中，就是简单的一行get: ^4.6.3，但是这却是除了系统的flutter之外最重要的一个第三方库。这设置改变了一些编程习惯。
把state独立出来，这个太重要了，这把人的习惯转移到状态数据，UI跟随数据自动变化。这和OC中ReactiveCocoa是一个作用。把一个页面分为state、logic、view的想法也很不错。
路由管理。说实话，Flutter的路由管理虽然比Objective-C的原生好那么一点，但仅仅是一点点而已，非常不明显，只是难兄难弟而已。BuiderContext，上下文？什么鬼？什么都是，什么都不是。并且还像个拖油瓶，明明什么用也没有（至少表面上看起来没用），还非要带着，不胜其烦。路由表，动态路由，命名路由，自作主张提供三种模式，你让使用者怎么选？
仅仅统一路由方式，去掉BuiderContext，就值得引入GetX
如果用Flutter自己的路由，我只会选择动态路由一种，其他什么路由表，命名路由，全部滚一边去。想一目了然，比得过iOS原生的故事版吗？Flutter是纯代码写界面，提供这种鸡肋的功能简直是副作用。
一个GetX可以替换Bloc，fish_redux，fluro等几个，性价比还是很高的。
多语言，换皮肤，snackbar（其实就是toast），对话框，本地缓存，等等麻烦事也顺手处理了，非常赞。
参考文章：
官网
Flutter GetX 使用 --- 简洁的魅力！
大佬手把手教你优雅地进行Flutter开发（GetX值得一试)
网络
- 一般都会选择Dio；目前这个和Objective-C中的AFNetworking地位差不多
dio: ^4.0.6
- 一般外面会套个单例
class DioManager {
/// *********************************** 实例变量 ***********************************
Dio dio;
String dioManageID;
/// [DioManager]持有的 - 静态的final实例对象, 并进行初始化
static final DioManager _dioManager = DioManager._instance();
/// *********************************** 构造函数 ***********************************
/// [DioManager]私有的 自定义命名式构造方法, Ps:instance不是关键字, 可随意命名
/// 加 _ 表示该命名式构造函数为[DioManager]私有, 外部是不可调用的,
/// 从而确保该命名式构造函数的使用, 仅可用来创建 _dioManager 这个静态的final实例对象
DioManager._instance() {
dio = Dio();
dioManageID = "看看ID是啥" + Random().nextInt(1000).toString();
}
/// 工厂化的主构造函数 - 返回私有的实例对象
/// 返回的就是唯一的实例 _dioManager
factory DioManager() {
return _dioManager;
}
/// *********************************** 实例方法 ***********************************
}
dart中factory关键词的使用
Flutter 单例的写法及理解注释
- 一般都会配一个网络状态检查的插件
connectivity_plus: ^2.3.0
一般我们会用到GET，POST等方法，如果封装最顶层的API，有好几个，比较麻烦，所以一般会直接封装第2层的request()方法。具体的封装可以看下面的参考文章。
参考文章：
Flutter Dio源码分析(四)--封装
Flutter Dio源码分析(三)--深度剖析
Flutter Dio源码分析(二)--HttpClient、Http、Dio对比
Flutter Dio源码分析(一)--Dio介绍
本地缓存
- 一般都会选择key-value形式的shared_preferences
shared_preferences: ^2.0.15
- 使用方式和Objective-C开发的plist读写差不多
// Obtain shared preferences.
final prefs = await SharedPreferences.getInstance();
// Save an integer value to 'counter' key.
await prefs.setInt('counter', 10);
// Save an boolean value to 'repeat' key.
await prefs.setBool('repeat', true);
// Save an double value to 'decimal' key.
await prefs.setDouble('decimal', 1.5);
// Save an String value to 'action' key.
await prefs.setString('action', 'Start');
// Save an list of strings to 'items' key.
await prefs.setStringList('items', <String>['Earth', 'Moon', 'Sun']);
// Try reading data from the 'counter' key. If it doesn't exist, returns null.
final int? counter = prefs.getInt('counter');
// Try reading data from the 'repeat' key. If it doesn't exist, returns null.
final bool? repeat = prefs.getBool('repeat');
// Try reading data from the 'decimal' key. If it doesn't exist, returns null.
final double? decimal = prefs.getDouble('decimal');
// Try reading data from the 'action' key. If it doesn't exist, returns null.
final String? action = prefs.getString('action');
// Try reading data from the 'items' key. If it doesn't exist, returns null.
final List<String>? items = prefs.getStringList('items');
- 参考文章
shared_preferences
Flutter数据存储之shared_preferences
设备信息
iOS和Android是不一样的，需要区分设备类型。
可以用device_info_plus这个插件：
device_info_plus: ^3.2.3
- 一般用来获取设备唯一标识符
void getDeviceCode() async{
DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
if(Platform.isAndroid) {
AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
print('设备唯一标识: ${androidInfo.androidId}');
}else{
IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
print('设备唯一标识：${iosInfo.identifierForVendor}');
}
}
- 参考文章：
device_info_plus
flutter获取设备信息(device_info_plus)
屏幕适配
- 接入：
flutter_screenutil: ^5.5.3+1
- 使用方式和iOS开发的相对布局差异很大
ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200) (sdk>=2.6 : 200.r) //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体
12.sm // 取12和12.sp中的最小值
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth (sdk>=2.6 : 1.sw) //设备宽度
ScreenUtil.screenHeight (sdk>=2.6 : 1.sh) //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高
ScreenUtil.textScaleFactor //系统字体缩放比例
ScreenUtil().scaleWidth // 实际宽度设计稿宽度的比例
ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例
ScreenUtil().orientation //屏幕方向
0.2.sw //屏幕宽度的0.2倍
0.5.sh //屏幕高度的50%
20.setVerticalSpacing // SizedBox(height: 20 * scaleHeight)
20.horizontalSpace // SizedBox(height: 20 * scaleWidth)
const RPadding.all(8) // Padding.all(8.r) - take advantage of const key word
REdgeInsts.all(8) // EdgeInsets.all(8.r)
EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r).
- 参考文章
flutter_screenutil
flutter_screenutil
【Flutter】屏幕像素适配方案 ( flutter_screenutil 插件 )
轮播图
- 引入
flutter_swiper_plus: ^2.0.4
*参考文章
flutter_swiper_plus
Flutter 轮播图flutter_swiper的使用
从字符串提取链接
- 接入
linkify: ^4.1.0 #提取链接
- 简单使用
import 'package:linkify/linkify.dart';
linkify("Made by https://cretezy.com person@example.com");
// Output: [TextElement: 'Made by ', UrlElement: 'https://cretezy.com' (cretezy.com), TextElement: ' ', EmailElement: 'person@example.com' (person@example.com)]
- 参考文章
linkify
表单验证
- 引入
validation_textformfield: ^2.2.5
- 比如Email验证
EmailValidationTextField(
whenTextFieldEmpty: "Please enter email",
validatorMassage: "Please enter valid email",
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 0.5),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black, width: 0.5),
),
border: OutlineInputBorder(),
counterText: '',
hintStyle: TextStyle(color: Colors.black, fontSize: 18.0)),
textEditingController: txtEmailCtrl,
)
- 参考文章
validation_textformfield
WebView
flutter没有WebView，通过插件的方式使用原生的WebView。官方也提供了相关的插件。
引入：
webview_flutter: ^3.0.4
- 参考文章
webview_flutter
Flutter应用开发之webview_flutter插件
Flutter WebView使用以及分析
flutter_inappwebview
单选框，复选框
- 引入
group_button: ^5.0.1
单选按钮，复选按钮都是一组组出现的，世界使用CheckBox不是很方便。单选按钮还没有。所以用这个插件就很方便。
使用很方便
GroupButton(
isRadio: false,
onSelected: (index, isSelected) => print('$index button is selected'),
buttons: ["12:00", "13:00", "14:30", "18:00", "19:00", "21:40"],
)
- 参考文章
group_button
虚线
实线有Divide()但是，虚线却没有，所以需要插件
- 引入
dotted_line: ^3.1.0
- 使用很方便，大多数时候用默认的虚线就可以了
import 'package:dotted_line/dotted_line.dart';
DottedLine()
- 参考文章
dotted_line
购物车加减按钮
购物车加1减1按钮也有插件，真是强大
- 引入
cart_stepper: ^2.0.2
- 使用
Widget _buildStepper() {
return CartStepperInt(
count: _counter,
size: 30,
activeForegroundColor: Colors.purple,
didChangeCount: (count) {
setState(() {
_counter = count;
});
},
);
}
- 参考文章
cart_stepper: ^2.0.2
小红点
一般用来提示未读消息的数量等等，用得还是比较多的。
- 引入
badges: ^2.0.2
- 使用
import 'package:badges/badges.dart';
Badge(
badgeContent: Text('3'),
child: Icon(Icons.settings),
)
- 参考文章
badges: ^2.0.2
标签
说实话，标签有长有短，流式排列，要做起来还是很麻烦的，幸好有第三方的插件。
- 引入
flutter_tags_x: ^1.0.0
- 参看文章
flutter_tags_x: ^1.0.0
上拉刷新下拉加载
就像iOS中的MJRefresh，这是一个很常用的功能，但是系统提供的API很不好用，所以找相应的第三方插件就很迫切。
- 引入
flutter_easyrefresh: ^2.2.1
- 参考文章：
flutter_easyrefresh: ^2.2.1
按钮
flutter只提供三种按钮，并且感觉都不好用。大多数时候是用一个手势包含一个Container来实现的。
- 引入
fbutton_nullsafety: ^5.0.0
- 参考文章
fbutton_nullsafety: ^5.0.0
免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。
