介绍 10 个有用的 Flutter 软件包

news2025/2/25 21:29:13

介绍 10 个有用的 Flutter 软件包

alt

原文 https://genotechies.medium.com/introducing-10-useful-flutter-packages-1252c4b75fa7

前言

FLutter 软件包使您的开发简单快速。然而,有利有弊。有时候,如果从头开始开发这个特性将是有益的,因为可定制的软件包较少。此外,我们还可以看到许多流行的软件包,它们总是为这个特定功能提供选择。在这里,我讨论每个基本细节的十个包。然后你就可以决定是否使用它们。我们去找他们每一个人。

正文

qr_flutter

https://pub.flutter-io.cn/packages/qr_flutter

如何添加一个二维码到你的 Flutter 应用程序。这是最简单的方法做到这一点。

  • 将 qr_flutter 包添加到依赖项中
dependencies:
qr_flutter: ^4.0.0
  • 并将 qr_flutter 包导入到文件中。
  • 可以使用 QR Image widget 。
import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
void main() => runApp( MyApp());

class MyApp extends StatelessWidget {MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title:Text("QR Code Flutter"),

),

body: Center(

child:QrImage(

data: "Hello",

version: QrVersions.auto,

size: 200,

),

),

),

);

}

}

这是输出。

alt

您可以在扫描代码时获得插入到数据属性中的输出。

alt

Flutter Google Maps(google_maps_flutter)

https://pub.flutter-io.cn/packages/google_maps_flutter

如何使用谷歌 map 在您的 Flutter 应用程序?该软件包用于通过谷歌 map 数据添加 map 数据。使用这个软件包,您可以访问谷歌 map 服务器, map 显示,并访问用户手势。此外,您还可以添加 map 标记,创建信息窗口,使 HTTP 请求谷歌方向,API 的路线信息,显示折线和动画的 map 。对于所有这些,您需要一起使用下面的 flutter 软件包。

Dio ー这个包用于向 google Directions API 发送 HTTP 请求以获取路由信息

02.Flutter_poliline_points ー这个包用于将折线字符串解码为显示路由所必需的经纬度点

Google_map_flutter ー这个软件包用于向用户显示 map

然后使用 map ,它需要有一个来自谷歌控制台的 API 键。在这里,您必须为 ios 启用 map SDK,为 android 和 Directions API 启用 map SDK。然后转到 android 清单文件并给出 API 密钥。然后你可以有效地利用谷歌 map 在您的应用程序在您的方式。

Quick Alerts

https://pub.flutter-io.cn/packages/quickalert

使用这个软件包,您可以使用动画警报对话在您的 Flutter 应用程序,易于使用和定制。而且,从这个包中,您可以获得预定义的标题和样式以及预定义的警报样式。Show() 方法用于显示和定义警报类型。

下面是示例代码。

import 'package:flutter/material.dart';

import 'package:quickalert/quickalert.dart';


void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      title: 'QuickAlert Demo',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: const MyHomePage(),

    );

  }

}

class MyHomePage extends StatefulWidget {

  const MyHomePage({Key? key}) : super(key: key);

  @override

  State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage{

  @override

  Widget build(BuildContext context) {

    final successAlert = buildButton(

      onTap: () {

        QuickAlert.show(

          context: context,

          type: QuickAlertType.success,

          text: 'Transaction Completed Successfully!',

          autoCloseDuration: const Duration(seconds: 2),

        );

      },

      title: 'Success',

      text: 'Transaction Completed Successfully!',

      leadingImage: Icon(Icons.add),

    );





    return Scaffold(

      backgroundColor: Colors.white,

      appBar: AppBar(

        elevation: 1,

        centerTitle: true,

        backgroundColor: Colors.white,

        title: Text(

          "QuickAlert Demo",

          style: Theme.of(context).textTheme.titleMedium,

        ),

      ),

      body: ListView(

        children: [

          const SizedBox(height: 20),

          successAlert,



        ],

      ),

    );

  }

  Card buildButton({

    required onTap,

    required title,

    required text,

    required leadingImage,

  }) {

    return Card(

      shape: const StadiumBorder(),

      margin: const EdgeInsets.symmetric(

        horizontal: 20,

      ),

      clipBehavior: Clip.antiAlias,

      elevation: 1,

      child: ListTile(

        onTap: onTap,

        leading: CircleAvatar(

          backgroundColor: Colors.green,

          radius: 16,

        ),



        title: Text(title ?? ""),

        subtitle: Text(text ?? ""),

        trailing: const Icon(

          Icons.keyboard_arrow_right_rounded,

        ),

      ),

    );

  }

}

这是输出

alt

可以使用警报对话显示错误警报、警报、信息警报、确认警报和加载警报,还可以创建自定义警报对话。

mockito

https://pub.flutter-io.cn/packages/mockito

这个包将帮助您进行代码重新生成和应用程序的单元测试。你可以在 mockito.pub.dev.com 找到这个包裹。关于如何使用它有很好的文档。如果您不熟悉测试 Flutter 应用程序,强烈推荐使用此软件包来测试您的应用程序。

Animations

https://pub.flutter-io.cn/packages/animations

这个软件包可以让你轻松地添加 Material 动画到你的应用程序。在这个软件包中,你可以使用你的应用程序的所有基本动画,利用普遍期望的效果。此外,如果你愿意,你可以添加一些自定义动画到你的应用程序。

物质运动定义了下列过渡模式:

  1. container 转换
  2. 共享轴
  3. 淡出
  4. 消失
alt

Flutter Svg

https://pub.flutter-io.cn/packages/flutter_svg

此包可用于为项目添加 SVG 图像和网络 SVG 图像。您可以通过 flutter_svg.pub.dev.com 获得这个包。下面的五个用例将帮助您在使用这个包时。

  • 您的设计器创建一个向量资产,您希望包括在内,而不需要转换为 5 种不同的光栅格式分辨率。
  • 矢量绘图应该是静态的、非交互的(或者最低限度的)。
  • 您希望在运行时从网络源动态加载 SVG。
  • 您希望绘制 SVG 数据并将其呈现为图像。

Hooks_Riverpod

https://pub.flutter-io.cn/packages/hooks_riverpod

此包将处理应用程序中与州相关的所有内容。您可以在编译时而不是在编译时捕获关于状态的错误。它为侦听/组合对象标识和删除嵌套。最后,您可以确保代码在运行之前是完全可测试的。这是一个包,您可以使用 Hooks、 Riverpord 和 state notifier。你可以在 Hook_Riverpod 包中找到所有的东西。Pub.dev.

Flutter_launcher_icons

https://pub.flutter-io.cn/packages/flutter_launcher_icons

这个包是关于应用程序图标的。如果您使用这个软件包,您可以在替换图标时节省大量的时间。您可以从此包中获得所需的图形和图形作为图标。您可以遵循包文档并使用应用程序图标所需的步骤。

Firebase UI auth

https://pub.flutter-io.cn/packages/flutter_auth_ui

如果您曾经不得不实现 auth,那么您可能知道它有多乏味。下次如果你需要给应用程序添加身份验证,试试 Firebase 身份验证和 flutter_auth_ui 包,只需要几行代码就可以给你的应用程序添加身份验证。FirebaseUI for auth 是一个官方的 Firebase 产品,包括 widget 和全屏幕,以简化实现 auth。

您可以使用登录屏幕 widget 向应用程序添加一个页面,该页面将带领用户完成整个身份验证流程。首先,在应用程序中添加一个登录路径,该路径指向登录屏幕 widget 。接下来,您需要告诉登录屏幕哪些类型的身份验证提供者是 Firebase 项目用户,然后屏幕将向屏幕填充适当的表单元素。

如果您只使用电子邮件和密码登录,那么您已经完成了。Firebase 身份验证和 Firebase UI 支持各种其他身份验证提供商,如 Google 登录、 GitHub 登录、 Apple 登录等。查看完整列表的包文档。将这些身份验证提供程序中的任何一个添加到登录屏幕 widget 提供程序配置中,并为其提供特定于提供程序的配置。

如果你正在使用像 Google 登录这样的授权提供商,你只需要给它你的 Google 登录客户端 ID,它就会正常工作。FirebaseUIforauth 包包括用户注册屏幕、被遗忘的密码屏幕、用户配置文件屏幕等。

Firebase UI widget 是可定制的。它甚至包括 widget 和控制器,允许您为任何受支持的提供程序编写完全自定义的关闭流。因此,如果你想构建你关心的应用程序部分,让 Firebase 身份验证和 Firebase UI 包为你处理身份验证。有关用于 auth 和所有 Firebase 包的 Firebase UI 的更多信息,请转到 pub.dev 获取原始文档。

mason Package in Flutter

https://pub.flutter-io.cn/packages/mason

一个由来已久的 Flutter 传统是运行 Flutter 创建,删除一切,然后辛苦地复制和粘贴在所有的标准样板。这需要很长时间,非常容易出错,而且没有纳税那么有趣。一定要这样吗?添加 Mason,这个软件包主要是用预定义的砖块快速组装新项目或特性。Mason 的工作方式是包含它根据特定于您的项目的值呈现的模板的整个目录。

例如,假设您正在使用 pubspec.yaml 文件和一块关于舒适袜子的泥砖来完成一个新的 flutter 项目。用那块砖,可能看起来像这样。如果使用 firebase,它将生成一个 pubspec.yaml 文件,其中包含 firebase 依赖项。如果您不使用 firebase,那么这些依赖关系将被跳过。但 Mason 怎么知道你项目的名字,或者你是否使用了 Firebase?安装 Mason CLI,就像 Flutter 创建的那样,但是更加灵活,因为它使用了泥瓦匠和定制砖块。安装完成后,你可以运行 Mason make 命名为 brick Mason 会读取 brick 清单文件并问你一些问题。在这种情况下,它会希望知道您的项目的名称,以及您是否正在使用 firebase。

Mason-CLI 支持各种数据类型,包括字符串、布尔值、数字和枚举。这就只剩下一个问题了。我们如何找到我们想要使用的砖块的名称?为此,请访问 brickhub.dev,查看世界各地那些已经在上传自己固执己见的样板文件以帮助您节省时间的开发人员可以使用的公开版块。如果你没有找到一个你喜欢的,将你首选的 Flutter 项目结构转换成一块砖,并上传它,以节省自己的时间在未来。顺便说一句,砖块可以是任何大小,而不仅仅是整个项目。发现自己每次开始一个新特性时都会创建一些重复的启动文件。这块砖头也不错。有了 Mason,你可以比以前更快地写出应用程序中令人兴奋的部分。

结束语

如果本文对你有帮助,请转发让更多的朋友阅读。

也许这个操作只要你 3 秒钟,对我来说是一个激励,感谢。

祝你有一个美好的一天~


© 猫哥

