App下載

在Flutter 項(xiàng)目開(kāi)發(fā)中怎么避免項(xiàng)目失???使用自定義 Flutter 包避免項(xiàng)目失敗方法!

紓寒 2021-08-25 14:26:56 瀏覽數(shù) (3028)
反饋

領(lǐng)導(dǎo)一個(gè)成功的 Flutter 應(yīng)用程序開(kāi)發(fā)項(xiàng)目往往源于應(yīng)用程序架構(gòu)的強(qiáng)大組織。使用 Flutter 包是將應(yīng)用程序文件和功能部分分組為可重用組件的絕佳方式,從而使團(tuán)隊(duì)協(xié)作更容易。本教程將帶您完成為下一個(gè) Flutter 項(xiàng)目創(chuàng)建自定義包所需的所有步驟。

還提供完整的分步視頻 和完整代碼 。

概述

在講解如何創(chuàng)建自定義包之前,我們先回顧一下 Flutter 開(kāi)發(fā)者為什么需要使用包,以及自定義包是如何使用的。該包的目標(biāo)是隔離可重用的功能,并使應(yīng)用程序的其他部分可以輕松訪(fǎng)問(wèn)它。單個(gè)應(yīng)用程序可以有多個(gè)自定義包。

例如,我們可以創(chuàng)建一個(gè)自定義包來(lái)處理不同按鈕的 HTTP 網(wǎng)絡(luò) API 連接,以將結(jié)果顯示到不同的屏幕。組織代碼的一個(gè)好方法是將所有連接功能隔離到一個(gè)名為connection. 連接目錄成為連接包。您還可以為動(dòng)畫(huà)創(chuàng)建另一個(gè)包并在該包中組織自定義動(dòng)畫(huà)。您創(chuàng)建的每個(gè)包都放在一個(gè)名為packages.

一旦代碼在包中隔離,您就可以在主項(xiàng)目pubspec.yaml應(yīng)用程序配置文件中使您的應(yīng)用程序可以訪(fǎng)問(wèn)該包。pubspec.yaml根據(jù)您分發(fā)包的方式,文件的語(yǔ)法略有不同。

一旦使用 使程序包可供應(yīng)用程序使用pubspec.yaml,使用該程序包的每個(gè)文件都會(huì)使用以下語(yǔ)法導(dǎo)入該程序包import 'package:name/file.dart`;

讓我們用例子來(lái)說(shuō)明這個(gè)過(guò)程,從pubspec.yaml 配置開(kāi)始。

3種類(lèi)型的包依賴(lài)配置格式 

構(gòu)建和分發(fā)自定義 Flutter 包有以下三種策略:

  1. 發(fā)布到 pub.dev;
  2. 發(fā)布到 GitHub 或等效的獨(dú)立存儲(chǔ)庫(kù);
  3. 將包存儲(chǔ)在您的主項(xiàng)目存儲(chǔ)庫(kù)中。

1. pub.dev

如果將包發(fā)布到 pub.dev,則可以從pubspec.yaml, 依賴(lài)項(xiàng)下訪(fǎng)問(wèn)它。由于我的庫(kù)不在 pub.dev 上,我將展示 HTTP 包的語(yǔ)法。

YAML:

dependencies: 
 http : ^0.13.3

2. 遠(yuǎn)程 Git 服務(wù)器

在大多數(shù)情況下,您不需要讓很多人都可以訪(fǎng)問(wèn)您的包。在這些情況下,您可以使用以下語(yǔ)法從網(wǎng)絡(luò)訪(fǎng)問(wèn)庫(kù)。

YAML:

dependencies:
 theta:
    url: https://github.com/codetricity/theta 
    ref: mai

在上面的例子中,包名是theta. 該包在 GitHub 上的main 分支下可用。

3. 項(xiàng)目的 Packages 文件夾

您還可以將包存儲(chǔ)在主應(yīng)用程序項(xiàng)目文件夾中。如果包名是theta,則存放在主工程目錄下packages/theta。

如果包存儲(chǔ)在本地,則pubspec.yaml 語(yǔ)法如下。

YAML:

dependencies:
  theta:
    path: packages/theta

使用自定義包

在所有三種方法中,您都可以將自定義包導(dǎo)入到應(yīng)用程序中以使用它。

應(yīng)用代碼

Dart:

import 'package:theta/theta.dart';
void main(List<String> args) async {
  print(await Camera.info);
}

自定義封裝代碼

為了說(shuō)明代碼的哪一部分來(lái)自包,我將包含庫(kù)的一小段。 

在上面的示例中,該部分Camera.info是位于包中的靜態(tài) gettertheta/lib/src/protocols.dart

