Flutter 介紹

Flutter app 使用了 Dart 語言，源自于 Google，現(xiàn)在是 ECMA 的標(biāo)準(zhǔn)。Dart 吸收了許多現(xiàn)代語言的特性，比如 Kotlin 和 Swift，同時(shí)能被轉(zhuǎn)譯成 js 代碼。

作為一個(gè)跨平臺(tái)框架，F(xiàn)lutter 和 React Native 非常像，因?yàn)?Flutter 支持響應(yīng)式和聲明式語法。但和 React Native 不同，F(xiàn)lutter 不需要 Javascript 橋接，這顯著提升了 app 的加載時(shí)間和整體性能。Dart 是通過 AOT 編譯來做到這一點(diǎn)的。

Dart 還有一個(gè)獨(dú)特的地方，它也支持 JIT 編譯。Flutter 的 JIT 編譯改變了開發(fā)流程，它允許在開發(fā)中通過熱加載來更新 UI，而無需進(jìn)行新的 build。

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

除了 iOS 和 Android 平臺(tái)，學(xué)習(xí) Flutter 還會(huì)讓你體驗(yàn)到在 Fuchsia 平臺(tái)上的開發(fā)，這是 Google 開發(fā)中的實(shí)驗(yàn)性操作系統(tǒng)。

開始

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

配置開發(fā)環(huán)境

配置 Flutter 開發(fā)環(huán)境的詳細(xì)指南請(qǐng)看這里。它的基本步驟因平臺(tái)而異，但大部分都包括：

克隆 Flutter git 庫 將 Flutter 的 bin 目錄添加到 path 環(huán)境變量 運(yùn)行 flutter doctor 命令，這會(huì)安裝 Flutter 框架，包括 Dart，并提示你缺少的依賴項(xiàng) 安裝缺失的依賴項(xiàng) 在你的 IDE 中安裝 Flutter 插件/擴(kuò)展 運(yùn)行測(cè)試 app

在 Flutter 網(wǎng)站上的指南很詳細(xì)，讓你很容易就根據(jù)你的平臺(tái)上配置好開發(fā)環(huán)境。本文接下來會(huì)假設(shè)你的 VSCode 已經(jīng)為 Flutter 開發(fā)配置好了，同時(shí)通過 flutter doctor 解決了所有的問題。

如果你使用 Android Studio 的話，請(qǐng)確定你能夠跟上進(jìn)度。你還需要 iOS 模擬器、Android 模擬器或者擁有一臺(tái)激活的 iOS 設(shè)備，或者可用于開發(fā)的 Android 設(shè)備

注：要在 iOS 模擬器或 iOS 設(shè)備上進(jìn)行編譯和調(diào)試，你必須使用 macOS 并裝好 Xcode。需要Xcode 7.2或更高版本

注：cocoapods也需要升級(jí)到1.5.0以上

創(chuàng)建項(xiàng)目

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

項(xiàng)目名稱輸入 “MyFlutterDemo”，回車。選擇項(xiàng)目文件夾，等待 Flutter 在 VSCode 中創(chuàng)建項(xiàng)目。創(chuàng)建好項(xiàng)目后，maid.dart 會(huì)在編輯器中打開。

在 VSCode 中，你會(huì)看到左邊有一個(gè)面板，顯示了項(xiàng)目結(jié)構(gòu)。有 iOS 和 Android 兩個(gè)目錄，以及一個(gè)包含了 main.dart 以及應(yīng)用到兩個(gè)平臺(tái)的 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() 函數(shù)用到了 => 運(yùn)算符，因?yàn)樗挥幸恍姓Z句，就是運(yùn)行這個(gè)app。然后是一個(gè)名為 MyFlutterDemo 的類。

這個(gè) app 自身也是一個(gè) StatelessWidget。在 flutter app 中大部分對(duì)象都是 widget，無狀態(tài)的或者有狀態(tài)的。你覆蓋了 widget 的 build() 方法，用以創(chuàng)建一個(gè) app widget。然后用一個(gè) MaterialApp widget 提供材料設(shè)計(jì)中會(huì)用到的大量組件。

如果你使用 macOS，請(qǐng)啟動(dòng) iOS 模擬器。你以可以使用 Android 模擬器，它支持 macOS、Linux 或 Windows。 如果 iOS 模擬器和 Android 模擬器同時(shí)在運(yùn)行，你可以用 VSCode 右下角的菜單切換它們：

點(diǎn)擊 F5 或者 Debug > Start Debugging，Build & run 項(xiàng)目。Debug 控制臺(tái)會(huì)打開，如果運(yùn)行在 iOS 上，會(huì)用 Xcode 來編譯項(xiàng)目。如果在 Android 中運(yùn)行，則會(huì)調(diào)用 Gradle 來編譯。

Flutter環(huán)境配置及項(xiàng)目創(chuàng)建介紹到此結(jié)束，謝謝大家~

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/18144.html