How to Make image from flutter material widget on server side

Question

I have tried several times but failed, I have also dissected the [image] and pdf libraries, but I don't understand how to create a widget to an image on the server side only,

does anyone know how to make a widget to an image on serverside only?

here's the code I tried

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:ui' as ui; 
void main() async {
  GlobalKey globalKey = GlobalKey();
  RepaintBoundary(
    key: globalKey,
    child: Container(
      padding: const EdgeInsets.all(50),
      child: const Text(
        "Hello world",
      ),
    ),
  );
  RenderRepaintBoundary boundary = globalKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
  ui.Image image = await boundary.toImage();
  ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  Uint8List pngBytes = byteData!.buffer.asUint8List();
  print(pngBytes);
}
 

Answer 1

Flutter isn't meant to be used on the server side, but if you simply want to render an image with some text on the server, there are dart libraries for that.

For example, using the image library, you can do something like this:

import 'dart:io';

import 'package:image/image.dart';

void main() {
  final white = 0xFFFFFFFF;
  final black = 0xFF000000;

  final whiteRect = fill(Image(200, 100), white);

  final helloWorld = drawStringCentered(
    whiteRect,
    arial_24,
    "Hello, World!",
    color: black,
  );

  final data = encodePng(helloWorld);

  final file = File('test.png');

  // Save the image to '$PROJECT_ROOT/test.png'
  file.writeAsBytes(data);
}

Which will create this output: