01.27 介紹一款Flutter工具集插件

FlutterFire是一套Flutter插件 ，可讓Flutter應用程序使用Firebase服務。您可以按照一個示例說明如何在Firebase for Flutter代碼實驗室中使用這些插件。Flutter是Google的UI工具包，可通過單個代碼庫為移動設備，Web和桌面構建漂亮的，本機編譯的應用程序。Flutter被全世界的開發人員和組織所使用，並且是免費和開源的。

簡介

Flutter是Google的UI工具包，可通過單個代碼庫為移動設備，Web和桌面構建漂亮的，本機編譯的應用程序。Flutter可與現有代碼一起使用，併為世界各地的開發人員和組織所使用，並且是免費和開源的。

在此代碼實驗室中，您將創建一個簡單的移動Flutter應用。如果您熟悉面向對象的代碼和基本的編程概念（例如變量，循環和條件），則可以完成代碼實驗室。您不需要Dart或移動編程方面的經驗。

在第1部分中您將學到什麼

• 如何編寫在iOS，Android和Web上看起來自然的Flutter應用
• Flutter應用程序的基本結構
• 查找並使用軟件包擴展功能
• 使用熱加載加快開發週期
• 如何實現有狀態的小部件
• 如何創建一個無限的，延遲加載的列表

您將在第1部分中構建的內容

您將實現一個簡單的移動應用程序，該應用程序將為創業公司生成建議的名稱。用戶可以選擇和取消選擇名稱，以保存最佳名稱。該代碼懶惰地一次生成10個名稱。隨著用戶滾動，將生成新的一批名稱。用戶可以永久滾動，不斷生成新名稱。

以下GIF動畫顯示了該應用程序在完成部分時的工作方式：

2.設置您的Flutter環境

您需要兩個軟件-Flutter SDK和一個編輯器。（代碼實驗室假設您使用的是Android Studio，但可以使用首選的編輯器。）

您可以使用以下任何設備來運行代碼實驗室：

• 連接到計算機並設置為開發人員模式的物理Android或iOS設備
• 在iPhone模擬器（需要安裝的Xcode工具）
• 在Android模擬器（需要安裝Android Studio中）
• 瀏覽器（調試需要Chrome）

如果要編譯您的應用程序以使其在Web上運行，則必須啟用此功能（當前處於測試版）。要啟用Web支持，請按照以下說明進行操作：

<code>$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web/<code>

您只需要運行config一次命令。啟用網絡支持後，您創建的每個Flutter應用程序都將針對網絡進行編譯。現在，在IDE的設備下拉列表中，或者在使用命令行中flutter devices，您現在應該看到列出了

3.創建入門Flutter應用

按照創建應用程序中的說明創建一個簡單的模板化Flutter應用程序。輸入startup_namer（而不是myapp）作為項目名稱。您將修改入門應用程序以創建完成的應用程序。

提示：如果在IDE中看不到啟動新Flutter項目的功能，請確保已為Flutter和Dart安裝了插件。

您將主要編輯lib/main.dartDart代碼所在的位置。

替換的內容lib/main.dart。從中刪除所有代碼，lib/main.dart並將其替換為以下代碼，該代碼在屏幕中央顯示“ Hello World”。

<code>import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}/<code>

提示：將代碼粘貼到應用程序中時，縮進可能會傾斜。您可以使用以下Flutter工具對其進行修復：

• Android Studio / IntelliJ IDEA：右鍵單擊Dart代碼，然後選擇使用dartfmt重新格式化代碼。
• VS Code：右鍵單擊並選擇Format Document。
• 終端：運行flutter format <filename>。/<filename>

運行應用程序。您應該看到Android或iOS輸出，具體取決於您的設備。

安卓系統和iOS程序

提示：首次在物理設備上運行時，可能需要一段時間才能加載。之後，您可以使用熱重裝進行快速更新。在受支持的IDE中，如果應用程序正在運行，則Save還會執行熱重載。使用直接從控制檯運行應用程序時flutter run，請輸入r以執行熱重載。

觀察結果

• 本示例創建一個Material應用程序。Material是移動和Web上的標準視覺設計語言。Flutter提供了一組豐富的Material小部件。
• 主要方法使用箭頭（=>）表示法。對於單行函數或方法，請使用箭頭符號。
• 應用程序擴展StatelessWidget，使應用程序本身成為小部件。在Flutter中，幾乎所有東西都是小部件，包括對齊，填充和佈局。
• Scaffold來自材料庫的窗口小部件提供了默認的應用欄，標題和主體屬性，其中包含用於主屏幕的窗口小部件樹。小部件子樹可能非常複雜。
• 窗口小部件的主要工作是提供一種build方法，該方法根據其他較低級別的窗口小部件來描述如何顯示該窗口小部件。
• 此示例的主體由一個Center包含Text子窗口小部件的窗口小部件組成。該Center對齊其控件樹到屏幕的中心部件。

閱讀更多 技術剛剛好 的文章

關鍵字: 工具集 集成開發環境