How to detect that a polymer button has been clicked in the dart class

Issue

I want to be able to catch the click event on the paper button and change the “clic me” text.

my-module.html:

<dom-module id="my-module">
 <template>
  <paper-button>{{btnTxt}}</paper-button>
 </template>
 <script type="application/dart" src="my-module.dart"></script>
</dom-module>

my-module.dart:

@HtmlImport('my-module.html')
library blink.my_module;

import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;

@PolymerRegister('my-module')
class MyModule extends PolymerElement {

  @property String btnTxt = "Clic me!";

  MyModule.created() : super.created();
}

Solution

OK, to do so you have to add this to the following files:

my-module.html:

//Adding the 'on-tap' tag with the dart methode name attribute, can also use 'on-click'
<paper-button on-tap="btnClicked">{{btnTxt}}</paper-button>

my-module.dart:

@PolymerRegister('my-module')
class MyModule extends PolymerElement {

  @property String btnTxt = "Clic me!";

  MyModule.created() : super.created();

  //this method will listen for the linked event in the html
  @reflectable
  void btnClicked(Event e, [_]) {
    set('btnTxt', btnTxt = 'Button Clicked!');
  }

}

Answered By – user1585121

Answer Checked By – Jay B. (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.