文章目錄

• 一、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 插件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。