文章目录
- 一、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); //true
Color 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 ( 随博客进度一直更新 , 有可能没有本博客的源码 )
-