前几天谷歌发布了Flutter1.9版本，并且吧Flutter web合并到了master，看了谷歌在Flutter的路上越走越远。作为移动端的开发者，Flutter给我们提供一个很不错的跨平台开发的方式。本人也以为工作的原因，用上了Flutter，开始其实我是拒绝的，现在我只想说：“真香”！

今天分享一个由Alibaba开源的一个对上手Flutter 有帮助的APP： Flutter GO。

Flutter Go

Language: English | 中文简体

一个帮助开发者快速上手的 APP

最新动态

dart – Flutter Error：当前的Flutter SDK版本是2.1.0-dev.0.0.flutter-be6309690f

The current Dart SDK version is 2.1.0-dev.0.0.Flutter-be6309690f.

Because buddy depends on Flutter_built_redux 0.4.5 which requires SDK 
version >=1.19.0 <2.0.0,version solving Failed.                                                  
pub get Failed (1)

[✓] Flutter (Channel dev,v0.6.0,on Mac OS X 10.13.4 17E202,locale en-IN)
• Flutter version 0.6.0 at /Users/pro/Downloads/Flutter
• Framework revision 9299c02cf7 (5 days ago),2018-08-16 00:35:12 +0200
• Engine revision e3687f70c7
• Dart version 2.1.0-dev.0.0.Flutter-be6309690f

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
  • Android SDK at /Users/pro/Library/Android/sdk
  • Android NDK location not configured (optional; useful for native 
     profiling support)
  • Platform android-27,build-tools 27.0.3
  • Java binary at: /Applications/Android 
     Studio.app/Contents/jre/jdk/Contents/Home/bin/java
  • Java version OpenJDK Runtime Environment (build 1.8.0_152-release- 
     1024-b01)
• All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 9.4.1,Build version 9F2000
• ios-deploy 1.9.2
• CocoaPods version 1.5.0

[✓] Android Studio (version 3.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 27.1.1
• Dart plugin version 173.4700
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1024-b01)

[!] Connected devices
! No devices available

Flutter - flutter desktop embedding / flutter 桌面支持

2019年5月9日，随着谷歌在IO19宣布Flutter支持Web平台，就标志着Flutter已经全面支持所有平台（移动、网页、桌面、嵌入式）。

现编一个跨平台小段子：

微软Xarmarin：喵喵喵？？？不是我最先做的吗，咋没人关注？？？

Facebook React Native：我是做的最好的跨平台。

谷歌Flutter：去你的吧，支持桌面端不，嵌入式？哈哈哈

苹果SwiftUI：老司机们，等等我。

但是这次要说的是，Flutter for desktop，Flutter支持桌面版已经有很长一段时间了，但是一直都没大研究。主要原因就是现在除了Flutter for mobile可以用在production以外，其他的三个平台知识现在已经验证技术上可行，但仍处于technical preview。像现在的官方大部分plugins，仍然没有适配desktop版本，更不要说第三方的plugins。这些plugins在桌面上调用时，轻者会点击毫无反应，重者会导致程序崩溃。而且现在桌面版普遍的一个问题就是，当app最小化的时候，app崩溃。

所以大家激动归激动，千万别冲动。

不过既然有了flutter for desktop，我们就尝鲜一下，看看在桌面上是什么效果。

1 工具准备

我用的是Windows平台，需要Visual Studio 2017 or 2019，并且包含“C++桌面开发负载”。其他平台可以去Github主页查看。

2 下载官方示例

打开 Desktop Embedding for Flutter，下载整个项目并解压。把整个example文件夹拖进VS Code或者在VS Code 里面打开文件夹，

 然后VS Code提示 Some packages are missing or out of date, would you like to get them now?

 毫不犹豫的点击Get Packages按钮，或者在终端输入flutter packages get也行

 如果网络没问题的话或者镜像配置正确（下载不下来或者配置镜像自行搜索，本文不做介绍）的话，VS Code就会输出

[example] flutter packages get
Running "flutter pub get" in example...                             6.7s
exit code 0

3 桌面版运行配置

由于我们下载的是官方示例，所里都配置好了。但是我们还是要看一下，因为以后要移植自己的项目鸭~~~

  3a 打开pubspec.yaml文件

