使用 Flutter 創建 App

2020-10-07 Linux中國

使用流行的 Flutter 框架開始你的跨平臺開發之旅。

• 來源：Linux.cn • 作者：Vitaly Kuprenko • 譯者：XianLei Gao •

（本文字數：3591，閱讀時長大約：5 分鐘）


Flutter 是一個深受全球移動開發者歡迎的項目。該框架有一個龐大的、友好的愛好者社區，隨著 Flutter 幫助程式設計師將他們的項目帶入移動領域，這個社區還在繼續增長。

本教程旨在幫助你開始使用 Flutter 進行移動開發。閱讀之後，你將了解如何快速安裝和設置框架，以便開始為智慧型手機、平板電腦和其他平臺開發。

本操作指南假定你已在計算機上安裝了 Android Studio ，並且具有一定的使用經驗。

什麼是 Flutter ？

Flutter 使得開發人員能夠為多個平臺構建應用程式，包括：

  • Android
  • iOS
  • Web（測試版）
  • macOS（正在開發中）
  • Linux（正在開發中）

對 macOS 和 Linux 的支持還處於早期開發階段，而 Web 支持預計很快就會發布。這意味著你可以立即試用其功能（如下所述）。

安裝 Flutter

我使用的是 Ubuntu 18.04，但其他 Linux 發行版安裝過程與之類似，比如 Arch 或 Mint。

使用 snapd 安裝

要使用 Snapd 在 Ubuntu 或類似發行版上安裝 Flutter，請在終端中輸入以下內容：

$ sudo snap install flutter --classic$ sudo snap install flutter –classicflutter 0+git.142868f from flutter Team/ installed

然後使用 flutter 命令啟動它。 首次啟動時，該框架會下載到你的計算機上：

$ flutterInitializing FlutterDownloading https://storage.googleapis.com/flutter_infra[...]

下載完成後，你會看到一條消息，告訴你 Flutter 已初始化：

Flutter initialized


手動安裝

如果你沒有安裝 Snapd，或者你的發行版不是 Ubuntu，那麼安裝過程會略有不同。在這種情況下，請 下載 為你的作業系統推薦的 Flutter 版本。

Install Flutter manually


然後將其解壓縮到你的主目錄。

在你喜歡的文本編輯器中打開主目錄中的 .bashrc 文件（如果你使用 Z shell ，則打開 .zshc）。因為它是隱藏文件，所以你必須首先在文件管理器中啟用顯示隱藏文件，或者使用以下命令從終端打開它：

$ gedit ~/.bashrc &

將以下行添加到文件末尾：

export PATH="$PATH:~/flutter/bin"

保存並關閉文件。 請記住，如果在你的主目錄之外的其他位置解壓 Flutter，則 Flutter SDK 的路徑 將有所不同。

關閉你的終端，然後再次打開，以便加載新配置。 或者，你可以通過以下命令使配置立即生效：

$ . ~/.bashrc

如果你沒有看到錯誤，那說明一切都是正常的。

這種安裝方法比使用 snap 命令稍微困難一些，但是它非常通用，可以讓你在幾乎所有的發行版上安裝該框架。

檢查安裝結果

要檢查安裝結果，請在終端中輸入以下內容：

flutter doctor -v

你將看到有關已安裝組件的信息。 如果看到錯誤，請不要擔心。 你尚未安裝任何用於 Flutter SDK 的 IDE 插件。

Checking Flutter installation with the doctor command


安裝 IDE 插件

你應該在你的 集成開發環境（IDE） 中安裝插件，以幫助它與 Flutter SDK 接口、與設備交互並構建代碼。

Flutter 開發中常用的三個主要 IDE 工具是 IntelliJ IDEA（社區版）、Android Studio 和 VS Code（或 VSCodium ）。我在本教程中使用的是 Android Studio，但步驟與它們在 IntelliJ Idea（社區版）上的工作方式相似，因為它們構建在相同的平臺上。

首先，啟動 Android Studio。打開 「Settings」，進入 「Plugins」 窗格，選擇 「Marketplace」 選項卡。在搜索行中輸入 「Flutter」，然後單擊 「Install」。

Flutter plugins


你可能會看到一個安裝 「Dart」 插件的選項；同意它。如果看不到 Dart 選項，請通過重複上述步驟手動安裝它。我還建議使用 「Rainbow Brackets」 插件，它可以讓代碼導航更簡單。

就這樣！你已經安裝了所需的所有插件。你可以在終端中輸入一個熟悉的命令進行檢查：

flutter doctor -v

Checking Flutter plugins with the doctor command


構建你的 「Hello World」 應用程式

要啟動新項目，請創建一個 Flutter 項目：

1、選擇 「New -> New Flutter project」。

Creating a new Flutter plugin


2、在窗口中，選擇所需的項目類型。 在這種情況下，你需要選擇 「Flutter Application」。