  • 微信 ducafecat

  • https://wiki.ducafecat.tech

  • https://video.ducafecat.tech

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/39577.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Hive日分区表如何快速导入到StarRocks

1、背景 业务现状&#xff1a;集团使用FineBI做数据呈现及报表分析工具&#xff0c;经过近两年的BI建设&#xff0c;供应链域及营销域的BI建设已初具规模并体系化。数仓规模60TB&#xff0c;FineBI数据集约8000个&#xff0c;BI挂出报表数约1600个&#xff0c;报表月增幅在40左…

非凡社群管理之社群管理有什么内容

社群作为一个非常重要的私域流量池&#xff0c;它本身就是一个提升用户价值的利器。但如果管理不好社群&#xff0c;那么也是无济于事的。 社群小助手提示&#xff1a;高效管理社群&#xff0c;以下这五个方面要做好。 一&#xff0c;社群为用户解决问题&#xff0c;让群成员都…

iwebsec靶场 SQL注入漏洞通关笔记6- 宽字节注入

系列文章目录 iwebsec靶场 SQL注入漏洞通关笔记1- 数字型注入_mooyuan的博客-CSDN博客 iwebsec靶场 SQL注入漏洞通关笔记2- 字符型注入&#xff08;宽字节注入&#xff09;_mooyuan的博客-CSDN博客 iwebsec靶场 SQL注入漏洞通关笔记3- bool注入&#xff08;布尔型盲注&#…

【ML特征工程】第 7 章 :通过K-Means 模型堆叠进行非线性特征化

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

计算机视觉之目标检测(object detection)《1》

在计算机视觉领域&#xff0c;除了识别图像并分类之外&#xff0c;我们很多时候想关注图像里面一些感兴趣的目标&#xff0c;比如视频监控中寻找一个或多个嫌疑犯&#xff1b;无人驾驶需要识别车辆、行人、红绿灯、路障等等&#xff0c;都是需要去及时掌握画面中的不同目标。我…

古瑞瓦特能源通过聆讯:上半年营收23亿 IDG投资9亿持股6.5%

雷递网 雷建平 11月26日古瑞瓦特能源&#xff08;简称&#xff1a;“Growatt Technology”&#xff09;日前递交招股书&#xff0c;准备在香港上市。上半年营收23.45亿古瑞瓦特能源于2011年在深圳成立&#xff0c;是一家分布式能源解决方案提供商&#xff0c;专注于可持续能源发…

Crack:GoJS 2.2.18 -2022-09-08 update

使用 JavaScript 和 TypeScript 为 Web 构建图表 流程图 构建交互式流程图或流程图。让您的用户使用 JSON 模型输出构建、修改和保存图表。状态图 可视化状态图和其他行为图。创建具有实时更新的图表以监控状态&#xff0c;或创建交互式图表以进行规划。桑基图 GoJS 允许对链接…

史上最全MATLAB误差分析工具箱,不看别后悔 【矢量化代码、效率嘎嘎快、支持计算50种指标】

在拟合、插值、模拟预测等计算中&#xff0c;往往需要通过不同指标参数来分析实际值与计算值之间差异依次衡量相关方法的可行性。常用的表征指标有残差平方和(SSE)、均方差(MSE)、均方根差(RMSE)、平均绝对误差(MAE)和决定系数R方(R-Squared)等等。 考虑到误差分析在实际应用中…

Kafka部署安装及简单使用

一、环境准备 1、jdk 8 2、zookeeper 3、kafka 说明&#xff1a;在kafka较新版本中已经集成了zookeeper&#xff0c;所以不用单独安装zookeeper&#xff0c;只需要在kafka文件目录中启动zookeeper即可 二、下载地址 Apache Kafka 三、部署 1、启动zookeeper -- 启动 .…

CSDN第11次竞赛题解与总结

CSDN第11次竞赛题解与总结前言建议题解T1圆小艺扩展完整代码T2K皇把妹完整代码T3筛选宝物完整代码T4圆桌完整代码总结前言 2022/11/27 CSDN第11次竞赛 由「壹合原码 & CSDN」联合主办 本次奖励还是不错的 (毕竟有赞助商)&#xff0c;前三十名都有奖励&#xff0c;连以前第…

跑步10年回望

回顾跑步这10年有点遗憾&#xff0c;最终还是决定放弃参加2022年厦马&#xff0c;因为要求更早到厦门&#xff0c;也担心回福州后影响小朋友上课&#xff0c;权衡之下还是决定申请退赛。本想在这次活动上实现全马破4的目标&#xff0c;却只能晒个退赛截图。。。今年是厦马20年&…

【敲级实用】:某小伙写了一个的办公脚本后~变精神了~

文章目录&#x1f4ef;小哔哔✏️注册有道智云✏️咋滴调用&#xff1f;✏️使用前的小操作✏️源代码专栏Python零基础入门篇&#x1f525;Python网络蜘蛛&#x1f525;Python数据分析Django基础入门宝典&#x1f525;小玩意儿&#x1f525;Web前端学习tkinter学习笔记Excel自…

基于储能电站服务的冷热电多微网系统双层优化配置(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…

ETCD快速入门-01 ETCD概述

1.ETCD概述 1.1 ETCD概述 etcd是一个高可用的分布式的键值对存储系统&#xff0c;常用做配置共享和服务发现。由CoreOS公司发起的一个开源项目&#xff0c;受到ZooKeeper与doozer启发而催生的项目&#xff0c;名称etcd源自两个想法&#xff0c;即Linux的/etc文件夹和d分布式系…

一篇快速搞懂python模块、包和库

个人主页&#xff1a;天寒雨落的博客_CSDN博客-初学者入门C语言,python,数据库领域博主 &#x1f4ac; 热门专栏&#xff1a;python_天寒雨落的博客-CSDN博客 ​每日赠语&#xff1a;没有窘迫的失败&#xff0c;就不会有自豪的成功&#xff1b;失败不可怕&#xff0c;只要能从失…

用DIV+CSS技术设计的凤阳旅游网站(web前端网页制作课作业)HTML+CSS+JavaScript

&#x1f468;‍&#x1f393;学生HTML静态网页基础水平制作&#x1f469;‍&#x1f393;&#xff0c;页面排版干净简洁。使用HTMLCSS页面布局设计,web大学生网页设计作业源码&#xff0c;这是一个不错的旅游网页制作&#xff0c;画面精明&#xff0c;排版整洁&#xff0c;内容…

Android App开发语音处理之系统自带的语音引擎、文字转语音、语音识别的讲解及实战(超详细 附源码)

需要源码请点赞关注收藏后评论区留下QQ~~~ 一、系统自带的语音引擎 语音播报的本质是将书面文字转换成自然语言的音频流&#xff0c;这个转换操作被称作语音合成&#xff0c;又称TTS&#xff08;从文本到语音&#xff09;在转换过程中&#xff0c;为了避免机械合成的呆板和停顿…

一款客服系统有哪些必备的功能模块?

为了提升客户服务质量&#xff0c;和客户更好地进行沟通&#xff0c;越来越多的企业配置了客服系统。那一款优秀的客服系统需要配置哪些功能模块呢&#xff1f; 1、支持多渠道接入 新媒体的快速发展使得企业有机会通过更多的渠道和客户进行联系&#xff0c;比如公众号、微博、…

java环境安装与配置

这篇文章只是为了以后我配置环境方便而写 1&#xff0c;点击网址&#xff0c;进入Oracle官网 然后参照Java JDK下载安装及环境配置超详细图文教程 2&#xff0c;安装之后如果目录里没有jre文件夹 参考Jdk中没有jre文件夹怎么办&#xff1f; ①简单点就是&#xff0c;管理员模式…

京东零售大数据云原生平台化实践

分享嘉宾&#xff1a;吴维伟 京东 架构工程师 编辑整理&#xff1a;陈妃君 深圳大学 出品社区&#xff1a;DataFun 导读&#xff1a;随着业务调整和集群资源整合需求&#xff0c;大数据系统中集群数据迁移复杂混乱。本文将以京东大数据平台为例&#xff0c;介绍京东近一年在数…