Using CoreScaffold and CoreTabs classes now causes Exception

Issue

I have a polymer element called main-app:

    <link rel="import" href="../../packages/polymer/polymer.html">

    <link rel="import" href="../../packages/paper_elements/paper_input.html">
    <link rel="import" href="../../packages/paper_elements/paper_input.html">
    <link rel="import" href="../../packages/paper_elements/paper_tabs.html">
    <link rel="import" href="../../packages/paper_elements/paper_dialog.html">
    <link rel="import" href="../../packages/paper_elements/paper_icon_button.html">
    <link rel="import" href="../../packages/core_elements/core_toolbar.html">
    <link rel="import" href="../../packages/core_elements/core_scaffold.html">
    <link rel="import" href="../../packages/core_elements/core_header_panel.html">
    <link rel="import" href="../../packages/core_elements/core_menu.html">
    <link rel="import" href="../../packages/core_elements/core_item.html">
    <link rel="import" href="../../packages/paper_elements/paper_input.html">
    <link rel="import" href="../../packages/paper_elements/paper_button.html">
    <link rel="import" href="../../packages/paper_elements/paper_dialog.html">
    <link rel="import" href="../../packages/core_elements/core_scaffold.html">
    <link rel="import" href="../../packages/core_elements/core_pages.html">

    <polymer-element name="main-app" class="dark-primary-color">
        <template>
            <style type="text/css">
                :host {
                    display: block;
                }
            </style>
            <core-scaffold>

                <core-header-panel id="menu-panel" navigation flex>

                    <core-toolbar id="navheader">
                        <span>Menu</span>
                    </core-toolbar>
                    <core-menu>
                        <core-item label="Home" on-click="{{homeClicked}}"></core-item>
                        <core-item label="About Us" on-click="{{aboutClicked}}"></core-item>
                        <core-item label="Contact Us" on-click="{{contactClicked}}"></core-item>
                    </core-menu>
                </core-header-panel>

                <span tool>{{title}}</span>
                <paper-tabs class="main-menu bottom fit" selected="0">
                    <paper-tab on-click="{{homeClicked}}">Home</paper-tab>
                    <paper-tab on-click="{{aboutClicked}}">About Us</paper-tab>
                    <paper-tab on-click="{{contactClicked}}">Contact Us</paper-tab>
                </paper-tabs>
                <div class="content" forceNarrow>
                    <p>Lorem ipsum ...</p>
                </div>

                ...
            </core-scaffold>
        </template>
        <script type="application/dart" src="main-app.dart"></script>
    </polymer-element>

main-app.dart:

import 'package:polymer/polymer.dart';
import 'util/util.dart';
import 'event/event.dart';

import 'dart:html';

import 'page/home-page.dart';
import 'page/about-page.dart';
import 'page/contact-page.dart';

@CustomTag('main-app')
class MainApp extends PolymerElement {

  @observable String page = "home";
  @observable String title = "Home";

  MainApp.created() : super.created();

  ...

  homeClicked(event, detail, target) {
    CoreScaffold e = shadowRoot.querySelector('core-scaffold');
    e.doSomething <<-- fails
    ...
  }

  ...

}

This is the exception I’m getting:

Exception: 'package:falm/main-app.dart': malformed type: line 73 pos 5: type 'CoreScaffold' is not loaded
    CoreScaffold e = shadowRoot.querySelector('core-scaffold');
    ^
type 'CoreScaffold' is not a subtype of type 'malformed' of 'e'.

To get rid of the exception, I now have to do:

  homeClicked(event, detail, target) {
    Element e = shadowRoot.querySelector('core-scaffold');
    e.doSomething <<-- works
    ...
  }

The code that is failing was working until a dart update yesterday morning (not sure from which version I updated as I reinstalled the SDK completely before doing a full pub upgrade, pub cache repair and pub download), PaperTabs is doing the same thing.

Does this mean I can no longer use CoreElement and PaperTabs classes in my dart code?

Update: here are the relevant bits and pieces from pubspec.lock:

core_elements:
    description: core_elements
    source: hosted
    version: "0.6.0+4"
paper_elements:
    description: paper_elements
    source: hosted
    version: "0.6.0+4"
  polymer:
    description: polymer
    source: hosted
    version: "0.15.5"
  polymer_expressions:
    description: polymer_expressions
    source: hosted
    version: "0.13.0+1"
  web_components:
    description: web_components
    source: hosted
    version: "0.10.1"

Solution

You need to import the libraries where the class is defined.

import 'package:core_elements/core_scaffold.dart'; 
import 'package:paper_elements/paper_tabs.dart';

checked/unchecked

When you run a Dart script from command line the default is production mode (unchecked mode). dart bin/somescript.dart, or checked mode when set explicitely like dart -c bin/somescript.dart.

When you launch a Dart script or web app from DartEditor default is checked mode. DartEditor allows to (de)activate Run in checked mode in Manage Launches (run configurations).

I assume there is a similar setting in Dart plugin for Eclipse (don’t use it myself).

WebStorm allows to set it for command line apps in Run > Edit Configurations ... . For web apps you can create a new browser config and add --checked in the Command line options.

I assume it’s similar in IntelliJ IDEA but I haven’t used it myself yet.

Answered By – Günter Zöchbauer

Answer Checked By – Jay B. (FlutterFixes Admin)

Issue

Solution

Leave a Reply Cancel reply