Trying to create a custom marker with an icon image from the asset file using MarkerGenerator in flutter


I am trying to create a custom marker using asset image/ network image. I take that image and create a widget to do necessary styling and then I try to call MarkerGenerator which return a List<Uint8List>
MarkerGenerator. But I get the Uint8List without the asset image. I think the rendering of asset image is not completed before the MarkerGenerator was called. How can I call the MarkerGenerator after the completion of rendering assetImage.

import 'dart:typed_data';
import 'marker_helper.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class MyMarkerPage extends StatefulWidget {
    State<StatefulWidget> createState() {
        return _MyMarkerPageState();

class _MyMarkerPageState extends State<MyMarkerPage> {
    Uint8List imageInMemory;
    List<Uint8List> markerImage;
    void initState() {
        List<Widget> widgetList = new List();
        for (int i = 0; i < 1; i++) {
                height: 50,
                width: 50,
                padding: EdgeInsets.all(10),
                child: Image.asset("assets/myImage.jpg"),
         MarkerGenerator(widgetList, (bitmaps) {
             setState(() {
                 markerImage = bitmaps;

     Widget build(BuildContext context) {
         return new Scaffold(
             appBar: new AppBar(
                 title: new Text('Widget To Image'),
             body: SingleChildScrollView(
                 child: Center(
                     child: new Column(
                         children: <Widget>[
                         markerImage != null
                         ? Container(
                         child: Image.memory(markerImage[0]),
                         margin: EdgeInsets.all(10))
                         : Container(),


The solution would be to wrap the MarkerGenerator.generate content in Future.delayed with 50ms. You could also try another timing.

Future.delayed(Duration(milliseconds: 50), () {
          .addPostFrameCallback((_) => afterFirstLayout(context));

Answered By – wileykay311

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *