Handling bootstrap4 modals in Dart


I need to call bootstrap modals from Dart code and this is what I’ve tried (using the js library):

class jQuery {


  external dynamic modal(func);

class Modal extends jQuery {

  Modal(obj) : super(obj);

  dynamic toggle() => super.modal('toggle');
  dynamic show() => super.modal('show');
  dynamic hide() => super.modal('hide');
  dynamic handleUpdate() => super.modal('handleUpdate');
  dynamic dispose() => super.modal('dispose');


in that code if I use the jQuery class directly I get no issues (jQuery.modal('show')) but if I use the Modal methods i.e.:

Modal modal = Modal('#myModal');

I will get a TypeError: Cannot read property 'call' of undefined (NullError) .

The javascript the code is jQuery('#myModal').modal(func)

My second issue is how to hook a custom event for example: show.bs.modal in jQuery I would use .on(...) but in Dart I have no clue, I’ve used element.addEventListener('show.bs.modal', onModalShown) but it isn’t triggered and I don’t get any errors.


you defined the jquery class but you need to get it from the window and you also need to defined you modal using @JS annotation, I don’t think you can extend the jQuery class

I would have done like that

external dynamic jQuery(query);

class ModalElement {
  external modal(String call);
  external on(String event, Function callback);

final modal = jQuery('#myModal') as ModalElement;

modal.on('event', allowInterop((event) {}));

Answered By – Hadrien Lejard

Answer Checked By – Mildred Charles (FlutterFixes Admin)

Leave a Reply

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