寫一個迷你 Dart 應用
要點有哪些？ DartPad 讓你不需要 HTML 引用編寫一個簡單的 Dart web 應用。 一個 Dart 應用包括 Dart、HTML、和（通常）CSS 代碼。 編譯 一個 web 應用的 Dart 代碼為 JavaScript 來在任意現代瀏覽器中運行此應用。 HTML 文件管理瀏覽器頁面中的 Dart 代碼。 樹/節點的 DOM 結構，模擬瀏覽器頁面。 使用帶 ID 的 querySelector() 來從 DOM 獲取元素。 CSS 選擇器用來選擇匹配 DOM 中的元素。 使用 CSS 規則來給元素添加樣式。
本頭條核心宗旨
歡迎來到「技術剛剛好」作者，「技術剛剛好」是個人維護，每天至少更新一篇Flutter技術文章，實時為大家播報Flutter最新消息。如果你剛好也在關注Flutter這門技術，那就跟我一起學習進步吧，你的贊，收藏，轉發是對我個人最大的支持，維護不易，歡迎關注。
技術剛剛好經歷
近幾年，移動端跨平臺開發技術層出不窮，從Facebook家的ReactNative，到阿里家WEEX，前端技術在移動端跨平臺開發中大展身手，技術剛剛好作為一名Android開發，經歷了從Reactjs到Vuejs的不斷學習。而在2018年，我們的主角變成了Flutter，這是Goolge開源的一個移動端跨平臺解決方案，可以快速開發精美的移動App。希望跟大家一起學習，一起進步！
本文核心要點
要寫一個 Dart web 應用，你需要明白幾個概念——DOM 樹、節點、元素、HTML，以及 Dart 語言和庫。
這些概念是相互依賴的，但我們必須從某個地方開始，所以我們從一個簡單的 HTML 文件開始，它介紹了 DOM 樹和節點。從那裡，你構建一個視圖框架，從 Dart 應用剝離動態生成頁面的代碼。
雖然簡單，但這個例子展示瞭如何連接 Dart 應用和 HTML 頁面，以及一個 Dart 應用如何與頁面上的元素相互作用。這些概念為更有趣、更有用的 web 應用提供了基礎。
關於 Dart, HTML, 以及 CSS
如果你用過 DartPad，你已經看到了讓你編寫 web 應用代碼的 DART、HTML 和 CSS 標籤。這三個語言分別負責 web 應用的不同方面。
語言 用途 Dart 實現 web 應用的交互和動態行為 HTML 描述 web 應用頁面的內容（文檔和結構中的元素） CSS 控制頁面元素的外觀
Dart 程序可以響應事件，例如鼠標點擊，動態地操作 web 頁面上的元素，以及保存信息。在 web 應用被部署之前，Dart 代碼必須被編譯為 JavaScript 代碼。
HTML 是一種描述 web 頁面的語言。它使用標籤設置頁面的初始結構，為頁面添加元素，併為頁面交互嵌入任意腳本。HTML 設置初始的文檔樹，並指定元素類型、CSS 類和 ID，這些允許 HTML、CSS 和 Dart 程序來引用相同的元素。
CSS 表示層疊樣式表(Cascading Style Sheets)，描述了文檔中元素的外觀。CSS 控制格式的許多方面，例如：字體、字號、顏色、背景色、邊框、外邊距，以及對齊。
創建一個新的 Dart 應用
- 進入 DartPad。
- 點擊 New Pad 按鈕，撤銷你上次在 DartPad 做的所有更改。
注意：這些 DartPad 的功能隱藏了一些 HTML 引用代碼。如果你想要使用任何其它的編輯器，我們推薦從一個小的 Dart web 應用示例開始，並修改
中沒有<script>標籤的部分。HTML and Dart connections 展示了完整的 HTML 代碼。</p></blockquote><h3 class="pgc-h-arrow-right">如何安裝</h3><p>為了開發Web，您需要<br/>Flutter 1.5及更高版本，它支持使用Flutter來定位Web，包括將Dart編譯為JavaScript。要將<br/>Flutter SDK與flutter_web預覽一起使用，請確保<br/>至少已從計算機上v1.5.4運行flutter upgrade，以將Flutter 升級至。</p><pre><code>$ flutter upgrade<br></code></pre><p>要安裝該webdev軟件包，該軟件包提供了Flutter for web的構建工具，請運行以下命令：</p><pre><code>$ flutter packages pub global activate webdev<br></code></pre><p>確保$HOME/.pub-cache/bin目錄在您的路徑中，然後您<br/>可以webdev直接在終端上使用該命令。</p><p>為了添加$HOME/.pub-cache/bin到路徑中，請<br/>從終端運行以下提到的命令來打開路徑文件。</p><pre><code>$ touch ~/.bash_profile; open ~/.bash_profile<br></code></pre><p>它將使用TextEdit打開文件，確保對PATH中的所有組件都有引用並保存。如果再次打開它，則會找到您的修改。</p><pre><code>flutter sdk:<br>export PATH=$PATH:[Path to your flutter directory]/flutter/bin<br><br>dart sdk:<br>export PATH=$PATH:[Path to your flutter directory]<br>/flutter/bin/cache/dart-sdk/bin<br><br>webdev:<br>mac: export PATH=$PATH:$HOME/.pub-cache/bin<br>windows: %USERPROFILE%\\AppData\\Roaming\\Pub\\Cache\\bin<br>linux: $HOME/flutter/.pub-cache/bin<br></code></pre><blockquote><p>注意：如果您在配置webdev直接運行時遇到問題，請嘗試：<br/>flutter packages pub global run webdev [command]。</p></blockquote><p>現在我們已經完成了開發環境的設置，讓我們繼續進行創建Web項目的下一步。</p><h3 class="pgc-h-arrow-right">Flutter Web開發的工具支持</h3><p>完成環境設置後，您將需要一個IDE才能開始<br/>為Web開發。選擇您喜歡的IDE，然後按照<br/>下面的逐步說明進行操作：</p><h4 class="pgc-h-arrow-right">Visual Studio程式碼</h4><p>Visual Studio Code通過<br/>Flutter擴展的v3.0版本支持Flutter Web開發。</p><ul class=""><li>安裝 Flutter SDK</li><li>設置 VS Code</li><li>配置VS代碼以指向本地Flutter SDK</li><li>Flutter: New Web Project從VS Code 運行命令</li><li>創建項目後，按F5或“ Debug-> Start<br/>Debugging” 運行您的應用</li><li>VS Code將使用webdev命令行工具來構建和運行您的應用程序；應打開一個新的Chrome窗口，顯示正在運行的應用</li></ul><h4 class="pgc-h-arrow-right">從IntelliJ使用</h4><ul class=""><li>安裝 Flutter SDK</li><li>設置您的IntelliJ或Android Studio副本</li><li>配置IntelliJ或Android Studio以指向本地Flutter SDK</li><li>創建一個新的Dart項目；請注意，對於Flutter for Web應用，您<br/>要從Dart項目嚮導而不是Flutter項目嚮導開始</li><li>從Dart項目嚮導中，為<br/>應用程序模板選擇“ Flutter for web”選項</li><li>創建項目；pub get將自動運行</li><li>創建項目後，點擊run主工具欄上的按鈕</li><li>IntelliJ將使用webdev命令行工具來構建和運行您的應用程序；<br/>應打開一個新的Chrome窗口，顯示正在運行的應用</li></ul><h4 class="pgc-h-arrow-right">使用Android Studio</h4><p>在Android Studio中，沒有直接的插件或模板來創建Web項目，而是可以使用Stagehand軟件包來幫助您設置Web項目。Stagehand基本上是Dart項目腳手架生成器，受到Web Starter Kit和Yeoman等工具的啟發。為了使用Stagehand創建一個Web項目，您需要按照以下說明進行操作：</p><ul class=""><li>安裝 Flutter SDK</li><li>設置您的Android Studio副本</li><li>配置Android Studio以指向您的本地Flutter SDK</li><li>現在從終端運行以下命令以安裝Stagehand $ pub global activate stagehand</li><li>一旦安裝了Stagehand，就可以使用它<br/>在所需目錄中生成項目框架。例如，以下是如何使用Stagehand創建簡單的Web項目：</li></ul><pre><code>$ mkdir flutter_web_project <br>$ cd flutter_web_project <br>$ stagehand web-simple<br></code></pre><p>並列出所有項目模板：</p><p>$ stagehand</p><ul class=""><li>創建項目後，請在Android Studio中打開該項目，然後<br/>在pubspec.yaml文件中添加以下依賴項</li></ul><pre><code> dependencies:<br> flutter_web: any<br> flutter_web_ui: any<br> dev_dependencies:<br> # Enables the `pub run build_runner` command<br> build_runner: ^1.1.2<br> # Includes the JavaScript compilers<br> build_web_compilers: ^1.0.0<br> # flutter_web packages are not published to pub.dartlang.org<br> # These overrides tell the package tools to get them from GitHub<br> dependency_overrides:<br> flutter_web:<br> git:<br> url: https://github.com/flutter/flutter_web<br> path: packages/flutter_web<br> flutter_web_ui:<br> git:<br> url: https://github.com/flutter/flutter_web<br> path: packages/flutter_web_ui<br></code></pre><ul class=""><li>pub get從您的終端運行，這將下載所有必需的軟件包</li><li>一旦完成 lib在項目的根目錄中創建一個文件夾</li><li>現在main.dart在lib文件夾中創建一個文件，並將以下代碼粘貼到其中：</li></ul><pre><code>import 'package:flutter_web/material.dart';<br><br>void main() => runApp(Text('Hello World', textDirection:<br> TextDirection.ltr));<br></code></pre><ul class=""><li>完成後；打開main.dartWeb文件夾中存在的文件，並在其中粘貼以下代碼：</li></ul><pre><code>import 'package:fancy_proj/main.dart' as app;<br>import 'package:flutter_web_ui/ui.dart' as ui;<br><br>main() async {<br> await ui.webOnlyInitializePlatform();<br> app.main();<br>}<br></code></pre><ul class=""><li>完成所有操作後，就可以測試Web項目了。通過在終端中鍵入以下命令來運行您的應用程序：</li></ul><pre><code>$ webdev serve<br><br>[INFO] Generating build>閱讀更多 技術剛剛好 的文章