# See https://github.com/flutter/flutter/wiki/Desktop-shells#fonts
  fonts:
    - family: Roboto
      fonts:
        - asset: fonts/Roboto/Roboto-Thin.ttf
          weight: 100
        - asset: fonts/Roboto/Roboto-Light.ttf
          weight: 300
        - asset: fonts/Roboto/Roboto-Regular.ttf
          weight: 400
        - asset: fonts/Roboto/Roboto-Medium.ttf
          weight: 500
        - asset: fonts/Roboto/Roboto-Bold.ttf
          weight: 700
        - asset: fonts/Roboto/Roboto-Black.ttf
          weight: 900

官方指定了Roboto字体，大部分应用也都需要指定一个字体。但是现在的话，不指定，也可以运行。不过有的Widgets可能在字体显示上有异常。

官方的解释：

Fonts
Flutter applications may default to fonts that are standard for the target platform, but unavailable on desktop. For instance, if the target platform is TargetPlatform.iOS the Material library will default to San Francisco, which is available on macOS but not Linux or Windows.

Most applications will need to set the font (e.g., via ThemeData) based on the host platform, or set a specific font that is bundled with the application. Other widgets that doesn''t use ThemeData may not display without extra font specification (e.g., the DEBUG banner''s text).

Symptoms of missing fonts include text failing to display and/or console logging about failure to load fonts.

  3b 打开main.dart

       设置运行平台

import ''package:flutter/foundation.dart''
    show debugDefaultTargetPlatformOverride;

void main() {
  // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
  debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;

  runApp(new MyApp());
}

   3c 切换flutter到master channel

        在终端中输入

flutter channel master

  3d 升级master channel到最新版，然后会自动运行运行flutter doctor

flutter upgrade

  3e 设置运行平台为桌面模式

      如果VS Code终端是PowerShell，那么输入

$env:ENABLE_FLUTTER_DESKTOP="true"

      CMD输入

set ENABLE_FLUTTER_DESKTOP=true

4 Flutter Run

  如果按照上面操作没有问题的话，那么最激动人心的时刻就要到到来了

  在终端输入

flutter run

  回车

噔噔灯灯...(*￣０￣)ノ

原文出处：https://www.cnblogs.com/hupo376787/p/10990899.html

Flutter 1.9 稳定版发布：Flutter for web 合并至 Flutter 主仓库、支持 macOS Catalina 和 iOS 13

昨日在上海举办的中国 Google 开发者大会（Google Developer Days China）上，Flutter 团队在主题演讲环节中发布了 Flutter 的最新稳定版本：Flutter 1.9。据称，此版本是 Flutter 迄今为止最大的一次版本更新，有 100 多名 contributor 在此次开发周期中提交了超过 1500 个 PR。新增的功能和其他更新涵盖了相当广泛的范围，从支持 macOS Catalina 和 iOS 13 到改进工具链，以及支持新的 Dart 语言特性和新的 Material 风格小部件。

在演讲环节，Flutter 团队还宣布了一则关于 Flutter 对 web 支持的重要里程碑消息：开发团队已成功将此前独立的 Flutter for web 集成到 Flutter 的主仓库中。

Flutter for web 是 Flutter 的代码兼容(code-compatible)实现版本，在 2019 年的谷歌 I/O 大会上，开发团队发布了 Flutter for web 的首个技术预览版，宣布 Flutter 正在为包括 Google Home Hub 在内的 Google 智能显示平台提供支持，并通过结合 Chrome OS 为桌面级应用程序提供支持迈出第一步。

Flutter for web 使用基于标准的 Web 技术（HTML, CSS 和 JavaScript）进行渲染。通过 Flutter for web，可以将 Dart 编写的 Flutter 代码编译成嵌入到浏览器并部署到任何 Web 服务器的客户端版本(client experience)。开发者可以使用 Flutter 的所有特性而无需浏览器插件。

现在 Flutter for web 集成至 Flutter 主仓库则意味着开发者可使用同一套代码库编写移动、桌面和 Web 应用。

下面简单介绍一下 Flutter 1.9 的新特性。

Flutter on the web

正如前面所提到的，flutter_web 的 GitHub 仓库现已被弃用，这个实现 Flutter 对 web 支持的仓库已合并至 Flutter 的主仓库中。亦即意味着，如果我们从 master 或 dev 分支获取到最新版本的 Flutter，只需运行 flutter run -d chrome 命令即可使用最新的 Flutter 试验版本来开发面向 Web 平台的应用。

当我们创建一个项目时，Flutter 现在会通过一个最小化的 web/index.html 文件来生成一个 web 运行引擎（web runner），其中 web/index.html 文件主要用于自举 (bootstrap) 基于 web 编译的 Flutter 代码，有了此文件后，我们可使用 Flutter CLI 工具或 IDE 中的 Flutter 插件来编辑或运行面向 Web 平台开发的 Flutter 应用。

上图是启用了 Flutter web 支持的 VS Code 界面截图。请注意 web/index.html 文件和顶部的下拉列表，可以看到这里允许开发者选择 Chrome 作为目标设备。尽管 Flutter 的 web 支持仍处于早期阶段，但 Flutter 1.9 代表了使用 Flutter 为 Web 开发提供生产支持走出了重要的一步。

下面是两个使用 Flutter 开发 Web 应用的案例：

Flutter Widget Livebook 使用 Flutter for web 构建，可展示在网页上实时运行的小部件。

Panache 则是一个用于为 Flutter 创建主题的工具，开发者可以下载已创建的主题，然后直接添加到代码中。

支持 macOS Catalina 和 iOS 13

苹果将在近期推出了新版本的 macOS 操作系统 Catalina。为此，团队付出了巨大努力，以确保 Flutter 做好升级准备，顺利适配新平台。比如说，新版本进一步优化了端到端的工具体验，保证 Flutter 工具能够与 Xcode 妥善协作，助力开发者面向 Catalina 开发出优质应用，具体优化项包括：

• 为新的 Xcode 构建系统提供支持

• 全工具链启用 64 位支持

• 简化平台依赖项

此外，随着 iOS 13 即将面世，团队也在积极推进相关的支持工作，以确保 Flutter 应用在新款 iPhone 设备上保持美观的界面。Flutter 1.9 实现了 iOS 13 的拖曳式工具栏功能，允许长按与从右往左拖动两项操作，并且为触感反馈提供了支持。不少开发者提交的希望 Flutter 支持 iOS 夜间模式的 pull request 已被合并，团队目前已开始着手解决这方面的需求，争取尽早推出解决方案。

最后，新版本的开发构建允许我们启用 Bitcode 实验性支持。Bitcode 是苹果新添加的一个编译特性，开启 Bitcode 功能后，开发者只需在编译环节上传与平台无关的 Intermediate Representation (中间文件) 即可。以 Bitcode 的形式上传应用后，苹果可以在后期直接对二进制文件进行优化，免除了开发者二次上传的麻烦。与此同时，这也为 Flutter 开启了更多的使用场景，比方说为 watchOS 和 tvOS 等要求上传 Bitcode 文件的平台提供支持。

引入全新的 Material 风格小部件

Flutter 1.9 也对 Material 组件和特性进行了升级。作为一款全球顶尖的开源设计系统，Material 提供了丰富多彩、灵活易操作的视觉元素，助力开发者在多个平台实现高交互性的用户体验。

在 Flutter 1.9 中，开发团队新添加了若干小部件，其中包括 ToggleButtons 和 ColorFiltered。

▲ ToggleButtons

▲ ColorFiltered

ToggleButtons widget 可将同一行的多个 ToggleButton widget 组合到一起，其中每个 widget 各自又由一组图标和文本 widget 构成。通过这种组合，开发者将得到一组外观与行为完全可自定义的按钮。它能为您的应用按钮实现更加多元化的设计 —— 不论是单选还是多选，选择至少一个或是零个、尖角还是圆角、粗边或细边，图标或文本 ——ToggleButtons widget 全都可以满足。请查看 ToggleButtons 示例，了解以上需求的具体实现。

ColorFiltered widget 允许我们更改子 widget 树的颜色，这与利用算法 (部分算法见上图样例) 给图片重新上色差不多。该 widget 能够帮助我们处理许多用例，例如: 向用户提供更好的色彩无障碍服务等等。请查看 ColorFiltered 示例，了解该 widget 的工作细节。

国际化支持

新增了对南非语 (Afrikaans)、祖鲁语 (Zulu) 等 24 种多国语言的支持。

Dart 2.5

在 Flutter 1.9 发布之际，Google 也推出了最新版本的 Dart 语言 —— Dart 2.5，内含预发布版本的 Dart: FFI （外部函数接口），它可用于实现 Dart 语言与 C 语言之间的互操作 (interop)，以及由机器学习驱动的 IDE/编辑器代码补全功能。更多技术细节，请阅读后续发布的《Dart 2.5 发布说明》。

优化工具链

