使用包來開發Flutter應用

Flutter支持使用由其他開發者貢獻給Flutter和Dart生態系統的共享軟件包。這使您可以快速構建應用程序,而無需從頭開始開發所有應用程序。

現有的軟件包支持許多使用場景,例如,網絡請求(http),自定義導航/路由處理(fluro), 集成設備API(如url_launcherbattery) 以及使用第三方平臺SDK(如 Firebase(需翻墻)))。

如果您正打算開發新的軟件包,請參閱開發軟件包

如果您希望添加資源、圖片或字體,無論是存儲在文件還是包中,請參閱資源和圖片

1 使用包

1.1 搜索packages

Packages會被發布到了 Pub 包倉庫.

Flutter landing 頁面 顯示了與Flutter兼容的包(即聲明依賴通常與撲兼容)。所有已發布的包都支持搜索。

1.2 將包依賴項添加到應用程序

要將包'css_colors'添加到應用中,請執行以下操作

  1. 依賴它

    • 打開 pubspec.yaml 文件,然后在dependencies下添加css_colors:
  2. 安裝它

    • 在 terminal中: 運行 flutter packages get
      或者
    • 在 IntelliJ中: 點擊pubspec.yaml文件頂部的'Packages Get'
  3. 導入它
    • 在您的Dart代碼中添加相應的import語句.

有關完整示例,請參閱下面的CSS Colors example below.

2. 開發新的packages

如果某個軟件包不適用于您的特定需求,則可以開發新的自定義package

3. 管理包依賴和版本

3.1 Package versions

所有軟件包都有一個版本號,在他們的pubspec.yaml文件中指定。Pub會在其名稱旁邊顯示軟件包的當前版本(例如,請參閱url_launcher軟件包)以及所有先前版本的列表。

pubspec.yaml使用速記形式添加包時,plugin1: 這被解釋為plugin1: any,即可以使用任何版本的包。為了確保某個包在更新后還可以正常使用,我們建議使用以下格式之一指定版本范圍:

  • 范圍限制: 指定一個最小和最大的版本號,如:
  dependencies:
    url_launcher: '>=0.1.2 <0.2.0'
  • 范圍限制使用 caret 語法: 與常規的范圍約束類似(譯者語:這和node下npm的版本管理類似)
  dependencies:
    collection: '^0.1.2'

有關更多詳細信息,請參閱 Pub 版本管理指南.

3.2 更新依賴包

當你在添加一個包后首次運行(IntelliJ中的'Packages Get')flutter packages get,Flutter將找到包的版本保存在pubspec.lock。這確保了如果您或您的團隊中的其他開發人員運行flutter packages get后回獲取相同版本的包。

如果要升級到軟件包的新版本,例如使用該軟件包中的新功能,請運行flutter packages upgrade(在IntelliJ中點擊Upgrade dependencies)。 這將根據您在pubspec.yaml中指定的版本約束下載所允許的最高可用版本。

3.3 依賴未發布的packages

即使未在Pub上發布,軟件包也可以使用。對于不用于公開發布的專用插件,或者尚未準備好發布的軟件包,可以使用其他依賴項選項:

  • 路徑 依賴: 一個Flutter應用可以依賴一個插件通過文件系統的path:依賴。路徑可以是相對的,也可以是絕對的。例如,要依賴位于應用相鄰目錄中的插件'plugin1',請使用以下語法
  dependencies:
    plugin1:
      path: ../plugin1/
  • Git 依賴: 你也可以依賴存儲在Git倉庫中的包。如果軟件包位于倉庫的根目錄中,請使用以下語法:
  dependencies:
    plugin1:
      git:
        url: git://github.com/flutter/plugin1.git
  • Git 依賴于文件夾中的包: 默認情況下,Pub假定包位于Git存儲庫的根目錄中。如果不是這種情況,您可以使用path參數指定位置,例如:
  dependencies:
    package1:
      git:
        url: git://github.com/flutter/packages.git
        path: packages/package1        

最后,您可以使用ref參數將依賴關系固定到特定的git commit,branch或tag。有關更多詳細信息,請參閱 Pub Dependencies article.

4. 例子

4.1 例子: 使用 CSS Colors package {#css-example}

css_colors包為CSS顏色定義顏色常量,允許您在Flutter中需要Color類型的任何位置使用它們

您可以通過以下步驟使用這個包:

1. 創建一個名為 'cssdemo'的新項目

2. 打開 pubspec.yaml, 并將:

   dependencies:
     flutter:
       sdk: flutter

替換為:

   dependencies:
     flutter:
       sdk: flutter
     css_colors: ^1.0.0

3. 在terminal中運行 flutter packages get, 或者在IntelliJ鐘點擊'Packages get'

4. 打開 lib/main.dart 并替換其全部內容:

   import 'package:flutter/material.dart';
   import 'package:css_colors/css_colors.dart';

   void main() {
     runApp(new MyApp());
   }

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return new MaterialApp(
         home: new DemoPage(),
       );
     }
   }

   class DemoPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return new Scaffold(
         body: new Container(color: CSSColors.orange)
       );
     }
   }

5. 運行應用程序

4.2 Example: 使用URL Launcher package to 啟動瀏覽器 {#url-example}

URL Launcher可以使您打開移動平臺上的默認瀏覽器顯示給定的URL。 它演示了軟件包如何包含特定于平臺的代碼(我們稱這些軟件包為插件)。它在Android和iOS上均受支持。

使用這個插件的方法如下:

1. 創建一個名為'launchdemo'的新項目

2. 打開 pubspec.yaml, 并將:

   dependencies:
     flutter:
       sdk: flutter

替換為:

   dependencies:
     flutter:
       sdk: flutter
     url_launcher: ^0.4.1

3. 在terminal中運行 flutter packages get, 或者在IntelliJ鐘點擊'Packages get'

4. 打開 lib/main.dart 并替換其全部內容:

   import 'package:flutter/material.dart';
   import 'package:url_launcher/url_launcher.dart';

   void main() {
     runApp(new MyApp());
   }

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return new MaterialApp(
         home: new DemoPage(),
       );
     }
   }

   class DemoPage extends StatelessWidget {
     launchURL() {
       launch('https://flutter.io');
     }

     @override
     Widget build(BuildContext context) {
       return new Scaffold(
         body: new Center(
           child: new RaisedButton(
             onPressed: launchURL,
             child: new Text('Show Flutter homepage'),
           ),
         ),
       );
     }
   }

5. 運行應用程序。當您點擊“Show Flutter homepage”時,您應該看到手機的默認瀏覽器打開,并出現Flutter主頁


所屬標簽

無標簽

官方入門指南

Flutter官方發布的入門指導,包括了如何在不同的平臺(Windows, Mac, Linux)上搭建開發環境,以及一些入門級的指導,以便您從零開始進入Flutter的世界,同時,一些Flutter的框架API,也是您開發時必不可少的工具書。

從這里進入


25选5玩法中奖