哈喽，我是老刘

前两天，系统给我推送了一个问题。

我理解提问者真正想问的是：有没有一个不用学习那么多UI组件和渲染知识，可以简单快速搭建UI的东西。

Flutter 包括原生开发，为什么需要考虑那么多细节，不能做的简单一些？

首先，我们需要明白Flutter的定位。

Flutter不是一个简单的甜品，而是一个能支撑大型系统开发的工程级框架。

这种定位和原生框架的定位是相当的。

因此，它要求整个框架有足够的灵活性，能适用于尽可能多的场景。

那么，如何提供足够的灵活性呢？

答案是让整个框架尽可能多的细节是可控的。

这就需要把整个框架的功能拆分的更细，提供的配置项足够多。

然而，这样的缺点就是开发起来会比较麻烦，需要控制很多细节。

因此，我们可以看到Flutter的组件拆分的很细，甚至有类似Padding这样专门负责缩进的组件，而且每个组件都有很多的配置参数。

Flutter配合Material组件库本身本就非常优秀的UI框架

虽然Flutter的灵活性带来了开发上的复杂性，但Flutter配合Material组件库本身就是一个非常优秀的UI框架。

Material组件库提供了丰富的预设组件，这些组件遵循Material Design指南，可以帮助开发者快速搭建出既美观又符合设计规范的UI界面。

使用Material组件库，开发者可以不必从头开始设计每一个UI元素，而是可以直接使用现成的组件，如按钮、对话框、卡片等，这些组件都有良好的交互和动画效果。

此外，Material组件库还提供了主题支持，开发者可以通过简单的配置，快速应用统一的风格到整个应用中。

因此，虽然Flutter的灵活性可能让初学者感到有些复杂，但配合Material组件库，Flutter实际上提供了一个非常高效和优秀的UI开发体验。

大型项目的正确打开方式

即便是Material组件库，它的设计是需要考虑应对各种不同类型app开发的，但是针对一个具体的项目，我们大多数时候不需要这样高的灵活性。

所以，这种情况下直接用Flutter提供的组件效率会比较低。

解放方法就是针对特定的项目做组件封装。

以我目前维护的项目为例，我们项目中所有的对话框都是相同的偏绿色调，圆角半径20，按钮大小固定，标题、详情的字体、字号也固定。

简单来说，就是所有的UI细节都是固定的，只是不同的dialog需要填充的文字不同。

这时候，我们就会定义一个自己的Dialog组件，只需要使用者传入标题和内容，以及设置按钮的回调即可。

UI的其他地方也是如此，比如页面框架、在多个页面都能用到的用户卡片、商品卡片等等。

当你的整个App大部分都是基于这些自定义组件进行搭积木式的开发，那开发效率是不是比找一些通用的UI框架更高呢？

总结

总而言之，Flutter因为它的工程级框架定位需要提供高度的灵活性，而这往往会导致开发细节的复杂性。

但是，通过针对具体项目的组件封装，我们可以大大提高开发效率，同时保持UI的一致性和项目的特定需求。

所以，与其寻找一个通用的UI框架，不如根据项目的具体需求进行自定义组件的开发。

如果看到这里的同学有学习Flutter的兴趣，欢迎联系老刘，我们互相学习。

点击免费领老刘整理的《Flutter开发手册》，覆盖90%应用开发场景。

可以作为Flutter学习的知识地图。

覆盖90%开发场景的《Flutter开发手册》

引言

近期整理技术栈，将陆续总结分享一些项目实战中用到的实用工具。本篇分享开发流程中必不可缺的一个环节，提测。

闲聊一下

当然，对于打包，我们可以直接使用命令行直接打包例如：

flutter build apk --verbose

只是，相比输入命令行，我更倾向于一键操作，更倾向写一个打包脚本，我可以在脚本里编辑个性化操作，例如：瘦身、修改产物（apk、ipa）名称、指定打包成功后事务等等。

比如在项目里新建一个文件夹，如 script, 当需要打包发布时，右键 Run 就 Ok 了。

下面，小编整理了基础款 dart 脚本，用于 打包 和 上传蒲公英。有需要的同学可自行添加个性化处理。

Android 打包脚本

该脚本用于 apk 打包，apk 以当前时间戳名称，打包成功后可选直接打开文件夹或发布蒲公英。

import 'dart:io';

import 'package:intl/intl.dart';

import 'package:yaml/yaml.dart' as yaml;

import 'pgy_tool.dart'; //蒲公英发布脚本，下面会给出



void main(List<String> args) async {

  //是否上传蒲公英

  bool uploadPGY = true;



  // 获取项目根目录

  final _projectPath = await Process.run(

    'pwd',

    [],

  );

  final projectPath = (_projectPath.stdout as String).replaceAll(

    '\n',

    '',

  );

  // 控制台打印项目目录

  stdout.write('项目目录：$projectPath 开始编译\n');



  final process = await Process.start(

    'flutter',

    [

      'build',

      'apk',

      '--verbose',

    ],

    workingDirectory: projectPath,

    mode: ProcessStartMode.inheritStdio,

  );

  final buildResult = await process.exitCode;

  if (buildResult != 0) {

    stdout.write('打包失败，请查看日志');

    return;

  }

  process.kill();



  //开始重命名

  final file = File('$projectPath/pubspec.yaml');

  final fileContent = file.readAsStringSync();

  final yamlMap = yaml.loadYaml(fileContent) as yaml.YamlMap;



  //获取当前版本号

  final version = (yamlMap['version'].toString()).replaceAll(

    '+',

    '_',

  );

  final appName = yamlMap['name'].toString();



  // apk 的输出目录

  final apkDirectory = '$projectPath/build/app/outputs/flutter-apk/';

  const buildAppName = 'app-release.apk';

  final timeStr = DateFormat('yyyyMMddHHmm').format(

    DateTime.now(),

  );



  final resultNameList = [

    appName,

    version,

    timeStr,

  ].where((element) => element.isNotEmpty).toList();



  final resultAppName = '${resultNameList.join('_')}.apk';

  final appPath = apkDirectory + resultAppName;



  //重命名apk文件

  final apkFile = File(apkDirectory + buildAppName);

  await apkFile.rename(appPath);

  stdout.write('apk 打包成功 >>>>> $appPath \n');



  if (uploadPGY) {

    // 上传蒲公英

    final pgyPublisher = PGYTool(

      apiKey: '蒲公英控制台内你的应用的apiKey',

      buildType: 'android',

    );

    final uploadSuccess = await pgyPublisher.publish(appPath);

    if (uploadSuccess) {

      File(appPath).delete();

    }

  } else {

    // 直接打开文件

    await Process.run(

      'open',

      [apkDirectory],

    );

  }

}

Ipa 打包脚本

ipa 打包脚本和 apk 打包脚本类似，只是过程中多了一步操作，删除之前的构建文件，如下：

import 'dart:io';

import 'package:yaml/yaml.dart' as yaml;

import 'package:intl/intl.dart';



import 'pgy_tool.dart';



void main() async {

  const originIpaName = '你的应用名称';

  //是否上传蒲公英

  bool uploadPGY = true;



  // 获取项目根目录

  final _projectPath = await Process.run(

    'pwd',

    [],

  );

  final projectPath = (_projectPath.stdout as String).replaceAll(

    '\n',

    '',

  );

  // 控制台打印项目目录

  stdout.write('项目目录：$projectPath 开始编译\n');



  // 编译目录

  final buildPath = '$projectPath/build/ios';



  // 切换到项目目录

  Directory.current = projectPath;



  // 删除之前的构建文件

  if (Directory(buildPath).existsSync()) {

    Directory(buildPath).deleteSync(

      recursive: true,

    );

  }



  final process = await Process.start(

    'flutter',

    [

      'build',

      'ipa',

      '--target=$projectPath/lib/main.dart',

      '--verbose',

    ],

    workingDirectory: projectPath,

    mode: ProcessStartMode.inheritStdio,

  );



  final buildResult = await process.exitCode;

  if (buildResult != 0) {

    stdout.write('ipa 编译失败，请查看日志');

    return;

  }



  process.kill();

  stdout.write('ipa 编译成功！\n');



  //开始重命名

  final file = File('$projectPath/pubspec.yaml');

  final fileContent = file.readAsStringSync();

  final yamlMap = yaml.loadYaml(fileContent) as yaml.YamlMap;



  //获取当前版本号

  final version = (yamlMap['version'].toString()).replaceAll(

    '+',

    '_',

  );

  final appName = yamlMap['name'].toString();



  // ipa 的输出目录

  final ipaDirectory = '$projectPath/build/ios/ipa/';

  const buildAppName = '$originIpaName.ipa';

  final timeStr = DateFormat('yyyyMMddHHmm').format(

    DateTime.now(),

  );



  final resultNameList = [

    appName,

    version,

    timeStr,

  ].where((element) => element.isNotEmpty).toList();



  final resultAppName = '${resultNameList.join('_')}.ipa';

  final appPath = ipaDirectory + resultAppName;



  //重命名ipa文件

  final ipaFile = File(ipaDirectory + buildAppName);

  await ipaFile.rename(appPath);

  stdout.write('ipa 打包成功 >>>>> $appPath \n');



  if (uploadPGY) {

    // 上传蒲公英

    final pgyPublisher = PGYTool(

      apiKey: '蒲公英控制台内你的应用的apiKey',

      buildType: 'ios',

    );

    pgyPublisher.publish(appPath);

  } else {

    // 直接打开文件

    await Process.run(

      'open',

      [ipaDirectory],

    );

  }

}

蒲公英发布脚本

上面打包脚本中上传到蒲公英都调用了这句代码：

// 上传蒲公英

    final pgyPublisher = PGYTool(

      apiKey: '蒲公英控制台内你的应用的apiKey',

      buildType: 'ios',

    );

    pgyPublisher.publish(appPath);

• appPath：就是打包成功的 apk/ipa 本地路径


• buildType：分别对应两个值 android、ios


• apiKey：蒲公英控制台内你的应用对应的apiKey，如下所示

PGYTool 对应的发布脚本如下：

import 'dart:async';

import 'dart:io';

import 'package:dio/dio.dart';

import 'package:rxdart/rxdart.dart';



// 蒲公英工具类

class PGYTool {

  final getTokenPath = 'https://www.pgyer.com/apiv2/app/getCOSToken';

  final getAppInfoPath = 'https://www.pgyer.com/apiv2/app/buildInfo';

  final String apiKey;

  final String buildType; //android、ios



  PGYTool({

    required this.apiKey,

    required this.buildType,

  });



  //发布应用

