[Flutter新手村] 入村攻略—前言和環境安裝

TracyJ發表於2020-04-03
Flutter

[Flutter新手村] 入村攻略—前言和環境安裝

性感google線上發碼，老鄉別走，來玩兒嘛~

前言

作為一個6年的android開發，學過各種亂七八糟神奇的東西，在學flutter的時候也有過很多問題和困惑，曾經也想要完成《從入門到放棄》的新手村任務，但幸好堅持了下來。

萬事開頭難，想分享一些自己學習的攻略，希望對想要入坑flutter的同學或者遇到問題想要出門左轉的同學有一些幫助和啟發~

Flutter

what Flutter

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。

Why Flutter

簡而言之三點：跨平臺，體驗和效能好，google加持。

  • 跨平臺

    跨平臺恐怕是所有公司的終極夢想，once coding, running everywhere，一統天下，多麼美妙~

既然是夢想肯定有不少追逐者，這裡搬運了當前常用的跨平臺技術方案對比，大家體會一下：

技術型別 UI渲染方式 效能 開發效率 動態化 框架代表
H5+原生 WebView渲染 一般 高 支援 Cordova、Ionic
JavaScript+原生渲染 原生控制元件渲染 好 中 支援 RN、Weex
自繪UI+原生 呼叫系統API渲染 好 Flutter高, QT低 預設不支援 QT、Flutter

  • 體驗和效能好

    看下flutter的架構圖：

[Flutter新手村] 入村攻略—前言和環境安裝
framework層的widgets直接驅動Engine層的Skia進行繪製圖形，是不是有點android/ios原生架構的感覺，真正的“沒有中間商賺差價”，效能和體驗自然接近原生啦。

  • Google加持
    • Google的技術和影響力自然不必說，flutter的文件，開源社群都很優秀。flutter作為android的兄弟團隊，跨平臺搞事情，支援應該都會好一些，所以對它的發展前景比較看好。
    • 那Flutter最終會取代原生嗎？我認為肯定不會！
      • Flutter對於原生的如相機、藍芽等硬體無法呼叫，必須藉助原生，客觀天然無法替代。
      • 蘋果和安卓一定會設法保護自己的原生開發人員和生態。 原生開發者需求減少，本身不利於其生態發展。尤其是蘋果，一個appstore個人開發者賬號$99 / year呢！

我認為，隨著flutter技術的成熟和社群的強大，會有一大批的hybrid應用和原生應用轉向flutter。你看阿里、頭條等大廠都向flutter靠攏了，flutter征程必是一片星辰大海！

新手村任務一：安裝環境和建立工程

前面囉嗦那麼多，終於要開始了~
複製程式碼

建議大家去 Flutter官網按照步驟完成【安裝和環境配置】和【編輯工具設定】。選擇自己的作業系統(建議使用mac，因為可能需要修改一些ios的配置)，根據指南一步步安裝就好了，這個地方沒啥坑。

  • 開發工具選擇：android Studio + Xcode。也可以用vsCode 和 Intellij Idea。這裡我推薦用的是Intellij Idea，用習慣了挺好用的。

接下來準備建立工程了, 等一下！這裡需要先設定一下flutter的國內映象代理，否則flutter的依賴可能會下載不下來。

linux的環境變數裡面新增如下：
開啟終端，輸入vim .bash_profile，在bash檔案裡新增如下：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

複製程式碼

就是把flutter下載以來的地址指向國內的映象，誰讓我們有安全的牆呢。

設定完映象，可以有兩種方式建立app。

  1. 開啟工程要存放的位置，命令列

    flutter create myapp
複製程式碼

    就會建立一個myapp的flutter應用

  2. 通過AndroidStudio建立

  • 選單中選擇“start a new flutter application”

[Flutter新手村] 入村攻略—前言和環境安裝

  • 選擇"Flutter Application",你要是module就選擇“Flutter Module”

[Flutter新手村] 入村攻略—前言和環境安裝

  • 接下來就是設定包名等各種配置，下一步就完事了。
  • 最後會開始建立應用，其實就是執行的 flutter create 命令。

這裡注意一下，很多人通過AndroidStudio建立flutter Application會一直卡在建立loading的介面無法自拔。解決方法就是強制退出AndroidStudio，如果建立了資料夾和檔案，用AndroidStudio開啟工程就行了。如果只有空資料夾，建議使用命令列的方式建立工程。

建立好工程，使用IntelliJ Idea開啟

使用open的方式開啟工程，不要使用import

  • 開啟後工程介面如下

[Flutter新手村] 入村攻略—前言和環境安裝

  • 頂部可以選擇並啟動模擬器，左邊ios，右邊android，啟動模擬器就可以run起工程來了。

注意：如果使用android裝置除錯，android工程在初始化的時候要下載gradle依賴，國內網路常常下載不下來，所以需要修改一下配置。

開啟目錄 myapp/andriod/build.gradle檔案，它是android工程的配置檔案，做如下修改：

[Flutter新手村] 入村攻略—前言和環境安裝
圖中兩處紅色框裡的repositories的內容替換成如下內容。

repositories {
        mavenLocal()
        jcenter() { url 'https://maven.aliyun.com/repository/jcenter' }
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven {
            url "https://dl.google.com/dl/android/maven2/"
        }
        maven {
            url 'http://maven.aliyun.com/nexus/content/repositories/releases/'
        }
    }
複製程式碼

目的是新增了國內的映象，這樣android工程的依賴就會從國內下載了，做安卓的應該都知道這個哈，這樣android工程就能順利跑起來啦。

[Flutter新手村] 入村攻略—前言和環境安裝

今天先寫到這裡，新手村任務一完成了，準備接新的任務！

覺得不錯就三連一下吧~

相關文章