---
# System prepended metadata

title: Flutter basic intro
tags: [Dart, Flutter]

---

---
title: 'Flutter basic intro'
---

Flutter basic intro
===
###### tags: `Flutter` `Dart`

## What is Flutter
Flutter 是一個專門生成2D應用程式的SDK，並且是一個利用Dart語言撰寫的程式架構，不管是手機、網頁還是桌面程式都可以利用其進行開發。主打跨平台、高性能、高保真度。
Flutter提供了豐富的套件與api，讓開發者可以快速的產出還原度高的應用程式，一套程式碼就可以套用在iOS與Andriod兩大手機平台。
Flutter 與其他的應用程式架構不同，他不是使用WebView也不是使用原生的OEM widget，他是使用自己的繪圖引擎Skia來呈現，不但能夠確保在Android跟iOS上的UI一致性，也可以避免因為對於原生套件的依賴帶來的限制與維護成本。
:::    info
Skia Graphics Library是一個由C++編寫的開放原始碼圖形庫，最初由Skia公司開發，被Google收購後以New BSD License許可下開源。它在字形、座標轉換、點陣圖等都有高效能以及簡潔的表現。
:::
目前Flutter官方宣稱其支援iOS、Android、Fuchsia三個手機平台以及Web跟PC應用程式開發。
:::    info
Fuchsia是Google開發的作業系統。和以前該公司開發的作業系統，如基於Linux核心的Chrome OS和Android等不同，Fuchsia基於新的名為Zircon的微核心，受Little Kernel啟發，用於嵌入式系統，主要使用C語言和C++編寫。
:::

![](https://i.imgur.com/gVGMUE4.png)


## Flutter 跟 Dart 的關係

![](https://i.imgur.com/AvfFGbT.png)

### 為什麼使用Dart做為開發語言
1. 開發效率高
Flutter支援即時編譯 (JIT)，它會在執行期間在瀏覽器中編譯你的應用程式，這樣便避免了每次改動都要進行編譯，節省了極大的開發時間。
2. 高性能
Flutter 旨在提供流暢、高保真度的UI體驗，為了實現這一點，Flutter必須要在每一幀運行大量的程式運算。而Dart支持預先編譯(AOT)，它會在建構時編譯你的應用程式。
3. 安全
Dart是一個類型安全的語言，支援靜態類型檢測，所以可以在編譯前發現一些類型的錯誤，並排除潛在問題，這一點對於前端開發者來說更具有吸引力。
4. Dart團隊
看似不起眼，實則舉足輕重。由於有Dart團隊的積極投入，Flutter團隊可以獲得更多、更方便的支援。





## Flutter History
```mermaid
gantt
    title Timeline

    section Univeil
    Dart Developer summit:2015-04-28, 
    section Alpha
    v0.0.6      :2017-05  ,
    section Beta
    v0.1.5      :2018-01  ,
    section First Stable version
    v1.0.0      :2018-12-05  ,
```

## Compare with other cross platform

|   | Flutter | React Native | ionic
| - | - | - | - |
| Cross platform | ![](https://i.imgur.com/5goyzJs.png) ![](https://i.imgur.com/eUPI9KK.png) ![](https://i.imgur.com/8zUqr5M.png) | ![](https://i.imgur.com/5goyzJs.png) ![](https://i.imgur.com/eUPI9KK.png)| ![](https://i.imgur.com/5goyzJs.png) ![](https://i.imgur.com/eUPI9KK.png)|
| Pricing | Open source | Open source | Open source
| Hot Reload | ✔ | ✔ | ✖
| Release date | 2017 | 2015 | 2013
| Community |
| Component | Desige by Google Team | Third party | Third party
| Industry adoption |
| Docs | Official
| Language | Dart | JavaScript | HTML5, CS5, JavaScript

| Flutter | React Native 
| - | - 
|![](https://i.imgur.com/CKe11WP.png)|![](https://i.imgur.com/vgRw6Bk.png)