  Future<bool> publish(String appFilePath) async {

    final dio = new Dio();

    stdout.write('开始获取蒲公英token');

    final tokenResponse = await _getToken(dio);

    if (tokenResponse == null) {

      stdout.write('>>>>>> 获取token失败 \n');

      return false;

    }

    stdout.write('>>>>>> 获取token成功 \n');

    final endpoint = tokenResponse['data']['endpoint'] ?? '';

    final params = tokenResponse['data']['params'] ?? {};

    stdout.write('蒲公英上传地址：$endpoint\n');

    Map<String, dynamic> map = {

      ...params,

    };

    map['file'] = await MultipartFile.fromFile(appFilePath);

    final controller = StreamController<MapEntry<int, int>>();

    controller.stream

        .throttleTime(const Duration(seconds: 1), trailing: true)

        .listen(

      (event) => stdout.write(

        '${event.key}/${event.value}  ${(event.key.toDouble() / event.value.toDouble() * 100).toStringAsFixed(2)}% \n',

      ),

      onDone: () {

        controller.close();

      },

      onError: (e) {

        controller.close();

      },

    );

    final uploadRsp = await dio.post(

      endpoint,

      data: FormData.fromMap(map),

      onSendProgress: (count, total) {

        controller.sink.add(

          MapEntry<int, int>(

            count,

            total,

          ),

        );

      },

    );

    await Future.delayed(const Duration(seconds: 1));

    if (uploadRsp.statusCode != 204) {

      stdout.write('>>>>> 蒲公英上传失败 \n');

      return false;

    }

    stdout.write('>>>>> 蒲公英上传成功 \n');

    await Future.delayed(const Duration(seconds: 3));

    await _getAppInfo(dio, tokenResponse['data']['key']);

    return true;

  }



  // 获取蒲公英token

  Future<Map<String, dynamic>?> _getToken(Dio dio) async {

    Response<Map<String, dynamic>>? tokenResponse;

    try {

      tokenResponse = await dio.post<Map<String, dynamic>>(

        getTokenPath,

        queryParameters: {

          '_api_key': apiKey,

          'buildType': buildType,

        },

      );

    } catch (_) {

      stdout.write('_getToken error : $_');

    }

    if (tokenResponse == null) return null;

    final responseJson = tokenResponse.data ?? {};

    final tokenCode = responseJson['code'] ?? 100;

    if (tokenCode != 0) {

      return null;

    } else {

      return responseJson;

    }

  }



  // tokenKey 是获取token中的返回值Key

  Future<void> _getAppInfo(Dio dio, String tokenKey, {int retryCount = 3}) async {

    final response = await dio.get<Map<String, dynamic>>(

      getAppInfoPath,

      queryParameters: {

        '_api_key': apiKey,

        'buildKey': tokenKey,

      },

    ).then((value) {

      return value.data ?? {};

    });

    final responseCode = response['code'];

    if (responseCode == 1247 && retryCount > 0) {

      //应用正在发布中，间隔 3 秒重新获取

      stdout.write('>>>>> 应用正在发布中，间隔 3 秒重新获取发布信息\n');

      await Future.delayed(const Duration(seconds: 3));

      return _getAppInfo(dio, tokenKey, retryCount: retryCount - 1);

    }

    final appName = response['data']['buildName'];

    final appVersion = response['data']['buildVersion'];

    final appUrl = response['data']['buildShortcutUrl'];

    final updateTime = response['data']['buildUpdated'];

    if (appName != null) {

      stdout.write('$appName 版本更新（$appVersion）\n');

      stdout.write('下载地址：https://www.pgyer.com/$appUrl\n');

      stdout.write('更新时间：$updateTime\n');

    }

  }

}

运行发布脚本后，控制台会将应用的上传成功后的下载地址打印出来。

背景

小程序是一种全新的业务形态，特别是微信小程序，既结合了 Web 动态化特性，又拥有 Native 丰富的设备能力支持。

在微信这个宿主上，小程序不仅有稳定的分发渠道，更拥有完善的生命周期、数据、AI 能力支持。

在该微信上开发小程序，一般使用以下两种方法：

• JavaScript + WXML + WCSS


• Taro + React + JavaScript

本文要介绍的是使用 Flutter Framework 开发小程序的方法，以及该方法背后的技术原理。

技术挑战

尽管 Flutter 官方已经提供 Flutter Web 实现，Flutter Web 本身就是基于 dart2js 运行的，微信小程序可以运行 JavaScript，在原理上跑起 Flutter Web 是没有问题的。

但仍然存在以下技术挑战：

• 微信小程序没有 W3C 标准的 JavaScript 对象，Flutter Web 不能直接运行。


• 微信小程序也没有 DOM 实现，Flutter Web HTML Renderer 不能直接渲染。


• 微信小程序对包大小的限制十分严格，主包不能超过 2M，而 Flutter Web 所编译的 main.dart.js 初始体积就有 1.3 M，必须有合理的分包机制才能上传。

我们在 MPFlutter 1.x 版本中，针对上述问题已有一定的探索，1.x 版本的解决方法如下：

• 使用微信开源的 kbone 库，模拟 W3C 实现，并通过模拟的 DOM 对象渲染出符合 WXML 要求的视图树。


• 通过 Shadow Element Tree 的方式，使用 JSON 在 Dart 与 JavaScript 上下文同步视图树。


• Fork Flutter Framework，并对其进行外科手术式的裁剪，使 main.dart.js 初始体积降低到 600K。

MPFlutter 1.x 方案已经良好的运行了两年，也收到了开发者非常多的反馈，开发者常诟病于裁剪后的 Flutter Framework 不兼容 Flutter 生态上的插件，同时 material 库也无法使用，需要从头开始编写 UI。

在 MPFlutter 2.0 版本，我们重新思考在小程序上运行 Flutter 的最佳方式，并在最终使用 CanvasKit Renderer 解决以上全部问题。

技术方案

Summary

通过裁剪 Skia 生成符合微信小程序分包要求的 CanvasKit，使用 Flutter Web + W3C BOM + WebGL Canvas 跑通渲染流程。

技术选型

在介绍技术选型前，需要先介绍 Flutter Web 的两种 Renderer。

HTML Renderer

原理是 Flutter Framework 通过 dart:js 库调用 Document 对象，并基于此将各种 RenderObject 转换为对应的 Element + CSS 添加到 DOM 树中。

该方案优点在于兼容性很好，几乎没有额外的依赖；缺点是性能不佳，并且渲染内容一致性难以与 Native Flutter 对齐。

CanvasKit Renderer

原理是通过 WebGL + Skia 渲染界面，该渲染方式与 Native Flutter 是完全一致的。

该方案优点在于渲染性能非常好，一致性与 Native Flutter 几乎没有差别；缺点是内存占用大，且需要从远端加载字体。

MPFlutter 2.0 选型

我们在 1.x 版本中用的是 HTML Renderer，通过 kbone 运行的 DOM 模拟层存在很多的问题，最令人诟病的是数据更新后界面刷新慢。当然问题的并不在于 kbone，而是 MPFlutter 1.x 本身对于 Element Tree 的序列化、反序列化的处理存在天然的缺陷，尽管已经通过 Dirty 和 Diff 等手段优化。

在 2.x 版本中，我们直接抛弃 HTML Renderer 的想法，使用 CanvasKit Renderer。

使用 CanvasKit Renderer 有这几个大前提：

• 微信小程序已支持 WebAssembly 并支持 Brotli 压缩；


• 微信小程序 Canvas 的性能相比最初的版本有质的提升，并支持 WebGL；


• 微信小程序全部分包限制放宽到 20M，足够使用。

Skia 裁剪

Skia 是 Google 开源的 2D 渲染库，凭借良好的跨设备能力，优秀的性能表现，在 Google 多个产品中被使用，包括 Chrome / Flutter / Android / Fuchsia 都有 Skia 的身影。

Skia 屏蔽了不同设备、平台的具体实现，对外统一以标准的 RenderObject、RenderCommand 开放。

Skia 其中一个 Render Target 是 WebGL，也就是 CanvasKit。

然而 Flutter Web 默认使用的 CanvasKit 足有 6M 之大，即使使用 Brotli 压缩后仍然不符合小程序分包要求。

我们可以通过指定编译选项的方式裁剪 CanvasKit 尺寸，以下是 MPFlutter 使用的 build 配置：

./modules/canvaskit/compile.sh release no_skottie no_sksl_trace no_alias_font no_effects_deserialization no_encode_jpeg no_encode_png no_encode_webp legacy_draw_vertices no_embedded_font no_woff2

从配置可见，我们去掉了 skottie、image encoder、内置字体等不必要的功能，这些功能我们可以使用微信小程序 API 补充回来。

Brotli 压缩后的 wasm 文件刚好符合 2M 分包要求。

CanvasKit 加载

Skia 构建完成后，会得到两个产物，canvaskit.wasm 和 canvaskit.js。

canvaskit.js 暴露了 wasm 中的各个 c++ 方法调用，同时也提供加载 wasm 的脚手架。

但是 canvaskit.js 的实现默认是 Web 的，我们需要将其中的 fetch 以及 WebAssembly 替换为微信小程序对应的实现。

这里提供一个使用 Skia 绘制红色矩形的微信小程序工程，有兴趣的同学可以下载到本地研究。

mpflutter.feishu.cn/wiki/LWhrw3…

Flutter Web 在微信中运行

要使 Flutter Web 在微信中运行，最大难点在于 Flutter Web 要求的 Web API 如何补充完整。

特别是 Document 、Window、Navigator 这些类，这些类我已经在 GitHub 上开源了，感兴趣的可以逐个文件阅读。

github.com/mpflutter/m…

这里举一个 window 的文件节选段落讲解：

export class FlutterMiniProgramMockWindow {

  // screens

  get devicePixelRatio() {

    return wxSystemInfo.pixelRatio;

  }



  get innerWidth() {

    return wxSystemInfo.windowWidth;

  }



  get innerHeight() {

    return wxSystemInfo.windowHeight;

  }



  // webs

  navigator = {

    appVersion: "",

    platform: "",

    userAgent: "",

    vendor: "",

    language: "zh",

  };

  

  // 还有更多。。。

}

Flutter Web 在运行过程中，会通过 window.innerWidth / window.innerHeight 获取当前窗口宽高，以便下一步创建合适大小的画布用于渲染。

在微信小程序中，我们需要使用 wx.getSystemInfoSync() 获取对应宽高，并在 MockWindow 中返回给 Flutter。

关于 BOM 的文件，就不详细展开，都是一些胶水代码。

而 Flutter 的 main.dart.js 也需要有一些改造才可以跑在小程序上，主要的改造是通过 export main.dart.js 中的 main 函数，使其适配 CommonJS 可暴露给 Page 调用。

字体的加载

CanvasKit 最大的问题在于字体加载，目前来看是无法复用系统本身的字体的。

我们的做法是通过裁剪 NotoSansSC 字体，只包含常用的 9000+ 汉字，内置于小程序包中优先加载它。

这样有一个好处，小程序不需要强制从 gstatic 下载字体，省流省加载时间。

后续，我们还会研究通过 Canvas 2D 的方式，从本地加载字体。

分包

关于分包，其实是最好做的，因为 Flutter Web 本身就有 defered load 编译能力。

开发者可以轻松地将 main.dart.js 切分成若干个 JS 文件，我们做的就是在 Flutter Web 编译完成后，智能地将这些 JS 文件分配到不同的分包就好了。

资源分包也同理，资源通过 brotli 压缩也可以减少包体积。

总结

整整一套下来，Flutter 已经可以在微信小程序里跑起来了，我们来总结一下做了什么？

我们通过裁剪 Skia 使得 CanvasKit 可以很好地跑在小程序上，通过 BOM 兼容的方法，使得 Flutter Web 可以在微信小程序中找到对应实现，通过字体内置、智能分包的方式很好地解决了微信包体积限制。

该方案目前已经完全跑通，并已可用，同学们可以在 v2.mpflutter.com 文档站了解到更多用法。

如果对方案有任何疑问，也欢迎添加微信交流，感谢大家的关注。

前言

刚入门 Flutter 编程时，差点被 Flutter 的嵌套地狱吓走，不过当我看到 Flutter 支持 Windows 稳定后，于是下定决心尝试接受 Flutter，因为 Flutter 真的给的太多了：跨平台、静态编译、热加载界面。

Flutter 代码是写到文件夹中的，通过文件夹来管理代码，像是 c++ 语言那样，一个文件，即可以写类，也可以直接写方法😠。

不像 java 那样，全部都是类，整齐划一，通过包名来管理，但也支持类似的“导包”😆。

那么怎样才能像 Java 那样，有个框架优化代码，让项目看起来更整洁好维护呢？

我目前的答案是 MVC 🐷，合适自己的架构才是最好的架构，用这个架构，我感觉找到了家，大家先看看我的代码，然后再做评价。

使用部分

结合GetX, 使用方式如下：

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'package:wenznote/commons/mvc/controller.dart';

import 'package:wenznote/commons/mvc/view.dart';



class CustomController extends MvcController {

  var count = 0.obs;



  void addCount() {

    count.value++;

  }

}



class CustomView extends MvcView<CustomController> {

  const CustomView({super.key, required super.controller});



  @override

  Widget build(BuildContext context) {

    return Center(

      child: Column(

        children: [

          Obx(() => Text("点击次数：${controller.count.value}")),

          TextButton(

            onPressed: () {

              controller.addCount();

            },

            child: Text("点我"),

          ),

        ],

      ),

    );

  }

}

简单粗暴，直接在 CustomView 中设计 UI, 在 CustomController 中编写业务逻辑代码，比如登录注册之类的操作。

至于 MVC 中的 Model 去哪里了？你猜猜😘。

代码封装部分

代码封装也很简洁，封装的 controller 代码如下

import 'package:flutter/material.dart';



class MvcController with ChangeNotifier {

  late BuildContext context;



  @mustCallSuper

  void onInitState(BuildContext context) {

    this.context = context;

  }



  @mustCallSuper

  void onDidUpdateWidget(BuildContext context, MvcController oldController) {

    this.context = context;

  }



  void onDispose() {}

}

封装的 view 代码如下

import 'package:flutter/material.dart';

import 'controller.dart';



typedef MvcBuilder<T> = Widget Function(T controller);



class MvcView<T extends MvcController> extends StatefulWidget {

  final T controller;

  final MvcBuilder<T>? builder;



  const MvcView({

    super.key,

    required this.controller,

    this.builder,

  });



  Widget build(BuildContext context) {

    return builder?.call(controller) ?? Container();

  }



  @override

  State<MvcView> createState() => _MvcViewState();

}



class _MvcViewState extends State<MvcView> with AutomaticKeepAliveClientMixin{

  @override

  bool get wantKeepAlive => true;



  @override

  void initState() {

    super.initState();

    widget.controller.onInitState(context);

    widget.controller.addListener(onChanged);

  }



  void onChanged() {

    if (context.mounted) {

      setState(() {});

    }

  }



  @override

  Widget build(BuildContext context) {

    super.build(context);

    widget.controller.context = context;

    return widget.build(context);

  }



  @override

  void didUpdateWidget(covariant MvcView<MvcController> oldWidget) {

    super.didUpdateWidget(oldWidget);

    widget.controller.onDidUpdateWidget(context, oldWidget.controller);

  }





  @override

  void dispose() {

    widget.controller.removeListener(onChanged);

    widget.controller.onDispose();

    super.dispose();

  }

}

结语

MVC 可以很简单快速的将业务代码和 UI 代码隔离开，改逻辑的时候就去找 Controller 就行，改 UI 的话就去找 View 就行，和后端开发一样的思路，完成作品就行。

附上的作品文件结构截图，亲喷哈~

感谢大家的关注与支持，后续继续更新更多 flutter 跨平台开发知识，例如：MVC 架构中的 Controller 应该在哪里创建？Controller 中的 Service 应该在哪里创建？

作品地址：github.com/lyming99/we…

前言

跨端技术一直是移动端开发领域的热门话题，Flutter 作为一种领先的移动跨端技术之一，凭借其快速的渲染引擎、丰富的UI组件库和强大的开发工具，成为了开发人员的首选之一。

从 Flutter 诞生之初，我们就一直关注着它的发展，Flutter 早期版本变更较为频繁，并且经常伴随着 Breaking Change，另外可用的三方插件较少且不稳定。直到2019年，Flutter 的热度暴涨，国内不少团队陆续把 Flutter 引入到了生产环境使用，社区也涌现出不少优秀的开源项目，我们也决定在这个时候做一些技术上的尝试。

经过这几年在 Flutter 技术上的不断学习、探索和积累，Flutter 已经成为了客户端技术体系中的重要组成部分。

回顾整个过程，我们大致经历了这么几个阶段：可行性验证、基建一期建设、小范围试验、基建二期建设、大范围推广、前端生态的探索，下文将分别对每个阶段展开进行介绍。

可行性验证

其实在这之前我们已经做过了一些调研，但许多结论都是来源于网上的一些文章或者其它团队的实践，这些结论是否靠谱是否真实还有待商榷，另外，网上的文章大都千篇一律，要么使劲吹捧，要么使劲贬低，要得出相对客观的结论还是得需要我们自己通过实践才能得出。

目标

我们确定了以下几个维度，用来评估 Flutter 是否值得我们进一步投入：

• 开发效率


• UI一致性


• 性能体验


• 学习成本


• 发展趋势

由于前期对 Flutter 的熟练度不高，基础设施也还没有搭建起来，所以在开发效率上，我们期望的 Flutter 的开发耗时能保持在原生开发耗时的 1.5 倍以内，不然虽然实现了跨端，但是需求的开发周期反而被拉长了，这样得不偿失。在UI一致性上，我们期望同一份代码在两端的表现要基本达到一致，不需要额外的适配成本。在性能方面，尽量保证崩溃、卡顿、内存、帧率这些指标在可控范围内。

方案

我们希望用较小的代价完成上述维度的评估，所以在试验期间的架构及基础设施方面我们做的比较简单。

测试目标

当时我们正在做一个叫切克的 App，用户量级比较小，工程架构也相对简单一些，正好可以用来做一些技术方面的探索和验证。

我们选择的是切克的商品详情页，用 Flutter 技术实现了一个一模一样的商详，按1:1的流量分配给 Native 和 Flutter。

项目架构

由于我们的工程不是一个全新的项目，所以采用的是 Native 与 Flutter 混合开发的方式，Native 主工程只依赖 Flutter 产物即可，同时也尽量避免对原有工程的影响。

关于混合页面栈的问题，我们没有额外处理，因为暂时只测试一个页面，不会涉及到多页面混合栈的问题，所以暂时先忽略。

构建流程

为了降低验证成本，我们没有对接现有的 Native 的持续集成流程，而是直接在本地构建 Flutter 产物，然后上传到远程仓库。

结论

经过一段时间的线上验证，我对 Flutter 技术基本有了一个比较全面的了解：

在开发效率上由于基础库和基建的缺失，在处理 Flutter 业务跟 Native 业务的交互时需要更多的适配成本，包括像页面跳转、埋点上报、接口请求、图片加载等也需要额外的处理，但我们评估随着后续基建的不断完善，这部分的效率是可以逐步得到改善的；而在涉及UI开发方面，得益于热重载等技术，Flutter 的开发效率是要优于原生开发的。整体评估下来，在开发效率方面 Flutter 是符合我们的预期的。

在UI一致性上，除了在状态栏控制和文本在某些情况下需要特殊适配下外，其它控件在两端的表现基本一致。

在性能表现上，Flutter 会额外引入一些崩溃，内存占用也有所上涨，但还在可接受范围内。

Flutter 的学习成本相对还是比较高，毕竟需要单独学习一门语言，另外 Flutter 的渲染原理也跟原生有很多差异，需要转变思维才能更快的适应，此外 Flutter 还提供了众多的 Widget 组件，也需要较长时间学习。

在发展趋势上，Flutter 无疑是当时增长最快的跨端技术之一，社区的活跃程度以及官方的投入都非常高，国内不少团队也都在积极推进 Flutter 技术的发展，Flutter 正处在一个快速的上升期。

整体来说，Flutter 是满足我们团队对跨平台技术的需求的，我们计划在接下来的一段时间投入更多资源，把 Flutter 的基础设施逐渐建立起来。

基建一期建设

基建一期内容主要包括以下几个方面：

• 工程架构


• 开发框架


• 脚本工具


• 自动化构建

在基建一期完成后，我们的目标是要达到：

• 基础能力足够支撑普通业务开发


• 开发效率接近原生开发


• 开发过程要基本顺畅

工程架构

工程架构指的是原生工程与 Flutter 工程之间的关系，以及 Flutter 工程与 Flutter 工程之间的关系。

原生工程与Flutter工程的关系

我们知道，使用 Flutter 开发通常有两种情况，一种是直接使用 Flutter 开发一个新的App，属于纯 Flutter 开发；一种是在已有的 Native 工程中引入，属于混合开发。我们当然属于后者。

而混合开发又可分为两种：源码集成和产物集成。源码集成需要改变原工程的项目结构，并且需要 Flutter 开发环境才能编译，而产物集成则不需要改动原工程的项目结构，只需把 Flutter 的构建产物当作普通的依赖库引入即可，原有 Native 工程和 Flutter 工程从物理上完全独立。显而易见的我们选择产物集成的方式，引入 Flutter对于原工程以及非 Flutter 开发人员来说，基本上是毫无感知的。

所以原生工程与 Flutter 工程之间的关系如下图所示：

Flutter工程之间的关系

根据已有的客户端基建的开发经验，我们将所有 Flutter 工程分为了四层：

• 壳工程


• 业务层


• 公共层


• 容器层

容器层负责提供 Flutter 的基础运行环境，包括 Flutter 引擎管理、页面栈管理、网络框架、KV存储、数据库访问、埋点框架、Native 与 Flutter 通信通道和其它基础功能。

公共层包含一些通用的开源库、自定义UI组件、部分通用业务等。

业务层包含用户信息、商品、发布等业务组件。

壳工程负责集成各业务组件，最终构建出产物集成到 Native 主工程。

其中业务层、公共层、容器层都是由若干个独立的工程所组成，整体结构如下：

开发框架

开发框架是为了提高开发效率、规范代码结构、减少维护成本等考虑而设计的一套软件框架，包括：基础能力、状态管理、页面栈管理等。

基础能力

开发框架需要提供各种必要的能力，比如：页面跳转、埋点、网络请求、图片加载、数据存储等，为了最大化减少研发成本，我们在底层定义了一套通用的数据交互协议，直接复用了现有的 Native 的各项能力，也使得 Native 的各种状态与 Flutter 侧能够保持统一。

状态管理

相信了解 Flutter 的同学一定知道状态管理，这也是跟 Native 开发区别较大的地方。在开发较为复杂的页面时，状态维护是非常繁琐的，在不引入状态管理框架的情况下，开发效率会受很大影响，后期的维护成本以及业务交接都是很大的问题。

另外，在开发框架设计之初，我们就期望从框架上能够在一定程度上限定代码结构、模块之间的交互方式、状态更新方式等，我们期望的是不同的人写出来的代码在逻辑、结构和风格上都能保持比较统一，即在提高开发效率的同时，也能保证项目后续的可维护性和扩展性，减少不同业务间的交接成本。

基于上述这些需求，在我们对比了多个开源项目后，FishRedux 的整体使用感受正好符合我们的要求。

如下图，两个页面的代码结构基本一致：

页面栈管理

在早期版本，Flutter 引擎的实例占用内存较高，为了减少内存消耗，大家普遍采用单实例的模式，而在 Native 和 Flutter 混合开发的场景下就会存在一个问题，就是 Native 有自己的页面栈，而 Flutter 也维护着一套自己的页面栈，如果 Native 页面与 Flutter 页面穿插着打开，在没有特殊处理的情况下，页面栈会发生错乱。在调研了业内的各种开源方案后，我们选择引入 FlutterBoost 用来管理页面混合栈。

脚本工具

为了方便开发同学搭建 Flutter 的开发环境，同时能够管理使用的 Flutter 版本，我们开发了 zflutter 命令行工具，包含以下主要功能：

• Flutter开发环境安装


• Flutter版本管理


• 创建模版工程（主工程、组件工程）


• 创建模版页面（常规页面、列表页、瀑布流页面）


• 创建页面模块


• 组件工程发布


• 构建Flutter产物


• 脚本自更新

如图：

自动化构建

客户端使用的是自研的 Beetle 平台（集工程管理、分支管理、编译、发布于一体），短时间内要支持上 Flutter 不太现实，基于此，我们先临时自己搭台服务器，通过 gitlab 的 webhook 功能结合 zflutter 工具简单实现了一套自动化构建的服务，待 Beetle 支持 Flutter 组件化开发功能后，再将工作流切回到 Beetle 平台。

小范围试验

在完成基建一期的开发工作后，我们决定通过开发几个实际业务来试验目前的基础设施是否达到既定目标。

我们以不影响主流程、能覆盖常见UI功能、并且能跟 Native 页面做AB测试（主要是方便在出问题时能够切换到 Native 版本）为条件挑选了个人资料页和留言列表页进行了 Flutter 化改造，如下图所示：

这两个页面涵盖了网络请求、图片加载、弹窗、列表、下拉刷新、上拉加载更多、左滑删除、埋点上报、页面跳转等常见功能，足以覆盖日常开发所需的基础能力。

经过完整的开发流程以及一段时间的线上观察，我们得出如下结论：

基础能力

目前已具备的基础能力已经足够支撑普通业务开发（开发过程中补足了一些缺失的能力）。

工作流

整个开发过程在工程依赖管理和分支管理方面的支持还比较缺失，比较依赖人工处理。

开发效率

我们在开发前根据页面功能同时做了纯 Native 开发排期和 Flutter 开发排期，按单人日的成本来对比的话，Flutter 实际开发耗时跟 Native 排期耗时比为 1.25:2，Native 是按照 Android+iOS 两端各一人算的，也就是1.25人/日比2人/日，如果后续对 Flutter 技术熟悉度提升后相信效率还可以进一步提升。

性能体验

线上两个 Flutter 页面的体验效果跟 Native 对比基本感觉不到差别，但是首次进入 Flutter 页面时会有短暂的白屏等待时间，这个是由于 Flutter 环境初始化导致的延迟，后续可以想办法优化。

包体积

在引入 Flutter 之后，转转的安装包体积在两端都分别有所增加：

• Android增加6.1M


• iOS增加14M

试验结果基本符合预期，包体积的增量也在我们的可接受范围内，接下来将进行基建二期的建设，补足目前缺失的能力。

基建二期建设

基建二期的内容主要包含以下工作：

• 配合工程效率组完成 Beetle 对 Flutter 项目的支持


• 组织客户端内部进行 Flutter 技术培训

Beetle支持Flutter

为了能让大家更清晰的了解 Beetle 的工程管理机制，这里先简单介绍下客户端的工程类型：

• Native主工程（又分为 Android 和 iOS）


• Native组件工程（又分为 Android 和 iOS）


• Flutter主工程


• Flutter组件工程（即 Flutter 插件工程）

举个例子，当有一个新版本需要开发时，先从 Native 主工程创建一个版本同时创建一个 Release 分支，即版本分支，然后从版本分支根据具体需求创建对应 Native 组件的版本分支，Flutter 主工程此时可看作是一个 Native 组件，比如此时创建了一个 Flutter 主工程的版本分支后，可以进入 Flutter 主工程再根据需要创建对应的 Flutter 组件工程的版本分支。

Beetle 目前已支持 Flutter 工程管理、分支管理、组件依赖管理以及组件的发布、Flutter 产物的构建等，Beetle 的作用贯穿从开发到上线的整个工作流。

Flutter技术培训

为了让大家更快的熟悉 Flutter 开发，我们在客户端内部组织了5次 Flutter 快速入门的系列分享：

同时也逐步完善内部文档的建设，包括：FlutterSdk 源码维护策略、Flutter 入门指南、Flutter 混合开发方案、Flutter 与 Native 通信方案、Flutter 开发环境配置、Flutter 组件化工程结构、Flutter 开发与调试、Flutter 开发工作流、ZFlutter 工具使用介绍、Flutter 开发之 Beetle 使用指南等，涵盖了从环境搭建、开发调试到构建发布的整个过程。

大范围推广

在完成基建二期的建设后，整体基础设施已经能够支撑我们常见的业务，开发工作流也基本顺畅，于是我们开始了在内部大范围推广计划。

我们先后改造和新开发了个人主页、我发布的页面、微商详、奇趣数码页等业务，基本涵盖了常见的各种类型的页面和功能，整体开发效率与原生单端开发效率持平，但是在特别复杂的页面的性能表现上，Flutter 的表现相对要差一些。

部分页面如下图所示：

探索前端生态

在跨端技术领域我们知道 Web 技术是天然支持的，如果能把前端生态引入到 Flutter 中，那么对客户端来说，在业务的支持度上会更上一个台阶，Web 的体验得到提升的同时客户端也具备了动态化，基于此背景我们开始探索 Flutter 在 Web 上的可能性。

技术调研

当时可选的开源方案有：Kraken、MXFlutter、Flutter For Web。

Kraken

Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter 进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C 标准实现，拥有非常庞大的前端开发者生态。

Kraken 的最上层是一个基于 W3C 标准而构建的 DOM API，在下层是所依赖的 JS 引擎，通过 C++ 构建一个 Bridge 与 Dart 通信。然后这个 C++ Bridge 把 JS 所调用的一些信息，转发到 Dart 层。Dart 层通过接收这些信息，会去调用 Flutter 所提供的一些渲染能力来进行渲染。

Kraken 是不依赖 Flutter Widget，而是依赖 Flutter Widget 的底层渲染数据结构 —— RenderObject。Kraken 实现了很多 CSS 相关的能力和一些自定义的 RenderObject，直接将生成的 RenderObject 挂载在 Flutter RenderView 上来进行渲染，通过这样的方式能够做到非常高效的渲染性能。

MXFlutter

MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。

MXFlutter 把 Flutter 的渲染逻辑中的三棵树（即：WidgetTree、Element、RenderObject ）中的第一棵（即：WidgetTree），放到 JavaScript 中生成。用 JavaScript 完整实现了 Flutter 控件层封装，实现了轻量的响应式 UI 框架，支撑JS WidgetTree 的 build逻辑，build 过程生成的UI描述， 通过Flutter 层的 UI 引擎转换成真正的 Flutter 控件显示出来。

Flutter For Web

Flutter 在 Web 平台上以浏览器的标准 API 重新实现了引擎。目前有两种在 Web 上呈现内容的选项：HTML 和 WebGL。

• 在 HTML 模式下，Flutter 使用 HTML、CSS、Canvas 和 SVG 进行渲染。


• 在 WebGL 模式下，Flutter 使用了一个编译为 WebAssembly 的 Skia 版本，名为 CanvasKit。

HTML 模式提供了最佳的代码大小，CanvasKit 则提供了浏览器图形堆栈渲染的最快途径，并为原生平台的内容提供了更高的图形保真度。

结论

我们对以上方案从接入成本、渲染性能、包体积、开发生态、学习成本等多维度进行了对比：

• 接入成本：Kraken ≈ MXFlutter ≈ Flutter For Web


• 渲染性能：Kraken > MXFlutter > Flutter For Web


• 包体积增量：Flutter For Web < Kraken < MXFlutter


• 开发生态：Kraken ≈ MXFlutter > Flutter For Web


• 学习成本：Flutter For Web < Kraken ≈ MXFlutter

最终选择了 Kraken 作为我们的首选方案。

上线验证

为了使 Kraken 顺利接入转转App，我们做了以下几个方面的工作：