3、命名你的項目為 hello_world。 請注意，你應該使用合併的名稱，因此請使用下劃線而不是空格。 你可能還需要指定 SDK 的路徑。

Naming a new Flutter plugin


4、輸入軟體包名稱。

你已經創建了一個項目！現在，你可以在設備上或使用模擬器啟動它。

Device options in Flutter


選擇你想要的設備，然後按 「Run」。稍後，你將看到結果。

Flutter demo on mobile device


現在你可以在一個 中間項目 上開始工作了。

嘗試 Flutter for web

在安裝 Flutter 的 Web 組件之前，你應該知道 Flutter 目前對 Web 應用程式的支持還很原始。 因此，將其用於複雜的項目並不是一個好主意。

默認情況下，基本 SDK 中不啟用 「Flutter for web」。 要打開它，請轉到 beta 通道。 為此，請在終端中輸入以下命令：

flutter channel beta

flutter channel beta output


接下來，使用以下命令根據 beta 分支升級 Flutter：

flutter upgrade

flutter upgrade output


要使 「Flutter for web」 工作，請輸入：

flutter config --enable-web

重新啟動 IDE；這有助於 Android Studio 索引新的 IDE 並重新加載設備列表。你應該會看到幾個新設備：

Flutter for web device options


選擇 「Chrome」 會在瀏覽器中啟動一個應用程式， 「Web Server」 會提供指向你的 Web 應用程式的連結，你可以在任何瀏覽器中打開它。

不過，現在還不是急於開發的時候，因為你當前的項目不支持 Web。要改進它，請打開項目根目錄下的終端，然後輸入：

flutter create

此命令重新創建項目，並添加 Web 支持。 現有代碼不會被刪除。

請注意，目錄樹已更改，現在有了一個 web 目錄：

File tree with web directory


現在你可以開始工作了。 選擇 「Chrome」，然後按 「Run」。 稍後，你會看到帶有應用程式的瀏覽器窗口。

Flutter web app demo


恭喜你！ 你剛剛為瀏覽器啟動了一個項目，並且可以像其他任何網站一樣繼續使用它。

所有這些都來自同一代碼庫，因為 Flutter 使得幾乎無需更改就可以為移動平臺和 Web 編寫代碼。

用 Flutter 做更多的事情

Flutter 是用於移動開發的強大工具，而且它也是邁向跨平臺開發的重要一步。 了解它，使用它，並將你的應用程式交付到所有平臺！

via: opensource.com

作者： Vitaly Kuprenko 選題： lujun9972 譯者： gxlct008 校對： wxy

本文由 LCTT 原創編譯， Linux中國 榮譽推出

點擊「了解更多」可訪問文內連結

相關焦點

  • 教你如何使用Flutter和原生App混合開發
    為原生項目集成flutter　　整個的集成方案是參考谷歌方法，但是有一些不一樣，我是創建了一個flutter項目後，在原生的項目中使用git submodule的形式進行管理的。　　我們假定已經有了原生的項目Native-iOS和Native-Android；現在我們需要創建我們的flutter項目。
  • 創建並運行自己的第一個 Flutter項目
    最近在學習flutter，畢竟是第一次運行flutter項目，中間遇到很多問題，今天就把自己如何創建並運行flutter項目，及創建的過程中遇到的一些問題都總結出來，方便後來人查看。先來講講flutter的下載與安裝。
  • 在 Flutter 中使用 TFLite 插件實現文字分類
    本文中，我們將使用 tflite_flutter 構建一個文字分類 Flutter 應用，帶您體驗 tflite_flutter 插件。首先從新建一個 Flutter 項目text_classification_app開始。
  • 實操|在 Flutter 中創建通信橋
    在創建一個新的 Flutter 項目後，我們需要使用webview_flutter包來使得能夠使用 WebView。JavaScript 代碼的本地 html 文件，我們需要在項目中創建它。別忘了在pubspec.yaml中的assets部分增加index.html(使用正確的縮進)dependencies: flutter: sdk: flutter webview_flutter: ^1.0.7 cupertino_icons: ^1.0.0dev_dependencies: flutter_test: sdk: flutter
  • 在Flutter中使用一個全新插件高效且靈活實現文字分類
    本文中，我們將使用 tflite_flutter 構建一個 文字分類 Flutter 應用 帶您體驗 tflite_flutter 插件，首先從新建一個 Flutter 項目 text_classification_app 開始。
  • 在 macOS 上安裝和配置 Flutter 開發環境
    github.com/flutter/flutter.gitexport PATH=&34; 運行 flutter doctor 命令（檢查 Flutter SDK 安裝狀態）flutter doctor
  • 使用VSCode 打包你的第一個flutter應用（安卓篇）
    創建Key確認已安裝java和flutter。storePassword= 剛剛創建密鑰庫時的密碼keyPassword= 剛剛創建密鑰的密碼keyAlias=keystoreFile=D:/key/key.jks4.build.gradle文件修改
  • Flutter中嵌套Android布局
    本文具體demo效果如下：開發首先創建flutter項目，在項目中定義好flutter需要展示布局： @override Widget build(BuildContext context創建Android中的布局： <io.flutter.embedding.android.FlutterView android:id="@+id/flutter_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight
  • Flutter教程從零構建電商應用(一)
    在這個系列中，我們將學習如何使用google的移動開發框架flutter創建一個電商應用。本文是flutter框架系列教程的第一部分，將學習如何安裝Flutter開發環境並創建第一個Flutter應用，並學習Flutter應用開發中的核心概念，例如widget、狀態等。
  • Flutter Go首頁、文檔和下載 - Flutter 學習 App - OSCHINA
    Flutter是一個跨平臺的移動UI框架，旨在幫助開發者使用一套代碼開發高性能、高保真的Android和iOS應用。flutter優點主要包括： 跨平臺 開源 Hot Reload、響應式框架、及其豐富的控制項以及開發工具 靈活的界面設計以及控制項組合 藉助可以移植的GPU加速的渲染引擎以及高性能ARM代碼運行時已達到高質量的用戶體驗Flutter Go 的由來 Flutter學習資料太少，對於英文不好的同學相對來說比較困難 官網文檔示例不夠健全，不夠直觀 各個 widget 的用法各異，屬性紛繁
  • Flutter框架在移動APP開發方面的優勢漸漸增長
    flutter官方公布的成功案例截圖Flutter是 由 Google發布的 的移動UI框架 使用Dart語言所編寫，可以快速在iOS和Android上構建高質量的原生用戶界面。Flutter項目的一個目錄結構這是flutter入口文件的一個編寫 可以發現 是和 java 有點類似的import 'package:flutter/material.dart';import
  • flutter打包後socket,tcp,udp相關網絡功能無法使用的解決辦法
    在前幾期視頻中我介紹了如何使用flutter開發一款以socket為基礎功能的客戶端app，其功能是利用socket連接伺服器的IP和埠，通過手機端app發送和接收來自伺服器端的16進位數據。功能不算複雜，代碼寫完後我就籤名打包，可以發現一個問題。調試生成的app功能好用，可以連接到伺服器上。但是打包生成的app輸入伺服器IP和埠後點擊連接按鈕，伺服器端沒有一點反應。
  • 使用VS Code 開發Flutter
    使用VS Code 開發Flutter安裝在擴展搜索輸入框中輸入 「flutter」，然後在列表中選擇 Flutter 並單擊 安裝。此過程中會自動安裝必需的 Dart 插件。點擊 重新加載 以重新啟動 VS Code。
  • Flutter 二維碼掃描插件
    使用'dart:async';import 'package:flutter/services.dart';import 'package:flutter_plugin_qrcode/flutter_plugin_qrcode.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {
  • Flutter源碼剖析(一):源碼獲取與構建
    注: 某些輸入文件使用或覆蓋了已過時的 API。注: 有關詳細信息, 請使用 -Xlint:deprecation 重新編譯。源碼使用 創建一個工程：$ pwd/Users/vimerzhao/WorkProject/flutter_source_code$ lsdepot_tools flutter     src$ .
  • flutter中dio網絡get請求使用總結
    1 添加依賴可訪問flutter國內倉庫https://pub.flutter-io.cn/packages/diodio用來在flutter跨平臺開發中訪問網絡的框架，在使用的時候，我們首先是引入依賴
  • flutter中dio網絡get請求使用總結
    1 添加依賴可訪問flutter國內倉庫https://pub.flutter-io.cn/packages/diodio用來在flutter跨平臺開發中訪問網絡的框架，在使用的時候，我們首先是引入依賴dependencies: dio
  • 所見即所得 | Flutter1.22發布，推出更多新功能
    而且，如果我們未能覆蓋您想要恢復的類型，您也可以通過擴展 RestorableProperty<T> 來創建自己的類型。您可以通過將 --analyze-size 標記傳遞給以下任何命令來使用該工具收集分析所需的數據:flutter build apkflutter build appbundle
  • 「所見即所得」深度解析Flutter web 支持的最新進展
    Paragraphhttps://api.flutter.cn/flutter/dart-ui/Paragraph-class.htmllayout() 方法https://api.flutter.cn/flutter/dart-ui/Paragraph/layout.html可以想像，這些測量的成本開銷十分之大，因此我們最近開始嘗試使用
  • 「Flutter實戰」14.首頁_url_launcher一鍵撥打店長電話
    \flutter\bin\cache\lockfile刪除掉，剛開始不能刪除，然後我重啟電腦才可以刪除。因為我們這裡使用的是一個異步的，所以要用await等待一下。 自己重新再去創建一個設備試試吧我查了很多的方法都不行，就想著，再複製回來試試在android studio裡面發現可以運行flutter的程序了。