DEV Community: Rody Davis

Building a Rich Text Editor with Lit

Rody Davis — Wed, 26 May 2021 00:00:00 +0000

In this article I will go over how to set up a Lit web component and use it to create a rich text editor.

TLDR The final source here and an online demo.

Prerequisites #

Vscode
Node >= 12
Typescript

Getting Started #

We can start off by navigating in terminal to the location of the project and run the following:

npm init @vitejs/app --template lit-element-ts

Then enter a project name lit-rich-text-editor and now open the project in vscode and install the dependencies:

cd lit-rich-text-editornpm i @material/mwc-icon-buttonnpm i -D @types/nodecode .

Update the vite.config.ts with the following:

import { defineConfig } from "vite";import { resolve } from "path";export default defineConfig({ base: '/lit-rich-text-editor/', build: { lib: { entry: "src/lit-rich-text-editor.ts", formats: ["es"], }, rollupOptions: { input: { main: resolve(__dirname, "index.html"), }, }, },});

Template #

Open up the index.html and update it with the following:

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" /> <title>Lit Rich Text Editor</title> <script type="module" src="/src/lit-rich-text-editor.ts"></script> <style> body { padding: 0; margin: 0; } lit-rich-text-editor { --editor-width: 100%; --editor-height: 100vh; } </style> </head> <body> <lit-rich-text-editor> <template> <h1>Headline 1</h1> <p>This is a paragraph.</p> <p> <span style="background-color: rgb(255, 0, 0)" ><font color="#ffffff">Styled Text</font></span > </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </template> </lit-rich-text-editor> </body></html>

The important things to take away are the styles added to remove the body padding and send size CSS Custom Properties to the editor to take up the full viewport.

Inside the lit-rich-text-editor tags there is a template passed as a slot to provide html that will not be rendered but can be accessed.

There is also an import for the Material Icons so it can be used in the editor later.

Editor #

The next thing to create is the editor itself. Open up src/lit-rich-text-editor.ts and update it with the following:

import { LitElement, html, customElement, css, state } from "lit-element";import "@material/mwc-icon-button";@customElement("lit-rich-text-editor")export class LitRichTextEditor extends LitElement { @state() content: string = ""; @state() root: Element | null = null; static styles = css` :host { --editor-width: 600px; --editor-height: 600px; --editor-background: #f1f1f1; --editor-toolbar-height: 33px; --editor-toolbar-background: black; --editor-toolbar-on-background: white; --editor-toolbar-on-active-background: #a4a4a4; } main { width: var(--editor-width); height: var(--editor-height); display: grid; grid-template-areas: "toolbar toolbar" "editor editor"; grid-template-rows: var(--editor-toolbar-height) auto; grid-template-columns: auto auto; } #editor-actions { grid-area: toolbar; width: var(--editor-width); height: var(--editor-toolbar-height); background-color: var(--editor-toolbar-background); color: var(--editor-toolbar-on-background); overscroll-behavior: contain; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } #editor-actions::-webkit-scrollbar { display: none; } #editor { width: var(--editor-width); grid-area: editor; background-color: var(--editor-background); } #toolbar { width: 1090px; height: var(--editor-toolbar-height); } [contenteditable] { outline: 0px solid transparent; } #toolbar > mwc-icon-button { color: var(--editor-toolbar-on-background); --mdc-icon-size: 20px; --mdc-icon-button-size: 30px; cursor: pointer; } #toolbar > .active { color: var(--editor-toolbar-on-active-background); } select { margin-top: 5px; height: calc(var(--editor-toolbar-height) - 10px); } input[type="color"] { height: calc(var(--editor-toolbar-height) - 15px); -webkit-appearance: none; border: none; width: 22px; } input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; } `; render() { return html`<main> <input id="bg" type="color" style="display:none" /> <input id="fg" type="color" style="display:none" /> <div id="editor-actions"> <div id="toolbar"> </div> </div> <div id="editor">${this.root}</div> </main> `; } async firstUpdated() { const elem = this.parentElement!.querySelector("lit-rich-text-editor template"); this.content = elem?.innerHTML ?? ""; this.reset(); } reset() { const parser = new DOMParser(); const doc = parser.parseFromString(this.content, "text/html"); document.execCommand("defaultParagraphSeparator", false, "br"); document.addEventListener("selectionchange", () => { this.requestUpdate(); }); const root = doc.querySelector("body"); root!.setAttribute("contenteditable", "true"); this.root = root; }}

With everything updated run npm run dev and the following should appear in the browser:

Nothing special is happening yet, but the template is being read and passed into the element, parsed and setting the contenteditable attribute to true.

This is a way to access the slots and use the nodes to hold data that are not used for rendering. Doing it this way allows for a transformation of the HTML source into a format that can be used.

Toolbar #

At the bottom of the class before the last } add the following:

renderToolbar(command: (c: string, val: string | undefined) => void) { // TODO: Selection does not work on Safari iOS const selection = this.shadowRoot?.getSelection ? this.shadowRoot!.getSelection() : null; const tags: string[] = []; if (selection?.type === "Range") { // @ts-ignore let parentNode = selection?.baseNode; if (parentNode) { const checkNode = () => { const parentTagName = parentNode?.tagName?.toLowerCase()?.trim(); if (parentTagName) tags.push(parentTagName); }; while (parentNode != null) { checkNode(); parentNode = parentNode?.parentNode; } } } const commands: { icon: string; command: string | (() => void); active?: boolean; type?: string; values?: { value: string; name: string; font?: boolean }[]; command_value?: string; }[] = [{ icon: "format_clear", command: "removeFormat", }, { icon: "format_bold", command: "bold", active: tags.includes("b"), }, { icon: "format_italic", command: "italic", active: tags.includes("i"), }, { icon: "format_underlined", command: "underline", active: tags.includes("u"), }, { icon: "format_align_left", command: "justifyleft", }, { icon: "format_align_center", command: "justifycenter", }, { icon: "format_align_right", command: "justifyright", }, { icon: "format_list_numbered", command: "insertorderedlist", active: tags.includes("ol"), }, { icon: "format_list_bulleted", command: "insertunorderedlist", active: tags.includes("ul"), }, { icon: "format_quote", command: "formatblock", command_value: "blockquote", }, { icon: "format_indent_decrease", command: "outdent", }, { icon: "format_indent_increase", command: "indent", }, { icon: "add_link", command: () => { const newLink = prompt("Write the URL here", "http://"); if (newLink && newLink != "" && newLink != "http://") { command("createlink", newLink); } }, }, { icon: "link_off", command: "unlink" }, { icon: "format_color_text", command: () => { const input = this.shadowRoot!.querySelector( "#fg" )! as HTMLInputElement; input.addEventListener("input", (e: any) => { const val = e.target.value; command("forecolor", val); }); input.click(); }, type: "color", }, { icon: "border_color", command: () => { const input = this.shadowRoot!.querySelector( "#bg" )! as HTMLInputElement; input.addEventListener("input", (e: any) => { const val = e.target.value; command("backcolor", val); }); input.click(); }, type: "color", }, { icon: "title", command: "formatblock", values: [ { name: "Normal Text", value: "--" }, { name: "Heading 1", value: "h1" }, { name: "Heading 2", value: "h2" }, { name: "Heading 3", value: "h3" }, { name: "Heading 4", value: "h4" }, { name: "Heading 5", value: "h5" }, { name: "Heading 6", value: "h6" }, { name: "Paragraph", value: "p" }, { name: "Pre-Formatted", value: "pre" },], }, { icon: "text_format", command: "fontname", values: [{ name: "Font Name", value: "--" }, ...[...checkFonts()].map((f) => ({ name: f, value: f, font: true, })), ], }, { icon: "format_size", command: "fontsize", values: [{ name: "Font Size", value: "--" }, { name: "Very Small", value: "1" }, { name: "Small", value: "2" }, { name: "Normal", value: "3" }, { name: "Medium Large", value: "4" }, { name: "Large", value: "5" }, { name: "Very Large", value: "6" }, { name: "Maximum", value: "7" },], }, { icon: "undo", command: "undo", }, { icon: "redo", command: "redo", }, { icon: "content_cut", command: "cut", }, { icon: "content_copy", command: "copy", }, { icon: "content_paste", command: "paste", }, ]; return html` ${commands.map((n) => { return html` ${n.values ? html` <select id="${n.icon}" @change=${(e: any) => { const val = e.target.value; if (val === "--") { command("removeFormat", undefined); } else if (typeof n.command === "string") { command(n.command, val); } }} > ${n.values.map( (v) => html` <option value=${v.value}>${v.name}</option>` )} </select>` : html` <mwc-icon-button icon="${n.icon}" class="${n.active ? "active" : "inactive"}" @click=${() => { if (n.values) { } else if (typeof n.command === "string") { command(n.command, n.command_value); } else { n.command(); } }} ></mwc-icon-button>`} `; })} `;}

This takes an array of objects that we can map to mwc-icon-button or select depending on the passed values. This will also set up the event listeners and execute the command for the given action.

Inside the <div id="toolbar"> tag add the following:

${this.renderToolbar((command, val) => { document.execCommand(command, false, val); console.log("command", command, val);})}

This will listen for the callback and fire the command on the document and log it to the console.

And finally at the bottom of the file add the following:

export function checkFonts(): string[] { const fontCheck = new Set( [// Windows 10 "Arial", "Arial Black", "Bahnschrift", "Calibri", "Cambria", "Cambria Math", "Candara", "Comic Sans MS", "Consolas", "Constantia", "Corbel", "Courier New", "Ebrima", "Franklin Gothic Medium", "Gabriola", "Gadugi", "Georgia", "HoloLens MDL2 Assets", "Impact", "Ink Free", "Javanese Text", "Leelawadee UI", "Lucida Console", "Lucida Sans Unicode", "Malgun Gothic", "Marlett", "Microsoft Himalaya", "Microsoft JhengHei", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Sans Serif", "Microsoft Tai Le", "Microsoft YaHei", "Microsoft Yi Baiti", "MingLiU-ExtB", "Mongolian Baiti", "MS Gothic", "MV Boli", "Myanmar Text", "Nirmala UI", "Palatino Linotype", "Segoe MDL2 Assets", "Segoe Print", "Segoe Script", "Segoe UI", "Segoe UI Historic", "Segoe UI Emoji", "Segoe UI Symbol", "SimSun", "Sitka", "Sylfaen", "Symbol", "Tahoma", "Times New Roman", "Trebuchet MS", "Verdana", "Webdings", "Wingdings", "Yu Gothic", // macOS "American Typewriter", "Andale Mono", "Arial", "Arial Black", "Arial Narrow", "Arial Rounded MT Bold", "Arial Unicode MS", "Avenir", "Avenir Next", "Avenir Next Condensed", "Baskerville", "Big Caslon", "Bodoni 72", "Bodoni 72 Oldstyle", "Bodoni 72 Smallcaps", "Bradley Hand", "Brush Script MT", "Chalkboard", "Chalkboard SE", "Chalkduster", "Charter", "Cochin", "Comic Sans MS", "Copperplate", "Courier", "Courier New", "Didot", "DIN Alternate", "DIN Condensed", "Futura", "Geneva", "Georgia", "Gill Sans", "Helvetica", "Helvetica Neue", "Herculanum", "Hoefler Text", "Impact", "Lucida Grande", "Luminari", "Marker Felt", "Menlo", "Microsoft Sans Serif", "Monaco", "Noteworthy", "Optima", "Palatino", "Papyrus", "Phosphate", "Rockwell", "Savoye LET", "SignPainter", "Skia", "Snell Roundhand", "Tahoma", "Times", "Times New Roman", "Trattatello", "Trebuchet MS", "Verdana", "Zapfino",].sort() ); const fontAvailable = new Set<string>(); // @ts-ignore for (const font of fontCheck.values()) { // @ts-ignore if (document.fonts.check(`12px "${font}"`)) { fontAvailable.add(font); } } // @ts-ignore return fontAvailable.values();}

Following this great suggestion here the document check check to see all the avaliable fonts for the browser and given document.

Running #

If everything went well when the command npm run dev is run the following should appear in the viewport:

Conclusion #

If you want to learn more about building with Lit you can read the docs here. There is also an example on the Lit playground here.

The source for this example can be found here.

Lit and Figma

Rody Davis — Mon, 10 May 2021 00:00:00 +0000

In this article I will go over how to set up a Lit web component and use it to create a figma plugin.

TLDR You can find the final source here.

Prerequisites #

Vscode
Figma Desktop
Node
Typescript

Getting Started #

We can start off by creating a empty directory and naming it with snake_case whatever we want.

mkdir figma_lit_examplecd figma_lit_example

Web Setup #

Now we are in the figma_lit_example directory and can setup Figma and Lit. Let's start with node.

npm init -y

This will setup the basics for a node project and install the packages we need. Now lets add some config files. Now open the package.json and replace it with the following:

{ "name": "figma_lit_example", "version": "1.0.0", "description": "Lit Figma Plugin", "dependencies": { "lit": "^2.0.0-rc.1" }, "devDependencies": { "@figma/plugin-typings": "^1.23.0", "html-webpack-inline-source-plugin": "^1.0.0-beta.2", "html-webpack-plugin": "^4.3.0", "css-loader": "^5.2.4", "ts-loader": "^8.0.0", "typescript": "^4.2.4", "url-loader": "^4.1.1", "webpack": "^4.44.1", "webpack-cli": "^4.6.0" }, "scripts": { "dev": "npx webpack --mode=development --watch", "copy": "mkdir -p lit-plugin && cp ./manifest.json ./lit-plugin/manifest.json && cp ./dist/ui.html ./lit-plugin/ui.html && cp ./dist/code.js ./lit-plugin/code.js", "build": "npx webpack --mode=production && npm run copy", "zip": "npm run build && zip -r lit-plugin.zip lit-plugin" }, "browserslist": ["last 1 Chrome versions"], "keywords": [], "author": "", "license": "ISC"}

This will add everything we need and add the scripts we need for development and production. Then run the following:

npm i

This will install everything we need to get started. Now we need to setup some config files.

touch tsconfig.jsontouch webpack.config.ts

This will create 2 files. Now open up tsconfig.json and paste the following:

{ "compilerOptions": { "target": "es2017", "module": "esNext", "moduleResolution": "node", "lib": ["es2017", "dom", "dom.iterable"], "typeRoots": ["./node_modules/@types", "./node_modules/@figma"], "declaration": true, "sourceMap": true, "inlineSources": true, "noUnusedLocals": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, "experimentalDecorators": true, "skipLibCheck": true, "strict": true, "noImplicitAny": false, "outDir": "./lib", "baseUrl": "./packages", "importHelpers": true, "plugins": [{ "name": "ts-lit-plugin", "rules": { "no-unknown-tag-name": "error", "no-unclosed-tag": "error", "no-unknown-property": "error", "no-unintended-mixed-binding": "error", "no-invalid-boolean-binding": "error", "no-expressionless-property-binding": "error", "no-noncallable-event-binding": "error", "no-boolean-in-attribute-binding": "error", "no-complex-attribute-binding": "error", "no-nullable-attribute-binding": "error", "no-incompatible-type-binding": "error", "no-invalid-directive-binding": "error", "no-incompatible-property-type": "error", "no-unknown-property-converter": "error", "no-invalid-attribute-name": "error", "no-invalid-tag-name": "error", "no-unknown-attribute": "off", "no-unknown-event": "off", "no-unknown-slot": "off", "no-invalid-css": "off" } }] }, "include": ["src/**/*.ts"], "references": []}

This is a basic typescript config. Now open up webpack.config.ts and paste the following:

const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");const path = require("path");module.exports = (env, argv) => ({ mode: argv.mode === "production" ? "production" : "development", devtool: argv.mode === "production" ? false : "inline-source-map", entry: { ui: "./src/ui.ts", code: "./src/code.ts", app: "./src/my-app.ts", }, module: { rules: [{ test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/ }, { test: /\.css$/, use: ["style-loader", { loader: "css-loader" }] }, { test: /\.(png|jpg|gif|webp|svg)$/, loader: "url-loader" }, ], }, resolve: { extensions: [".ts", ".js"] }, output: { filename: "[name].js", path: path.resolve(__dirname, "dist"), }, plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, "ui.html"), filename: "ui.html", inject: true, inlineSource: ".(js|css)$", chunks: ["ui"], }), new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin), ],});

Now we need to create the ui for the plugin:

touch ui.html

Open up ui.html and add the following:

<my-app></my-app>

Now we need a manifest file for the figma plugin:

touch manifest.json

Open manifest.json and add the following:

{ "name": "figma_lit_example", "id": "973668777853442323", "api": "1.0.0", "main": "code.js", "ui": "ui.html"}

Now we need to create our web component:

mkdir srccd srctouch my-app.tstouch code.tstouch ui.tscd ..

Open ui.ts and paste the following:

import "./my-app";

Open my-app.ts and paste the following:

import { html, LitElement } from "lit";import { customElement, query } from "lit/decorators.js";@customElement("my-app")export class MyApp extends LitElement { @query("#count") countInput!: HTMLInputElement; render() { return html` <div> <h2>Rectangle Creator</h2> <p>Count: <input id="count" value="5" /></p> <button id="create" @click=${this.create}>Create</button> <button id="cancel" @click=${this.cancel}>Cancel</button> </div> `; } create() { const count = parseInt(this.countInput.value, 10); this.sendMessage("create-rectangles", { count }); } cancel() { this.sendMessage("cancel"); } private sendMessage(type: string, content: Object = {}) { const message = { pluginMessage: { type: type, ...content } }; parent.postMessage(message, "*"); }}

Open code.ts and paste the following:

const options: ShowUIOptions = { width: 250, height: 200,};figma.showUI( __html__ , options);figma.ui.onmessage = msg => { switch (msg.type) { case 'create-rectangles': const nodes: SceneNode[] = []; for (let i = 0; i < msg.count; i++) { const rect = figma.createRectangle(); rect.x = i * 150; rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0.5, b: 0 } }]; figma.currentPage.appendChild(rect); nodes.push(rect); } figma.currentPage.selection = nodes; figma.viewport.scrollAndZoomIntoView(nodes); break; default: break; } figma.closePlugin();};

Building the Plugin #

Now that we have all the code in place we can build the plugin and test it in Figma.

npm run build

Step 1 #

Download and open the desktop version of Figma.

https://www.figma.com/downloads/

Step 2 #

Open the menu and navigate to “Plugins > Manage plugins”

Step 3 #

Click on the plus icon to add a local plugin.

Click on the box to link to an existing plugin to navigate to the lit-plugin folder that was created after the build process in your source code and select manifest.json.

Step 4 #

To run the plugin navigate to “Plugins > Development > figma_lit_example” to launch your plugin.

Step 5 #

Now your plugin should launch and you can create 5 rectangles on the canvas.

If everything worked you will have 5 new rectangles on the canvas focused by figma.

Conclusion #

If you want to learn more about building a plugin in Figma you can read more here and for Lit you can read the docs here.

Lit and Flutter

Rody Davis — Wed, 05 May 2021 00:00:00 +0000

In this article I will go over how to set up a Lit web component and use it inline in the Flutter widget tree.

TLDR You can find the final source here.

The reason you would want this integration is so you can take an existing web app, or just a single part of it and embed it in the widget tree.

With it wrapped in Flutter you can call device APIs from event listeners on your web component.

For example you may have an app that handles purchases, and now you can call the in app purchase API or other device specific features not available on the web.

You also get a cross platform app that can be delivered to both Google Play and the App Store.

The web component will receive new code each time you update your site, so you do not have to ship an update each time the web component changes.

Prerequisites

Flutter SDK
Xcode and Command Line Tools
Android SDK
Vscode
Node
Typescript

Getting Started

We can start off by creating a empty directory and naming it with snake_case whatever we want.

mkdir flutter_lit_example
cd flutter_lit_example

Web Setup

Now we are in the flutter_lit_example directory and can setup Flutter and Lit. Let's start with node.

npm init -y
npm i lit
npm i -D typescript vite @types/node

This will setup the basics for a node project and install the packages we need. Now lets add some config files.

touch tsconfig.json
touch vite.config.ts

This will create 2 files. Now open up tsconfig.json and paste the following:

{
  "compilerOptions": {
    "module": "esnext",
    "lib": [
      "es2017",
      "dom",
      "dom.iterable"
    ],
    "types": [
      "vite/client"
    ],
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./types",
    "rootDir": "./src",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": []
}

This is a basic typescript config. Now open up vite.config.ts and paste the following:

import { defineConfig } from "vite";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  base: "/flutter_lit_example/", // TODO: Name of your github repo
  build: {
    outDir: "build/web",
    rollupOptions: {
      // external: /^lit-element/,
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`,
      },
      input: {
        main: resolve(__dirname, "index.html"),
        // TODO: Create a new module for each component you want to embed
      },
    },
  },
});

Now we need to create our web component:

mkdir src
cd src
touch my-app.ts
cd ..

Open my-app.ts and paste the following:

import { html, css, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("my-app")
export class MyApp extends LitElement {
  static styles = css`
    p {
      color: blue;
    }
  `;

  @property()
  name = "Somebody";

  render() {
    return html`<div>
      <p>Hello, ${this.name}!</p>
      <slot></slot>
    </div>`;
  }
}

We need to create a index.html for our web app.

touch index.html

Open index.html and paste the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script type="module" src="/src/my-app.ts"></script>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      my-app {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

Flutter Setup

Now that we have the basics setup for web we can move on to flutter. Let's create the project with the following:

flutter create --platforms=ios,android .
flutter packages get

Open up pubspec.yaml and update it with the following:

name: flutter_lit_example
description: A hybrid Flutter app.
publish_to: "none"
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.3.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

Make sure to get the packages again:

flutter packages get

Now we need to create the file that will wrap the web component.

cd lib
touch web_component.dart
cd ..

Open web_component.dart and paste the following:

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class WebComponent extends StatefulWidget {
  const WebComponent({
    Key key,
    @required this.name,
    @required this.bundle,
    this.attributes = const {},
    this.slot = '',
    this.events = const [],
  }) : super(key: key);
  final String name, bundle;
  final Map<String, String> attributes;
  final String slot;
  final List<EventCallback> events;

  @override
  _WebComponentState createState() => _WebComponentState();
}

class _WebComponentState extends State<WebComponent> {
  InAppWebViewController controller;
  final Map<String, List<EventCallback>> _events = {};

  String get source {
    return '''<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      ${widget.name} {
        width: 100%;
        height: 100vh;
      }
    </style>
  <script type="module" crossorigin src="${widget.bundle}"></script>
</head>
  <body>
    <${widget.name} ${widget.attributes.entries.map((e) => '${e.key}="${e.value}"').join(' ')}>
      ${widget.slot}
    </${widget.name}>
    <script>
    window.addEventListener("flutterInAppWebViewPlatformReady", (event) => {
      ${widget.events.join('\n')}
    });
    </script>
  </body>
</html> 
''';
  }

  void _setup(InAppWebViewController controller) {
    this.controller = controller;
    this._setupEvents();
  }

  void _setupEvents() {
    for (final event in _events.keys) {
      controller.removeJavaScriptHandler(handlerName: event);
    }
    for (final event in widget.events) {
      _addEvent(event);
    }
  }

  void _addEvent(EventCallback event) {
    controller.addJavaScriptHandler(
      handlerName: event.query,
      callback: event.onPressed,
    );
    _events[event.event] ??= [];
    _events[event.event].add(event);
  }

  @override
  void didUpdateWidget(covariant WebComponent oldWidget) {
    if (oldWidget.events != widget.events) {
      _setupEvents();
    }
    if (oldWidget.slot != widget.slot ||
        oldWidget.bundle != widget.bundle ||
        oldWidget.name != widget.name) {
      controller.loadData(data: source);
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return InAppWebView(
      initialData: InAppWebViewInitialData(data: source),
      onWebViewCreated: _setup,
    );
  }
}

class EventCallback {
  EventCallback({
    @required this.onPressed,
    @required this.event,
    this.query,
  });
  final String query, event;
  final dynamic Function(List<dynamic> args) onPressed;

  @override
  String toString() => _source;

  String get _prefix => query != null && query.isNotEmpty
      ? 'document.querySelector("$query")'
      : 'document.body';

  String get _source => [
        '$_prefix.addEventListener("$event", (e) => {',
        '  window.flutter_inappwebview.callHandler("$query", e);',
        '}, false);',
      ].join('\n');
}

Open main.dart and paste it with th following:

import 'package:flutter/material.dart';

import 'web_component.dart';

const WEBSITE_URL = 'https://rodydavis.github.io/flutter_lit_example/';
const BUNDLE_PATH = 'assets/main.js';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final title = 'Flutter Hybrid App';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: title,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Builder(
        builder: (context) => WebComponent(
          name: 'my-app',
          bundle: '$WEBSITE_URL/$BUNDLE_PATH',
          attributes: {
            'name': widget.title,
          },
          slot: '<button id="my-button">Talk back!</button>',
          events: [
            EventCallback(
              event: 'click',
              query: '#my-button',
              onPressed: (_) {
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('Clicked!')));
              },
            ),
          ],
        ),
      ),
    );
  }
}

You will need to update WEBSITE_URL to have the url of the website where you will be deploying and BUNDLE_URL to the relative path to the js bundle.

This will ensure auto updates with a new version rolls out and the cache it stale. This will also allow for offline support after the first time it is downloaded.

Running

Now we can run our application but it requires a few steps to get it all setup.

To test and build our web app locally we will use vite and render the index.html

npm i
npm run dev

You should see the following:

vite v2.2.3 dev server running at:

Local:    http://localhost:3000/flutter_lit_example/
Network:  http://192.168.1.143:3000/flutter_lit_example/

ready in 311ms.

We can open the link http://localhost:3000/flutter_lit_example/ to see our running web app and hot reload changes from my-app.ts.

If you want to learn more about Lit you can read the docs here.

Once you are happy with how it looks we can move on to Flutter to wrap it in a native app. This will give us access to native code if we wanted to use the in app purchase api or push notifications.

Kill the terminal and run the following:

flutter packages get
flutter build ios
flutter build appbundle
flutter run

This should select a running device or prompt you to select one. Now that it is running on the device you can see we have two way communication with the Flutter app and the web component.

Conclusion

If you want to find the source code you can check it out here otherwise thanks for reading and let me know if you have any questions!

Multi-touch Canvas with Flutter

Rody Davis — Wed, 10 Jun 2020 00:00:00 +0000

If you ever wanted to create a canvas in Flutter that needs to be panned in any direction and allow zoom then you also probably tried to create a MultiGestureRecognizer or under a GestureDetector added onPanUpdate and onScaleUpdate and received an error because both can not work at the same time. Even if you have to GestureDetectors then you will still find it does not work how you want and one will always win.

Online demo: https://rodydavis.github.io/flutter_multi_touch_canvas/

This is the canvas rendering logic used in https://widget.studio

Multi Touch Goal #

Pan the canvas with two or more fingers
Zoom the canvas with two fingers only (Pinch/Zoom)
Single finger will interact with canvas object and detect selection
Bonus trackpad support with similar results

In order to achieve this we need to use a Listener for the trackpad events and raw touch interactions and RawKeyboardListener for keyboard shortcuts.

Part 1 - Project Setup #

Open your terminal and type the following:

mkdir flutter_multi_touchcd flutter_multi_touchflutter create .code .

The last line is optional and if you have VSCode installed. The command will open the directory inside VSCode.

Part 2 - Boilerplate #

Remove all comments
Remove extra empty lines
Update UI

Right now when you run the project you will have this UI.

Create a new file located at ui/home/screen.dart and add the following:

import 'package:flutter/material.dart';class HomeScreen extends StatelessWidget { const HomeScreen({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container(); }}

Update main.dart with the following:

import 'package:flutter/material.dart';import 'ui/home/screen.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), darkTheme: ThemeData.dark().copyWith( visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomeScreen(), ); }}

You will now have a black screen when you run the application.

Part 3 - Creating the Controller #

Now we want to create a class that will act as our controller on the canvas.

Create a new file at src/controllers/canvas.dart and add the following to start:

import 'dart:async';/// Control the canvas and the objects on itclass CanvasController { // Controller for the stream output final _controller = StreamController<CanvasController>(); // Reference to the stream to update the UI Stream<CanvasController> get stream => _controller.stream; // Emit a new event to rebuild the UI void add([CanvasController val]) => _controller.add(val ?? this); // Stop the stream and finish void close() => _controller.close();    // Start the stream void init() => add();}

Update the home screen with the following:

import 'package:flutter/material.dart';import '../../src/controllers/canvas.dart';class HomeScreen extends StatefulWidget { const HomeScreen({Key key}) : super(key: key); @override _HomeScreenState createState() => _HomeScreenState();}class _HomeScreenState extends State<HomeScreen> { final _controller = CanvasController(); @override void initState() { _controller.init(); super.initState(); } @override void dispose() { _controller.close(); super.dispose(); } @override Widget build(BuildContext context) { return StreamBuilder<CanvasController>( stream: _controller.stream, builder: (context, snapshot) { if (!snapshot.hasData) { return Scaffold( appBar: AppBar(), body: Center(child: CircularProgressIndicator()), ); } final instance = snapshot.data; return Scaffold( appBar: AppBar(), body: Stack( children: [Positioned( top: 20, left: 20, width: 100, height: 100, child: Container(color: Colors.red), )], ), ); }); }}

Here we are just adding the basics to rebuild when the controller changes or the screen is finished. We are using a stateful widget here because we want to dispose of the controller and load it only once. We are also using a stack because thats all we need under the hood. After a quick hot restart you should have the following view.

Part 4 - Adding Canvas Objects #

Now we need to create the class for the objects that will be stored on the canvas. Create a new file at src/classes/canvas_object.dart and add the following:

import 'dart:ui';class CanvasObject<T> { final double dx; final double dy; final double width; final double height; final T child; CanvasObject({ this.dx = 0, this.dy = 0, this.width = 100, this.height = 100, this.child, }); CanvasObject<T> copyWith({ double dx, double dy, double width, double height, T child, }) { return CanvasObject<T>( dx: dx ?? this.dx, dy: dy ?? this.dy, width: width ?? this.width, height: height ?? this.height, child: child ?? this.child, ); } Size get size => Size(width, height); Offset get offset => Offset(dx, dy); Rect get rect => offset & size;}

We are using a generic here to not depend on flutter or material in the class. Update the controller with the following:

import 'dart:async';import 'package:flutter/material.dart';import '../classes/canvas_object.dart';/// Control the canvas and the objects on itclass CanvasController { /// Controller for the stream output final _controller = StreamController<CanvasController>(); /// Reference to the stream to update the UI Stream<CanvasController> get stream => _controller.stream; /// Emit a new event to rebuild the UI void add([CanvasController val]) => _controller.add(val ?? this); /// Stop the stream and finish void close() => _controller.close(); /// Start the stream void init() => add(); // -- Canvas Objects -- final List<CanvasObject<Widget>> _objects = []; /// Current Objects on the canvas List<CanvasObject<Widget>> get objects => _objects; /// Add an object to the canvas void addObject(CanvasObject<Widget> value) => _update(() { _objects.add(value); }); /// Add an object to the canvas void updateObject(int i, CanvasObject<Widget> value) => _update(() { _objects[i] = value; }); /// Remove an object from the canvas void removeObject(int i) => _update(() { _objects.removeAt(i); }); void _update(void Function() action) { action(); add(this); }}

We are just adding the objects to the canvas and removing them if needed. Update the home screen with the following to use these new objects:

import 'package:flutter/material.dart';import '../../src/classes/canvas_object.dart';import '../../src/controllers/canvas.dart';class HomeScreen extends StatefulWidget { const HomeScreen({Key key}) : super(key: key); @override _HomeScreenState createState() => _HomeScreenState();}class _HomeScreenState extends State<HomeScreen> { final _controller = CanvasController(); @override void initState() { _controller.init(); _dummyData(); super.initState(); } void _dummyData() { _controller.addObject( CanvasObject( dx: 20, dy: 20, width: 100, height: 100, child: Container(color: Colors.red), ), ); } @override void dispose() { _controller.close(); super.dispose(); } @override Widget build(BuildContext context) { return StreamBuilder<CanvasController>( stream: _controller.stream, builder: (context, snapshot) { if (!snapshot.hasData) { return Scaffold( appBar: AppBar(), body: Center(child: CircularProgressIndicator()), ); } final instance = snapshot.data; return Scaffold( appBar: AppBar(), body: Stack( children: [for (final object in instance.objects) Positioned( top: object.dy, left: object.dx, width: object.width, height: object.height, child: object.child, )], ), ); }); }}

The UI is thee same as before but now is dynamic and we have access to the Stack children and position of each child.

Part 5 - Capture the Input #

We need to capture the input of the MultiGestureRecognizer, GestureDetector and RawKeyboardListener. Update the canvas controller with the following:

import 'dart:async';import 'package:flutter/material.dart';import '../classes/canvas_object.dart';/// Control the canvas and the objects on itclass CanvasController { /// Controller for the stream output final _controller = StreamController<CanvasController>(); /// Reference to the stream to update the UI Stream<CanvasController> get stream => _controller.stream; /// Emit a new event to rebuild the UI void add([CanvasController val]) => _controller.add(val ?? this); /// Stop the stream and finish void close() { _controller.close(); focusNode.dispose(); } /// Start the stream void init() => add(); // -- Canvas Objects -- final List<CanvasObject<Widget>> _objects = []; /// Current Objects on the canvas List<CanvasObject<Widget>> get objects => _objects; /// Add an object to the canvas void addObject(CanvasObject<Widget> value) => _update(() { _objects.add(value); }); /// Add an object to the canvas void updateObject(int i, CanvasObject<Widget> value) => _update(() { _objects[i] = value; }); /// Remove an object from the canvas void removeObject(int i) => _update(() { _objects.removeAt(i); }); /// Focus node for listening for keyboard shortcuts final focusNode = FocusNode(); /// Raw events from keys pressed void rawKeyEvent(BuildContext context, RawKeyEvent key) {} /// Called every time a new finger touches the screen void addTouch(int pointer, Offset offsetVal, Offset globalVal) {} /// Called when any of the fingers update position void updateTouch(int pointer, Offset offsetVal, Offset globalVal) {} /// Called when a finger is removed from the screen void removeTouch(int pointer) {} /// Checks if the shift key on the keyboard is pressed bool shiftPressed = false; /// Scale of the canvas double get scale => _scale; double _scale = 1; set scale(double value) => _update(() { _scale = value; }); /// Max possible scale static const double maxScale = 3.0; /// Min possible scale static const double minScale = 0.2; /// How much to scale the canvas in increments static const double scaleAdjust = 0.05; /// Current offset of the canvas Offset get offset => _offset; Offset _offset = Offset.zero; set offset(Offset value) => _update(() { _offset = value; }); void _update(void Function() action) { action(); add(this); }}

Update the home screen with the following:

import 'package:flutter/gestures.dart';import 'package:flutter/material.dart';import '../../src/classes/canvas_object.dart';import '../../src/controllers/canvas.dart';class HomeScreen extends StatefulWidget { const HomeScreen({Key key}) : super(key: key); @override _HomeScreenState createState() => _HomeScreenState();}class _HomeScreenState extends State<HomeScreen> { final _controller = CanvasController(); @override void initState() { _controller.init(); _dummyData(); super.initState(); } void _dummyData() { _controller.addObject( CanvasObject( dx: 20, dy: 20, width: 100, height: 100, child: Container(color: Colors.red), ), ); } @override void dispose() { _controller.close(); super.dispose(); } @override Widget build(BuildContext context) { return StreamBuilder<CanvasController>( stream: _controller.stream, builder: (context, snapshot) { if (!snapshot.hasData) { return Scaffold( appBar: AppBar(), body: Center(child: CircularProgressIndicator()), ); } final instance = snapshot.data; return Scaffold( appBar: AppBar(), body: Listener( behavior: HitTestBehavior.opaque, onPointerSignal: (details) { if (details is PointerScrollEvent) { GestureBinding.instance.pointerSignalResolver .register(details, (event) { if (event is PointerScrollEvent) { if (_controller.shiftPressed) { double zoomDelta = (-event.scrollDelta.dy / 300); _controller.scale = _controller.scale + zoomDelta; } else { _controller.offset = _controller.offset - event.scrollDelta; } } }); } }, onPointerMove: (details) { _controller.updateTouch( details.pointer, details.localPosition, details.position, ); }, onPointerDown: (details) { _controller.addTouch( details.pointer, details.localPosition, details.position, ); }, onPointerUp: (details) { _controller.removeTouch(details.pointer); }, onPointerCancel: (details) { _controller.removeTouch(details.pointer); }, child: RawKeyboardListener( autofocus: true, focusNode: _controller.focusNode, onKey: (key) => _controller.rawKeyEvent(context, key), child: Stack( children: [for (final object in instance.objects) Positioned( top: object.dy, left: object.dx, width: object.width, height: object.height, child: object.child, )], ), ), ), ); }); }}

All we are doing now is just mapping the inputs of the UI to the actions in the controller. Feel free to look through the comments if you are curious how each one works. Running the application should still just show the red square.

Part 5 - Canvas Offset and Scale #

Now we want to start moving the canvas. Let’s first tackle the offset as scale will take a different approach. Update the home screen with the following:

import 'package:flutter/gestures.dart';import 'package:flutter/material.dart';import '../../src/classes/canvas_object.dart';import '../../src/controllers/canvas.dart';class HomeScreen extends StatefulWidget { const HomeScreen({Key key}) : super(key: key); @override _HomeScreenState createState() => _HomeScreenState();}class _HomeScreenState extends State<HomeScreen> { final _controller = CanvasController(); @override void initState() { _controller.init(); _dummyData(); super.initState(); } void _dummyData() { _controller.addObject( CanvasObject( dx: 20, dy: 20, width: 100, height: 100, child: Container(color: Colors.red), ), ); } @override void dispose() { _controller.close(); super.dispose(); } @override Widget build(BuildContext context) { return StreamBuilder<CanvasController>( stream: _controller.stream, builder: (context, snapshot) { if (!snapshot.hasData) { return Scaffold( appBar: AppBar(), body: Center(child: CircularProgressIndicator()), ); } final instance = snapshot.data; return Scaffold( appBar: AppBar(), body: Listener( behavior: HitTestBehavior.opaque, onPointerSignal: (details) { if (details is PointerScrollEvent) { GestureBinding.instance.pointerSignalResolver .register(details, (event) { if (event is PointerScrollEvent) { if (_controller.shiftPressed) { double zoomDelta = (-event.scrollDelta.dy / 300); _controller.scale = _controller.scale + zoomDelta; } else { _controller.offset = _controller.offset - event.scrollDelta; } } }); } }, onPointerMove: (details) { _controller.updateTouch( details.pointer, details.localPosition, details.position, ); }, onPointerDown: (details) { _controller.addTouch( details.pointer, details.localPosition, details.position, ); }, onPointerUp: (details) { _controller.removeTouch(details.pointer); }, onPointerCancel: (details) { _controller.removeTouch(details.pointer); }, child: RawKeyboardListener( autofocus: true, focusNode: _controller.focusNode, onKey: (key) => _controller.rawKeyEvent(context, key), child: SizedBox.expand( child: Stack( children: [for (final object in instance.objects) AnimatedPositioned.fromRect( duration: const Duration(milliseconds: 50), rect: object.rect.adjusted( _controller.offset, _controller.scale, ), child: FittedBox( fit: BoxFit.fill, child: SizedBox.fromSize( size: object.size, child: object.child, ), ), )], ), ), ), ), ); }); }}extension RectUtils on Rect { Rect adjusted(Offset offset, double scale) { final left = (this.left + offset.dx) * scale; final top = (this.top + offset.dy) * scale; final width = this.width * scale; final height = this.height * scale; return Rect.fromLTWH(left, top, width, height); }}

Now when you use your trackpad to pan with two fingers you will see the red square move. We now need to add finger support too. You may notice the FittedBox and that will come in as soon as we add scaling.

Now if we move the square off the screen we may need to bring it back. We can add a reset button to the AppBar. Add the following to the canvas controller:

  static const double _scaleDefault = 1; static const Offset _offsetDefault = Offset.zero; void reset() { scale = _scaleDefault; offset = _offsetDefault; }

Update the home screen with the following:

import 'package:flutter/gestures.dart';import 'package:flutter/material.dart';import '../../src/classes/canvas_object.dart';import '../../src/controllers/canvas.dart';class HomeScreen extends StatefulWidget { const HomeScreen({Key key}) : super(key: key); @override _HomeScreenState createState() => _HomeScreenState();}class _HomeScreenState extends State<HomeScreen> { final _controller = CanvasController(); @override void initState() { _controller.init(); _dummyData(); super.initState(); } void _dummyData() { _controller.addObject( CanvasObject( dx: 20, dy: 20, width: 100, height: 100, child: Container(color: Colors.red), ), ); } @override void dispose() { _controller.close(); super.dispose(); } @override Widget build(BuildContext context) { return StreamBuilder<CanvasController>( stream: _controller.stream, builder: (context, snapshot) { if (!snapshot.hasData) { return Scaffold( appBar: AppBar(), body: Center(child: CircularProgressIndicator()), ); } final instance = snapshot.data; return Scaffold( appBar: AppBar( actions: [IconButton( tooltip: 'Reset the Scale and Offset', icon: Icon(Icons.restore), onPressed: _controller.reset, ),], ), body: Listener( behavior: HitTestBehavior.opaque, onPointerSignal: (details) { if (details is PointerScrollEvent) { GestureBinding.instance.pointerSignalResolver .register(details, (event) { if (event is PointerScrollEvent) { if (_controller.shiftPressed) { double zoomDelta = (-event.scrollDelta.dy / 300); _controller.scale = _controller.scale + zoomDelta; } else { _controller.offset = _controller.offset - event.scrollDelta; } } }); } }, onPointerMove: (details) { _controller.updateTouch( details.pointer, details.localPosition, details.position, ); }, onPointerDown: (details) { _controller.addTouch( details.pointer, details.localPosition, details.position, ); }, onPointerUp: (details) { _controller.removeTouch(details.pointer); }, onPointerCancel: (details) { _controller.removeTouch(details.pointer); }, child: RawKeyboardListener( autofocus: true, focusNode: _controller.focusNode, onKey: (key) => _controller.rawKeyEvent(context, key), child: SizedBox.expand( child: Stack( children: [for (final object in instance.objects) AnimatedPositioned.fromRect( duration: const Duration(milliseconds: 50), rect: object.rect.adjusted( _controller.offset, _controller.scale, ), child: FittedBox( fit: BoxFit.fill, child: SizedBox.fromSize( size: object.size, child: object.child, ), ), )], ), ), ), ), ); }); }}extension RectUtils on Rect { Rect adjusted(Offset offset, double scale) { final left = (this.left + offset.dx) * scale; final top = (this.top + offset.dy) * scale; final width = this.width * scale; final height = this.height * scale; return Rect.fromLTWH(left, top, width, height); }}

Now when you press the reset button the canvas animates back to the default offset and scale.

While we are here we can add actions for zoom in/out and connect them to the controller. Add the following to the canvas controller:

  void zoomIn() { scale += scaleAdjust; } void zoomOut() { scale -= scaleAdjust; }

Add the following to the AppBar actions:

                  IconButton( tooltip: 'Zoom In', icon: Icon(Icons.zoom_in), onPressed: _controller.zoomIn, ), IconButton( tooltip: 'Zoom Out', icon: Icon(Icons.zoom_out), onPressed: _controller.zoomOut, ),

Now when you run the application you can easily zoom in/out.

Part 6 - Keyboard Shortcuts #

Now we need to capture the keyboard events so we can move the canvas with the arrow keys and scale with +/- keys. Update the controller with the following:

import 'dart:async';import 'package:flutter/material.dart';import 'package:flutter/services.dart';import '../classes/canvas_object.dart';/// Control the canvas and the objects on itclass CanvasController { /// Controller for the stream output final _controller = StreamController<CanvasController>(); /// Reference to the stream to update the UI Stream<CanvasController> get stream => _controller.stream; /// Emit a new event to rebuild the UI void add([CanvasController val]) => _controller.add(val ?? this); /// Stop the stream and finish void close() { _controller.close(); focusNode.dispose(); } /// Start the stream void init() => add(); // -- Canvas Objects -- final List<CanvasObject<Widget>> _objects = []; /// Current Objects on the canvas List<CanvasObject<Widget>> get objects => _objects; /// Add an object to the canvas void addObject(CanvasObject<Widget> value) => _update(() { _objects.add(value); }); /// Add an object to the canvas void updateObject(int i, CanvasObject<Widget> value) => _update(() { _objects[i] = value; }); /// Remove an object from the canvas void removeObject(int i) => _update(() { _objects.removeAt(i); }); /// Focus node for listening for keyboard shortcuts final focusNode = FocusNode(); /// Raw events from keys pressed void rawKeyEvent(BuildContext context, RawKeyEvent key) { // Scale keys if (key.isKeyPressed(LogicalKeyboardKey.minus)) { zoomOut(); } if (key.isKeyPressed(LogicalKeyboardKey.equal)) { zoomIn(); } // Directional Keys if (key.isKeyPressed(LogicalKeyboardKey.arrowLeft)) { offset = offset + Offset(offsetAdjust, 0.0); } if (key.isKeyPressed(LogicalKeyboardKey.arrowRight)) { offset = offset + Offset(-offsetAdjust, 0.0); } if (key.isKeyPressed(LogicalKeyboardKey.arrowUp)) { offset = offset + Offset(0.0, offsetAdjust); } if (key.isKeyPressed(LogicalKeyboardKey.arrowDown)) { offset = offset + Offset(0.0, -offsetAdjust); } _shiftPressed = key.isShiftPressed; /// Update Controller Instance add(this); } /// Called every time a new finger touches the screen void addTouch(int pointer, Offset offsetVal, Offset globalVal) {} /// Called when any of the fingers update position void updateTouch(int pointer, Offset offsetVal, Offset globalVal) {} /// Called when a finger is removed from the screen void removeTouch(int pointer) {} /// Checks if the shift key on the keyboard is pressed bool get shiftPressed => _shiftPressed; bool _shiftPressed = false; /// Scale of the canvas double get scale => _scale; double _scale = 1; set scale(double value) => _update(() { _scale = value; }); /// Max possible scale static const double maxScale = 3.0; /// Min possible scale static const double minScale = 0.2; /// How much to scale the canvas in increments static const double scaleAdjust = 0.05; /// How much to shift the canvas in increments static const double offsetAdjust = 15; /// Current offset of the canvas Offset get offset => _offset; Offset _offset = Offset.zero; set offset(Offset value) => _update(() { _offset = value; }); static const double _scaleDefault = 1; static const Offset _offsetDefault = Offset.zero; /// Reset the canvas zoom and offset void reset() { scale = _scaleDefault; offset = _offsetDefault; } /// Zoom in the canvas void zoomIn() { scale += scaleAdjust; } /// Zoom out the canvas void zoomOut() { scale -= scaleAdjust; } void _update(void Function() action) { action(); add(this); }}

Now when you run the application you can control the zoom and pan with just a keyboard. This could be useful for a fallback input that would work on a TV for example…

If you want to see if it is actually scaling proportionally then add the following the home screen:

import 'package:flutter/gestures.dart';import 'package:flutter/material.dart';import '../../src/classes/canvas_object.dart';import '../../src/controllers/canvas.dart';class HomeScreen extends StatefulWidget { const HomeScreen({Key key}) : super(key: key); @override _HomeScreenState createState() => _HomeScreenState();}class _HomeScreenState extends State<HomeScreen> { final _controller = CanvasController(); @override void initState() { _controller.init(); _dummyData(); super.initState(); } void _dummyData() { _controller.addObject( CanvasObject( dx: 20, dy: 20, width: 100, height: 100, child: Container(color: Colors.red), ), ); _controller.addObject( CanvasObject( dx: 80, dy: 60, width: 100, height: 200, child: Container(color: Colors.green), ), ); _controller.addObject( CanvasObject( dx: 100, dy: 40, width: 100, height: 50, child: Container(color: Colors.blue), ), ); } @override void dispose() { _controller.close(); super.dispose(); } @override Widget build(BuildContext context) { return StreamBuilder<CanvasController>( stream: _controller.stream, builder: (context, snapshot) { if (!snapshot.hasData) { return Scaffold( appBar: AppBar(), body: Center(child: CircularProgressIndicator()), ); } final instance = snapshot.data; return Scaffold( appBar: AppBar( actions: [FocusScope( canRequestFocus: false, child: IconButton( tooltip: 'Zoom In', icon: Icon(Icons.zoom_in), onPressed: _controller.zoomIn, ), ), FocusScope( canRequestFocus: false, child: IconButton( tooltip: 'Zoom Out', icon: Icon(Icons.zoom_out), onPressed: _controller.zoomOut, ), ), FocusScope( canRequestFocus: false, child: IconButton( tooltip: 'Reset the Scale and Offset', icon: Icon(Icons.restore), onPressed: _controller.reset, ), ),], ), body: Listener( behavior: HitTestBehavior.opaque, onPointerSignal: (details) { if (details is PointerScrollEvent) { GestureBinding.instance.pointerSignalResolver .register(details, (event) { if (event is PointerScrollEvent) { if (_controller.shiftPressed) { double zoomDelta = (-event.scrollDelta.dy / 300); _controller.scale = _controller.scale + zoomDelta; } else { _controller.offset = _controller.offset - event.scrollDelta; } } }); } }, onPointerMove: (details) { _controller.updateTouch( details.pointer, details.localPosition, details.position, ); }, onPointerDown: (details) { _controller.addTouch( details.pointer, details.localPosition, details.position, ); }, onPointerUp: (details) { _controller.removeTouch(details.pointer); }, onPointerCancel: (details) { _controller.removeTouch(details.pointer); }, child: RawKeyboardListener( autofocus: true, focusNode: _controller.focusNode, onKey: (key) => _controller.rawKeyEvent(context, key), child: SizedBox.expand( child: Stack( children: [for (final object in instance.objects) AnimatedPositioned.fromRect( duration: const Duration(milliseconds: 50), rect: object.rect.adjusted( _controller.offset, _controller.scale, ), child: FittedBox( fit: BoxFit.fill, child: SizedBox.fromSize( size: object.size, child: object.child, ), ), )], ), ), ), ), ); }); }}extension RectUtils on Rect { Rect adjusted(Offset offset, double scale) { final left = (this.left + offset.dx) * scale; final top = (this.top + offset.dy) * scale; final width = this.width * scale; final height = this.height * scale; return Rect.fromLTWH(left, top, width, height); }}

You can zoom and the blocks all scale correctly and pan around.

Just press the reset button to start over.

Part 7 - Multi Touch Input #

Now time for the fingers. For this you will need a touchscreen device to test. You can plug in your phone or if you have a touch screen computer you can run the web version. Update the controller with following:

import 'dart:async';import 'dart:math' as math;import 'package:flutter/gestures.dart';import 'package:flutter/material.dart';import 'package:flutter/services.dart';import '../classes/canvas_object.dart';import '../classes/rect_points.dart';/// Control the canvas and the objects on itclass CanvasController { /// Controller for the stream output final _controller = StreamController<CanvasController>(); /// Reference to the stream to update the UI Stream<CanvasController> get stream => _controller.stream; /// Emit a new event to rebuild the UI void add([CanvasController val]) => _controller.add(val ?? this); /// Stop the stream and finish void close() { _controller.close(); focusNode.dispose(); } /// Start the stream void init() => add(); // -- Canvas Objects -- final List<CanvasObject<Widget>> _objects = []; /// Current Objects on the canvas List<CanvasObject<Widget>> get objects => _objects; /// Add an object to the canvas void addObject(CanvasObject<Widget> value) => _update(() { _objects.add(value); }); /// Add an object to the canvas void updateObject(int i, CanvasObject<Widget> value) => _update(() { _objects[i] = value; }); /// Remove an object from the canvas void removeObject(int i) => _update(() { _objects.removeAt(i); }); /// Focus node for listening for keyboard shortcuts final focusNode = FocusNode(); /// Raw events from keys pressed void rawKeyEvent(BuildContext context, RawKeyEvent key) { // Scale keys if (key.isKeyPressed(LogicalKeyboardKey.minus)) { zoomOut(); } if (key.isKeyPressed(LogicalKeyboardKey.equal)) { zoomIn(); } // Directional Keys if (key.isKeyPressed(LogicalKeyboardKey.arrowLeft)) { offset = offset + Offset(offsetAdjust, 0.0); } if (key.isKeyPressed(LogicalKeyboardKey.arrowRight)) { offset = offset + Offset(-offsetAdjust, 0.0); } if (key.isKeyPressed(LogicalKeyboardKey.arrowUp)) { offset = offset + Offset(0.0, offsetAdjust); } if (key.isKeyPressed(LogicalKeyboardKey.arrowDown)) { offset = offset + Offset(0.0, -offsetAdjust); } _shiftPressed = key.isShiftPressed; _metaPressed = key.isMetaPressed; /// Update Controller Instance add(this); } /// Trigger Shift Press void shiftSelect() { _shiftPressed = true; } /// Trigger Meta Press void metaSelect() { _metaPressed = true; } final Map<int, Offset> _pointerMap = {}; /// Number of inputs currently on the screen int get touchCount => _pointerMap.values.length; /// Marquee selection on the canvas RectPoints get marquee => _marquee; RectPoints _marquee; /// Dragging a canvas object bool get isMovingCanvasObject => _isMovingCanvasObject; bool _isMovingCanvasObject = false; final List<int> _selectedObjects = []; List<int> get selectedObjectsIndices => _selectedObjects; List<CanvasObject<Widget>> get selectedObjects => _selectedObjects.map((i) => _objects[i]).toList(); bool isObjectSelected(int i) => _selectedObjects.contains(i); /// Called every time a new input touches the screen void addTouch(int pointer, Offset offsetVal, Offset globalVal) { _pointerMap[pointer] = offsetVal; if (shiftPressed) { final pt = (offsetVal / scale) - (offset); _marquee = RectPoints(pt, pt); } /// Update Controller Instance add(this); } /// Called when any of the inputs update position void updateTouch(int pointer, Offset offsetVal, Offset globalVal) { if (_marquee != null) { // Update New Widget Rect final _pts = _marquee; final a = _pointerMap.values.first; _pointerMap[pointer] = offsetVal; final b = _pointerMap.values.first; final delta = (b - a) / scale; _pts.end = _pts.end + delta; _marquee = _pts; final _rect = Rect.fromPoints(_pts.start, _pts.end); _selectedObjects.clear(); for (var i = 0; i < _objects.length; i++) { if (_rect.overlaps(_objects[i].rect)) { _selectedObjects.add(i); } } } else if (touchCount == 1) { // Widget Move _isMovingCanvasObject = true; final a = _pointerMap.values.first; _pointerMap[pointer] = offsetVal; final b = _pointerMap.values.first; if (_selectedObjects.isEmpty) return; for (final idx in _selectedObjects) { final widget = _objects[idx]; final delta = (b - a) / scale; final _newOffset = widget.offset + delta; _objects[idx] = widget.copyWith(dx: _newOffset.dx, dy: _newOffset.dy); } } else if (touchCount == 2) { // Scale and Rotate Update _isMovingCanvasObject = false; final _rectA = _getRectFromPoints(_pointerMap.values.toList()); _pointerMap[pointer] = offsetVal; final _rectB = _getRectFromPoints(_pointerMap.values.toList()); final _delta = _rectB.center - _rectA.center; final _newOffset = offset + (_delta / scale); offset = _newOffset; final aDistance = (_rectA.topLeft - _rectA.bottomRight).distance; final bDistance = (_rectB.topLeft - _rectB.bottomRight).distance; final change = (bDistance / aDistance); scale = scale * change; } else { // Pan Update _isMovingCanvasObject = false; final _rectA = _getRectFromPoints(_pointerMap.values.toList()); _pointerMap[pointer] = offsetVal; final _rectB = _getRectFromPoints(_pointerMap.values.toList()); final _delta = _rectB.center - _rectA.center; offset = offset + (_delta / scale); } _pointerMap[pointer] = offsetVal; /// Update Controller Instance add(this); } /// Called when a input is removed from the screen void removeTouch(int pointer) { _pointerMap.remove(pointer); if (touchCount < 1) { _isMovingCanvasObject = false; } if (_marquee != null) { _marquee = null; _shiftPressed = false; } /// Update Controller Instance add(this); } void selectObject(int i) => _update(() { if (!_metaPressed) { _selectedObjects.clear(); } _selectedObjects.add(0); final item = _objects.removeAt(i); _objects.insert(0, item); }); /// Checks if the shift key on the keyboard is pressed bool get shiftPressed => _shiftPressed; bool _shiftPressed = false; /// Checks if the meta key on the keyboard is pressed bool get metaPressed => _metaPressed; bool _metaPressed = false; /// Scale of the canvas double get scale => _scale; double _scale = 1; set scale(double value) => _update(() { if (value <= minScale) { value = minScale; } else if (value >= maxScale) { value = maxScale; } _scale = value; }); /// Max possible scale static const double maxScale = 3.0; /// Min possible scale static const double minScale = 0.2; /// How much to scale the canvas in increments static const double scaleAdjust = 0.05; /// How much to shift the canvas in increments static const double offsetAdjust = 15; /// Current offset of the canvas Offset get offset => _offset; Offset _offset = Offset.zero; set offset(Offset value) => _update(() { _offset = value; }); static const double _scaleDefault = 1; static const Offset _offsetDefault = Offset.zero; /// Reset the canvas zoom and offset void reset() { scale = _scaleDefault; offset = _offsetDefault; } /// Zoom in the canvas void zoomIn() { scale += scaleAdjust; } /// Zoom out the canvas void zoomOut() { scale -= scaleAdjust; } void _update(void Function() action) { action(); add(this); } Rect _getRectFromPoints(List<Offset> offsets) { if (offsets.length == 2) { return Rect.fromPoints(offsets.first, offsets.last); } final dxs = offsets.map((e) => e.dx).toList(); final dys = offsets.map((e) => e.dy).toList(); double left = _minFromList(dxs); double top = _minFromList(dys); double bottom = _maxFromList(dys); double right = _maxFromList(dxs); return Rect.fromLTRB(left, top, right, bottom); } double _minFromList(List<double> values) { double value = double.infinity; for (final item in values) { value = math.min(item, value); } return value; } double _maxFromList(List<double> values) { double value = -double.infinity; for (final item in values) { value = math.max(item, value); } return value; }}

Add a new file src/classes/rect_points.dart and add the following:

import 'dart:ui';class RectPoints { RectPoints(this.start, this.end); Offset start, end; Rect get rect => Rect.fromPoints(start, end);}

Update the main.dart with the following:

import 'package:flutter/material.dart';import 'ui/home/screen.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, accentColor: Colors.red, visualDensity: VisualDensity.adaptivePlatformDensity, ), darkTheme: ThemeData.dark().copyWith( visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomeScreen(), ); }}

Update the home screen with the following:

import 'package:flutter/gestures.dart';import 'package:flutter/material.dart';import '../../src/classes/canvas_object.dart';import '../../src/controllers/canvas.dart';class HomeScreen extends StatefulWidget { const HomeScreen({Key key}) : super(key: key); @override _HomeScreenState createState() => _HomeScreenState();}class _HomeScreenState extends State<HomeScreen> { final _controller = CanvasController(); @override void initState() { _controller.init(); _dummyData(); super.initState(); } void _dummyData() { _controller.addObject( CanvasObject( dx: 20, dy: 20, width: 100, height: 100, child: Container(color: Colors.red), ), ); _controller.addObject( CanvasObject( dx: 80, dy: 60, width: 100, height: 200, child: Container(color: Colors.green), ), ); _controller.addObject( CanvasObject( dx: 100, dy: 40, width: 100, height: 50, child: Container(color: Colors.blue), ), ); } @override void dispose() { _controller.close(); super.dispose(); } @override Widget build(BuildContext context) { return StreamBuilder<CanvasController>( stream: _controller.stream, builder: (context, snapshot) { if (!snapshot.hasData) { return Scaffold( appBar: AppBar(), body: Center(child: CircularProgressIndicator()), ); } final instance = snapshot.data; return Scaffold( appBar: AppBar( actions: [FocusScope( canRequestFocus: false, child: IconButton( tooltip: 'Selection', icon: Icon(Icons.select_all), color: instance.shiftPressed ? Theme.of(context).accentColor : null, onPressed: _controller.shiftSelect, ), ), FocusScope( canRequestFocus: false, child: IconButton( tooltip: 'Meta Key', color: instance.metaPressed ? Theme.of(context).accentColor : null, icon: Icon(Icons.category), onPressed: _controller.metaSelect, ), ), FocusScope( canRequestFocus: false, child: IconButton( tooltip: 'Zoom In', icon: Icon(Icons.zoom_in), onPressed: _controller.zoomIn, ), ), FocusScope( canRequestFocus: false, child: IconButton( tooltip: 'Zoom Out', icon: Icon(Icons.zoom_out), onPressed: _controller.zoomOut, ), ), FocusScope( canRequestFocus: false, child: IconButton( tooltip: 'Reset the Scale and Offset', icon: Icon(Icons.restore), onPressed: _controller.reset, ), ),], ), body: Listener( behavior: HitTestBehavior.opaque, onPointerSignal: (details) { if (details is PointerScrollEvent) { GestureBinding.instance.pointerSignalResolver .register(details, (event) { if (event is PointerScrollEvent) { if (_controller.shiftPressed) { double zoomDelta = (-event.scrollDelta.dy / 300); _controller.scale = _controller.scale + zoomDelta; } else { _controller.offset = _controller.offset - event.scrollDelta; } } }); } }, onPointerMove: (details) { _controller.updateTouch( details.pointer, details.localPosition, details.position, ); }, onPointerDown: (details) { _controller.addTouch( details.pointer, details.localPosition, details.position, ); }, onPointerUp: (details) { _controller.removeTouch(details.pointer); }, onPointerCancel: (details) { _controller.removeTouch(details.pointer); }, child: RawKeyboardListener( autofocus: true, focusNode: _controller.focusNode, onKey: (key) => _controller.rawKeyEvent(context, key), child: SizedBox.expand( child: Stack( children: [for (var i = 0; i < instance.objects.length; i++) Positioned.fromRect( rect: instance.objects[i].rect.adjusted( _controller.offset, _controller.scale, ), child: Container( decoration: BoxDecoration( border: Border.all( color: instance.isObjectSelected(i) ? Colors.grey : Colors.transparent, )), child: GestureDetector( onTapDown: (_) => _controller.selectObject(i), child: FittedBox( fit: BoxFit.fill, child: SizedBox.fromSize( size: instance.objects[i].size, child: instance.objects[i].child, ), ), ), ), ), if (instance?.marquee != null) Positioned.fromRect( rect: instance.marquee.rect .adjusted(instance.offset, instance.scale), child: Container( color: Colors.blueAccent.withOpacity(0.3), ), ), ], ), ), ), ), ); }); }}extension RectUtils on Rect { Rect adjusted(Offset offset, double scale) { final left = (this.left + offset.dx) * scale; final top = (this.top + offset.dy) * scale; final width = this.width * scale; final height = this.height * scale; return Rect.fromLTWH(left, top, width, height); }}

Now you can move any object on the canvas just by clicking and dragging. You can zoom with 2 fingers and pan with 2 or 3 fingers. If you hold down the shift key then you can use a marquee to select multiple and if you hold down the meta/command key then you can select multiple by tapping each.

Conclusion #

If you are on a device without a keyboard you can tap the new icons to turn on the keyboard key actions. When the object is selected there is a grey border.

Now you can add any widget to the canvas and pan and zoom!

How To Send Push Notifications on Flutter Web (FCM)

Rody Davis — Fri, 01 May 2020 00:00:00 +0000

If you are using Firebase then you are probably familiar with Firebase Cloud Messaging. The setup on Flutter web is very different than mobile and other plugins you are probably used to.

Setting Up #

Open your web/index.html and look for the following script. If you do not have one you can add it now in the

tag.

<script>if ("serviceWorker" in navigator) { window.addEventListener("load", function () { navigator.serviceWorker.register("/flutter_service_worker.js"); });}</script>

We need to modify it to support the FCM service worker. The important thing we need to do is comment out the flutter_service_worker.js so that we will not get 404 errors when registering the FCM service worker.

<script>if ("serviceWorker" in navigator) { window.addEventListener("load", function () { // navigator.serviceWorker.register("/flutter_service_worker.js"); navigator.serviceWorker.register("/firebase-messaging-sw.js"); });}</script>

Now create a new file called firebase-messaging-sw.js in the web folder with the following contents:

Make sure to replace the config keys with your firebase keys.

Helper Methods #

Create a new dart file wherever you like named firebase_messaging.dart with the following:

Create a button in the app that will be used to request permissions. While it is possible to request for permission when the app launches this is usually bad practice as the user is unlikely to accept and there is no trust built yet. You can request permissions with the following:

final _messaging = FBMessaging.instance;_messaging.requestPermission().then((_) async { final _token = await _messaging.getToken(); print('Token: $_token');});

You can listen to messages with the following:

final _messaging = FBMessaging.instance;_messaging.stream.listen((event) { print('New Message: ${event}');});

Testing #

Now when you run your application and request permissions you will get a token back. With this token you can open the firebase console and sent a test message to the token.

Conclusion #

Now you can send push notifications to Flutter apps! You still need to use conditional imports to support the mobile side as well but stay tuned for an example with that. Let me know your questions and any feedback you may have.

Deep Linking for Flutter Web

Rody Davis — Wed, 11 Mar 2020 00:00:00 +0000

In this article I will show you how to have proper URL navigation for your application. Open links to specific pages, protected routes and custom transitions.

There is a online demo here:

https://rodydavis.github.io/flutter_deep_linking/

Here is the source code:

https://github.com/rodydavis/flutter_deep_linking

Setup #

Create a new flutter project called “flutter_deep_linking”

Open that folder up in VSCode

Update your “pubspec.yaml” with the following:

Step 1 #

Create a file at “lib/ui/home/screen.dart” and add the following:

Update your “lib/main.dart” with the following:

Run your application and you should see the following:

Step 2 #

Now we need to grab the url the user enters into the address bar.

Create a folder at this location “lib/plugins/navigator”

Create a file inside named: “web.dart” with the following:

Create a file inside named: “unsupported.dart” with the following:

Create a file inside named: “navigator.dart” with the following:

Now go back to your “lib/main.dart” file and add the navigator:

It’s important to import the navigator as shown as this will have the conditional import for web compiling.

If you run the app now nothing should change.

Step 3 #

Now let’s add the proper routing.

Create a new file “lib/ui/router.dart” and add the following:

Also update “lib/main.dart” with the following:

Notice how we removed the “home” field for MaterialApp. This is because the router will handle everything. By default we will go home on “/”

Step 4 #

Now let’s add multiple screens to put this to the test! Add the following folders and files.

Create a file “lib/ui/account/screen.dart” and add the following:

Create a file “lib/ui/settings/screen.dart” and add the following:

Create a file “lib/ui/about/screen.dart” and add the following:

Add the following to “lib/ui/router.dart”:

Now when you navigate to /about, /account and /settings you will go to the new pages!

Step 5 #

Now let’s tie into the browser navigation buttons! Update “lib/ui/home/screen.dart” with the following:

Now when you run the application and click on the settings icon it will launch the new screen as expected. But if you click your browsers back button it will go back to the home screen!

Step 6 #

These urls are great but what if you want to pass data such as an ID that is not known ahead of time? No worries!

Update “lib/ui/account/screen.dart” with the following:

Let’s update our “lib/ui/router.dart” with the following:

Now when you run your application and navigate to “/account/40” you will see the following:

Conclusion #

Dynamic routes work great for Flutter web, you just need to know what to tweak! This package uses a forked version of fluro for some fixes I added but once the PRs is merged you can just use the regular package. Let me know what you think below and if there is a better way I am not seeing!

Here is the final code: https://github.com/rodydavis/flutter_deep_linking

Flutter Cheat Sheet — Terminal

Rody Davis — Thu, 05 Mar 2020 00:00:00 +0000

Run Flutter web with SKIA

flutter run -d web --release --dart-define=FLUTTER_WEB_USE_SKIA=true

Run Flutter web with Canvas Kit

flutter run -d chrome --release --dart-define=FLUTTER_WEB_USE_EXPERIMENTAL_CANVAS_TEXT=true

Build your Flutter web app to Github Pages to the docs folder

flutter build web && rm -rf ./docs && mkdir ./docs && cp -a ./build/web/. ./docs/

Clean rebuild CocoaPods

cd ios && pod deintegrate && pod cache clean —all && pod install && cd ..

Sometimes with firebase you need to run: pod update Firebase

Create Dart package with Example

flutter create -t plugin . && flutter create -i swift -a kotlin --androidx example

Watch Build Files

flutter packages pub run build_runner watch -—delete-conflicting-outputs

Generate Build Files

flutter packages pub run build_runner build -—delete-conflicting-outputs

Build Bug Report

flutter run —bug-report

Flutter generate test coverage

flutter test --coverage && genhtml -o coverage coverage/lcov.info

Rebuild Flutter Cache

flutter pub pub cache repair

Conditional Export/Import

export 'unsupported.dart'if (dart.library.html) 'web.dart'if (dart.library.io) 'mobile.dart';

Kill Dart Running

killall -9 dart

Host your Flutter Project as a REST API

Rody Davis — Fri, 18 Oct 2019 00:00:00 +0000

After you build your flutter project you may want to reuse the models and business logic from your lib folder. I will show you how to go about setting up the project to have iOS, Android, Web, Windows, MacOS, Linux and a REST API interface with one project. The REST API can also be deploy to Google Cloud Run for Dart everywhere.

One Codebase for Client and Sever.

This will allow you to expose your Dart models as a REST API and run your business logic from your lib folder while the application runs the models as they are. Here is the final project.

Setting Up #

As with any Flutter project I am going to assume that you already have Flutter installed on your machine and that you can create a project. This is a intermediate level difficulty so read on if you are up to the challenge. You will also need to know the basics of Docker.

Why one project? #

It may not be obvious but when building complex applications you will at some point have a server and an application that calls that server. Firebase is an excellent option for doing this and I use it in almost all my projects. Firebase Functions are really powerful but you are limited by Javascript or Typescript. What if you could use the same packages that you are using in the Flutter project, or better yet what if they both used the same?

When you have a server project and a client project that communicate over a rest api or client sdk like Firebase then you will run into the problem that the server has models of objects stored and the client has models of the objects that are stored. This can lead to a serious mismatch when it changed without you knowing. GraphQL helps a lot with this since you define the model that you recieve. This approach allows your business logic to be always up to date for both the client and server.

Client Setup #

The first step is to just build your application. The only difference that we will make is keeping the UI and business logic separate. When starting out with Flutter it can be very easy to throw all the logic into the screen and calling setState when the data changes. Even the application when creating a new Flutter project does this. That's why choosing a state management solutionis so important.

To make things clean and concise we will make 2 folders in our lib folder.

ui for all Flutter Widgets and Screens

src for all business logic, classes, models and utility functions

This will leave us with main.dart being only the entry point into our client application.

import 'package:flutter/material.dart';import 'plugins/desktop/desktop.dart';import 'ui/home/screen.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData.light(), darkTheme: ThemeData.dark(), home: HomeScreen(), ); }}

Let’s Start by making a tab bar for the 2 screens. Create a file in the folder ui/home/screen.dart and add the following:

import 'package:flutter/material.dart';import '../counter/screen.dart';import '../todo/screen.dart';class HomeScreen extends StatefulWidget { @override _HomeScreenState createState() => _HomeScreenState();}class _HomeScreenState extends State<HomeScreen> { int _currentIndex = 0;@override Widget build(BuildContext context) { return Scaffold( body: IndexedStack( index: _currentIndex, children: <Widget>[CounterScreen(), TodosScreen(),], ), bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (val) { if (mounted) setState(() { _currentIndex = val; }); }, type: BottomNavigationBarType.fixed, items: [BottomNavigationBarItem( icon: Icon(Icons.add), title: Text('Counter'), ), BottomNavigationBarItem( icon: Icon(Icons.list), title: Text('Todos'), ),], ), ); }}

This is just a basic screen and should look very normal.

Counter Example #

Now create a file ui/counter/screen.dart and add the following:

import 'package:flutter/material.dart';import 'package:shared_dart/src/models/counter.dart';class CounterScreen extends StatefulWidget { @override _CounterScreenState createState() => _CounterScreenState();}class _CounterScreenState extends State<CounterScreen> { CounterModel _counterModel = CounterModel();void _incrementCounter() { setState(() { // This call to setState tells the Flutter framework that something has // changed in this State, which causes it to rerun the build method below // so that the display can reflect the updated values. If we changed // _counter without calling setState(), then the build method would not be // called again, and so nothing would appear to happen. _counterModel.add(); }); }@override Widget build(BuildContext context) { // This method is rerun every time setState is called, for instance as done // by the _incrementCounter method above. // // The Flutter framework has been optimized to make rerunning build methods // fast, so that you can just rebuild anything that needs updating rather // than having to individually change instances of widgets. return Scaffold( appBar: AppBar( // Here we take the value from the MyCounterPage object that was created by // the App.build method, and use it to set our appbar title. title: Text('Counter Screen'), ), body: Center( // Center is a layout widget. It takes a single child and positions it // in the middle of the parent. child: Column( // Column is also a layout widget. It takes a list of children and // arranges them vertically. By default, it sizes itself to fit its // children horizontally, and tries to be as tall as its parent. // // Invoke "debug painting" (press "p" in the console, choose the // "Toggle Debug Paint" action from the Flutter Inspector in Android // Studio, or the "Toggle Debug Paint" command in Visual Studio Code) // to see the wireframe for each widget. // // Column has various properties to control how it sizes itself and // how it positions its children. Here we use mainAxisAlignment to // center the children vertically; the main axis here is the vertical // axis because Columns are vertical (the cross axis would be // horizontal). mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Text( 'You have pushed the button this many times:', ), Text( '${_counterModel.count}', style: Theme.of(context).textTheme.display1, ),], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); }}

This is the default counter app you get when you create a Flutter application but with one change, it uses CounterModel to hold the logic.

Create the counter model at src/models/counter.dart and add the following:

class CounterModel { CounterModel(); int _count = 0; int get count => _count; void add() => _count++; void subtract() => _count--; void set(int val) => _count = val;}

As you can see it is really easy to expose only what we want to while still having complete flexibility. You could use provider here if you choose, or even bloc and/or streams.

Todo Example #

Lets create a file at ui/todos/screen.dart and add the following:

import 'package:flutter/material.dart';import '../../src/classes/todo.dart';import '../../src/models/todos.dart';class TodosScreen extends StatefulWidget { @override _TodosScreenState createState() => _TodosScreenState();}class _TodosScreenState extends State<TodosScreen> { final _model = TodosModel(); List<ToDo> _todos;@override void initState() { _model.getList().then((val) { if (mounted) setState(() { _todos = val; }); }); super.initState(); }@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Todos Screen'), ), body: Builder( builder: (_) { if (_todos != null) { return ListView.builder( itemCount: _todos.length, itemBuilder: (context, index) { final _item = _todos[index]; return ListTile( title: Text(_item.title), subtitle: Text(_item.completed ? 'Completed' : 'Pending'), ); }, ); } return Center( child: CircularProgressIndicator(), ); }, ), ); }}

You will see that we have the logic in TodosModel and uses the class ToDo for toJson and fromJson.

Create a file at the location src/classes/todo.dart and add the following:

// To parse this JSON data, do//// final toDo = toDoFromJson(jsonString);import 'dart:convert';List<ToDo> toDoFromJson(String str) => List<ToDo>.from(json.decode(str).map((x) => ToDo.fromJson(x)));String toDoToJson(List<ToDo> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));class ToDo { int userId; int id; String title; bool completed;ToDo({ this.userId, this.id, this.title, this.completed, });factory ToDo.fromJson(Map<String, dynamic> json) => ToDo( userId: json["userId"], id: json["id"], title: json["title"], completed: json["completed"], );Map<String, dynamic> toJson() => { "userId": userId, "id": id, "title": title, "completed": completed, };}

and create the model src/models/todo.dart and add the following:

import 'dart:convert';import 'package:http/http.dart' as http;import 'package:shared_dart/src/classes/todo.dart' as t;class TodosModel { final kTodosUrl = '[https://jsonplaceholder.typicode.com/todos'](https://jsonplaceholder.typicode.com/todos');Future<List<t.ToDo>> getList() async { final _response = await http.get(kTodosUrl); if (_response != null) { final _todos = t.toDoFromJson(_response.body); if (_todos != null) { return _todos; } } return []; }Future<t.ToDo> getItem(int id) async { final _response = await http.get('$kTodosUrl/$id'); if (_response != null) { final _todo = t.ToDo.fromJson(json.decode(_response.body)); if (_todo != null) { return _todo; } } return null; }}

Here we just get dummy data from a url that emits json and convert them to our classes. This is an example I want to show with networking. There is only one place that fetches the data.

Run the Project (Web) #

As you can see when you run your project on chrome you will get the same application that you got on mobile. Even the networking is working in the web. You can call the model and retrieve the list just like you would expect.

Server Setup #

Now time for the magic..

In the root of the project folder create a file Dockerfile and add the following:

# Use Google's official Dart image.# [https://hub.docker.com/r/google/dart-runtime/](https://hub.docker.com/r/google/dart-runtime/)FROM google/dart-runtime

Create another file at the root called service.yaml and add the following:

apiVersion: serving.knative.dev/v1 kind: Service metadata: name: PROJECT_NAME namespace: default spec: template: spec: containers: - image: docker.io/YOUR_DOCKER_NAME/PROJECT_NAME env: - name: TARGET value: "PROJECT_NAME v1"

Replace PROJECT_NAME with your project name, mine is shared-dart for this example.

You will also need to replace YOUR_DOCKER_NAME with your docker username so the container can be deployed correctly.

Update your pubspec.yaml with the following:

name: shared_dartdescription: A new Flutter project.publish_to: noneversion: 1.0.0+1environment: sdk: ">=2.1.0 <3.0.0"dependencies: flutter: sdk: flutter shelf: ^0.7.3 cupertino_icons: ^0.1.2 http: ^0.12.0+2dev_dependencies: flutter_test: sdk: flutterflutter: uses-material-design: true

The important package here is shelf as it allows us to run a http server with dart.

Create a folder in the root of the project called bin then add a file server.dart and replace it with the following:

import 'dart:io';import 'package:shelf/shelf.dart' as shelf;import 'package:shelf/shelf_io.dart' as io;import 'src/routing.dart';void main() { final handler = const shelf.Pipeline() .addMiddleware(shelf.logRequests()) .addHandler(RouteUtils.handler);final port = int.tryParse(Platform.environment['PORT'] ?? '8080'); final address = InternetAddress.anyIPv4;io.serve(handler, address, port).then((server) { server.autoCompress = true; print('Serving at [http://${server.address.host}:${server.port}'](http://${server.address.host}:${server.port}')); });}

This will tell the container what port to listen for and how to handle the requests.

Create a folder src in the bin folder and add a file routing.dart and replace the contents with the following:

import 'dart:async';import 'package:shelf/shelf.dart' as shelf;import 'controllers/index.dart';import 'result.dart';class RouteUtils { static FutureOr<shelf.Response> handler(shelf.Request request) { var component = request.url.pathSegments.first; var handler = _handlers(request)[component]; if (handler == null) return shelf.Response.notFound(null); return handler; }static Map<String, FutureOr<shelf.Response>> _handlers( shelf.Request request) { return { 'info': ServerResponse('Info', body: { "version": 'v1.0.0', "status": "ok", }).ok(), 'counter': CounterController().result(request), 'todos': TodoController().result(request), }; }}

There is still nothing imported from our main project but you will start to see some similarities. Here we specify controllers for todos and counter url paths.

'counter': CounterController().result(request),'todos': TodoController().result(request),

that means any url with the following:https://mydomain.com/todos , https://mydomain.com/todos/1

will get routed to the TodoController to handle the request.

This is also the first time I found out about FutureOr. It allows you to return a sync or async function.

And important part about build a REST API is having a consistent response body, so here we can create a wrapper that adds fields we always want to return, like the status of the call, a message and the body.

Create a file at src/result.dart and add the following:

import 'dart:convert';import 'package:shelf/shelf.dart' as shelf;class ServerResponse { final String message; final dynamic body; final StatusType type;ServerResponse( this.message, { this.type = StatusType.success, this.body, });Map<String, dynamic> toJson() { return { "status": type.toString().replaceAll('StatusType.', ''), "message": message, "body": body ?? '', }; }String toJsonString() { return json.encode(toJson()); }shelf.Response ok() { return shelf.Response.ok( toJsonString(), headers: { 'Content-Type': 'application/json', }, ); }}enum StatusType { success, error }abstract class ResponseImpl { Future<shelf.Response> result(shelf.Request request);}

This will always return json and the fields that we want to show. You could also include your paging meta data here.

Create a file in at the location src/controllers/counter.dart and add the following:

import 'package:shared_dart/src/models/counter.dart';import 'package:shelf/shelf.dart' as shelf;import '../result.dart';class CounterController implements ResponseImpl { const CounterController();@override Future<shelf.Response> result(shelf.Request request) async { final _model = CounterModel(); final _params = request.url.queryParameters; if (_params != null) { final _val = int.tryParse(_params['count'] ?? '0'); _model.set(_val); } else { _model.add(); } return ServerResponse('Info', body: { "counter": _model.count, }).ok(); }}

You will see the import to the lib folder of the root project. Since it shares the pubspec.yaml all the packages can be shared. You can import the CounterModel that we created earlier.

Create a file in at the location src/controllers/todos.dart and add the following:

import 'package:shared_dart/src/models/todos.dart';import 'package:shelf/src/request.dart';import 'package:shelf/src/response.dart';import '../result.dart';class TodoController implements ResponseImpl { @override Future<Response> result(Request request) async { final _model = TodosModel(); if (request.url.pathSegments.length > 1) { final _id = int.tryParse(request.url.pathSegments[1] ?? '1'); final _todo = await _model.getItem(_id); return ServerResponse('Todo Item', body: _todo).ok(); } final _todos = await _model.getList(); return ServerResponse( 'List Todos', body: _todos.map((t) => t.toJson()).toList(), ).ok(); }}

Just like before we are importing the TodosModel model from the lib folder.

For convenience add a file at the location src/controllers/index.dart and add the following:

export 'counter.dart';export 'todo.dart';

This will make it easier to import all the controllers.

Run the Project (Server) #

If you are using VSCode then you will need to update your launch.json with the following:

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: [https://go.microsoft.com/fwlink/?linkid=830387](https://go.microsoft.com/fwlink/?linkid=830387) "version": "0.2.0", "configurations": [{ "name": "Client", "request": "launch", "type": "dart", "program": "lib/main.dart" }, { "name": "Server", "request": "launch", "type": "dart", "program": "bin/server.dart" }]}

Now when you hit run with Server selected you will see the output:

You can navigate to this in a browser but you can also work with this in Postman.

Just by adding to the url todos and todos/1 it will return different responses.

For the counter model we can use query parameters too!

Just by adding ?count=22 it will update the model with the input.

Keep in mind this is running your Dart code from you lib folder in your Flutter project without needing the Flutter widgets!

As a side benefit we can also run this project on Desktop. Check out the final project for the desktop folders needed from Flutter Desktop Embedding.

Conclusion #

Now if you wanted to deploy the container to Cloud Run you could with the following command:

gcloud builds submit — tag gcr.io/YOUR_GOOGLE_PROJECT_ID/PROJECT_NAME .

Replace PROJECT_NAME with your project name, mine is shared-dart for this example.

You will also need to replace YOUR_GOOGLE_PROJECT_ID with your Google Cloud Project ID. You can create one here.

Again the final project source code is here. Let me know your thoughts!

How to build a native cross platform project with Flutter

Rody Davis — Fri, 06 Sep 2019 00:00:00 +0000

Import dart:html and dart:io in the same project!

You can find the final project here.

Up to now you have been able to create projects with Flutter that run on iOS/Android, Web and Desktop but only sharing pure dart plugins. Flutter launched Flutter for web at Google I/O and was a temporary fork that required you to change imports from import 'package:flutter/material.dart'; to import 'package:flutter_web/material.dart';. As you can image this was really difficult for a code base as you had to create a fork and change the imports. This also meant that you could not import any package that needed on a path or depended on flutter. The time as come and the merge is complete. Now you no longer need to change the imports!

You can use any plugin now, have a debugger, create new flutter projects with the web folder added, web plugins, and so much more..

Disclaimer #

You will need to be on the latest flutter for this to work.

Download Flutter

If you are pretty new to Flutter you can check out this useful guide on how to create a new project step by step.

Create a new project named flutter_x and it should look like this:

You can also down the starter project here.

Your code should look like this:

Just to make sure everything is working go ahead and run the project on iOS/Android.

You should have the counter application running and working correctly. Now quit and run on Chrome. It should be listed as a device. You can also run from the command line flutter run -d chrome.

You do not get hot reload yet on web so be aware of that.

This is optional but I use this structure in all my apps

Your project should now look like this.

Open your pubspec.yaml and import the following packages.

dependencies: universal_html: url_launcher:

You can also remove the comments generated in the pubspec.yaml

Your pubspec.yaml will now read like this:

name: flutter_xdescription: A new Flutter project.version: 1.0.0+1environment: sdk: ">=2.1.0 <3.0.0"dependencies: flutter: sdk: fluttercupertino_icons: ^0.1.2 universal_html: ^1.1.0 url_launcher: ^5.1.2dev_dependencies: flutter_test: sdk: flutterflutter:uses-material-design: true

By default if you were to check if the device was mobile or web you will get an error at compile time when trying to import a plugin that is not meant for the platform. To get around this we will use dynamic imports.

Create a url_launcher folder and file url_launcher.dart, mobile.dart, web.dart, unsupported.dart inside the plugins folder.

In the file url_launcher.dart add the following:

export 'unsupported.dart' if (dart.library.html) 'web.dart' if (dart.library.io) 'mobile.dart';

This will pick the correct file at runtime and give a fallback if it is not supported.

To protect against edge cases you will need to set up a fallback for the import. In unsupported.dart add the following:

class UrlUtils { UrlUtils._();static void open(String url, {String name}) { throw 'Platform Not Supported'; }}

The class UrlUtils and the public methods have to match all three files for this to work correctly. Always set up the unsupported first then copy the file into mobile.dart and web.dart to ensure no typos.

You should now have 3 files with the above code in each class.

In mobile.dart add the following:

import 'package:url_launcher/url_launcher.dart';class UrlUtils { UrlUtils._();static void open(String url, {String name}) async { if (await canLaunch(url)) { await launch(url); } }}

This will open the link in safari view controller or android’s default browser respectively.

In web.dart add the following:

import 'package:universal_html/prefer_universal/html.dart' as html;class UrlUtils { UrlUtils._();static void open(String url, {String name}) { html.window.open(url, name); }}

This will open up a new window in the browser with the specified link.

Add a button to the center of the screen. The ui/home/screen.dart should read the following:

import 'package:flutter/material.dart';class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);final String title;@override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: RaisedButton( child: Text('Open Flutter.dev'), onPressed: () {}, )), ); }}

Update the onPressed to the following:

onPressed: () { try { UrlUtils.open('[https://flutter.dev'](https://flutter.dev')); } catch (e) { print('Error -> $e'); }},

Now when you go to import the UrlUtils it is important to import the correct URI.

Make sure to import import 'package:flutter_x/plugins/url_launcher/url_launcher.dart'; only.

You can use the relative import if you wish.

You UI code will now read the following:

import 'package:flutter/material.dart';import '../../plugins/url_launcher/url_launcher.dart';class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);final String title;@override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: RaisedButton( child: Text('Open Flutter.dev'), onPressed: () { try { UrlUtils.open('[https://flutter.dev'](https://flutter.dev')); } catch (e) { print('Error -> $e'); } }, )), ); }}

Your app on the web should look like this:

And when you tap the button..

And when you run it on iOS/Android it should look like this:

And when you tap the button..

Congratulations! You made it :)

Here is the final project located here.

Please reach out if you have any questions!

Originally published at http://github.com.

Creating Your First Flutter Project

Rody Davis — Sun, 28 Apr 2019 00:00:00 +0000

Flutter is a UI Toolkit from Google allowing you to create expressive and unique experiences unmatched on any platform. You can write your UI once and run it everywhere. Yes everywhere! Web, iOS, Android, Windows, Linux, MacOS, Raspberry PI and much more…

If you prefer a video you can follow the YouTube series I am doing called “Flutter Take 5” where I explore topics that you encounter when building a Flutter application. I will also give you tips and tricks as I go through the series.

What is Flutter #

Flutter recently crossed React Native on Github and now has more than 2 million developers using Flutter to create applications. There are more than 50,000 apps on Google Play alone published with Flutter.

Flutter - Beautiful native apps in record time

*Flutter is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from…*flutter.dev

Getting Started #

Getting started is very easy once you get the SDK installed. After it is installed creating new applications, plugins and packages is lighting fast. Follow this guide to install Flutter:

Install

*How to set up your code editor.*flutter.dev

One nice thing about Flutter is that it is developed in the open as an open source project that anyone can contribute to. If there is something missing you can easily fork the repo and make a PR for the missing functionality.

Create the Project #

Now that you have Flutter installed it is time to create your first (Of Many 😉) Flutter project! Open up your terminal and navigate to wherever you want the application folder to be created. Once you “cd” into the directory you can type the following:

$ flutter create my_awesome_project

You can replace “my_awesome_project” with whatever you want the project to be called. It is important to use snake_case as it is the valid syntax for project names in dart.

Congratulations you just created your first project!

Open the Project #

So you may be wondering what we just created so let us dive in to the details. You can open up you project in VSCode if you have it installed by typing the following into terminal:

$ cd my_awesome_project && code .

You can open up the folder in your favorite IDE if you prefer. Two important files to notice are the pubspec.yaml and lib/main.dart

Your UI and Logic is located at “lib/main.dart” and you should see the following:

You can define any dependencies and plugins needed for the application at “pubspec.yaml” and you should see the following:

Running the Project #

Running the application is very easy too. While there are buttons in all the IDEs you can also run your project from the command line for quick testing. You can also configure Flutter for Desktop and no need to wait for an emulator to warm up. Open your project and enter the following into terminal:

$ flutter run -d macos

Notice the “-d macos” as you can customize what device you want to run on. You should see the following in terminal:

Building macOS application... Syncing files to device macOS... 141msFlutter run key commands.r Hot reload. 🔥🔥🔥R Hot restart.h Repeat this help message.d Detach (terminate "flutter run" but leave application running).c Clear the screenq Quit (terminate the application on the device).An Observatory debugger and profiler on macOS is available at: [http://127.0.0.1:58932/f1Mspofty_k=/](http://127.0.0.1:58932/f1Mspofty_k=/)Application finished.

You can also run multiple devices at the same time. You can find more info on the Flutter Octopus here. If everything went well you should see the following application launch:

It is a pretty basic application at this point but it is important to show how easy it is to change the state in the application. You can rebuild the UI just by calling “setState()”.

Testing the Project #

Testing is one of the reasons I love Flutter so much and it is dead simple to run and write tests for the project. If you look at the file “test/widget_test.dart” you should see the following:

You can run these tests very easily. Open your project and type the following into the terminal:

$ flutter test00:07 +1: All tests passed!

Just like that all your tests will run and you can catch any bugs you missed.

You can also generate code coverage for your applications easily by typing the following:

$ flutter test --coverage

This will generate a new file at “coverage/lcov.info” and will read the following:

You can now easily create badges and graphs with the LCOV data. Here is a package that will make that easier:

test_coverage | Dart Package

*Command line utility to run tests in Dart VM and collect coverage data.*pub.dev

Conclusion #

Flutter makes it possible to build applications very quickly that do not depend on web or mobile technologies. It can familiar to writing a game as you have to design all your own UI. You can find the final source code here:

rodydavis/flutter_take_5

*A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…*github.com

You can also find the Flutter source code here:

flutter/flutter

_Flutter makes it easy and fast to build beautiful apps for mobile and beyond. - flutter/flutter_github.com

Automate Flutter App Releases

Rody Davis — Fri, 15 Mar 2019 00:00:00 +0000

TLDR You can find the script here.

Make your life easier and automate your builds to beta and production!

What you need #

Fastlane setup in each directory
build_runner as a dependency
Git Project in VCS

Initial Setup #

Download this file
Put it at the root level of your flutter project
Open the terminal and navigate to your project location
Enter this command: chmod +x release.sh

Usage #

Now you can call this script!

For beta: ./release.sh beta
For production: ./release.sh release

Overview #

Bump the version numbers if you are using the version in the pubspec.yaml
Release the apps with Fastlane
Format all Dart Files
Clean Project
Rebuild classes
Add commit messages
Updates Cocoa Pods

Building A Piano with Flutter

Rody Davis — Tue, 12 Mar 2019 00:00:00 +0000

TLDR #

You can find the final source code here.

This piano uses only 5032 bytes of Dart Code!

Winner of the Flutter Create Contest and you can see the certificate here!

What you will learn #

Working with Dark Mode
Forcing app to be in landscape
Working with custom files bundled with the app
Working with midi and sounds in flutter
Working with StatefulWidget
Using SafeArea and Semantics
Building an app with minimal code

What you need #

Flutter SDK Installed (More Info)
A .sf2 SoundFont File like this one
Physical iOS device (iOS Simulator does not work with this plugin for playing the sounds) or Android Emulator/Device

Setting Up #

You can either create a new project with Android Studio or VSCode using the GUI or navigate to the location you want your project and using this command in the terminal: lutter create -i swift -a kotlin flutter_piano. Make sure to include Swift and Kotlin Support!

Now that you have your project created it should look like this.

Let's start by adding some dependencies to our `pubspec.yaml'

dependencies: flutter: sdk: flutter tonic: ^0.2.3 flutter_midi: ^0.1.1+3 cupertino_icons: ^0.1.2

and add the .sf2 file

assets: - assets/sounds/Piano.sf2

If you haven't already create a new folder at the top of your project call assets and a subfolder called sounds and place the .sf2 file there and make sure it is named Piano.sf2

Because our app will only work in landscape we need to update those settings as well.

navigate to the /android/app/src/main/AndroidManifest.xml and add this line inside <activity in the <application:

`
android:screenOrientation="landscape"

Example:

navigate to /ios/Runner/info.plist and change:

`
UISupportedInterfaceOrientations

UIInterfaceOrientationLandscapeLeft
UIInterfaceOrientationLandscapeRight

Now we can start with the UI! When you run the application now it should start in landscape!

Step 1 #

To make it eaiser to read lets remove the comments. Use "find and replace" and search for \/\/.*

choose the "select all occurrances" button and hit backspace to delete.

Hit save and you should see the code format for you.

The 'main.dart' file should look like this:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.display1, ),], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); }}

Step 2 #

Delete the MyHomePage widget so you are left with this.

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }}

You should get an error and thats ok, we will fix that next.

Replace MyHomePage(title: 'Flutter Demo Home Page') with a Scaffold()

Step 3 #

Change MyApp to a StatefulWidget. You can do this quickly by selecting MyApp and choose "Convert to StatefulWidget" with the helper.

It should look like this now:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold(), ); }}

Step 4 #

Change the theme to dark. You can do this by setting the ThemeData in MaterialApp

change:

theme: ThemeData( primarySwatch: Colors.blue, ),

to this

theme: ThemeData.dark(),

Add and AppBar to the Scaffold

appBar: AppBar(title: Text("Flutter Piano")),

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData.dark(), home: Scaffold( appBar: AppBar(title: Text("Flutter Piano")), ), ); }}

Now build and run your app, it should look like this.

Step 5 #

We need to add some imports to the top:

import 'package:flutter/services.dart';import 'package:flutter_midi/flutter_midi.dart';

If you get an error make sure they are added in the pubspec.yaml from earlier, then restart the app. Be sure to run flutter packages get everytime you add a dependency.

Now we can add out initState() to our app.

@override initState() { FlutterMidi.unmute(); rootBundle.load("assets/sounds/Piano.sf2").then((sf2) { FlutterMidi.prepare(sf2: sf2, name: "Piano.sf2"); }); super.initState(); }

Run the app and make sure you do not get any errors. If you are running this on the iOS Simulator you will get the following error:

Could Not Load Midi on this Device. (Cannot run on simulator), have you included the sound font?

It is ok for developing the UI but once we start with the midi you will need to plug in a real device.

Your code so far should look like this:

Step 6 #

To make Flutter development faster we start with containers and colors so we can make sure everything is the right size.

Lets start by adding a Drawer with a ListView to our Scaffold.

home: Scaffold( appBar: AppBar(title: Text("Flutter Piano")), drawer: Drawer(child: SafeArea(child: ListView(children: <Widget>[]))), ),

You should now get a menu icon that when you press looks like this.

Now lets add a ListView that scrolls Horizontially to the body of the Scaffold

body: ListView.builder( itemCount: 7, scrollDirection: Axis.horizontal, itemBuilder: (BuildContext context, int index) { return Container(); }, )

We need 7 itemCount for 7 octaves on the Piano.

Step 7 #

Now we need to build the octave section that will be repeated. Since every octave is identical we can repeat the octaves with minor adjustments.

Lets add some parameters for use to define for our UI. Add these underneath the initState function.

double get keyWidth => 80 + (80 * _widthRatio);double _widthRatio = 0.0;bool _showLabels = true;

We will use these to dynamily update the keys.