• 升级 FlutterSdk 到最新版，满足接入 Kraken 的基础条件


• 统一客户端容器接口，使得 Kraken 容器能够完美继承 Web 容器的能力


• 自己维护 Kraken 源码，及时修复官方来不及修复的问题，方便增加转转特有的扩展能力


• 制定 Kraken 容器与 Web 容器的降级机制


• 兼容 HTML 加载，保持跟 Web 容器一致的加载方式


• 添加监控埋点，量化指标，指导后续优化方向


• 选择一个简单 Web 页并协助前端同学适配

上线后，我们对页面的各项指标进行了对比，使用 Kraken 容器加载比使用 WebView 加载，在首屏加载耗时的指标上平均增加了281毫秒，原因为：当前版本的 Kraken 容器不支持直接加载 HTML，且只能加载单个 JsBundle，导致加载效率比 WebView 差。

通过跟前端同学沟通，从开发效率上来看，Kraken 工程的开发周期会比实现同样需求的普通 Web 工程增加1.5到2倍的时间，主要原因是受到 CSS 样式、Api 差异，无法使用现有UI组件，另外 Kraken 的调试工具目前还不够完善，使用浏览器调试后还须在客户端容器中调试，整体下来导致开发 Kraken 工程会比开发普通Web工程耗费更多时间。

再次验证

由于之前选择的 Web 页面太过简单，不具备代表性，所以我们重新选定了“附近的人”页面做为改造目标，再次验证 Kraken 在实际开发过程中的效率及性能体验。页面如图所示：

最终因为部分问题得不到解决，并且整体性能较差，导致页面没能成功上线。

存在的问题包括但不限于下面列举的一些：

• 表现不一致问题
  
  
  
  1. CSS 定位、布局表现与浏览器表现不一致
  
  
  2. 部分 API 表现与浏览器不一致(getBoundingClientRect等)
  
  
  3. iOS，Android系统表现不一致
  
  
  
  


• 重大 Bug
  
  
  
  1. 页面初始化渲染完成，动态修改元素样式，DOM不重新渲染
  
  
  2. 滑动监听计算导致 APP 崩溃
  
  
  
  


• 调试成本高
  
  
  
  1. 不支持 vue-router，单项目单路由
  
  
  2. 不支持热更新，npm run build 预览
  
  
  3. 不支持 sourceMap，无法定位源代码
  
  
  4. 真机调试只支持 element 和 network；dom 和 element 无法互相选中；无法动态修改 dom 结构，无法直接修改样式.......
  
  
  5. 页面白屏，假死
  
  
  
  


• 安全性问题
  
  
  
  1. 无浏览器中的“同源策略”限制
  
  
  
  


• 兼容性
  
  
  
  1. npm 包不兼容等
  
  
  
  

通过这一系列的探索和尝试，我们了解到了 Kraken 目前还存在许多不足，如果继续应用会带来高额的开发调试以及维护成本，所以暂时停止了在 Kraken 方向上的投入，但我们仍然在这个方向上保持着关注。

结尾

目前转转在Flutter方向上的实践和探索只是一个起点，我们意识到仍然有很多工作需要去做。我们坚信Flutter作为一项领先的跨端技术，将为转转业务的发展带来巨大的潜力和机会。我们将持续努力，加强技术建设，不断完善实践经验，推动Flutter在转转的应用和发展，为用户提供更好的产品和体验。

转转研发中心及业界小伙伴们的技术学习交流平台，定期分享一线的实战经验及业界前沿的技术话题。

关注公众号「转转技术」（综合性）、「大转转FE」（专注于FE）、「转转QA」（专注于QA），更多干货实践，欢迎交流分享~

今天，我将提供一个实际的示例，演示如何在单个页面上实现多个列表，这些列表可以水平排列、网格格式、垂直排列，甚至是这些常用布局的组合。

下面是要做的：

实现

让我们从创建一个包含产品所有属性的产品模型开始。

class Product {

  final String id;

  final String name;

  final double price;

  final String image;



  const Product({

    required this.id,

    required this.name,

    required this.price,

    required this.image,

  });



  factory Product.fromJson(Map json) {

    return Product(

      id: json['id'],

      name: json['name'],

      price: json['price'],

      image: json['image'],

    );

  }

}

现在，我们将设计我们的小部件以支持水平、垂直和网格视图。

创建一个名为 HorizontalRawWidget 的新窗口小部件类，定义水平列表的用户界面。

import 'package:flutter/material.dart';

import 'package:multiple_listview_example/models/product.dart';



class HorizontalRawWidget extends StatelessWidget {

  final Product product;



  const HorizontalRawWidget({Key? key, required this.product})

      : super(key: key);



  @override

  Widget build(BuildContext context) {

    return Padding(

      padding: const EdgeInsets.only(

        left: 15,

      ),

      child: Container(

        width: 125,

        decoration: BoxDecoration(

            color: Colors.white, borderRadius: BorderRadius.circular(12)),

        child: Column(

          crossAxisAlignment: CrossAxisAlignment.start,

          children: [

            Padding(

              padding: const EdgeInsets.fromLTRB(5, 5, 5, 0),

              child: ClipRRect(

                borderRadius: BorderRadius.circular(12),

                child: Image.network(

                  product.image,

                  height: 130,

                  fit: BoxFit.contain,

                ),

              ),

            ),

            Expanded(

              child: Padding(

                padding: const EdgeInsets.all(8.0),

                child: Column(

                  crossAxisAlignment: CrossAxisAlignment.start,

                  children: [

                    Expanded(

                      child: Text(product.name,

                          maxLines: 2,

                          overflow: TextOverflow.ellipsis,

                          style: const TextStyle(

                              color: Colors.black,

                              fontSize: 12,

                              fontWeight: FontWeight.bold)),

                    ),

                    Row(

                      crossAxisAlignment: CrossAxisAlignment.end,

                      children: [

                        Text("\$${product.price}",

                            style: const TextStyle(

                                color: Colors.black, fontSize: 12)),

                      ],

                    ),

                  ],

                ),

              ),

            )

          ],

        ),

      ),

    );

  }

}

设计一个名为 GridViewRawWidget 的小部件类，定义单个网格视图的用户界面。

import 'package:flutter/material.dart';

import 'package:multiple_listview_example/models/product.dart';



class GridViewRawWidget extends StatelessWidget {

  final Product product;



  const GridViewRawWidget({Key? key, required this.product}) : super(key: key);



  @override

  Widget build(BuildContext context) {

    return Container(

      padding: const EdgeInsets.all(5),

      decoration: BoxDecoration(

          color: Colors.white, borderRadius: BorderRadius.circular(10)),

      child: Column(

        children: [

          AspectRatio(

            aspectRatio: 1,

            child: ClipRRect(

              borderRadius: BorderRadius.circular(10),

              child: Image.network(

                product.image,

                fit: BoxFit.fill,

              ),

            ),

          )

        ],

      ),

    );

  }

}

最后，让我们为垂直视图创建一个小部件类。

import 'package:flutter/material.dart';

import 'package:multiple_listview_example/models/product.dart';



class VerticalRawWidget extends StatelessWidget {

  final Product product;



  const VerticalRawWidget({Key? key, required this.product}) : super(key: key);



  @override

  Widget build(BuildContext context) {

    return Container(

      margin: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),

      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),

      color: Colors.white,

      child: Row(

        children: [

          Image.network(

            product.image,

            width: 78,

            height: 88,

          ),

          const SizedBox(

            width: 15,

          ),

          Expanded(

            child: Column(

              crossAxisAlignment: CrossAxisAlignment.start,

              children: [

                Text(

                  product.name,

                  style: const TextStyle(fontSize: 12, color: Colors.black, fontWeight: FontWeight.bold),

                ),

                SizedBox(

                  height: 5,

                ),

                Text("\$${product.price}",

                    style: const TextStyle(color: Colors.black, fontSize: 12)),

              ],

            ),

          )

        ],

      ),

    );

  }

}

现在是时候把所有的小部件合并到一个屏幕中了，我们先创建一个名为“home_page.dart”的页面，在这个页面中，我们将使用一个横向的 ListView、纵向的 ListView 和 GridView。

import 'package:flutter/material.dart';

import 'package:multiple_listview_example/models/product.dart';

import 'package:multiple_listview_example/utils/product_helper.dart';

import 'package:multiple_listview_example/views/widgets/gridview_raw_widget.dart';

import 'package:multiple_listview_example/views/widgets/horizontal_raw_widget.dart';

import 'package:multiple_listview_example/views/widgets/title_widget.dart';

import 'package:multiple_listview_example/views/widgets/vertical_raw_widget.dart';



class HomePage extends StatelessWidget {

  const HomePage({Key? key}) : super(key: key);



  @override

  Widget build(BuildContext context) {

    List products = ProductHelper.getProductList();

    return Scaffold(

      backgroundColor: const Color(0xFFF6F5FA),

      appBar: AppBar(

        centerTitle: true,

        title: const Text("Home"),

      ),

      body: SingleChildScrollView(

        child: Container(

          padding: const EdgeInsets.symmetric(vertical: 20),

          child: Column(

            crossAxisAlignment: CrossAxisAlignment.start,

            children: [

              const TitleWidget(title: "Horizontal List"),

              const SizedBox(

                height: 10,

              ),

              SizedBox(

                height: 200,

                child: ListView.builder(

                    shrinkWrap: true,

                    scrollDirection: Axis.horizontal,

                    itemCount: products.length,

                    itemBuilder: (BuildContext context, int index) {

                      return HorizontalRawWidget(

                        product: products[index],

                      );

                    }),

              ),

              const SizedBox(

                height: 10,

              ),

              const TitleWidget(title: "Grid View"),

              Container(

                padding:

                    const EdgeInsets.symmetric(horizontal: 15, vertical: 10),

                child: GridView.builder(

                    gridDelegate:

                        const SliverGridDelegateWithFixedCrossAxisCount(

                            crossAxisCount: 2,

                            crossAxisSpacing: 13,

                            mainAxisSpacing: 13,

                            childAspectRatio: 1),

                    itemCount: products.length,

                    shrinkWrap: true,

                    physics: const NeverScrollableScrollPhysics(),

                    itemBuilder: (BuildContext context, int index) {

                      return GridViewRawWidget(

                        product: products[index],

                      );

                    }),

              ),

              const TitleWidget(title: "Vertical List"),

              ListView.builder(

                  itemCount: products.length,

                  shrinkWrap: true,

                  physics: const NeverScrollableScrollPhysics(),

                  itemBuilder: (BuildContext context, int index) {

                    return VerticalRawWidget(

                      product: products[index],

                    );

                  }),

            ],

          ),

        ),

      ),

    );

  }

}

