skip to Main Content

I am trying to retrieve input elements from the DOM in a Flutter Web app, but so far I have not been successful, and I’m not even sure if it can be achieved.

For example:

TextField(
  key: const Key('referenceNumber'),
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Reference Number',
  ),
  onChanged: (text) {
    setState(() {
      referenceNumber = text;
    });
  },
),

Does Flutter generate an <input> element for this TextField widget?

In my Flutter-generated web app, I need to integrate a JavaScript library that requires the ability to identify the generated DOM elements.

2

Answers


  1. I believe that this is simply unsupported.

    It clearly cannot work with the "canvaskit" web renderer, because then it’s just one canvas from browser’s (DOM’s) point of view.

    In theory it could work to some extent with the "html" web renderer, but it would require flutter libraries to adhere to some new contract, taking away their flexibility to make changes – which I believe they never do.

    Login or Signup to reply.
  2. I found two links on this topic and one Flutter’s own document on the internet.

    Getting Dom Element from flutter webview: https://gist.github.com/fredriccliver/97f98965d765107086ea045ee7c7909b

    Element Embedding in Flutter Web: https://medium.com/simform-engineering/element-embedding-in-flutter-web-ef764fc64410

    Add elements to the DOM(dart.dev): https://dart.dev/tutorials/web/low-level-html/add-elements

    Especially the last link, I think Flutter’s own document will solve the problem. I hope I could help. Enjoy your work.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search