標籤：

Flutter——谷歌開源的跨平台UI開發框架

03-17

Fluter特性介紹

Flutter官網介紹如下：

Flutter is Google』s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

這個說明告訴我們：Flutter是一款UI框架，可以製作跨平台（Android、IOS）的，高速的本地界面（不是H5）。Flutter可以跟現有的代碼一起工作，並且可以被世界各地開發者使用，因為他是免費的、開源的！

一開始這個框架出來的時候由心的反感，享受安逸的人總是希望世界一成不變！

但是世界在改變你不改變就會被拋棄！

所以現在我接受這種科技變革，準備學習這個開源框架

也許有一天我編程了一個Android、IOS雙端開發者，或者成為谷歌新系統Fuchsia開發者！

擁抱變化，才能把握機會！

廢話不多說，反正不學習就落後，落後就挨打！

我們已經知道Flutter是什麼了，那麼它有哪些特點呢？ 它能做什麼呢？

  • Fast development（快速開發）

Flutters hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.

Flutter的熱載入可以幫助你快速簡單的嘗試，構建UI，添加功能或者快速的修復BUG。你可以在任何具備IOS或Android的硬體的模擬器上體驗不要一秒的重載時間，並且不會丟失任何狀態！

  • Expressive, beautiful UIs（漂亮的UI）

Delight your users with Flutters built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness.

你的用戶會感到高興，因為Flutter內置的Material Design設計和Cupertino （iOS-flavor）控制項，擁有豐富的api，能平滑滾動，並能保留了平台的特性

  • Modern, reactive framework（時髦而高效）

Easily compose your UI with Flutters modern reactive framework and rich set of platform, layout, and foundation widgets. Solve your tough UI challenges with powerful and flexible APIs for 2D, animation, gestures, effects, and more.

Flutter是個時髦而高效的UI框架，它有豐富的平台特性，布局，基礎控制項。它的2D，動畫，手勢，感應等強大的API，靈活使用，能解決你頭疼的UI問題！

1//官方示例代碼 2class CounterState extends State<Counter> { 3 int counter = 0; 4 void increment() { 5 // Tells the Flutter framework that state has changed, 6 // so the framework can run build() and update the display. 7 setState(() { 8 counter++; 9 });10 }11 Widget build(BuildContext context) {12 // This method is rerun every time setState is called.13 // The Flutter framework has been optimized to make rerunning14 // build methods fast, so that you can just rebuild anything that15 // needs updating rather than having to individually change16 // instances of widgets.17 return new Row(18 children: <Widget>[19 new RaisedButton(20 onPressed: increment,21 child: new Text(Increment),22 ),23 new Text(Count: $counter),24 ],25 );26 }27}

  • Unified app development

Flutter has the tools and libraries to help you easily bring your ideas to life on iOS and Android. If you dont have any mobile development experience, Flutter is an easy and fast way to build beautiful mobile apps. If you are an experienced iOS or Android developer, you can use Flutter for your views and leverage much of your existing Java/ObjC/Swift investment.

Flutter 的工具和庫，可以幫助你在IOS和Android上輕鬆實現生活上的想法。如果你沒有任何移動開發經驗，你可以學習Flutter來簡單、快捷的構建漂亮的移動端應用程序。如果你是一個有經驗的iOS和Android開發人員，您可以使用Flutter利用你現有的代碼（Java，ObJC、Swift）進行開發！

很厲害！為了讓你好好使用這個框架，谷歌兼容了你現有的代碼 想詳細了解Flutter的特性你可以去官網逛逛

看了Fluter的特性之後，你是否對Flutter已經感興趣？是否躍躍欲試！是的話請您繼續看，我們開始配置環境！

Fluter環境配置

1、系統配置

  • Windows 7 及以上並且 64位
  • 除了Android Studio佔用的空間，硬碟剩餘空間必須大於40MB
  • Flutter依賴命令行工具，所以你必須有GIT環境，並且有GIT命令面板可以使用

2、獲取Flutter SDK

打開你的GIT命令面板，輸入：

1git clone -b beta https://github.com/flutter/flutter.git

通過鏡像獲取SDK

獲取成功之後，需要配置環境變數，只需要把flutterin 加入到path路徑當中即可（請複製完整的路徑）

然後在CMD命令中輸入

1flutter doctor

檢查你的依賴是否已經下載成功。

  • 這個命令不能在第三方的命令控制面板（shell）比如GIT上輸入，請使用電腦自帶的CMD面板
  • 如果顯示命令不存在，則說明環境沒配置成功，需要重新配置或者重啟計算機
  • 如果現實出錯，別放棄，多試幾次

成功之後相關的依賴應該已經下載成功，環境配置也基本成功。Flutter支持的Android最低版本的手機是4.1，你也可通過命令查看手機是否支持

3、設置你的手機

  • 打開手機的開發者模式，開啟USB調試功能，把手機跟電腦連接
  • 輸入在命令板上輸入

1flutter devices

即可查看手機相關信息，即代表手機支持。

  • 模擬器也可以用這個命令，但是需要注意的是谷歌推薦 x86 或者 x86_64

其實環境很好配置，下載flutter的SDK，然後加入到環境變數中即可

以上操作已經完成，我們可以設置我們的IDE了

設置Flutter IDE

  • 1、下載Android Studio 3.0或者更高版本，當然你也可以使用 IntelliJ:
  • IntelliJ IDEA Community, version 2017.1 or later.

    IntelliJ IDEA Ultimate, version 2017.1 or later.
  • 下載Flutter 和Dart插件

Flutter用於開發者的工作，比如編譯調試等。Dart用於編碼，解析

下載步驟：（1）打開Android Stsudio （2）打開插件設置（Preferences>Plugins） （3）選擇Browse repositories，然後選擇Flutter，點擊下載（4）提示下載Dart的時候選擇Yes（5）重啟IDE

Hellord

創建一個新的Flutter的應用，運行，並學習如何用熱重載進行更改。

  • 選擇File>New Flutter Project
  • 選擇項目類型為Fluter應用，下一步
  • 輸入項目名稱，並下一步
  • 點擊finish
  • 等待Android Studio下載SDK，並創建項目

一般創建的app是使用的Material組建

在你的項目中，你的app的代碼是lib/main.dart

看看AndroidStudio的toolbar，可以選擇手機版本，手機型號，然後點擊run，就可以把項目運行到手機上了

然後可以試試Flutter的熱重載能力：

  • 改變字元：

1You have pushed the button this many times: to2You have clicked the button this many times:

  • 不要點擊Stop，讓你的app繼續運行
  • 然後點擊 Save All (cmd-s / ctrl-s)，或者點擊Reload按鈕我們立刻就可以看到內容改變，非常方便高效

基於以上，我們已經了解了Flutter是什麼，它的特性，以及環境配置和簡單的嘗試

下一次內容我們會分享如何構建一個Flutter APP

當然你也可以訪問官網查看學習資料進行學習：

Write Your First Flutter App?

flutter.io圖標

原文鏈接：

http://blog.csdn.net/u011311586/article/details/79482347?

blog.csdn.net

學習更多Android內容，歡迎關注我們的公眾號：碼老闆

weixin.qq.com/r/liqYgFf (二維碼自動識別)


推薦閱讀：

TAG:Flutter | Android開發 | iOS開發 |