adding image to the custom element in Dart lang

Issue

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 shado.host
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;

@init()
 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();

 shadow.host
 //   ..style.src='ic_create_24px.svg'  <- did not work
 //   ..style.src='ic_create_24px.png'  <- did not work
  ..style.display='inline-block'
  ..style.position = 'fixed' 
  ..style.right='15px'
  ..style.bottom='15px'
  ..style.outline='none'
  ..style.userSelect = 'none'
  ..style.cursor='pointer'
  ..style.zIndex='1'
  ..style.boxSizing = 'border-box'
  ..style.width='26px'
  ..style.height='26px'
  ..style.background = '#d23f31'
  ..style.color='#fff'
  ..style.borderRadius='50%'
  ..style.paddingTop='2px'
  ..style.paddingLeft='1px'
  ;

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

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


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

}

 @override
 void attached() {
  super.attached();

  shadow.host.onMouseDown.listen((e){ 
  shadow.host..style.color="#333"
     ..style.background=themeColor; //'#FF8F66';
  });
  shadow.host.onMouseUp.listen((e){ 
     shadow.host..style.color=themeColor
     ..style.background='#ffd9cc'
     ..style.outline='none';  // remove the focus outline/glur
  });
  shadow.host.onMouseEnter.listen((e)=> shadow.host..style.boxShadow='0px 0px 5px #888888');
  shadow.host.onMouseLeave.listen((e)=> shadow.host..style.boxShadow='0px 0px 0px');
 }

 Remove(){
 this.remove();
 } 
}

any though?

Solution

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)