Flutter Raw Image Provider

2021-06-20 Flutter

Flutter 中的 Image Widget 内置支持 file、network、memory三种形式的文件。
但这几种都只支持常规的经过压缩后的图片文件或二进制数据，如jpg、png、webp文件等。并没有支持原始的rgba 二进制数据。
这里说的原始二进制数据是指图像的每个像素的色彩值所组成的字节数组。一张图有宽x高个像素点，一个像素点的色彩值用32bit来存储，分为4个通道，每个通道各占用8bit，分别为红、绿、蓝、透明度（RGBA），这个数组就是每个像素点色彩值的集合，dart 中一般用Uint8List。

一般情况下，考虑网络传输效率，会采用算法来压缩这个数据，故而你会看到有各种各样的图像压缩算法和文件格式。

你可能会问什么情况下会有需要直接去加载一张图的原始rgba数据？

这里举个简单例子：分块加载图片。将图片解码后，分割成一个个矩形区域，每个矩形就有一个 raw rgba 数据，将其交给Image渲染，这样做可以降低一定的GPU 内存压力，减少出现GPU OOM 或黑屏的概率。（可以参考我的试验项目：https://github.com/yrom/image_pieces）

要支持 raw rgba ，其实很简单，在 dart:ui包下有个方法decodeImageFromPixels可以直接使用，前提是需要有原始的二进制数据、宽、高。

import 'dart:ui';

Future<Image> decodeRawRgba(ByteData bytes, int width, int height) {
  final Completer<Image> completer = Completer<Image>();
  decodeImageFromPixels(
    bytes.buffer.asUint8List(),
    width,
    height,
    PixelFormat.rgba8888,
    completer.complete,
  );
  return completer.future;
}

有了这个 Image(dart:ui)对象就可以交给 RawImage Widget 来加载了。但RawImage太过于底层了，能不能只用 Image Widget呢？因为需要复用 LoadingBuilder这些逻辑。

当然可以。查看一下 Image Widget 的构造函数就知道，我们需要一个 ImageProvider，那么问题进一步简化到如何写一个ImageProvider 支持 raw rgba 数据。

实现一个 ImageProvider，我们需要实现 load这个关键方法。以MemoryImage为例：

class MemoryImage extends ImageProvider<MemoryImage> {
  @override
  ImageStreamCompleter load(MemoryImage key, DecoderCallback decode) {
    return MultiFrameImageStreamCompleter(
      codec: _loadAsync(key, decode),
      scale: key.scale,
      debugLabel: 'MemoryImage(${describeIdentity(key.bytes)})',
    );
  }

  Future<ui.Codec> _loadAsync(MemoryImage key, DecoderCallback decode) {
    return decode(bytes);
  }
}

很显然，我们需要想一个方法构造出raw rgba 数据的 Codec。

瞎拍 - 顾村寻花

2021-03-14 Photo

植树节刚过，上海也结束了细雨绵绵的天气，稍稍放晴，正好周末，前往顾村公园看看樱花开了没。

到了公园，花是没见着，人却许多。

紫叶李？

往深处走，这种长着红叶的树，簇着花，密密麻麻，独占风头。百度识图告诉说是“紫叶李”，希望没认错。

紫叶李？

粉色的摩天轮，在上面看樱花视野应该不错，想想而已。

还有这种白如凝脂的花，点缀公园，在一众光溜溜的树干里煞是好看。

瞎拍 - 留沪过年

2021-02-13 Photo

过年前疫情闹得凶，吓得我把回家票给退了……

谁知上海还是比较给力，没有扩散，却再买不着回去的票，只好一边上班一边摸鱼用盒马囤了许多年货。

就这样，一人一猫留沪过年。

细雨声中，捣鼓好了一个人的年夜饭。

http/2 over http tunnel proxy for Dart

2020-12-22 Dart

