【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); //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 ( 随博客进度一直更新 , 有可能没有本博客的源码 )
• 博客源码快照 : https://download.csdn.net/download/han1202012/15469197 ( 本篇博客的源码快照 , 可以找到本博客的源码 )