This time we want to get the data from the database directly. We will use the sqljocky package to do this. First of all we create a new console dart application. After that we need to get the package from the pub.

Create a pubspec.yaml file in the project and add the following text:

name: my_app
dependencies:
web_ui: any

Rightclick on the pubspec.yaml file and choose Tools > Pub Install.

Now you can see a new package in the packages folder:

In the .dart file we now need to add the import to the package:

import 'package:sqljocky/sqljocky.dart';

Now we can access this package. The following code is doing the whole action:

I recently searched for a Google Now Card library and I found CardsUILib. But I wanted a card with a picture, so I can use it in my quiz app. So I edited the whole library a bit and the result is that:

This way, we can simply loop through a list and do something with the objects. In this case we map the value with the key ‘id’ or ‘album’ and create a Cd-Object with it. After that we add it to a list of Cd’s we defined earlier.

So, as wee see this is working pretty well. And now we do almost the some for a small web application.

Dart Web Application

As in the console application we define a CD-Object. After that we use the following code in the main-method:

This is simply setting the text of our HTML-element, with the id ‘counter’, and adding an OnClickEvent. This is very similar to Java, not the syntax, but the structure how you work with it. So now we need to create the OnClickEvent.

If you know how Java-Syntax is working, this code isn’t hard to understand. But I think the query-command is quite confusing if you us it the first few times. As you see, I did a lot of filetype-parsing.

To run the application simply hit Ctrl + R (I don’t know how this is on Mac ^^). A modified version of chromium is now starting and will run the application. It should look like this now: