Flutter 优秀轮子

轮子很棒

Flutter 有了谷歌强大后盾加持,加上跨平台的特性,生态日益丰富,目前大部分应用能够用到的插件在 pub.flutter-io.cn上都可以找得到。本篇介绍 Flutter 最为常见的插件,以避免重复造轮子和新手少走弯路。

Dio 网络请求框架

提起 Flutter 的网络框架,就不得不提 Dio!Dio作为一个网络框架实现了全部的网络请求,包括 GET、POST、PUT、PATCH、DELETE等,同时还支持拦截器,错误捕获和文件下载。借助 Dio,可以快速完成 Flutter App 与后端的数据交互。示例代码如下

Response response;
var dio = Dio();
response = await dio.get('/test?id=12&name=wendu');
print(response.data.toString());
// Optionally the request above could also be done as
response = await dio.get('/test', queryParameters: {'id': 12, 'name': 'wendu'});
print(response.data.toString());

二维码生成qr_flutter

/*
 * QR.Flutter
 * Copyright (c) 2019 the QR.Flutter authors.
 * See LICENSE for distribution and usage details.
 */

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'main_screen.dart';

void main() => runApp(ExampleApp());

/// The example application class
class ExampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarIconBrightness: Brightness.dark,
      systemNavigationBarColor: Colors.white,
      systemNavigationBarIconBrightness: Brightness.dark,
    ));
    return MaterialApp(
      title: 'QR.Flutter',
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: MainScreen(),
    );
  }
}

url_launcher系统应用跳转

在 App 中不可避免会使用url 跳转到系统浏览器或其他应用,这时候 url_launcher 就派上用场了, 用法十分简单:

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

const _url = 'https://flutter.cn';

void main() => runApp(
      const MaterialApp(
        home: Material(
          child: Center(
            child: RaisedButton(
              onPressed: _launchURL,
              child: Text('Show Flutter homepage'),
            ),
          ),
        ),
      ),
    );

void _launchURL() async =>
    await canLaunch(_url) ? await launch(_url) : throw 'Could not launch $_url';

url_launcher支持跳转到系统的浏览器打开网页,跳转拨打电话和发送短信界面,在 pub 上流行度为100%,项目地址为:https://pub.flutter-io.cn/packages/url_launcher

工具库 common_utils ,flustars

如果您是纯Dart项目,可以直接引用本库,如果您是Flutter项目,请使用Flutter常用工具类库 flustars,该库依赖于本项目。flustars库为大家提供更多的工具类,例如SpUtil,ScreenUtil, DirectoryUtil等等

Dart常用工具类库 common_utils

  1. TimelineUtil : 时间轴.
  2. TimerUtil : 倒计时,定时任务.
  3. MoneyUtil : 精确转换,元转分,分转元,支持格式输出.
  4. LogUtil : 简单封装打印日志.
  5. DateUtil : 日期转换格式化输出.
  6. RegexUtil : 正则验证手机号,身份证,邮箱等等.
  7. NumUtil : 保留x位小数, 精确加、减、乘、除, 防止精度丢失.
  8. ObjectUtil : 判断对象是否为空(String List Map),判断两个List是否相等.
  9. EncryptUtil : 异或对称加/解密,md5加密,Base64加/解密.
  10. TextUtil : 银行卡号每隔4位加空格,每隔3三位加逗号,隐藏手机号等等.
  11. JsonUtil : 简单封装json字符串转对象.

Flutter常用工具类库 flustars

  1. SpUtil : 单例"同步"SharedPreferences工具类。支持get传入默认值,支持存储对象,支持存储对象数组。
  2. ScreenUtil : 屏幕适配,获取屏幕宽、高、密度,AppBar高,状态栏高度,屏幕方向.
  3. WidgetUtil : 监听Widget渲染状态,获取Widget宽高,在屏幕上的坐标,获取网络/本地图片尺寸.
  4. ImageUtil : 获取网络/本地图片尺寸.
  5. DirectoryUtil : 文件目录工具类.
  6. DioUtil : 单例Dio网络工具类(已迁移至此处DioUtil)。
项目地址:https://pub.dev/packages/common_utils

flutter_easyrefresh上下拉刷新

flutter 中上下拉加载数据的不二之选,也是国人开发的,支持在大部分组件上套用实现上拉加载或下拉刷新。使用方法也是很简单,同时也支持自定义 header 和 footer。用法如下:

import 'package:flutter_easyrefresh/easy_refresh.dart';
//...
  EasyRefresh(
    child: ScrollView(),
    onRefresh: () async{
      ....
    },
    onLoad: () async {
      ....
    },
  )

