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é)束漫试，謝謝大家~