Flutter 项目里用到了 http2 包 (https://pub.dev/packages/http2) 。但官方似乎没有支持 http proxy ，转念一想，似乎也对，proxy 这层不属于 http2 协议该负责实现的事。

研究了一下 http/1.1 tunnel proxy 的协议（RFC 2817）发现其实挺简单的。

这里直接放出示例了，仅供参考哦（需要登录的 proxy 就留给你自己实现了）。

import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:http2/http2.dart';

void main() async {
  var uri = Uri.parse('https://cn.bing.com/search?q=http2');
  var transport = await connectTunnel('127.0.0.1', 8888, uri.host);
  var headers = [
    Header.ascii(':method', 'GET'),
    Header.ascii(':path', uri.hasQuery ? uri.path + '?' + uri.query : uri.path),
    Header.ascii(':scheme', uri.scheme),
    Header.ascii(':authority', uri.host),
  ];
  var stream = transport.makeRequest(headers, endStream: true);
  var bodyStream = StreamController<List<int>>();
  utf8.decoder.bind(bodyStream.stream).listen((body) {
    print(body);
  });
  await for (var message in stream.incomingMessages) {
    if (message is HeadersStreamMessage) {
      for (var header in message.headers) {
        var name = utf8.decode(header.name);
        var value = utf8.decode(header.value);
        print('Header: $name: $value');
      }
    } else if (message is DataStreamMessage) {
      bodyStream.add(message.bytes);
      if (message.endStream) {
        bodyStream.close();
      }
    }
  }
  if (!bodyStream.isClosed) {
    await bodyStream.close();
  }
  await transport.finish();
}

Future<ClientTransportConnection> connectTunnel(String proxyHost, int proxyPort, String targetHost,
    [int targetPort = 443]) async {
  var proxy = await Socket.connect(proxyHost, proxyPort, timeout: const Duration(seconds: 1));
  const CRLF = "\r\n";
  proxy.write("CONNECT $targetHost:$targetPort HTTP/1.1"); // request line
  proxy.write(CRLF);
  proxy.write("Host: $targetHost:$targetPort"); // header
  proxy.write(CRLF);
  proxy.write(CRLF);
  var completer = Completer<bool>.sync();
  var sub = proxy.listen((event) {
    var response = ascii.decode(event);
    var lines = response.split(CRLF);
    // status line
    var statusLine = lines.first;
    if (statusLine.startsWith("HTTP/1.1 200")) {
      completer.complete();
    } else {
      completer.completeError(statusLine);
    }
  }, onError: completer.completeError);
  await completer.future; // established
  await sub.pause();

  var socket = await SecureSocket.secure(proxy, host: targetHost, supportedProtocols: const ["h2"]);
  return ClientTransportConnection.viaSocket(socket);
}

用一个简单示例告诉你怎样提升 Flutter App 中的动画性能

2020-11-16 Flutter

观前提醒：本文假设你已经有一定的 Flutter 开发经验，对Flutter 的 Widget,RenderObject 等概念有所了解，并且知道如何开启 DevTools。

现有一个简单的汽泡动画需要实现，如下图：

bubble animation

直接通过 AnimationController 实现

当看到这个效果图的时候，很快啊，啪一下思路就来了。涉及到动画，有状态，用 StatefulWidget ，State 里创建一个 AnimationController，用两个 Container 对应两个圈，外圈的 Container 的宽高监听动画跟着更新就行。
代码如下：

const double size = 56;

class BubbleAnimationByAnimationController extends StatefulWidget {
  @override
  _BubbleAnimationByAnimationControllerState createState() => _BubbleAnimationByAnimationControllerState();
}

class _BubbleAnimationByAnimationControllerState extends State<BubbleAnimationByAnimationController>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..addListener(() => setState(() {}));
    _controller.repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 两个 `Container` 对应两个圈
    return Container( 
      alignment: Alignment.center,
      constraints: BoxConstraints.tight(
        Size.square((1 + _controller.value * 0.2) * size),
      ),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue[200],
      ),
      child: Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
        ),
        width: size,
        height: size,
        child: Text(
          'Hello world!',
          style: TextStyle(color: Colors.white, fontSize: 12),
        ),
      ),
    );
  }
}

介绍一位新成员

2020-09-20 Cat

雄赳赳气昂昂
过年立的 Flag —— 拥有一只猫主子 —— 达成。撒花 ╮(￣▽￣)╭

不要抢我的玩具！
一只原主人卖不出去的雄性假布偶。

瞎拍 - 夏至厦门

2020-08-16 Photo

