[- Flutter 跨界篇-]昨晚簡記+Flutter桌面、Web開發

Flutter 1.12穩定版釋出，桌面和瀏覽器勢頭很強。

[1]. 官方已經有響應式的佈局的打算了，坐等。(有生之年)
[2]. UI介面的可以預覽，終於等到你...
[3]. 0環境，瀏覽器執行Flutter，是什麼樣的體驗...
[4]. 多裝置，6平臺同時除錯，就問你有沒有這麼多錢買裝置 ~
[5]. UI通過設計圖生成Widget supernova.io，
[6]. Adobe XD,直接連線裝置，設計時，改UI直接更新介面? 當時網路卡了一下，開頭沒看太清。
[7]. 也演示了手柄、遊戲的控制，巴拉巴拉...
我最喜歡的是gskinner 的炫酷互動頁面,而且開源。
可訪問:https://flutter.gskinner.com/
[8]. 線上字型庫，多到你想不到...
複製程式碼

---

One For All的夢想

瀏覽器執行Flutter

UI介面的可以預覽,不止是預覽

---

多裝置，多平臺同時除錯

---

UI通多設計圖生成Widget

下載工具 supernova.io

牛X哄哄的Adobe XD，自己去體驗吧...

---

開篇

雞血打完了，但是別太興奮。Flutter很棒是沒錯，但是...

Flutter不是神，只是一把跨界斬殺的最強之劍。你不會程式設計的心法和劍法，不磨鍊技藝和邏輯控制力。握著最強的劍，耍幾招三腳貓功夫就說會用了? 醒醒吧，孩子，你對於力量一無所知。

很多人提問"章口就萊"，提問的正確開啟方式，你需要給出:

1.應用場景:說明你不是在拿我尋開心
2.你對問題的瞭解:哪出現了問題，先別問別人，先問自己，說明你做了這點
3.脫敏後的小demo:寫個小demo測試一下，也許是你專案的鍋。
4.如果覺得問題太小，沒必要做前三步，請自行解決。
複製程式碼

如果你覺得可以接受上面四點，歡迎加入:程式設計技術交流聖地[-Flutter群-]
否則，連提問都不虔誠的人，沒有什麼交流的意義。 微信:zdl1994328

---

前言

想要開發桌面和web，首先將分支切到master，開啟支援。
如果你有潔癖，只是想體驗一下，完全可以新下一個SDK，共存也是沒問題的。

---[• flutter config --enable-macos-desktop
Setting "enable-macos-desktop" value to "true".
You may need to restart any open editors for them to read new settings.

---[• flutter config --enable-linux-desktop
---[• flutter config --enable-windows-desktop


---[•  flutter channel
Flutter channels:
  beta
  dev
* master
  stable
複製程式碼

---

1.桌面程式開發

1.1 新建專案

使用AndroidStudio一路建立...
你會發現和原來的專案相比多了兩個包，web包以及，我的是macOS

---

1.2 執行專案

在裝置欄可以看到支援的裝置

可以直接執行專案:macOS效果

可以直接執行專案:web效果

---

2.看一下自定義元件的表現

2.1 RunBall 運動盒的表現

運動盒尺寸300*300,預設的視窗尺寸自行目測
點選測試InkWell的漣漪效果正常，滑鼠選浮有效果
元件拼組正常，Canvas表現良好，說明自定義元件可以在多平臺公用。
運動盒實現詳見：Flutter動畫之粒子精講

// 英雄所見...
children: <Widget>[
     RunBallWidget(size: Size(300, 300),),
複製程式碼

自定義元件:macOS效果

---

自定義元件:web效果

---

3.基本詳情

自定義InfoWidget 來看一下當前的資訊

如果說能夠迅速開發6個平臺(windows,linux,Android,iOS,macOS,web)的介面
Flutter稱為天下第一劍，當之無愧。

import 'dart:io';

import 'package:flutter/material.dart';

class InfoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var info = "";

    var platformName = "null";
    var devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
    var size=MediaQuery.of(context).size.toString();

    try {
      if (Platform.isIOS) {
            platformName = "iOS";
            //ios相關程式碼
          } else if (Platform.isAndroid) {
            platformName = "Android";
            //android相關程式碼
          } else if (Platform.isWindows) {
            platformName = "Windows";
          } else if (Platform.isMacOS) {
            platformName = "MacOS";
          } else if (Platform.isLinux) {
            platformName = "Linux";
          }
    } catch (e) {
      print(e);
      platformName="Web";
    }

    return Container(
      child: Text("裝置平臺：$platformName\n"
          "裝置畫素密度:$devicePixelRatio\n"
          "當前尺寸:$size\n"
      ),
    );
  }
}
複製程式碼

---

4.外掛和網路測試

使用bloc + 網路測試，下面是我在Android/iOS端做的基於bloc狀態管理的github搜尋頁，直接拷貝進去。邏輯和元件都沒有問題:
Flutter網路測試詳見：[- Flutter基礎篇 -] 網路訪問

BUT：MacOS 訪問網路也要加許可權
BUT：MacOS 訪問網路也要加許可權
BUT：MacOS 訪問網路也要加許可權

<key>com.apple.security.network.client</key>
<true/>
複製程式碼

---

5.國際化和主題切換

Flutter狀態管理詳見:[- Flutter 狀態篇 -] 主題色切換+國際化 三連

總的來看，Flutter 桌面的網路訪問+ 資料管理 + UI表現這三塊基本表現都不錯。
開發直接使用AndroidStudio也非常方便。至於瀏覽器端......差強人意
不過我看來Flutter的能力還是非常不錯的。桌面和瀏覽器完善起來，可能又是一個時代了
但在我看開，Flutter最迷人的是它的UI佈局優雅，元件複用的絲滑，入口即化。

---

尾聲:

秦王掃六合，天下之勢，合久必分，分久必合。但也不必要把Flutter捧上神壇。
Flutter不是神，只是一把跨界斬殺的最強之劍。你不會程式設計的心法和劍法，不磨鍊技藝和邏輯控制力。握著最強的劍，耍幾招三腳貓功夫就說會用了? 醒醒吧，孩子，你對於力量一無所知。

---

還有，別張口就要原始碼，別人的始終是別人的。執行出來看看沒什麼意義，不自己走過來，不踩點坑，怎麼長記性?別讓開源成為你偷懶的藉口。摸摸良心，你為開源做了什麼? 被慣出的臭毛病，像極了現在吃飯都要哄著喂的五歲小孩!不餵你，你就不吃?

---

@張風捷特烈 2019.12.12 未允禁轉
我的公眾號:程式設計之王
聯絡我--郵箱:1981462002@qq.com --微信:1994328zdl
~ END ~