adding image to the custom element in Dart lang


I’m making a fab icon custom element, like the one in the material design, and want to add image (icon image), but could not.

I tried 3 approachs:

  1. Adding .src to the
  2. Adding .src to ImageElement
  3. Adding .src to ButtonElement

I also tried using 2 types of images

  1. PNG
  2. SVG

my code is below:

part of fonix_client_library;

 upgradeFonixFab() =>  
    document.registerElement(FonixFab.tag, FonixFab);

 class FonixFab extends HtmlElement {
 static final tag = 'fonix-fab';
 ShadowRoot shadow;

 ButtonElement innerButton;
 ImageElement innerImage;

 factory FonixFab() => (new Element.tag(tag) as FonixFab);

 FonixFab.created() : super.created() {

 shadow = this.createShadowRoot();
 //'ic_create_24px.svg'  <- did not work
 //'ic_create_24px.png'  <- did not work'inline-block' = 'fixed''15px''15px''none' = 'none''pointer''1' = 'border-box''26px''26px' = '#d23f31''#fff''50%''2px''1px'

innerImage = new ImageElement ()'ic_create_24px.svg'; //  <- did not work

innerButton = new ButtonElement()
 //'ic_create_24px.svg'  <- did not work
 //'ic_create_24px.png'  <- did not work
   ..text="+"                        // <- This is fine for using +, but I need to use image instead'pointer' 'white'"0px"'#d23f31''5px';   

  shadow.nodes.add(innerButton);  OR shadow.nodes.add(innerImages);


 void attached() {
  super.attached();{"#333"; //'#FF8F66';
  });{'#ffd9cc''none';  // remove the focus outline/glur
  });>'0px 0px 5px #888888');>'0px 0px 0px');


any though?


You need to add an image tag and set the src attribute there <img src="xxx.png">

Answered By – Günter Zöchbauer

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

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