flutter_easyrefresh 在 pub 上的流行度为95%,项目地址为:https://pub.flutter-io.cn/packages/flutter_easyrefresh

flutter_swiper 轮播组件

flutter_swiper 是一个轮播组件,号称是 flutter 最佳的轮播组件。flutter_swiper 支持自动轮播,显示页面指示,动画时长,点击回调等多种参数设置:使用方式如下:

new Swiper(
  itemBuilder: (BuildContext context, int index) {
    return new Image.network(
      "http://via.placeholder.com/288x188",
      fit: BoxFit.fill,
    );
  },
  itemCount: 10,
  viewportFraction: 0.8,
  scale: 0.9,
)


flutter_swiper 的流行度达到了99%,项目地址为:https://pub.flutter-io.cn/packages/flutter_swiper

cached_network_image 网络图片加载缓存

cached_network_image 有点类似iOS的 SDWebImage,可以缓存已经加载过的图片而无需重复下载,既提高了加载速度也节省了网络资源请求。同时 cached_network_image 支持占位图、加载进度和请求失败的占位组件,可以做到很好的用户体验。

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),
//......

cached_network_image 流行度达到了99%,项目地址为:https://pub.flutter-io.cn/packages/cached_network_image

shared_preferences 本地离线键值对缓存

shared_preferences类似iOS的 NSUserDefaults和安卓的 SharedPreferences,支持App简单的键值对离线缓存,对于离线存储简单的数据十分适用。但是需要注意的是插件的离线写入操作是异步的,因此并不能保证写入返回后100%存储成功,因此对于十分关键的数据不建议使用.使用方式如下:

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
      child: RaisedButton(
        onPressed: _incrementCounter,
        child: Text('Increment Counter'),
        ),
      ),
    ),
  ));
}

_incrementCounter() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int counter = (prefs.getInt('counter') ?? 0) + 1;
  print('Pressed $counter times.');
  await prefs.setInt('counter', counter);
}

shared_preferences的流行度为100%,项目地址为:https://pub.flutter-io.cn/packages/shared_preferences

image_picker 和 multi_image_pikcer 图片选择器

image_picker 和 multi_image_picker 为图片选择器,前者支持单张图片选择,后者支持多图选择,二者均支持相机或从相册选择图片。需要注意的是 multi_image_picker 默认语言是英文的,需要自己配置本地语言。使用方法如下:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

//......

class _MyHomePageState extends State {
  File _image;
  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.camera);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path);
      } else {
        print('No image selected.');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Picker Example'),
      ),
      body: Center(
        child: _image == null
            ? Text('No image selected.')
            : Image.file(_image),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getImage,
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}

image_picker 项目地址为:https://pub.flutter-io.cn/packages/image_picker,multi_image_picker 项目地址为:https://pub.flutter-io.cn/packages/multi_image_picker。

marquee滚动文字组件

遇到文字太长不想换行也不想截断的时候就可以使用 marquee 了,marquee 在文字超出容器宽度后会自动滚动播报。同时,marquee 支持设置文字的多种参数,如字体,滚动方向,留白,滚动速度等等。

Marquee(
  text: 'Some sample text that takes some space.',
  style: TextStyle(fontWeight: FontWeight.bold),
  scrollAxis: Axis.horizontal,
  crossAxisAlignment: CrossAxisAlignment.start,
  blankSpace: 20.0,
  velocity: 100.0,
  pauseAfterRound: Duration(seconds: 1),
  startPadding: 10.0,
  accelerationDuration: Duration(seconds: 1),
  accelerationCurve: Curves.linear,
  decelerationDuration: Duration(milliseconds: 500),
  decelerationCurve: Curves.easeOut,
)

marquee 的流行度达到了96%,项目地址为:https://pub.flutter-io.cn/packages/marquee。

权限管理 permission_handler

这个插件提供了一个跨平台(iOS,Android)API来请求权限并检查它们的状态。您还可以打开设备的应用程序设置,以便用户可以授予权限。使用方式:

var status = await Permission.camera.status;
if (status.isDenied) {
  // We didn't ask for permission yet or the permission has been denied before but not permanently.
}

// You can can also directly ask the permission about its status.
if (await Permission.location.isRestricted) {
  // The OS restricts access, for example because of parental controls.
}

permission_handler的流行度达到了99%。项目地址为:https://pub.dev/packages/permission_handler

你可能感兴趣的:(Flutter 优秀轮子)