Under the itemBuilder lets define which octave we are working with by adding:

final int i = index * 12;

Our code should look like this now:

Step 8 #

Now we need to add a Stack for our octave:

return SafeArea( child: Stack(children: <Widget>[Row(mainAxisSize: MainAxisSize.min, children: <Widget>[ _buildKey(24 + i, false), _buildKey(26 + i, false), _buildKey(28 + i, false), _buildKey(29 + i, false), _buildKey(31 + i, false), _buildKey(33 + i, false), _buildKey(35 + i, false),]), Positioned( left: 0.0, right: 0.0, bottom: 100, top: 0.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.min, children: <Widget>[Container(width: keyWidth * .5), _buildKey(25 + i, true), _buildKey(27 + i, true), Container(width: keyWidth), _buildKey(30 + i, true), _buildKey(32 + i, true), _buildKey(34 + i, true), Container(width: keyWidth * .5),])), ]), );

Here we have defined which midi notes are played for each octave.

Now add the function _buildKey underneath our build function.

Widget _buildKey(int midi, bool accidental) { if (accidental) { return Container( width: keyWidth, color: Colors.black, margin: EdgeInsets.symmetric(horizontal: 2.0), padding: EdgeInsets.symmetric(horizontal: keyWidth * .1), child: Material( elevation: 6.0, borderRadius: borderRadius, shadowColor: Color(0x802196F3), )); } return Container( width: keyWidth, color: Colors.white, margin: EdgeInsets.symmetric(horizontal: 2.0)); }

