pub.dev 上的热门插件（一）

莫鹏飞
669 阅读6分钟

  • url_launcher

    关键词：url、scheme

    功能：可以根据url打开对应的app、浏览器、webview、打电话等

    pub地址：pub.dev/packages/ur…

    git地址：github.com/flutter/plu…

    引入依赖方式：

    dependencies:
  url_launcher: ^6.1.3

import 'package:url_launcher/url_launcher.dart';

    使用例子：pub.dev/packages/ur…

  • http

    关键词：网络请求

    功能：flutter中基础的网络请求库，基于future

    pub地址：pub.dev/packages/ht…

    git地址：github.com/dart-lang/h…

    引入依赖方式：

    dependencies:
    http: ^0.13.4

import 'package:http/http.dart';

    使用例子：

    import 'dart:convert' as convert;

import 'package:http/http.dart' as http;

void main(List<String> arguments) async {
  // This example uses the Google Books API to search for books about http.
  // https://developers.google.com/books/docs/overview
  var url =
      Uri.https('www.googleapis.com', '/books/v1/volumes', {'q': '{http}'});

  // Await the http get response, then decode the json-formatted response.
  var response = await http.get(url);
  if (response.statusCode == 200) {
    var jsonResponse =
        convert.jsonDecode(response.body) as Map<String, dynamic>;
    var itemCount = jsonResponse['totalItems'];
    print('Number of books about http: $itemCount.');
  } else {
    print('Request failed with status: ${response.statusCode}.');
  }
}

  • provider

    关键词：状态管理

    功能：对 InheritedWidget 组件的上层封装，使其更易用，更易复用。可以全局管理状态。简单的可以理解为context中保存我们的内容，可以在任意时候获取、改变或者使用。

    pub地址：pub.dev/packages/pr…

    git地址：github.com/rrousselGit…

    引入依赖方式：

    dependencies:
  provider: ^6.0.3

import 'package:provider/provider.dart';

    使用例子：pub.dev/packages/pr…

  • image_picker

    功能：ios/android打开系统图片选择器选择图片/视频或拍照。

    pub地址：pub.dev/packages/im…

    git地址：github.com/flutter/plu…

    引入依赖方式：

    dependencies:
  image_picker: ^0.8.5+3

    使用例子：

    final ImagePicker _picker = ImagePicker();
// Pick an image 选择图片
final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
// Capture a photo 拍一张照片
final XFile? photo = await _picker.pickImage(source: ImageSource.camera);
// Pick a video 选择一个视频
final XFile? image = await _picker.pickVideo(source: ImageSource.gallery);
// Capture a video 拍一个视频
final XFile? video = await _picker.pickVideo(source: ImageSource.camera);
// Pick multiple images 选择多个照片
final List<XFile>? images = await _picker.pickMultiImage();

  • get

    关键词：快速开发、状态管理、路由管理

    功能：GetX是轻量且强大的flutter解决方案。结合了高性能的状态管理以及智能依赖注入、快速实用的路由管理。个人理解可以作为快速开发的基础框架。

    pub地址：pub.dev/packages/ge…

    git地址：github.com/jonataslaw/…

    引入依赖方式：

    dependencies:
  get: ^4.6.5

    使用例子：pub.dev/packages/ge…

  • cached_network_image

    关键词：图片、缓存

    功能：带缓存的图片加载控件

    pub地址：pub.dev/packages/ca…

    git地址：github.com/Baseflow/fl…

    引入依赖方式：

    dependencies:
  cached_network_image: ^3.2.1

