【Flutter】Flutter 项目中使用 Flutter 插件 ( Flutter 插件管理平台 | 搜索 Flutter 插件 | 安装 Flutter 插件 | 使用 Flutter 插件 )
文章目录
- 一、Flutter 包和插件管理平台
- 二、Flutter 插件搜索示例
- 三、Flutter 插件装示例
- 1、添加 Dart 包依赖
- 2、获取 Dart 包
- 3、使用 Dart 包
- 4、官方的导入插件说明
- 四、Flutter 插件使用
- 五、Flutter 应用入口
- 六、 相关资源
一、Flutter 包和插件管理平台
已经实现好的模块功能 , 完全可以复用 , 避免重复造轮子 , 这些功能可以封装在 Flutter 包中 ;
https://pub.dev/packages 网站是 Google 官方建立的管理 Dart 包和 Flutter 插件的平台 ;
在该网站可以搜索到各种包和插件 ;
二、Flutter 插件搜索示例
搜索示例 : 如搜索一个颜色插件 , 直接在搜索框中搜索 flutter_color_plugin , 然后就会搜索出一系列相关的包或插件 ;
点击该 Dart 包 , 进入界面后 , 会有 使用说明 ( Readme ) , 更新日志 ( Changelog ) , 示例 ( Example ) , 安装方法 ( Instanlling ) , 版本 ( Versions ) , 评分 ( Scores ) 等选项卡 , 这里我们只关心如何使用即可 ;
三、Flutter 插件装示例
Dart 包安装 : 所有的 Dart 包安装方式都一样 , 分三个步骤 : ① 添加依赖 , ② 安装 , ③ 代码中导入使用 ;
1、添加 Dart 包依赖
添加包依赖 : 打开 Flutter 项目根目录下的 pubspec.yaml 配置文件 ,
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: ^0.1.2# 添加颜色插件依赖flutter_color_plugin: ^0.0.2
2、获取 Dart 包
添加完成之后 , 然后点击 " Pub get " 按钮 , 获取该 Dart 包 ;
3、使用 Dart 包
在代码中导入该插件的头文件 :
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
4、官方的导入插件说明
官方的导入插件说明 :
四、Flutter 插件使用
该插件支持将字符串颜色如 “#FFFFFF” 或 “#FFFFFF” 解析成 Flutter 中的 Color 颜色对象 ;
Color color1 = ColorUtil.color('#f2f2f2');
Color color2 = ColorUtil.color('f2f2f2');
print(color1 == color2); //trueColor color3 = ColorUtil.color('#a1FF5733');
Color color4 = ColorUtil.color('a1FF5733');
print(color3 == color4); //true同时该插件还支持将字符串颜色如 “#FFFFFF” 或 “#FFFFFF” 解析成 int 类型颜色 ;
//The following is the same
int colorInt1 = ColorUtil.intColor('#f2f2f2');
int colorInt2 = ColorUtil.intColor('f2f2f2');
int colorInt3 = ColorUtil.intColor('#fff2f2f2');
int colorInt5 = ColorUtil.intColor('fff2f2f2');这些用法都在插件页面的 Readme 选项卡中有说明 ;
在 main.dart 中导入该颜色插件 :
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
设置红色 : 在 Text 组件中设置组件的颜色值 , 这里使用 ColorUtil.color(’#FF0000’) 生成红色 Color 对象 , 设置给 Text 组件样式 ;
children: <Widget>[Text('You have pushed the button this many times:',// 设置该 Text 样式, 红色字体style: TextStyle(color: ColorUtil.color('#FF0000')),),Text('$_counter',style: Theme.of(context).textTheme.display1,),],
运行效果 :
五、Flutter 应用入口
在 main.dart 中的 void main() => runApp(MyApp()) 代码就标识了应用入口 ;
六、 相关资源
参考资料 :
- Flutter 官网 : https://flutter.dev/
- Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
- 官方 GitHub 地址 : https://github.com/flutter
- Flutter 中文社区 : https://flutter.cn/
- Flutter 实用教程 : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart 中文文档 : https://dart.cn/
- Dart 开发者官网 : https://api.dart.dev/
- Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
博客源码下载 :
GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/15469197 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】Flutter 项目中使用 Flutter 插件 ( Flutter 插件管理平台 | 搜索 Flutter 插件 | 安装 Flutter 插件 | 使用 Flutter 插件 )相关推荐
- 项目中如何进行有效的沟通管理（一）
项目中如何进行有效的沟通管理(一) 沟通在项目中的重要性不言而喻,但是如何有效的进行沟通,很多人都不会重视,或即使重视了也没有好方法,这里谈一谈自己的感受. 一般来说,在一个项目中实施沟通的管理,分为 ...
- Spring Boot项目中集成Elasticsearch，并实现高效的搜索功能
Spring Boot项目中集成Elasticsearch 前言 环境准备 引入依赖 配置Elasticsearch连接信息 定义实体类 定义Elasticsearch操作接口 实现搜索功能 总结 前 ...
- 【Microsoft Azure 的1024种玩法】二十六. 在Azure VM中手动部署Windows Admin Center管理平台
[简介] Windows Admin Center是微软开发的一套可以部署在本地基于浏览器的GUI的工具集平台,其平台可用于管理Windows相关服务器和PC机器,我们可以利用Windows Admi ...
- 实际项目中如何使用Git做分支管理
[版权申明] 非商业目的注明出处可自由转载 出自:shusheng007 相关文章 Git日常开发常用命令汇总 文章目录 前言 概述 Git的基本使用方法 使用Git管理项目的方式 主分支 支持分支 ...
- JAVA毕设项目个性化推荐的扬州农业文化旅游管理平台（java+VUE+Mybatis+Maven+Mysql）
项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- Cordova iOS 项目中微信/qq/Apple ID插件的安装以及登录的实现
说明:我们在做项目的时候,往往会接入第三方登录,使用官方或者已经大神已经写好的插件,不仅节省时间,而且可以加快我们项目开发的进度,本文章记录我在工程中所用到的几个第三方登录,一方面为了防止时间长了忘记 ...
- lerna 项目中集成 babel lint-staged husky eslint
lerna 项目中集成 babel lint-staged husky eslint Monorepo 是针对单仓库.多 package 的流行解决方案, lerna 是它的一种实现. 说明 重要 p ...
- vue-ssr在项目中的实践
写在文前 由于前端脚手架.打包工具.Node等版本的多样性,本文无法同时兼顾,文中所述皆基于以下技术栈进行. 脚手架:vue-cli3 打包工具:webpack4,集成在vue-cli3中,通过修改v ...
- vue3项目中如何使用iconfont图标？体积太大？看这篇文章就够了！
正文 工具链接: iconfont图标一键下载浏览器插件(2000+图标一秒下载打包) 示例链接: iconfont在vue3中按需使用和编译打包示例 说明 在vue3项目中使用iconfont图标是 ...
最新文章
- 漫画：什么是 JVM 的垃圾回收？
- 在化学教学中怎么用ChemOffice
- 10.PHP加密相关
- Spring @Scheduled关键字
- 特征检测器 FeatureDetector
- 机器学习-LR推导及与SVM的区别
- linux 创建内核线程
- shell中四大循环介绍及使用
- 【月报】Java知音的五月汇总
- 环保公益PSD分层海报，小景合成美好世界
- matlab中sqp的算法原理_利用fmincon函数中的SQP算法求解非线性规划问题，模型本身.......
- 剑指offer题解 带讲解 python版 第二部分
- ucenter通信失败和不能登录的解决
- 显卡4k性能测试软件,碰上UHD都得跪 AN新一代显卡4K对比横评
- 《Java并发编程实战》读书笔记-第5章 基础构建模块
- 插入馈电的微带贴片天线
- 深入学习SpringMVC框架
- 无往不利：用SQL解海盗分金的利益最大化问题
- 解决移动硬盘无法停止通用卷设备问题
- 信息融跨共享，捷码综合交通运行监测系统共建智慧交通