Flutter

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

2022-05-20  本文已影响0人  勇往直前888

简介

不论是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之外最重要的一个第三方库。这设置改变了一些编程习惯。

仅仅统一路由方式，去掉BuiderContext，就值得引入GetX
如果用Flutter自己的路由，我只会选择动态路由一种，其他什么路由表，命名路由，全部滚一边去。想一目了然，比得过iOS原生的故事版吗？Flutter是纯代码写界面，提供这种鸡肋的功能简直是副作用。

网络

 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

本地缓存

shared_preferences: ^2.0.15

// 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');

设备信息

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}');
    }
  }

屏幕适配

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_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: "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,
)

WebView

webview_flutter: ^3.0.4

webview_flutter
Flutter应用开发之webview_flutter插件

Flutter WebView使用以及分析
flutter_inappwebview

单选框，复选框

group_button: ^5.0.1

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

上一篇下一篇

猜你喜欢

热点阅读