从 Flutter 1.9 开始，iOS 新项目默认使用 Swift 语言，而非 Objective-C；Android 新项目则默认使用 Kotlin，而非 Java。由于许多 Flutter package 使用 Swift 编写，因此，一旦将 Swift 设置为默认语言后，开发者便无需再为启用默认设置的应用手动添加包。Swift 5 实现了 ABI 稳定，而且苹果在近期几个系统版本中也为应用瘦身做了许多工作，因此 12.2 或更高版本的 iOS 系统将不再包含用于 Swift 的动态链接库，从而大幅缩小了 Swift 应用的体积。

考虑到 Android Studio 新项目现在已经默认采用 Kotlin 作为开发语言了，因此，很自然地，Flutter 开发团队把所有 Android 项目的默认语言统一为 Kotlin。flutter CLI 工具、IntelliJ/Android Studio 和 VS Code 插件均默认启用这些选项，不过，如有需要，我们可随时切换回之前的 Objective-C 或 Java 语言。

此外，开发团队也在一直改善 Flutter 应用中的错误信息质量。优化之后，信息的可读性、简洁性和可操作性均有明显提升。

参考：谷歌开发者 《Flutter 1.9 正式发布！| 全平台创新开发体验》

Flutter APP开发 学习记录: flutter_swiper轮播图

说点儿闲话

大部分app都有轮播图，一般是展示一些新闻公告通知等图片，在flutter最强大的siwiper, 多种布局方式，无限轮播，Android和IOS双端适配，github：flutter_swiper

使用：

加载图片

一般是从本地代码中或者使用网络图片，那么，首先将资源添加到项目的 pubspec.yaml 文件中（更多细节请参阅Assets and images）：

flutter:
   assets:
   - images/news_1.png
   - images/news_1.png
   - images/news_1.png

如果项目中所需要使用的图片资源太多，也可以直接直接这样写：
（1）、包含一个目录下的所有 assets，需要在目录名称的结尾加上/：

flutter:
  assets:
    - assets/

注意只包含目录下根节点的所有文件。
（2）、如果要添加子目录下的文件，需要给每个目录创建节点：

flutter:
    assets: [images/,images/index-icons/] # 配置代码中使用的图片所放置的文件夹及其子文件夹
 

显示base64图片

这里插个题外话，使用图片显示的辑中方法：Image class: A widget that displays an image.
其中，Image.memory可以用来显示base64图片，具体使用如下:

import ''dart:convert'';

//"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAuCAYAAACvdRK..."
// 直接获取`base64,`之后的数据
pictureData = "iVBORw0KGgoAAAANSUhEUgAAAKAAAAAuCAYAAACvdRK..."
Image.memory(
    Base64Decoder().convert(pictureData), // 转成Uint8List
    fit: BoxFit.contain,
    height: 160,
)

参考：flutter 显示base64 图片

flutter_swiper

在pubspec.yaml文件里添加

flutter\_swiper : ^lastest\_version

到项目根目录下的 pubspec.yaml ,并且根目录运行命令行

flutter packages get

flutter_swiper的最新版本号查看：pub.dev：flutter_swiper

实现轮播图 代码

import ''package:flutter/material.dart'';
import ''package:flutter_swiper/flutter_swiper.dart'';
import ''message.dart'';

class IndexScreen extends StatefulWidget {
  @override
  _SwiperViewState createState() => _SwiperViewState();
}

class _SwiperViewState extends State<IndexScreen> {
  // 声明一个list，存放image Widget
  List<Widget> imageList = List();

  @override
  void initState() {
    imageList
      ..add(Image.asset(
        ''images/news_1.png'',
        height: 200,
        fit: BoxFit.fitWidth, // 显示可能拉伸，可能裁剪，宽度充满
      ))
      ..add(Image.asset(
        ''images/news_2.png'',
        height: 200,
        fit: BoxFit.fitWidth,
      ))
      ..add(Image.asset(
        ''images/news_3.png'',
        height: 200,
        fit: BoxFit.fitWidth,
      ));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        leading: Builder(
          builder: (BuildContext context) {
            // APP的logo图
            return Image.asset(''images/logo-header.png'');
          },
        ),
        title: new Text(
          ''APP
          style: TextStyle(fontSize: 18.0, height: 1.2, fontFamily: "Courier"),
        ),
        actions: <Widget>[
          new IconButton(
              icon: new Icon(Icons.message),
              onPressed: () {
                // 右上角的通知消息图标，点击进入消息列表
                Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) => new MessageScreen()),
                );
              }),
        ],
      ),
      body: Column(
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: new Swiper(
              itemBuilder: _swiperBuilder,
              itemCount: 3,
              itemWidth: MediaQuery.of(context).size.width,
              itemHeight: 200.0,
              loop: true,
              autoplay: true,
              pagination: null,
              control: null,
              viewportFraction: 1,
              scale: 1,
            ),
          ),
          Container(
            // padding: const EdgeInsets.fromLTRB(0, 10, 0, 5),
            width: MediaQuery.of(context).size.width,
            // height: MediaQuery.of(context).size.height,
            // 将上方的header、底部菜单和轮播图的高度减掉
            height: MediaQuery.of(context).size.height - 400,             
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly, //对齐方式：平均间隔
              children: [
              // 下方的其他页面布局
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (imageList[index]);
  }
}

