简介
岂论是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.0flutter和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
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)]
表单验证
validation_textformfield: ^2.2.5
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 |