import 'package:cached_network_image/cached_network_image.dart';

    使用例子：

    CachedNetworkImage(
      imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

  • path_provider

    关键词：文件、路径、外部文件存储

    功能：官方插件，获取文件路径。如临时文件路径、外部存储路径。不同平台支持文件路径有差异。

    pub地址：pub.dev/packages/pa…

    git地址：github.com/flutter/plu…

    引入依赖方式：

    dependencies:
  path_provider: ^2.0.11

import 'package:path_provider/path_provider.dart';

    使用例子：

    Directory tempDir = await getTemporaryDirectory();
String tempPath = tempDir.path;

Directory appDocDir = await getApplicationDocumentsDirectory();
String appDocPath = appDocDir.path;

  • flutter_local_notifications

    关键词：通知、提醒、消息通知

    功能：本地通知提醒库，各平台有一定差异，需要独立配置。

    pub地址：pub.dev/packages/fl…

    git地址：github.com/MaikuB/flut…

    引入依赖方式：

    dependencies:
  flutter_local_notifications: ^9.6.1

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

    使用例子：pub.dev/packages/fl…

  • flutter_bloc

    关键词：状态管理

    功能：优秀的状态管理库。

    pub地址：pub.dev/packages/fl…

    git地址：github.com/felangel/bl…

    引入依赖方式：

    dependencies:
  flutter_bloc: ^8.0.1

import 'package:flutter_bloc/flutter_bloc.dart';

    使用例子：pub.dev/packages/fl…

  • firebase_auth

    关键词：firebase

    功能：firebase认证库。

    pub地址：pub.dev/packages/fi…

    git地址：github.com/firebase/fl…

    引入依赖方式：

    dependencies:
  firebase_auth: ^3.3.20

import 'package:firebase_auth/firebase_auth.dart';

    使用例子：pub.dev/packages/fi…

  • permission_handler

    关键词：权限管理库。

    功能：android、ios申请具体的权限。例子中展示了android下的权限申请与判断。主要是有个坑，判断拒绝并不再提示无法直接通过权限Permission.camera.isPermanentlyDenied 去判断，而要申请权限返回的结果去判断，所以我们可以结合shouldShowRequestRationale以及isGranted的结果去判断，当shouldShowRequestRationale和isGranted都为false时可以判断为拒绝并不再提示，然后打开设置页面进行手动打开权限。

    pub地址：pub.dev/packages/pe…

    git地址：github.com/baseflow/fl…

    引入依赖方式：

    dependencies:
  permission_handler: ^10.0.0

import 'package:permission_handler/permission_handler.dart';

    使用例子：

    // PermissionStatus.permanentlyDenied 拒绝并不再提示
// PermissionStatus.denied 拒绝
// PermissionStatus.restricted 操作系统限制访问，例如由于家长控制。
// PermissionStatus.granted 
var isPermanentlyDenied =
    await Permission.camera.isPermanentlyDenied;

bool isPermissionGranted = await Permission.camera.isGranted;
//要向用户解释一下你的app为什么需要这个权限。当如果用户已经授权或者用户明确禁止（权限被禁用且不再提示）的时候就不需要再去解释了，所以此时会返回false。
var shouldShowRequestRationale =
    await Permission.camera.shouldShowRequestRationale;

if (Platform.isAndroid) {
  if (isPermissionGranted) {
    updateResult("isGranted:true");
    SmartDialog.showToast('isGranted:true');
  } else {
    if (!shouldShowRequestRationale) {
      var permissionStatus = await Permission.camera.request();
      if (permissionStatus.isPermanentlyDenied) {
        updateResult("isPermanentlyDenied:true");
        openAppSettings();
      }
    } else {
      var permissionStatus = await Permission.camera.request();
      if (permissionStatus.isGranted) {
        updateResult("isGranted:true");
        SmartDialog.showToast('isGranted:true');
      } else {
        updateResult("isGranted:false");
        SmartDialog.showToast('isGranted:false');
      }
    }
  }
}

  • carousel_slider

    关键词：slider、viewpager、轮播图

    功能：实现轮播图、滑动切换布局等滑动布局。

    pub地址：pub.dev/packages/ca…

    git地址：github.com/serenader20…

    引入依赖方式：

    dependencies:
  carousel_slider: ^4.1.1

import 'package:carousel_slider/carousel_slider.dart';

    使用例子：

    CarouselSlider(
  options: CarouselOptions(height: 400.0),
  items: [1,2,3,4,5].map((i) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.symmetric(horizontal: 5.0),
          decoration: BoxDecoration(
            color: Colors.amber
          ),
          child: Text('text $i', style: TextStyle(fontSize: 16.0),)
        );
      },
    );
  }).toList(),
)
//options参数
CarouselSlider(
   items: items,
   options: CarouselOptions(
      height: 400,
      aspectRatio: 16/9,
      viewportFraction: 0.8,
      initialPage: 0,
      enableInfiniteScroll: true,
      reverse: false,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 3),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
      autoPlayCurve: Curves.fastOutSlowIn,
      enlargeCenterPage: true,
      onPageChanged: callbackFunction,
      scrollDirection: Axis.horizontal,
   )
 )

    效果图：

    basic.gif

    image.gif

    indicator.gif

    vertical.gif

  • geolocator

    关键词：定位、GPS

    功能：系统原生定位功能。

    pub地址：pub.dev/packages/ge…

    git地址：github.com/baseflow/fl…

    引入依赖方式：

    dependencies:
  geolocator: ^8.2.1

import 'package:geolocator/geolocator.dart';

    使用例子：

    import 'package:geolocator/geolocator.dart';

