Why don't the Target 8 files implement the project as described in the tutorial?

Issue

In Target 8: Define a Custom DOM Tag, the reader is told about custom DOM tags that can be created by extending other tags. A sample is described for an example called “x-converter” before listing the files as “These files implement the app:”.

The three files are…

I tried creating a new application in the latest Dart editor, and replaced the default HTML file contents with that of drseuss.html, replaced the default dart file contents with that of convertercomponent.dart, and added converter-element.html file.

After fixing an include issue (the file from the tutorial refers to drseuss.css and not the default project name’s CSS file), I only see the following in the Chromium browser.

No element as shown in the tutorial!

As you can see, the element described in the tutorial (converter-element) doesn’t show up. Why don’t the files provided for the project result in what’s shown in the tutorial?

For reference, here’s what’s shown in the tutorial.

enter image description here

Solution

Web UI requires the build.dart script which compiles the various components into the executable output HTML+Dart.

Take a look at the parent folder in the github src that you reference, and you will see the build.dart script.

In addition, you will need the pubspec.yaml from that folder, too, which includes web_ui package, which brings in the dwc tool(Dart Web Components compiler) used by build.dart.

Take a look at the article Tools for Web UI for more information about dwc and build.dart, and Target 6 – Getting Started with Web UI which covers similar ground, but in a tutorial format.

Answered By – Chris Buckett

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

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