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

時間 2019-12-16

標籤 flutter 昨晚簡記桌面 web 開發欄目 HTML 简体版

原文原文鏈接

Flutter 1.12穩定版發佈，桌面和瀏覽器勢頭很強。linux

[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.ioandroid

牛X哄哄的Adobe XD，本身去體驗吧...

開篇

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

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

不少人提問"章口就萊"，提問的正確打開方式，你須要給出:github

1.應用場景:說明你不是在拿我尋開心
2.你對問題的瞭解:哪出現了問題，先別問別人，先問本身，說明你作了這點
3.脫敏後的小demo:寫個小demo測試一下，也許是你項目的鍋。
4.若是以爲問題過小，不必作前三步，請自行解決。
複製代碼

若是你以爲能夠接受上面四點，歡迎加入:編程技術交流聖地[-Flutter羣-]
不然，連提問都不虔誠的人，沒有什麼交流的意義。微信:zdl1994328web

前言

想要開發桌面和web，首先將分支切到master，開啓支持。
若是你有潔癖，只是想體驗一下，徹底能夠新下一個SDK，共存也是沒問題的。macos

---[• 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 運行項目

在設備欄能夠看到支持的設備windows

能夠直接運行項目: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佈局優雅，組件複用的絲滑，入口即化。