CODEWITHSUNDEEP
imageflutter
user6097845
user6097845

Reputation: 1437

Flutter easily composite / overlay PNG images from the assets directory

Looking for a simple and fast example / tutorial to composite / overlay several images in Flutter, using (PNG) images from the assets directory:

enter image description here

Few options I've examined:

  1. Manipulate Uint8List and use it in image.Memory
  2. Use canvas.drawAtlas in my own Painter
  3. use the image library (which seems a bit overkill in this case

Couldn't find any working example that suits my needs... I'd appreciate any working example / tutorial that will help me, thanks!

Upvotes: 1

Views: 1027

Answers (1)

Jim
Jim

Reputation: 7601

4.Use combination of Stack and RepaintBoundary to generate new image:

Future<Uint8List> _takeScreenShot(context) async {
    RenderRepaintBoundary boundary = _repaintKey.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage(pixelRatio: 2.0);
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    return pngBytes;
}

Stack(
  key: _repaintKey,
  children: [
    //your background image,
    //your png image,
  ],
)

Upvotes: 2

Related Questions