我使用了一个 SingleChildScrollView widget 作为代码中的顶部根 widget，考虑到我整合了多个布局，如水平列表、网格视图和垂直列表，我将所有这些 widget 包装在一个 Column widget 中。

挑战在于如何处理多个滚动部件，因为在上述示例中有两个垂直滚动部件：一个网格视图和一个垂直列表视图。为了禁用单个部件的滚动行为， physics 属性被设置为 const NeverScrollableScrollPhysics()。取而代之的是，使用顶层根 SingleChildScrollView`` 来启用整个内容的滚动。此外，SingleChildScrollView上的shrinkWrap属性被设置为true`，以确保它能紧紧包裹其内容，只占用其子控件所需的空间。

Github 链接：github.com/tarunaronno…

经过大半个月的爆肝式开发输出，又一个跨端新项目Flutter-Douyin短视频正式完结了。

flutter3_douyin基于最新跨平台技术flutter3.19.2开发手机端仿抖音app实战项目。

实现了类似抖音全屏沉浸式上下滑动视频、左右滑动切换页面模块，直播间进场/礼物动画，聊天等模块功能。

使用技术

• 编辑器：vscode


• 技术框架：flutter3.19.2+dart3.3.0


• 路由/状态插件：get: ^4.6.6


• 本地缓存服务：get_storage: ^2.1.1


• 图片预览插件：photo_view: ^0.14.0


• 刷新加载：easy_refresh^3.3.4


• toast轻提示：toast^0.3.0


• 视频套件：media_kit: ^1.1.10+1

项目结构

前期需要配置好flutter和dart sdk环境。如果使用vscode编辑器，可以安装一些flutter语法插件。

更多的开发api资料，大家可以去官网查阅就行。

flutter.dev/

flutter.cn/

pub.flutter-io.cn/

http://www.dartcn.com/

该项目涉及到的技术知识还是蛮多的。下面主要介绍一些短视频及直播知识，至于其它知识点，大家可以去看看之前分享的flutter3聊天项目文章。

http://www.cnblogs.com/xiaoyan2017…

http://www.cnblogs.com/xiaoyan2017…

flutter主入口lib/main.dart

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'package:get_storage/get_storage.dart';

import 'package:media_kit/media_kit.dart';



import 'utils/index.dart';



// 引入布局模板

import 'layouts/index.dart';



import 'binding/binding.dart';



// 引入路由管理

import 'router/index.dart';



void main() async {

  // 初始化get_storage

  await GetStorage.init();



  // 初始化media_kit

  WidgetsFlutterBinding.ensureInitialized();

  MediaKit.ensureInitialized();



  runApp(const MyApp());

}



class MyApp extends StatelessWidget {

  const MyApp({super.key});



  @override

  Widget build(BuildContext context) {

    return GetMaterialApp(

      title: 'FLUTTER3 DYLIVE',

      debugShowCheckedModeBanner: false,

      theme: ThemeData(

        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFFE2C55)),

        useMaterial3: true,

        // 修正windows端字体粗细不一致

        fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,

      ),

      home: const Layout(),

      // 全局绑定GetXController

      initialBinding: GlobalBindingController(),

      // 初始路由

      initialRoute: Utils.isLogin() ? '/' : '/login',

      // 路由页面

      getPages: routePages,

      // 错误路由

      // unknownRoute: GetPage(name: '/404', page: Error),

    );

  }

}

flutter3自定义底部凸起导航

采用 bottomNavigationBar 组件实现页面模块切换。通过getx状态管理联动控制底部导航栏背景颜色。导航栏中间图标/图片按钮，使用了 Positioned 组件实现功能。

return Scaffold(

  backgroundColor: Colors.grey[50],

  body: pageList[pageCurrent],

  // 底部导航栏

  bottomNavigationBar: Theme(

    // Flutter去掉BottomNavigationBar底部导航栏的水波纹

    data: ThemeData(

      splashColor: Colors.transparent,

      highlightColor: Colors.transparent,

      hoverColor: Colors.transparent,

    ),

    child: Obx(() {

      return Stack(

        children: [

          Container(

            decoration: const BoxDecoration(

              border: Border(top: BorderSide(color: Colors.black54, width: .1)),

            ),

            child: BottomNavigationBar(

              backgroundColor: bottomNavigationBgcolor(),

              fixedColor: FStyle.primaryColor,

              unselectedItemColor: bottomNavigationItemcolor(),

              type: BottomNavigationBarType.fixed,

              elevation: 1.0,

              unselectedFontSize: 12.0,

              selectedFontSize: 12.0,

              currentIndex: pageCurrent,

              items: [

                ...pageItems

              ],

              onTap: (index) {

                setState(() {

                  pageCurrent = index;

                });

              },

            ),

          ),

          // 自定义底部导航栏中间按钮

          Positioned(

            left: MediaQuery.of(context).size.width / 2 - 15,

            top: 0,

            bottom: 0,

            child: InkWell(

              child: Column(

                mainAxisAlignment: MainAxisAlignment.center,

                children: [

                  // Icon(Icons.tiktok, color: bottomNavigationItemcolor(centerDocked: true), size: 32.0,),

                  Image.asset('assets/images/applogo.png', width: 32.0, fit: BoxFit.contain,)

                  // Text('直播', style: TextStyle(color: bottomNavigationItemcolor(centerDocked: true), fontSize: 12.0),)

                ],

              ),

              onTap: () {

                setState(() {

                  pageCurrent = 2;

                });

              },

            ),

          ),

        ],

      );

    }),

  ),

);

flutter3实现抖音滑动效果

return Scaffold(

  extendBodyBehindAppBar: true,

  appBar: AppBar(

    forceMaterialTransparency: true,

    backgroundColor: [1, 2, 3].contains(pageVideoController.pageVideoTabIndex.value) ? null : Colors.transparent,

    foregroundColor: [1, 2, 3].contains(pageVideoController.pageVideoTabIndex.value) ? Colors.black : Colors.white,

    titleSpacing: 1.0,

    leading: Obx(() => IconButton(icon: Icon(Icons.menu, color: tabColor(),), onPressed: () {},),),

    title: Obx(() {

      return TabBar(

        controller: tabController,

        tabs: pageTabs.map((v) => Tab(text: v)).toList(),

        isScrollable: true,

        tabAlignment: TabAlignment.center,

        overlayColor: MaterialStateProperty.all(Colors.transparent),

        unselectedLabelColor: unselectedTabColor(),

        labelColor: tabColor(),

        indicatorColor: tabColor(),

        indicatorSize: TabBarIndicatorSize.label,

        unselectedLabelStyle: const TextStyle(fontSize: 16.0, fontFamily: 'Microsoft YaHei'),

        labelStyle: const TextStyle(fontSize: 16.0, fontFamily: 'Microsoft YaHei', fontWeight: FontWeight.w600),

        dividerHeight: 0,

        labelPadding: const EdgeInsets.symmetric(horizontal: 10.0),

        indicatorPadding: const EdgeInsets.symmetric(horizontal: 5.0),

        onTap: (index) {

          pageVideoController.updatePageVideoTabIndex(index); // 更新索引

          pageController.jumpToPage(index);

        },

      );

    }),

    actions: [

      Obx(() => IconButton(icon: Icon(Icons.search, color: tabColor(),), onPressed: () {},),),

    ],

  ),

  body: Column(

    children: [

      Expanded(

        child: Stack(

          children: [

            /// 水平滚动模块

            PageView(

              // 自定义滚动行为(支持桌面端滑动、去掉滚动条槽)

              scrollBehavior: PageScrollBehavior().copyWith(scrollbars: false),

              scrollDirection: Axis.horizontal,

              controller: pageController,

              onPageChanged: (index) {

                pageVideoController.updatePageVideoTabIndex(index); // 更新索引

                setState(() {

                  tabController.animateTo(index);

                });

              },

              children: [

                ...pageModules

              ],

            ),

          ],

        ),

      ),

    ],

  ),

);

flutter实现直播功能

// 商品购买动效

Container(

  ...

),



// 加入直播间动效

const AnimationLiveJoin(

  joinQueryList: [

    {'avatar': 'assets/images/logo.png', 'name': 'andy'},

    {'avatar': 'assets/images/logo.png', 'name': 'jack'},

    {'avatar': 'assets/images/logo.png', 'name': '一条咸鱼'},

    {'avatar': 'assets/images/logo.png', 'name': '四季平安'},

    {'avatar': 'assets/images/logo.png', 'name': '叶子'},

  ],

),



// 送礼物动效

const AnimationLiveGift(

  giftQueryList: [

    {'label': '小心心', 'gift': 'assets/images/gift/gift1.png', 'user': 'Jack', 'avatar': 'assets/images/avatar/uimg2.jpg', 'num': 12},

    {'label': '棒棒糖', 'gift': 'assets/images/gift/gift2.png', 'user': 'Andy', 'avatar': 'assets/images/avatar/uimg6.jpg', 'num': 36},

    {'label': '大啤酒', 'gift': 'assets/images/gift/gift3.png', 'user': '一条咸鱼', 'avatar': 'assets/images/avatar/uimg1.jpg', 'num': 162},

    {'label': '人气票', 'gift': 'assets/images/gift/gift4.png', 'user': 'Flower', 'avatar': 'assets/images/avatar/uimg5.jpg', 'num': 57},

    {'label': '鲜花', 'gift': 'assets/images/gift/gift5.png', 'user': '四季平安', 'avatar': 'assets/images/avatar/uimg3.jpg', 'num': 6},

    {'label': '捏捏小脸', 'gift': 'assets/images/gift/gift6.png', 'user': 'Alice', 'avatar': 'assets/images/avatar/uimg4.jpg', 'num': 28},

    {'label': '你真好看', 'gift': 'assets/images/gift/gift7.png', 'user': '叶子', 'avatar': 'assets/images/avatar/uimg7.jpg', 'num': 95},

    {'label': '亲吻', 'gift': 'assets/images/gift/gift8.png', 'user': 'YOYO', 'avatar': 'assets/images/avatar/uimg8.jpg', 'num': 11},

    {'label': '玫瑰', 'gift': 'assets/images/gift/gift12.png', 'user': '宇辉', 'avatar': 'assets/images/avatar/uimg9.jpg', 'num': 3},

    {'label': '私人飞机', 'gift': 'assets/images/gift/gift16.png', 'user': 'Hison', 'avatar': 'assets/images/avatar/uimg10.jpg', 'num': 273},

  ],

),



// 直播弹幕+商品讲解

Container(

  margin: const EdgeInsets.only(top: 7.0),

  height: 200.0,

  child: Row(

    crossAxisAlignment: CrossAxisAlignment.end,

    children: [

      Expanded(

        child: ListView.builder(

          padding: EdgeInsets.zero,

          itemCount: liveJson[index]['message']?.length,

          itemBuilder: (context, i) => danmuList(liveJson[index]['message'])[i],

        ),

      ),

      SizedBox(

        width: isVisibleGoodsTalk ? 7 : 35,

      ),

      // 商品讲解

      Visibility(

        visible: isVisibleGoodsTalk,

        child: Column(

          ...

        ),

      ),

    ],

  ),

),



// 底部工具栏

Container(

  margin: const EdgeInsets.only(top: 7.0),

  child: Row(

    ...

  ),

),

flutter直播通过 SlideTransition 组件实现直播进场动画。

return SlideTransition(

  position: animationFirst ? animation : animationMix,

  child: Container(

    alignment: Alignment.centerLeft,

    margin: const EdgeInsets.only(top: 7.0),

    padding: const EdgeInsets.symmetric(horizontal: 7.0,),

    height: 23.0,

    width: 250,

    decoration: const BoxDecoration(

      gradient: LinearGradient(

        begin: Alignment.centerLeft,

        end: Alignment.centerRight,

        colors: [

          Color(0xFF6301FF), Colors.transparent

        ],

      ),

      borderRadius: BorderRadius.horizontal(left: Radius.circular(10.0)),

    ),

    child: joinList!.isNotEmpty ? 

      Text('欢迎 ${joinList![0]['name']} 加入直播间', style: const TextStyle(color: Colors.white, fontSize: 14.0,),)

      :

      Container()

    ,

  ),

);



class _AnimationLiveJoinState extends State<AnimationLiveJoin> with TickerProviderStateMixin {

  // 动画控制器

  late AnimationController controller = AnimationController(

    vsync: this,

    duration: const Duration(milliseconds: 500), // 第一个动画持续时间

  );

  late AnimationController controllerMix = AnimationController(

    vsync: this,

    duration: const Duration(milliseconds: 1000), // 第二个动画持续时间

  );

  // 动画

  late Animation<Offset> animation = Tween(begin: const Offset(2.5, 0), end: const Offset(0, 0)).animate(controller);

  late Animation<Offset> animationMix = Tween(begin: const Offset(0, 0), end: const Offset(-2.5, 0)).animate(controllerMix);



  Timer? timer;

  // 是否第一个动画

  bool animationFirst = true;

  // 是否空闲

  bool idle = true;

  // 加入直播间数据列表

  List? joinList;



  @override

  void initState() {

    super.initState();



    joinList = widget.joinQueryList!.toList();



    runAnimation();

    animation.addListener(() {

      if(animation.status == AnimationStatus.forward) {

        debugPrint('第一个动画进行中');

        idle = false;

        setState(() {});

      }else if(animation.status == AnimationStatus.completed) {

        debugPrint('第一个动画结束');

        animationFirst = false;

        if(controllerMix.isCompleted || controllerMix.isDismissed) {

          timer = Timer(const Duration(seconds: 2), () {

            controllerMix.forward();

            debugPrint('第二个动画开始');

          });

        }

        setState(() {});

      }

    });

    animationMix.addListener(() {

      if(animationMix.status == AnimationStatus.forward) {

        setState(() {});

      }else if(animationMix.status == AnimationStatus.completed) {

        animationFirst = true;

        controller.reset();

        controllerMix.reset();

        if(joinList!.isNotEmpty) {

          joinList!.removeAt(0);

        }

        idle = true;

        // 执行下一个数据

        runAnimation();

        setState(() {});

      }

    });

  }



  void runAnimation() {

    if(joinList!.isNotEmpty) {

      // 空闲状态才能执行，防止添加数据播放状态混淆

      if(idle == true) {

        if(controller.isCompleted || controller.isDismissed) {

          setState(() {});

          timer = Timer(Duration.zero, () {

            controller.forward();

          });

        }

      }

    }

  }



  @override

  void dispose() {

    controller.dispose();

    controllerMix.dispose();

    timer?.cancel();

    super.dispose();

  }



}

以上只是介绍了一部分知识点，限于篇幅就先介绍这么多，希望有所帮助~
juejin.cn/post/731918…

 flutter create -t package base 

dependencies:

  flutter:

    sdk: flutter

  base: //此处添加配置

    path: ../base

abstract class MvcBaseModel {

  void dispose();

}

abstract class MvcBaseController {

  late M _model;

  final _dataUpdatedController = StreamController.broadcast();



  MvcBaseController() {

    _model = createModel();

  }



  void updateData(M model) {

    _dataUpdatedController.add(model);

  }



  M createModel();



  StreamController get streamController => _dataUpdatedController;



  M get model => _model;

}

3. view. (view)

abstract class MvcBaseView extends MvcBaseController> extends StatefulWidget {

  final C controller;



  const MvcBaseView({Key? key, required this.controller});



  @override

  State<StatefulWidget> createState() {

    print("create state ${controller.streamController == null}");

    MvcBaseState mvcBaseState = create();

    mvcBaseState.createStreamController(controller.streamController);

    return mvcBaseState;

  }



  MvcBaseState create();

}

4. view(state)

abstract class MvcBaseState extends MvcBaseModel, T extends StatefulWidget>

    extends State<T> {

  late StreamController<M> streamController;

  late StreamSubscription<M> _streamSubscription;





  @override

  Widget build(BuildContext context);



  @override

  void initState() {

    super.initState();

    print("init state");

    _streamSubscription = this.streamController.stream.listen((event) {

      setState(() {

        observer(event);

      });

    });

  }



  void createStreamController(StreamController<M> streamController) => this.streamController = streamController;



  void observer(M event);



  @override

  void dispose() {

    _streamSubscription.cancel();

    streamController.close();

    super.dispose();

  }

}

三、使用Demo

void main() => runApp(MyApp());



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(primarySwatch: Colors.blue),

      home: CounterView(controller: CounterController()),

    );

  }

}

2. view + state

class CounterView extends MvcBaseView<CounterController> {

  const CounterView({super.key,required CounterController controller})

      : super(controller: controller);



  @override

  MvcBaseState<MvcBaseModel, StatefulWidget> create() => _CounterViewState();

}



class _CounterViewState extends MvcBaseState<CounterModel, CounterView> {

  var count = 0;



  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Counter App (MVC)'),

      ),

      body: Center(

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            const Text(

              'Counter Value = :',

              style: TextStyle(fontSize: 20),

            ),

            Text(

              '${count}',

              style: const TextStyle(fontSize: 50, fontWeight: FontWeight.bold),

            ),

            const SizedBox(height: 20),

            ElevatedButton(

                onPressed: () {

                  debugPrint("---11-->");

                  // setState(() {

                  widget.controller.incrementCounter();

                  // });

                },

                child: Text('Test Add111'))

          ],

        ),

      ),

    );

  }



  @override

  void observer(CounterModel event) {

    count = event.counter;

  }

}

3. model

class CounterModel extends MvcBaseModel{

  int _counter = 0;



  int get counter => _counter;



  increment() {

    _counter++;

  }



  @override

  void dispose() {

  }

}

4. controller

class CounterController extends MvcBaseController {

  @override

  CounterModel createModel() => CounterModel();



  void incrementCounter() {

    model.increment();

    updateData(model);

  }



  int get counter => model.counter;

}

四： 总结

通过实现基于MVC架构的Flutter应用程序，我们可以看到以下几点：

通过理解和应用MVC架构，我们可以更好地组织和管理Flutter应用程序的代码，提高代码质量和开发效率。同时，我们也可以通过学习和探索其他架构模式，如MVVM、Bloc、Redux等，来丰富我们的架构设计思路，进一步提升应用程序的性能和用户体验。

后续将探索MVVM等其他架构模式。

github.com/kongxiaoan/… 源码地址

要打造一个Flutter的快速开发框架，首先要思考的事情是一个快速开发框架需要照顾到哪些功能点，经过2天的思考，我大致整理了一下需要的能力：

• 状态管理：很明显全局状态管理是不可或缺的，这个在前端领域上，几乎是一种不容置疑的方案沉淀，他就像人体的血液循环系统，连接了每个区域角落。


• 网络请求管理：这个是标配了，对外的窗口，一般来讲做选型上需要注意可以支持请求拦截，支持响应拦截，以及错误处理机制，方便做重试等等。


• 路由管理：可以说很多项目路由混乱不堪，导致难以维护，和这个功能脱不了干系，一般来讲，需要支持到页面参数传递，路由守卫的能力。


• UI组件库：在Flutter上，可能不太需要考虑这个，因为Flutter本身自己就是已这个为利刃的行家了，不过现在有些企业发布了自己的UI库，觉得可以跟一下。


• 数据持久化：对于用户的一些设置，个性化配置，通常需要存在本地。而且，有时候，我们在做性能优化的时候，需要缓存网络请求到本地，以便，可以实现秒开页面，因此这依然也是一个不可获取的基础模块。


• 依赖注入：很多情况下，为了便于管理和使用应用中的服务和数据模型，我们需要这个高级能力，但是属于偏高级点的能力了，所以是一个optional的，你可以不考虑。


• 国际化：支持多语言开发，现在App一般都还是挺注重这块的，而且最好是立项的时候就考虑进来，为后续的出海做准备，因为这个越到后面，处理起来工作量越大。


• 测试框架：支持单元测试、组件测试和集成测试，保证业务质量，自动化发现问题。


• 调试工具：帮助开发者快速定位和解决问题，排查性能问题。


• CI/CD集成:支持持续集成和持续部署的解决方案，简化应用的构建、测试和发布过程。

那么，基于上面的分析，我就开始做了一些选型，这里基本上就是按照官方Flutter Favorites ,里面推荐的来选了。因为这些建议的库都是目前Flutter社区中比较流行和受欢迎的，能够提供稳定和高效的开发体验。

1. 状态管理：Riverpod

• 库名: flutter_riverpod


• 描述: 一个提供编译时安全、测试友好和易于组合的状态管理库。


• 选择理由: Riverpod 是 Provider 的升级版，提供更好的性能和灵活性，但是说哪个更好，其实不能一概而论，毕竟不同的人会有不同的编码习惯，当然这里可以设计得灵活一些，具体全局状态管理可以替换，即便你想使用 GetX，或者是 flutter_bloc 也是 OK 的。
  
  

  @riverpod
  Future boredSuggestion(BoredSuggestionRef ref) async {
  final response = await http.get(
  Uri.https('boredapi.com/api/activit…'),
  );
  final json = jsonDecode(response.body);
  return json['activity']! as String;
  }

  
  

  class Home extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
  final boredSuggestion = ref.watch(boredSuggestionProvider);
  // Perform a switch-case on the result to handle loading/error states
  return boredSuggestion.when(
  loading: () => Text('loading'),
  error: (error, stackTrace) => Text('error: $error'),
  data: (data) => Text(data),
  );
  }
  }

2. 网络请求管理：Dio

• 库名: dio


• 描述: 一个强大的Dart HTTP客户端，支持拦截器、全局配置、FormData、请求取消等。


• 选择理由: Dio 支持Restful API、拦截器和全局配置，易于扩展和维护。这个已经是老牌的网络请求库了，稳定的很，且支持流式传输，访问大模型也丝毫不马虎。
  
  

  final rs = await dio.get(
  url,
  options: Options(responseType: ResponseType.stream), // Set the response type to stream.
  );
  print(rs.data.stream); // Response stream.

3. 路由管理：routemaster

• 库名: routemaster


• 描述: 提供声明式路由解决方案，支持参数传递、路由守卫等。


• 选择理由: url的方式访问，简化了路由管理的复杂度。
  
  

  '/protected-route': (route) =>
  canUserAccessPage()
  ? MaterialPage(child: ProtectedPage())
  : Redirect('/no-access'),

4. UI组件库：tdesign_flutter

• 库名: tdesign_flutter


• 描述: 腾讯TDesign Flutter技术栈组件库，适合在移动端项目中使用。。


• 选择理由: 样式比原生的稍微好看且统一一些，大厂维护，减少一些在构建UI方面的复杂性。

5. 数据持久化：Hive

• 库名: hive


• 描述: 轻量级且高性能的键值对数据库。


• 选择理由: Hive 提供了高性能的读写操作，无需使用SQL即可存储对象。
  
  

  var box = Hive.box('myBox');

  
  

  box.put('name', 'David');

  
  

  var name = box.get('name');

  
  

  print('Name: $name');

6. 依赖注入：GetIt

• 库名: get_it


• 描述: 一个简单的服务注入，用于依赖注入。


• 选择理由: GetIt 提供了灵活的依赖注入方式，易于使用且性能高效。
  
  

  final getIt = GetIt.instance;

  
  

  void setup() {
  getIt.registerSingleton(AppModel());

  
  

  // Alternatively you could write it if you don't like global variables
  GetIt.I.registerSingleton(AppModel());
  }

  
  

  MaterialButton(
  child: Text("Update"),
  onPressed: getIt().update // given that your AppModel has a method update
  ),

7. 国际化和本地化：flutter_localization

• 库名: flutter_localization


• 描述: Flutter官方提供的国际化和本地化支持。


• 选择理由: 官方支持，集成简单，覆盖多种语言。

8. 测试和调试：flutter_test, mockito

• 库名: flutter_test (内置), mockito


• 描述: flutter_test提供了丰富的测试功能，mockito用于模拟依赖。


• 选择理由: flutter_test是Flutter的官方测试库，mockito可以有效地模拟类和测试行为。

9. 日志系统：logger

• 库名: logger


• 描述: 提供简单而美观的日志输出。


• 选择理由: logger支持不同级别的日志，并且输出格式清晰、美观。

10. CI/CD集成

CI/CD集成通常涉及外部服务，如GitHub Actions、Codemagic等，而非Flutter库。

目录规划

前面已经做完了选型，下来我们可以确立一下我们快速开发框架的目录结构，我们给框架取名为fdflutter，顾名思义，就是fast development flutter，如下：

fdflutter/

├── lib/

│   ├── core/

│   │   ├── api/

│   │   │   └── api_service.dart

│   │   ├── di/

│   │   │   └── injection_container.dart

│   │   ├── localization/

│   │   │   └── localization_service.dart

│   │   ├── routing/

│   │   │   └── router.dart

│   │   └── utils/

│   │       └── logger.dart

│   ├── data/

│   │   ├── datasources/

│   │   │   ├── local_datasource.dart

│   │   │   └── remote_datasource.dart

│   │   └── repositories/

│   │       └── example_repository.dart

│   ├── domain/

│   │   ├── entities/

│   │   │   └── example_entity.dart

│   │   └── usecases/

│   │       └── get_example_data.dart

│   ├── presentation/

│   │   ├── pages/

│   │   │   └── example_page.dart

│   │   └── providers/

│   │       └── example_provider.dart

│   └── main.dart

├── test/

│   ├── data/

│   ├── domain/

│   └── presentation/

├── pubspec.yaml

└── README.md

在这个结构中，我保持了核心功能、数据层、领域层和表示层的划分：

• core/api/: 使用Dio来实现ApiService，处理所有网络请求。


• core/di/: 使用GetIt来实现依赖注入，注册和获取依赖。


• core/localization/: 使用flutter_localization来实现本地化服务。


• core/routing/: 使用routemaster来实现路由管理。


• core/utils/: 使用logger来实现日志记录。


• data/: 数据层包含数据源和仓库，用于获取和管理数据。


• domain/: 领域层包含实体和用例，用于实现业务逻辑。


• presentation/: 表示层包含页面和Provider，用于显示UI和管理状态。


• test/: 测试目录包含各层的测试代码，使用flutter_test和mockito来编写测试。

我想，感兴趣的朋友们，可以私信我交流，我后续会在 GitHub 上放出该flutter 快速开发框架的 template 地址。

探索代码的无限可能，与老码小张一起开启技术之旅。点关注，未来已来，每一步深入都不孤单。

在业务开发的时候，经常会遇到某一个接口不能对外暴露，只能内网服务间调用的实际需求。

面对这样的情况，我们该如何实现呢？

1. 内外网接口微服务隔离

将对外暴露的接口和对内暴露的接口分别放到两个微服务上，一个服务里所有的接口均对外暴露，另一个服务的接口只能内网服务间调用。

该方案需要额外编写一个只对内部暴露接口的微服务，将所有只能对内暴露的业务接口聚合到这个微服务里，通过这个聚合的微服务，分别去各个业务侧获取资源。

该方案，新增一个微服务做请求转发，增加了系统的复杂性，增大了调用耗时以及后期的维护成本。

2. 网关 + redis 实现白名单机制

在 redis 里维护一套接口白名单列表，外部请求到达网关时，从 redis 获取接口白名单，在白名单内的接口放行，反之拒绝掉。

该方案的好处是，对业务代码零侵入，只需要维护好白名单列表即可；

不足之处在于，白名单的维护是一个持续性投入的工作，在很多公司，业务开发无法直接触及到 redis，只能提工单申请，增加了开发成本；

另外，每次请求进来，都需要判断白名单，增加了系统响应耗时，考虑到正常情况下外部进来的请求大部分都是在白名单内的，只有极少数恶意请求才会被白名单机制所拦截，所以该方案的性价比很低。

3. 方案三 网关 + AOP

相比于方案二对接口进行白名单判断而言，方案三是对请求来源进行判断，并将该判断下沉到业务侧。避免了网关侧的逻辑判断，从而提升系统响应速度。

我们知道，外部进来的请求一定会经过网关再被分发到具体的业务侧，内部服务间的调用是不用走外部网关的（走 k8s 的 service）。

根据这个特点，我们可以对所有经过网关的请求的header里添加一个字段，业务侧接口收到请求后，判断header里是否有该字段，如果有，则说明该请求来自外部，没有，则属于内部服务的调用，再根据该接口是否属于内部接口来决定是否放行该请求。

该方案将内外网访问权限的处理分布到各个业务侧进行，消除了由网关来处理的系统性瓶颈；

同时，开发者可以在业务侧直接确定接口的内外网访问权限，提升开发效率的同时，增加了代码的可读性。

当然该方案会对业务代码有一定的侵入性，不过可以通过注解的形式，最大限度的降低这种侵入性。

具体实操

下面就方案三，进行具体的代码演示。

首先在网关侧，需要对进来的请求header添加外网标识符: from=public

@Component

public class AuthFilter implements GlobalFilter, Ordered {

    @Override

    public Mono < Void > filter ( ServerWebExchange exchange, GatewayFilterChain chain ) {

         return chain.filter(

         exchange.mutate().request(

         exchange.getRequest().mutate().header('id', '').header('from', 'public').build())

         .build()

         )；

    }



    @Override

    public int getOrder () {

        return 0;

    }

 }

接着，编写内外网访问权限判断的AOP和注解

@Aspect

@Component

@Slf4j

public class OnlyIntranetAccessAspect {

 @Pointcut ( '@within(org.openmmlab.platform.common.annotation.OnlyIntranetAccess)' )

 public void onlyIntranetAccessOnClass () {}

 @Pointcut ( '@annotation(org.openmmlab.platform.common.annotation.OnlyIntranetAccess)' )

 public void onlyIntranetAccessOnMethed () {

 }



 @Before ( value = 'onlyIntranetAccessOnMethed() || onlyIntranetAccessOnClass()' )

 public void before () {

     HttpServletRequest hsr = (( ServletRequestAttributes ) RequestContextHolder.getRequestAttributes()) .getRequest ();

     String from = hsr.getHeader ( 'from' );

     if ( !StringUtils.isEmpty( from ) && 'public'.equals ( from )) {

        log.error ( 'This api is only allowed invoked by intranet source' );

        throw new MMException ( ReturnEnum.C_NETWORK_INTERNET_ACCESS_NOT_ALLOWED_ERROR);

            }

     }

 }



@Target({ElementType.METHOD})

@Retention(RetentionPolicy.RUNTIME)

@Documented

public @interface OnlyIntranetAccess {

}

最后，在只能内网访问的接口上加上@OnlyIntranetAccess注解即可

@GetMapping ( '/role/add' )

@OnlyIntranetAccess

public String onlyIntranetAccess() {

    return '该接口只允许内部服务调用';

}

 4. 网关路径匹配 



在DailyMart项目中我采用的是第四种：即在网关中进行路径匹配。









该方案中我们将内网访问的接口全部以前缀/pv开头，然后在网关过滤器中根据路径找到具体校验器，如果是/pv访问的路径则直接提示禁止外部访问。















使用网关路径匹配方案不仅可以应对内网接口的问题，还可以扩展到其他校验机制上。

譬如，有的接口需要通过access_token进行校验，有的接口需要校验api_key 和 api_secret，为了应对这种不同的校验场景，只需要再实现一个校验类即可，由不同的子类实现不同的校验逻辑，扩展非常方便。

最后说一句(求关注!别白嫖！)

如果这篇文章对您有所帮助，或者有所启发的话，求一键三连：点赞、转发、在看。

关注公众号：woniuxgg，在公众号中回复：笔记  就可以获得蜗牛为你精心准备的java实战语雀笔记，回复面试、开发手册、有超赞的粉丝福利！