常用的Flutter第三方库 2022-05-17 周二

手机游戏开发者 · 2024-10-6 05:42:07

简介

岂论是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: "

lease enter email", validatorMassage: "

lease 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

常用的Flutter第三方库 2022-05-17 周二

所属分类: 问答交流

新帖推荐: 30日

推荐作品