【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.22、獲取 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 插件 )的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【Flutter】创建 Flutter
- 下一篇: 【Flutter】StatelessWi