开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> [- Flutter 跨界篇-]昨晚简记+Flutter桌面、Web开发 -> 正文阅读

[移动开发][- Flutter 跨界篇-]昨晚简记+Flutter桌面、Web开发

Flutter 1.12稳定版发布，桌面和浏览器势头很强。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WdRG6x7X-1629539126326)(https://user-gold-cdn.xitu.io/2019/12/12/16ef7a35c1318444?imageView2/0/w/1280/h/960/ignore-error/1)]

[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的梦想

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nC56SKmg-1629539126329)(https://user-gold-cdn.xitu.io/2019/12/12/16ef7ac24fce06b3?imageView2/0/w/1280/h/960/ignore-error/1)]

浏览器运行Flutter

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jPpOVB2i-1629539126330)(https://user-gold-cdn.xitu.io/2019/12/12/16ef777ef544dcf7?imageView2/0/w/1280/h/960/ignore-error/1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RSOFZjtu-1629539126331)(https://user-gold-cdn.xitu.io/2019/12/12/16ef782d88952f1f?imageView2/0/w/1280/h/960/ignore-error/1)]

UI界面的可以预览,不止是预览

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cstzqQf0-1629539126333)(https://user-gold-cdn.xitu.io/2019/12/12/16ef7aad9f97f822?imageView2/0/w/1280/h/960/ignore-error/1)]

多设备，多平台同时调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9hEM8TSZ-1629539126334)(https://user-gold-cdn.xitu.io/2019/12/12/16ef76eca1041e0b?imageView2/0/w/1280/h/960/ignore-error/1)]

UI通多设计图生成Widget

下载工具 supernova.io

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0eMAwVN7-1629539126334)(https://user-gold-cdn.xitu.io/2019/12/12/16ef77dc8c99bd61?imageView2/0/w/1280/h/960/ignore-error/1)]

牛X哄哄的Adobe XD，自己去体验吧…

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2LuGco56-1629539126335)(https://user-gold-cdn.xitu.io/2019/12/12/16ef7b05f44cc782?imageView2/0/w/1280/h/960/ignore-error/1)]

开篇

鸡血打完了，但是别太兴奋。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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-apIz2brt-1629539126335)(https://user-gold-cdn.xitu.io/2019/12/11/16ef3d139a63e532?imageView2/0/w/1280/h/960/ignore-error/1)]

1.2 运行项目

在设备栏可以看到支持的设备

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DnhH1ffp-1629539126336)(https://user-gold-cdn.xitu.io/2019/12/11/16ef3d4736bbadb6?imageView2/0/w/1280/h/960/ignore-error/1)]

可以直接运行项目:macOS效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LqXbSzxg-1629539126336)(https://user-gold-cdn.xitu.io/2019/12/11/16ef3baf3043986d?imageslim)]

可以直接运行项目:web效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MP44VBIh-1629539126337)(https://user-gold-cdn.xitu.io/2019/12/11/16ef3e63b5395fc8?imageslim)]

2.看一下自定义组件的表现

2.1 RunBall 运动盒的表现

运动盒尺寸300*300,默认的窗口尺寸自行目测

点击测试InkWell的涟漪效果正常，鼠标选浮有效果
组件拼组正常，Canvas表现良好，说明自定义组件可以在多平台公用。
运动盒实现详见：Flutter动画之粒子精讲

// 英雄所见...
children: <Widget>[
     RunBallWidget(size: Size(300, 300),),

自定义组件:macOS效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RCcaCNJW-1629539126337)(https://user-gold-cdn.xitu.io/2019/12/11/16ef3ede308a17a4?imageslim)]

自定义组件:web效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1IrfVSgK-1629539126337)(https://user-gold-cdn.xitu.io/2019/12/11/16ef3f5a1c8db063?imageslim)]

3.基本详情

自定义InfoWidget 来看一下当前的信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h1mYYnk5-1629539126338)(https://user-gold-cdn.xitu.io/2019/12/11/16ef408d1d4799e4?imageView2/0/w/1280/h/960/ignore-error/1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vTA2jrAG-1629539126338)(https://user-gold-cdn.xitu.io/2019/12/11/16ef4093e78e7ef7?imageView2/0/w/1280/h/960/ignore-error/1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6CcVybyz-1629539126339)(https://user-gold-cdn.xitu.io/2019/12/12/16ef75dd61f28202?imageView2/0/w/1280/h/960/ignore-error/1)]

如果说能够迅速开发6个平台(windows,linux,Android,iOS,macOS,web)的界面

Flutter称为天下第一剑，当之无愧。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JY2wpxC9-1629539126339)(https://user-gold-cdn.xitu.io/2019/12/12/16ef76eca1041e0b?imageView2/0/w/1280/h/960/ignore-error/1)]

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基础篇 -] 网络访问

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o1c70kBb-1629539126340)(https://user-gold-cdn.xitu.io/2019/12/11/16ef4dae7be959df?imageslim)]

BUT：MacOS 访问网络也要加权限
BUT：MacOS 访问网络也要加权限
BUT：MacOS 访问网络也要加权限

<key>com.apple.security.network.client</key>
<true/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dluI71NI-1629539126340)(https://user-gold-cdn.xitu.io/2019/12/14/16f038df4813335d?imageView2/0/w/1280/h/960/ignore-error/1)]