Also add borderRadius to the bottom of main.dart

const BorderRadiusGeometry borderRadius = BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0));

Your app should look like this:

Your code should look like this:

import 'package:flutter/material.dart';import 'package:flutter/services.dart';import 'package:flutter_midi/flutter_midi.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> { @override initState() { FlutterMidi.unmute(); rootBundle.load("assets/sounds/Piano.sf2").then((sf2) { FlutterMidi.prepare(sf2: sf2, name: "Piano.sf2"); }); super.initState(); } double get keyWidth => 80 + (80 * _widthRatio); double _widthRatio = 0.0; bool _showLabels = true; @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData.dark(), home: Scaffold( appBar: AppBar(title: Text("Flutter Piano")), drawer: Drawer(child: SafeArea(child: ListView(children: <Widget>[]))), body: ListView.builder( itemCount: 7, scrollDirection: Axis.horizontal, itemBuilder: (BuildContext context, int index) { final int i = index * 12; return SafeArea( child: Stack(children: <Widget>[Row(mainAxisSize: MainAxisSize.min, children: <Widget>[ _buildKey(24 + i, false), _buildKey(26 + i, false), _buildKey(28 + i, false), _buildKey(29 + i, false), _buildKey(31 + i, false), _buildKey(33 + i, false), _buildKey(35 + i, false),]), Positioned( left: 0.0, right: 0.0, bottom: 100, top: 0.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.min, children: <Widget>[Container(width: keyWidth * .5), _buildKey(25 + i, true), _buildKey(27 + i, true), Container(width: keyWidth), _buildKey(30 + i, true), _buildKey(32 + i, true), _buildKey(34 + i, true), Container(width: keyWidth * .5),])), ]), ); }, )), ); } Widget _buildKey(int midi, bool accidental) { if (accidental) { return Container( width: keyWidth, color: Colors.black, margin: EdgeInsets.symmetric(horizontal: 2.0), padding: EdgeInsets.symmetric(horizontal: keyWidth * .1), child: Material( elevation: 6.0, borderRadius: borderRadius, shadowColor: Color(0x802196F3), )); } return Container( width: keyWidth, color: Colors.white, margin: EdgeInsets.symmetric(horizontal: 2.0)); }}const BorderRadiusGeometry borderRadius = BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0));

