Flutter 将文字转换成图片（widget转换成图片）并下载

原创

于 2023-02-21 15:04:55 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

该文介绍了如何在Flutter应用中利用RepaintBoundary和RenderRepaintBoundary将文本组件转换为图片，再通过Uint8List存储图像数据，并使用download插件下载生成的头像。示例代码展示了从生成到下载的完整过程。

需求

需要根据用户名字生成头像，并进行下载

依赖

用于图片下载的插件：download 1.0.0
地址：https://pub.dev/packages/download

思路

1、flutter 中组件RepaintBoundary和RenderRepaintBoundary可用于将widget转换成图片
2、使用RepaintBoundary将组件包裹，使用RenderRepaintBoundary 进行处理，可以生成该图片的Uint8List字节数组
3、然后使用Image.memory（）可将图片展示
4、使用download 插件将图片下载

代码

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:download/download.dart';
import 'dart:ui' as ui;

void main() {
   
   
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
   
   
  const MyApp({
   
   super.key});

  @override
  Widget build(BuildContext context) {
   
   
    return MaterialApp(
      home: Scaffold(body: PngHome()),
    );
  }
}

class PngHome extends StatefulWidget {
   
   
  const PngHome({
   
   Key? key})