天天看點

谷歌開源跨平台UI架構——Flutter

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可以跟現有的代碼一起工作,并且可以被世界各地開發者使用,因為他是免費的、開源的!

學習這個跨平台的UI架構,也許有一天你能成為一個Android、IOS雙端開發者,或者成為谷歌新系統Fuchsia開發者!不管怎麼樣,會讓你的技能池更加豐富,讓你變的更強大!

擁抱變化,才能把握機會!不學習就落後,落後就挨打!

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

  • Fast development(快速開發)
Flutter’s 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的硬體的模拟器上體驗不要一秒的重載時間,并且不會丢失任何狀态!

谷歌開源跨平台UI架構——Flutter
  • Expressive, beautiful UIs(漂亮的UI)
Delight your users with Flutter’s 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,能平滑滾動,并能保留了平台的特性

谷歌開源跨平台UI架構——Flutter
谷歌開源跨平台UI架構——Flutter
  • Modern, reactive framework(時髦而高效)
    Easily compose your UI with Flutter’s 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問題!

//官方示例代碼
class CounterState extends State<Counter> {
  int counter = ;

  void increment() {
    // Tells the Flutter framework that state has changed,
    // so the framework can run build() and update the display.
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // This method is rerun every time setState is called.
    // The Flutter framework has been optimized to make rerunning
    // build methods fast, so that you can just rebuild anything that
    // needs updating rather than having to individually change
    // instances of widgets.
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}
           
  • Unified app development
Flutter has the tools and libraries to help you easily bring your ideas to life on iOS and Android. If you don’t 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指令面闆,輸入:

通過鏡像擷取SDK

擷取成功之後,需要配置環境變量,隻需要把flutter\bin 加入到path路徑當中即可(請複制完整的路徑)

然後在CMD指令中輸入

flutter doctor
           

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

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

成功之後相關的依賴應該已經下載下傳成功,環境配置也基本成功。Flutter支援的Android最低版本的手機是4.1,你也可通過指令檢視手機是否支援

3、設定你的手機
  • 打開手機的開發者模式,開啟USB調試功能,把手機跟電腦連接配接
  • 輸入在指令闆上輸入
flutter 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

谷歌開源跨平台UI架構——Flutter

看看AndroidStudio的toolbar,可以選擇手機版本,手機型号,然後點選run,就可以把項目運作到手機上了

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

  • 改變字元:
'You have pushed the button this many times:' to
'You have clicked the button this many times:'
           
  • 不要點選Stop,讓你的app繼續運作
  • 然後點選 Save All (cmd-s / ctrl-s),或者點選Reload按鈕我們立刻就可以看到内容改變,非常友善高效

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

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

當然你也可以通路官網檢視學習資料進行學習:官網

學習更多Android内容,歡迎關注我們的公衆号:碼老闆

谷歌開源跨平台UI架構——Flutter