Step 9 #

Time to add midi by adding the following import to the top of the file:

import 'package:tonic/tonic.dart';

In the -buildKey function you can add this line:

final pitchName = Pitch.fromMidiNumber(midi).toString();

We can also create the piano key itself underneath it:

final pianoKey = Stack( children: <Widget>[Semantics( button: true, hint: pitchName, child: Material( borderRadius: borderRadius, color: accidental ? Colors.black : Colors.white, child: InkWell( borderRadius: borderRadius, highlightColor: Colors.grey, onTap: () {}, onTapDown: (_) => FlutterMidi.playMidiNote(midi: midi), ))), Positioned( left: 0.0, right: 0.0, bottom: 20.0, child: _showLabels ? Text(pitchName, textAlign: TextAlign.center, style: TextStyle( color: !accidental ? Colors.black : Colors.white)) : Container()),], );

Remove the color from the container and replace it with child: pianoKey,

if (accidental) { return Container( width: keyWidth, margin: EdgeInsets.symmetric(horizontal: 2.0), padding: EdgeInsets.symmetric(horizontal: keyWidth * .1), child: Material( elevation: 6.0, borderRadius: borderRadius, shadowColor: Color(0x802196F3), child: pianoKey)); } return Container( width: keyWidth, child: pianoKey, margin: EdgeInsets.symmetric(horizontal: 2.0));