以上是使用静态资源加载图片来实现轮播图，实际项目中，基本都是后端接口返回的数据，这就涉及到另外的知识点， GitHub - dio: 发起网络请求， 参见我整理的dio的相关学习记录： Flutter 使用dio来发起网络请求以及Cookie管理。
通过接口请求后端返回的数据后，对数据进行处理并通过setState来更新视图，代码：

    setState(() {
        // 处理返回数据
        var rtn = response.data[''content''];
        rtn.forEach((f) {
          // print("image title：" + f["title"] + " imageUrl：" + f["imageUrl"]);
          imageList
            ..add(Image.network(
              f["imageUrl"],
              height: 200,
              fit: BoxFit.fitWidth, // 显示可能拉伸，可能裁剪，宽度充满
            ));
        });
        // print(imageList);
      });

遇到的问题

在首页上，通过底部导航菜单点击跳转到另一个页面后，再回到首页，轮播图会出现疯狂的切换图片轮播一段时间后停下来继续以正常速度轮播，具体问题参我的提问：Flutter flutter_swiper轮播图的问题
这个问题我已经解决了，解决办法描述在我的提问下我自己的回答里记录了，这里就不再赘述了，直接附上解决是修改的代码:
IndexScreen 的 class中增加以下代码：

  bool isLoading = true;  
  
   setState(() {
        // 处理返回数据 上文中有，省略了
        isLoading = false;
        // print(imageList);
   });
   
  
  Widget _buildProgressIndicator() {
    return new Padding(
      padding: const EdgeInsets.all(8.0),
      child: new Center(
        child: new Opacity(
          opacity: isLoading ? 1.0 : 00,
          child: new CircularProgressIndicator(),
        ),
      ),
    );
  }

build方法中增加判断：

  Container(
            width: MediaQuery.of(context).size.width,
            height: 125,
            child: imageList.length == 0
                ? _buildProgressIndicator()
                : new Swiper(
                    itemBuilder: _swiperBuilder,
                    itemCount: imageList.length,
                    itemWidth: MediaQuery.of(context).size.width,
                    itemHeight: 125.0,
                    loop: true,
                    autoplay: true,
                    autoplayDelay: 3000, //自动播放延迟
                    autoplayDisableOnInteraction: true, //触发时是否停止播放
                    pagination: null, //设置 new SwiperPagination() 展示默认分页指示器
                    control: null, //设置 new SwiperControl() 展示默认分页按钮
                    controller: swiperController,
                    viewportFraction: 1,
                    scale: 1,
                  ),
          ),
  

参考资料：

github：flutter_swiper
Assets and images
pub.dev：flutter_swiper
笔记-Flutter之轮播图（多样式）

Flutter 三种方式实现页面切换后保持原页面状态

相关文章

Flutter APP开发 学习记录: bottomNavigationBar底部导航菜单 本篇文章是底部导航菜单这篇文章中对应的IndexScreen()的布局

dio的相关学习记录： Flutter 使用dio来发起网络请求以及Cookie管理

今天关于flutter 开发者帮助 APP Flutter GO2.0来袭！和flutter开发工具的讲解已经结束，谢谢您的阅读，如果想了解更多关于dart – Flutter Error：当前的Flutter SDK版本是2.1.0-dev.0.0.flutter-be6309690f、Flutter - flutter desktop embedding / flutter 桌面支持、Flutter 1.9 稳定版发布：Flutter for web 合并至 Flutter 主仓库、支持 macOS Catalina 和 iOS 13、Flutter APP开发 学习记录: flutter_swiper轮播图的相关知识，请在本站搜索。