/// Determine the current position of the device.
///
/// When the location services are not enabled or permissions
/// are denied the `Future` will return an error.
Future<Position> _determinePosition() async {
  bool serviceEnabled;
  LocationPermission permission;

  // Test if location services are enabled.
  serviceEnabled = await Geolocator.isLocationServiceEnabled();
  if (!serviceEnabled) {
    // Location services are not enabled don't continue
    // accessing the position and request users of the 
    // App to enable the location services.
    return Future.error('Location services are disabled.');
  }

  permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.denied) {
      // Permissions are denied, next time you could try
      // requesting permissions again (this is also where
      // Android's shouldShowRequestPermissionRationale 
      // returned true. According to Android guidelines
      // your App should show an explanatory UI now.
      return Future.error('Location permissions are denied');
    }
  }

  if (permission == LocationPermission.deniedForever) {
    // Permissions are denied forever, handle appropriately. 
    return Future.error(
      'Location permissions are permanently denied, we cannot request permissions.');
  } 

  // When we reach here, permissions are granted and we can
  // continue accessing the position of the device.
  return await Geolocator.getCurrentPosition();
}

  • firebase_messaging

    关键词：消息推送

    功能：firebase消息推送库。

    pub地址：pub.dev/packages/fi…

    git地址：github.com/firebase/fl…

    引入依赖方式：

    dependencies:
  firebase_messaging: ^11.4.2

import 'package:firebase_messaging/firebase_messaging.dart';

    使用例子：pub.dev/packages/fi…

  • cloud_firestore

    关键词：云、nosql、firebase

    功能：Cloud Firestore 的 Flutter 插件，这是一个云托管的 noSQL 数据库，在 Android 和 iOS 上具有实时同步和离线支持。

    pub地址：pub.dev/packages/cl…

    git地址：github.com/firebase/fl…

    引入依赖方式：

    dependencies:
  cloud_firestore: ^3.1.18

import 'package:firebase_messaging/firebase_messaging.dart';

    使用例子：pub.dev/packages/cl…

  • font_awesome_flutter

    关键词：图标

    功能：Font Awesome 图标包可作为 Flutter Icons 使用。 提供 1600 个附加图标以在您的应用程序中使用。

    pub地址：pub.dev/packages/fo…

    git地址：github.com/fluttercomm…

    引入依赖方式：

    dependencies:
  font_awesome_flutter: ^10.1.0

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

    使用例子：pub.dev/packages/cl…

    效果图：

    icon_fonts.jpeg

  • sqflite

    关键词：sqlite、数据库

    功能：SQLite 的 Flutter 插件，一个独立的、高可靠性的、嵌入式的 SQL 数据库引擎。

    pub地址：pub.dev/packages/sq…

    git地址：github.com/tekartik/sq…

    引入依赖方式：

    dependencies:
  sqflite: ^2.0.2+1

import 'package:sqflite/sqflite.dart';

    使用例子：pub.dev/packages/sq…

  • get_it

    关键词：状态管理、全局数据注册/获取。

    功能：不依赖于context，可以全局任意地方注册model以及获取model。结合ChangeNotifier可以做到注册并监听变化。

    pub地址：pub.dev/packages/ge…

    git地址：github.com/fluttercomm…

    引入依赖方式：

    dependencies:
  get_it: ^7.2.0

import 'package:get_it/get_it.dart';

    使用例子：pub.dev/packages/ge…

  • Shimmer

    关键词：微光、闪烁骨架

    功能：可以轻易的为项目ui添加微光的效果。

    pub地址：pub.dev/packages/Sh…

    git地址：github.com/hnvn/flutte…

    引入依赖方式：

    dependencies:
  Shimmer: ^2.0.0

import 'package:shimmer/shimmer.dart';

    使用例子：

    SizedBox(
  width: 200.0,
  height: 100.0,
  child: Shimmer.fromColors(
    baseColor: Colors.red,
    highlightColor: Colors.yellow,
    child: Text(
      'Shimmer',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 40.0,
        fontWeight:
        FontWeight.bold,
      ),
    ),
  ),
);

    效果图：

    loading_list.gif

    slide_to_unlock.gif

  • equatable

    关键词：equal

    功能：继承Equatable之后，重写了我们类的equal事件，从比较地址变成了比较选中的成员变量的值。

    pub地址：pub.dev/packages/eq…

    git地址：github.com/felangel/eq…

    引入依赖方式：

    dependencies:
  equatable: ^2.0.3

import 'package:equatable/equatable.dart';

    使用例子：pub.dev/packages/eq…

avatar
文章
阅读
粉丝