<address id="r9vd9"><address id="r9vd9"><listing id="r9vd9"></listing></address></address>

      歡迎您光臨深圳塔燈網絡科技有限公司!
      電話圖標 余先生:13699882642

      網站百科

      為您解碼網站建設的點點滴滴

      初識Flutter環境搭建

      發表日期:2018-12 文章編輯:小燈 瀏覽次數:2014

      Flutter 介紹

      Flutter app 使用了 Dart 語言,源自于 Google,現在是 ECMA 的標準。Dart 吸收了許多現代語言的特性,比如 Kotlin 和 Swift,同時能被轉譯成 js 代碼。

      作為一個跨平臺框架,Flutter 和 React Native 非常像,因為 Flutter 支持響應式和聲明式語法。但和 React Native 不同,Flutter 不需要 Javascript 橋接,這顯著提升了 app 的加載時間和整體性能。Dart 是通過 AOT 編譯來做到這一點的。

      Dart 還有一個獨特的地方,它也支持 JIT 編譯。Flutter 的 JIT 編譯改變了開發流程,它允許在開發中通過熱加載來更新 UI,而無需進行新的 build。

      Flutter 框架非常依賴 widget 的概念。在 Flutter 中, widget 不僅僅用在 app 的視圖上,也可用于整在整個屏幕甚至是 app 自身。

      除了 iOS 和 Android 平臺,學習 Flutter 還會讓你體驗到在 Fuchsia 平臺上的開發,這是 Google 開發中的實驗性操作系統。

      開始

      可以在 macOS 、Linux 或者 windows 中進行 Flutter 開發。你可以用任意編輯器 + Flutter 工具鏈開發,也可以使用和 IntelliJ IDEA、、Android 和 Visual Studio Code 配套的 IDE 插件來讓開發更輕松。macOS建議使用 Visual Studio Code。

      配置開發環境

      配置 Flutter 開發環境的詳細指南請看這里。它的基本步驟因平臺而異,但大部分都包括:

      克隆 Flutter git 庫 將 Flutter 的 bin 目錄添加到 path 環境變量 運行 flutter doctor 命令,這會安裝 Flutter 框架,包括 Dart,并提示你缺少的依賴項 安裝缺失的依賴項 在你的 IDE 中安裝 Flutter 插件/擴展 運行測試 app

      在 Flutter 網站上的指南很詳細,讓你很容易就根據你的平臺上配置好開發環境。本文接下來會假設你的 VSCode 已經為 Flutter 開發配置好了,同時通過 flutter doctor 解決了所有的問題。

      如果你使用 Android Studio 的話,請確定你能夠跟上進度。你還需要 iOS 模擬器、Android 模擬器或者擁有一臺激活的 iOS 設備,或者可用于開發的 Android 設備

      注:要在 iOS 模擬器或 iOS 設備上進行編譯和調試,你必須使用 macOS 并裝好 Xcode。需要Xcode 7.2或更高版本

      注:cocoapods也需要升級到1.5.0以上

      創建項目

      在 VSCode 中安裝好 Flutter extension 后,點擊 View > Command Palette… 菜單或快捷鍵 cmd+shift+P (macOS) 或 ctrl+shift+P(Linux 或 Windows) 打開命令面板。在命令面板中輸入 Flutter: New Project 然后回車 。

      項目名稱輸入 “MyFlutterDemo”,回車。選擇項目文件夾,等待 Flutter 在 VSCode 中創建項目。創建好項目后,maid.dart 會在編輯器中打開。

      在 VSCode 中,你會看到左邊有一個面板,顯示了項目結構。有 iOS 和 Android 兩個目錄,以及一個包含了 main.dart 以及應用到兩個平臺的 lib 目錄。在本教程中,你只用到 lib 目錄。

      將 main.dart 修改為:

      import 'package:flutter/material.dart';

      void main() => runApp(new GHFlutterApp());

      class MyFlutterDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'GHFlutter', home: new Scaffold( appBar: new AppBar( title: new Text('FlutterDemo'), ), body: new Center( child: new Text('hello world'), ), ), ); } }

      在頂部,main() 函數用到了 => 運算符,因為它只有一行語句,就是運行這個app。然后是一個名為 MyFlutterDemo 的類。

      這個 app 自身也是一個 StatelessWidget。在 flutter app 中大部分對象都是 widget,無狀態的或者有狀態的。你覆蓋了 widget 的 build() 方法,用以創建一個 app widget。然后用一個 MaterialApp widget 提供材料設計中會用到的大量組件。

      如果你使用 macOS,請啟動 iOS 模擬器。你以可以使用 Android 模擬器,它支持 macOS、Linux 或 Windows。 如果 iOS 模擬器和 Android 模擬器同時在運行,你可以用 VSCode 右下角的菜單切換它們:

      點擊 F5 或者 Debug > Start Debugging,Build & run 項目。Debug 控制臺會打開,如果運行在 iOS 上,會用 Xcode 來編譯項目。如果在 Android 中運行,則會調用 Gradle 來編譯。

      Flutter環境配置及項目創建介紹到此結束,謝謝大家~


      本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得,所有資料僅供用戶學習參考,本站不擁有所有權,如您認為本網頁中由涉嫌抄襲的內容,請及時與我們聯系,并提供相關證據,工作人員會在5工作日內聯系您,一經查實,本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/18144.html
      相關APP開發
       八年  行業經驗

      多一份參考,總有益處

      聯系深圳網站公司塔燈網絡,免費獲得網站建設方案及報價

      咨詢相關問題或預約面談,可以通過以下方式與我們聯系

      業務熱線:余經理:13699882642

      Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

      国产成人精品综合在线观看