CODEWITHSUNDEEP
androidflutterflutter-layoutgoogle-maps-flutter
Sid
Sid

Reputation: 175

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 {
    @override
    State<StatefulWidget> createState() {
        return _MyMarkerPageState();
    }
}

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

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

Upvotes: 2

Views: 364

Answers (2)

Pete Alvin
Pete Alvin

Reputation: 4800

If I'm understanding your problem and the MarkerGenerator's author's article you need to use https://pub.dev/packages/after_layout in step 3 of his article: https://infinum.com/blog/creating-custom-markers-on-google-maps-in-flutter-apps/.

@override
void afterFirstLayout(BuildContext context) {
  getUint8List(markerKey).then((markerBitmap) =>
    // Set state and use your markerBitmap
  );
}

Quoting the article:

I’ve shown you how to get RenderObject and convert it to Uint8List, but when do you call this method?

We need to get our bitmaps right after they are drawn. There are multiple ways to do this, I use tiny AfterLayoutMixin

Upvotes: 0

wileykay311
wileykay311

Reputation: 106

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), () {
    WidgetsBinding.instance
          .addPostFrameCallback((_) => afterFirstLayout(context));
});

Upvotes: 1

Related Questions