The complete function should look like this:

Widget _buildKey(int midi, bool accidental) { final pitchName = Pitch.fromMidiNumber(midi).toString(); final pianoKey = Stack( children: <Widget>[Semantics( button: true, hint: pitchName, child: Material( borderRadius: borderRadius, color: accidental ? Colors.black : Colors.white, child: InkWell( borderRadius: borderRadius, highlightColor: Colors.grey, onTap: () {}, onTapDown: (_) => FlutterMidi.playMidiNote(midi: midi), ))), Positioned( left: 0.0, right: 0.0, bottom: 20.0, child: _showLabels ? Text(pitchName, textAlign: TextAlign.center, style: TextStyle( color: !accidental ? Colors.black : Colors.white)) : Container()),], ); if (accidental) { return Container( width: keyWidth, margin: EdgeInsets.symmetric(horizontal: 2.0), padding: EdgeInsets.symmetric(horizontal: keyWidth * .1), child: Material( elevation: 6.0, borderRadius: borderRadius, shadowColor: Color(0x802196F3), child: pianoKey)); } return Container( width: keyWidth, child: pianoKey, margin: EdgeInsets.symmetric(horizontal: 2.0)); }

Now when you run the app it should look like this:

Almost there! Now let's give our user some control.

Step 10 #

Add these settings to the Drawer

Container(height: 20.0),ListTile(title: Text("Change Width")),Slider( activeColor: Colors.redAccent, inactiveColor: Colors.white, min: 0.0, max: 1.0, value: _widthRatio, onChanged: (double value) => setState(() => _widthRatio = value)),Divider(),ListTile( title: Text("Show Labels"), trailing: Switch( value: _showLabels, onChanged: (bool value) => setState(() => _showLabels = value))),Divider(),

Now you should see this:

Step 11 #

To start with Middle C lets add an inital scroll offset to the ListView

controller: ScrollController(initialScrollOffset: 1500.0),

Now when we start the app it should co to C4.

The final App should look like this:

The final code should look like this:

import 'package:flutter/material.dart';import 'package:flutter/services.dart';import 'package:flutter_midi/flutter_midi.dart';import 'package:tonic/tonic.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> { @override initState() { FlutterMidi.unmute(); rootBundle.load("assets/sounds/Piano.sf2").then((sf2) { FlutterMidi.prepare(sf2: sf2, name: "Piano.sf2"); }); super.initState(); } double get keyWidth => 80 + (80 * _widthRatio); double _widthRatio = 0.0; bool _showLabels = true; @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData.dark(), home: Scaffold( appBar: AppBar(title: Text("Flutter Piano")), drawer: Drawer( child: SafeArea( child: ListView(children: <Widget>[Container(height: 20.0), ListTile(title: Text("Change Width")), Slider( activeColor: Colors.redAccent, inactiveColor: Colors.white, min: 0.0, max: 1.0, value: _widthRatio, onChanged: (double value) => setState(() => _widthRatio = value)), Divider(), ListTile( title: Text("Show Labels"), trailing: Switch( value: _showLabels, onChanged: (bool value) => setState(() => _showLabels = value))), Divider(),]))), body: ListView.builder( itemCount: 7, scrollDirection: Axis.horizontal, controller: ScrollController(initialScrollOffset: 1500.0), itemBuilder: (BuildContext context, int index) { final int i = index * 12; return SafeArea( child: Stack(children: <Widget>[Row(mainAxisSize: MainAxisSize.min, children: <Widget>[ _buildKey(24 + i, false), _buildKey(26 + i, false), _buildKey(28 + i, false), _buildKey(29 + i, false), _buildKey(31 + i, false), _buildKey(33 + i, false), _buildKey(35 + i, false),]), Positioned( left: 0.0, right: 0.0, bottom: 100, top: 0.0, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisSize: MainAxisSize.min, children: <Widget>[Container(width: keyWidth * .5), _buildKey(25 + i, true), _buildKey(27 + i, true), Container(width: keyWidth), _buildKey(30 + i, true), _buildKey(32 + i, true), _buildKey(34 + i, true), Container(width: keyWidth * .5),])), ]), ); }, )), ); } Widget _buildKey(int midi, bool accidental) { final pitchName = Pitch.fromMidiNumber(midi).toString(); final pianoKey = Stack( children: <Widget>[Semantics( button: true, hint: pitchName, child: Material( borderRadius: borderRadius, color: accidental ? Colors.black : Colors.white, child: InkWell( borderRadius: borderRadius, highlightColor: Colors.grey, onTap: () {}, onTapDown: (_) => FlutterMidi.playMidiNote(midi: midi), ))), Positioned( left: 0.0, right: 0.0, bottom: 20.0, child: _showLabels ? Text(pitchName, textAlign: TextAlign.center, style: TextStyle( color: !accidental ? Colors.black : Colors.white)) : Container()),], ); if (accidental) { return Container( width: keyWidth, margin: EdgeInsets.symmetric(horizontal: 2.0), padding: EdgeInsets.symmetric(horizontal: keyWidth * .1), child: Material( elevation: 6.0, borderRadius: borderRadius, shadowColor: Color(0x802196F3), child: pianoKey)); } return Container( width: keyWidth, child: pianoKey, margin: EdgeInsets.symmetric(horizontal: 2.0)); }}const BorderRadiusGeometry borderRadius = BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0));

Conclusion #

If you delete tests/ and run find . -name "*.dart" | xargs cat | wc -c you will see that the dart code only uses 5032 bytes of space!

Now we have a fully functional piano that you can play with and enjoy on iOS and Android.

I was really inspired when creating this for the Flutter Create contest.

Hope you learned something, if you have any questions you can always read out to me. This is an open source piano and would love PRs on the main project here!