Dart:

const String _baseUrl = 'http://192.168.1.1/osc/';
class Camera {
  static Future<Map<String, dynamic>> get info async {
    var url = _baseUrl + 'info';
    var response = connect(url, 'get');
    return response;
  }
...

創(chuàng)建包后,可以輕松訪(fǎng)問(wèn)包中的所有類(lèi)和方法。

分銷(xiāo)策略建議

您應(yīng)該首先將您的包放在應(yīng)用程序存儲(chǔ)庫(kù)packages 目錄中,并且最初僅將包用于您的一個(gè)應(yīng)用程序。應(yīng)用程序和包穩(wěn)定后,您可以將其分發(fā)到 GitHub 上,供團(tuán)隊(duì)或組織的其他成員直接從他們的pubspec.yaml 文件中使用。 

在您讓其他組可以訪(fǎng)問(wèn)該包并且他們開(kāi)始使用它之后,您將需要花更多時(shí)間進(jìn)行包版本管理。

創(chuàng)建包

創(chuàng)建一個(gè)新項(xiàng)目。我將我的項(xiàng)目稱(chēng)為theta_api_intro_tutorial。

在主項(xiàng)目頂級(jí)目錄中創(chuàng)建一個(gè)名為 packages 的文件夾。


切換到目錄并創(chuàng)建一個(gè)新包。在此示例中,我的包名為theta_connection.

flutter create --template=package theta_connection

當(dāng)你創(chuàng)建一個(gè)包flutter create,它會(huì)自動(dòng)創(chuàng)建另一套lib,pubspec.yaml和README.md文件。

在新創(chuàng)建的lib 目錄下,有一個(gè)主theta_connection.dart文件,它作為包中其余文件的中央連接點(diǎn)。

從theta_connection.dart和test/theta_connection.dart文件中刪除示例代碼。


部分

創(chuàng)建一個(gè)新文件來(lái)保存新包的第一個(gè)方法。我已經(jīng)調(diào)用了我的文件protocols/test_hello.dart。

這個(gè)文件的關(guān)鍵學(xué)習(xí)點(diǎn)是學(xué)習(xí)如何包含part of '../theta_connection.dart'到文件的頂部。這是從包中的每個(gè)文件到主包文件的連接點(diǎn),稍后將允許您的應(yīng)用程序訪(fǎng)問(wèn)該方法。


部分

除了使用 to 方法連接文件外theta_connection.dart,還需要添加一個(gè)連接 from theta_connection.darttoprotocols/test_hello.dart


恭喜,您剛剛創(chuàng)建了一個(gè)自定義包!

步驟回顧

  1. 創(chuàng)建一個(gè)帶有flutter create --template=package名稱(chēng)的包。
  2. 為您的包功能創(chuàng)建一個(gè)新文件,并將其鏈接到主包文件part of。
  3. 在主包文件中,鏈接到帶有part.

使用你的新包

在pubspec.yaml主項(xiàng)目目錄的文件中,添加新包的路徑。


 導(dǎo)入包main.dart并通過(guò)調(diào)用方法使用它hello()。


當(dāng)您按下按鈕時(shí),您應(yīng)該會(huì)在控制臺(tái)中看到“Hello, world”。


擴(kuò)展您的包

使用此技術(shù),您可以向每個(gè)新目錄添加額外的目錄和文件。您還可以為不同類(lèi)型的功能創(chuàng)建不同的包。

隨著應(yīng)用程序的增長(zhǎng),您將需要管理應(yīng)用程序的狀態(tài)。我之前的文章Flutter 2.0 State Management Introduction with Provider 5.0解釋了如何使用 provider管理 Flutter 應(yīng)用程序的狀態(tài)。 

概括

強(qiáng)大的應(yīng)用程序架構(gòu)組織是項(xiàng)目成功的關(guān)鍵。未能管理功能和狀態(tài)等基本領(lǐng)域可能會(huì)導(dǎo)致延遲,在某些情況下還可能導(dǎo)致未完成的項(xiàng)目。有效使用標(biāo)準(zhǔn)的 Flutter 包系統(tǒng)是組織應(yīng)用程序架構(gòu)的絕佳工具。為了保持開(kāi)發(fā)簡(jiǎn)單,請(qǐng)將您的包放在主應(yīng)用程序存儲(chǔ)庫(kù)中,以降低包版本管理的復(fù)雜性。通過(guò)降低包版本管理的復(fù)雜性,您和您的團(tuán)隊(duì)將增加使用包的機(jī)會(huì),讓每個(gè)人都走上成功啟動(dòng)項(xiàng)目的道路。


0 人點(diǎn)贊