算起来，厦门只去过几回，也没怎么仔细逛过，这次趁人少，顺便去了一回鼓浪屿。

鼓浪屿月光岩上看厦门岛。

Flutter Logging

2020-07-08 Flutter

1. Install package `logging`

Add logging to pubspec.yaml file:

pubspec.yaml

1 2	dependencies: logging: ^0.11.4

2. Config `Logger`

Initialize Logger before runApp() in main.dart file:

main.dart

import 'logging.dart';
void main() {
  // config logger before runApp()
  initLogging();
  runApp(MyApp());

  // log a debug message
  log.fine('Running my flutter app.');
}

logging.dart

import 'package:logging/logging.dart';

// create Logger by name 'MyApp'
final log = Logger('MyApp');
void initLogging() {
  // disable hierarchical logger
  hierarchicalLoggingEnabled = false;
  // change to another level as needed.
  Logger.root.level = Level.INFO;
  // skip logging stactrace below the SEVERE level.
  recordStackTraceAtLevel = Level.SEVERE;
  assert(() {
    recordStackTraceAtLevel = Level.WARNING;
    // print all logs on debug build.
    Logger.root.level = Level.ALL;
    return true;
  }());
}

3. Transmit log records from Logger to `dart:developer`

Logger is a producer, but it will not post any log records if no one is listening.

Print to console:

logging.dart

1
2
3

Logger.root.onRecord.listen((event) {
  print("${event.time}: [${event.level}] [${event.loggerName}] ${event.message}");
});

Save to file:

logging.dart

File logFile = ...
Logger.root.onRecord.listen((event) {
  logFile.writeAsString("${event.time}: [${event.level}] [${event.loggerName}] ${event.message}",
    mode: FileMode.append);
});

It’s strongly recommended to use dart:developer for logging:

logging.dart

import 'dart:developer' as developer;

void initLogging() {
  ...
  Logger.root.onRecord.listen((event) {
    developer.log(
      event.message,
      time: event.time,
      sequenceNumber: event.sequenceNumber,
      level: event.level.value,
      name: event.loggerName,
      zone: event.zone,
      error: event.error,
      stackTrace: event.stackTrace,
    );
  });
}

Flutter HttpClient Overview

2020-06-18 Flutter

Flutter 上应该怎么请求http？很简单，直接用 dart:io包下的 HttpClient，如下代码：

HttpClient client = HttpClient();
client.getUrl(Uri.parse("https://yrom.net/"))
    .then((HttpClientRequest request) => request.close())
    .then((HttpClientResponse response) {
        print('Response status: ${response.statusCode}');
        response.transform(utf8.decoder).listen((contents) {
         print('${contents}');
       });
    });
// client.close();

但你肯定也发现了 dart:io 的 HttpClient 所提供的API太过底层了，所以一般不会直接用，而是用Dart官方提供的 http 包(package:http)，如下代码：

import 'package:http/http.dart';

Client client = Client();
var url = 'https://yrom.net';
var response = await client.get(url);
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');

print(await client.read('https://yrom.net'));

// client.close();

或者有很多人喜欢的 dio。

但无论怎么封装API，底层都还是 dart:io里的HttpClient。

你可能一直有疑问，不是说 Flutter 是单线程的，那 http 请求难道不会卡住 UI 线程，导致 UI 无响应吗？

Flutter 同步系统的 HTTP 代理设置

2020-04-09 Flutter

一般的，在 Flutter APP 里请求 HTTP 使用的是官方提供的 http 包。

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

var url = 'https://jsonplaceholder.typicode.com/posts';
var response = await http.get(url);
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');

print(await http.read('https://jsonplaceholder.typicode.com/posts/1'));

但是，有一个问题，在 Android 或者 iOS 上运行 Flutter APP，系统里配置的 HTTP 代理并不生效？

比如在使用 Charles 这种工具通过 HTTP 代理调试 API 请求时候，会发现 Flutter 的 http 请求没有按预期走代理，无论是 Http 还是 Https。

直接通过 AnimationController 实现

1. Install package logging

2. Config Logger

3. Transmit log records from Logger to dart:developer

1. Install package `logging`

2. Config `Logger`

3. Transmit log records from Logger to `dart:developer`