Data binding using radio buttons and Web UI

Issue

I cannot get the following code for data-binding using radio inputs to work:

<!DOCTYPE html>

<html>
  <body>
    <div>
      <input type="radio" name='veggies' value="kale" bind-value={{name}}>Kale<br>
      <input type="radio" name='veggies' value="spinach" bind-value={{name}}>Spinach<br>
      <input type="radio" name='veggies' value="carrots" bind-value={{name}}>Carrots
    </div>

    <p>name = {{name}}</p>

    <script type="application/dart">

      import 'package:web_ui/web_ui.dart';

      @observable
      String name = "Carrots";

      void main() {}

    </script>
  </body>
</html>

The file is radio_binding.html.

When I build this file, I get an error in the out/radio_binding.html.dart file:

Error: line 42 pos 46: semicolon expected
  __t.listen(__e0.onChange, ($event) { {{name}} = 'kale'; });

Is this a bug or am I doing something wrong?

Solution

Try using this binding:

<div>
  <input type="radio" name='veggies' value="Kale" bind-value="name">Kale<br>
  <input type="radio" name='veggies' value="Spinach" bind-value="name">Spinach<br>
  <input type="radio" name='veggies' value="Carrots" bind-value="name">Carrots
</div>

And I don’t think you need the @observable, I just used:

String name = 'Spinach';

Answered By – Perry

Answer Checked By – David Goodson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.