Rody Davis

About Me

Sat, 18 Jan 2025 19:18:39 GMT

import profileImg from '../../assets/profile_8v0z7aduoc.webp'; import grandCanyonImg from '../../assets/personal_grand_canyon_5wbn12eol9.webp'; import shuttleImg from '../../assets/personal_shuttle_o0dk6jemz6.webp'; import goldenGateImg from '../../assets/personal_golden_gate_9y3fwiwicv.webp'; import familyImg from '../../assets/personal_family_qxtsx99czk.webp'; import rodyMollyImg from '../../assets/riyakataria_rody_molly_031823_20_1_r5q7mluc1z.jpg';

About Me

<p class="text-md text-[var(--header-h1)] font-semibold -mt-4 mb-8">Rody Davis — Career & Passions</p>

<div class="flex flex-col md:flex-row gap-8 items-start mb-12"> <div class="w-full md:w-1/3"> <img src={profileImg.src} alt="Rody Davis Portrait" class="w-full rounded-xl border border-[var(--border-main)] shadow-sm bg-[#13151a]" /> <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-xl p-4 mt-6"> <h4 class="text-xs font-bold uppercase tracking-wider text-[var(--fg-secondary)] mt-0 mb-3">⚡ Quick Facts</h4> <ul class="space-y-2 text-xs text-[var(--fg-secondary)] list-none pl-0 m-0"> <li>💼 <strong>Current Role:</strong> Senior DevRel at Google</li> <li>📍 <strong>Location:</strong> San Francisco Bay Area</li> <li>🎓 <strong>Education:</strong> Florida College (B.S. in Management Information Systems, minor in Business Administration)</li> <li>🎹 <strong>Secondary Passion:</strong> Synthesizers & Sound Synthesis</li> </ul> </div> </div> <div class="w-full md:w-2/3 text-[var(--fg-secondary)] text-md leading-relaxed"> <p class="m-0 mb-4"> My name is Rody Davis. I grew up in Alabama, studied Management Information Systems at Florida College, and currently work at Google as a Senior Developer Relations Engineer, living in the beautiful San Francisco Bay Area. </p> <p class="m-0 mb-4"> Ever since I was a child, I was taking apart every device I could get my hands on to figure out how it worked, always aspiring to be an inventor. In high school, I spent my free time on the drumline in marching band, learning rhythm, coordination, and cooperative execution. </p> <p class="m-0 mb-4"> Today, I get to do my dream job. I am an inventor—bringing highly interactive products from pure imagination to market, building frameworks, and championing the developer journey. </p> </div> </div>

🗺️ Chronological Journey: Career & Personal

{/* Chapter 1 */} <div class="relative pl-6"> <div class="absolute -left-[27px] top-1.5 w-3 h-3 rounded-full bg-sky-500 border-4 border-[#13151a]"></div> <span class="text-xs font-bold uppercase tracking-wider text-sky-500">2012 – 2017</span> <h3 class="text-lg font-bold text-[var(--fg-primary)] mt-1 mb-3">Chapter 1: Creative Audio & Technical Roots</h3> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-4"> I attended Florida College to earn a Bachelor of Science in Management Information Systems with a minor in Business Administration, originally planning to build a career as an Audio-Visual Technician. Over five years, I managed large video production environments, became a System Administrator, and eventually led the video department for a growing startup. </p> <div class="my-6"> <img src={grandCanyonImg.src} alt="Grand Canyon Exploration" class="w-full rounded-xl border border-[var(--border-main)] shadow-sm bg-[#13151a]" /> <p class="text-xs text-center text-[var(--fg-secondary)] mt-2">Exploring national landscapes and planning technical goals</p> </div> </div>

{/* Chapter 2 */} <div class="relative pl-6"> <div class="absolute -left-[27px] top-1.5 w-3 h-3 rounded-full bg-emerald-500 border-4 border-[#13151a]"></div> <span class="text-xs font-bold uppercase tracking-wider text-emerald-500">2017 – 2019</span> <h3 class="text-lg font-bold text-[var(--fg-primary)] mt-1 mb-3">Chapter 2: Self-Taught App Development & "The Pitch Pipe"</h3> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-4"> Realizing video management wasn't my final destination, I spent my nights teaching myself mobile software engineering. To solve an overlooked gap in the market, I created and shipped my very first mobile app, "The Pitch Pipe". It quickly gained massive traction among musicians, opening doors for me to transition into a professional full-time developer. </p> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-4"> Soon after, I joined CrossMedia LLC as a Full Stack Developer, where I built native iOS and Android utility applications, engineered mobile REST APIs, integrated SOC-III compliant Firebase backends, and ran mobile departments. </p> <div class="my-6"> <img src={shuttleImg.src} alt="Inspiration from Engineering and Flight" class="w-full rounded-xl border border-[var(--border-main)] shadow-sm bg-[#13151a]" /> <p class="text-xs text-center text-[var(--fg-secondary)] mt-2">Driven by structural mechanics and high-performance execution</p> </div> </div>

{/* Chapter 3 */} <div class="relative pl-6"> <div class="absolute -left-[27px] top-1.5 w-3 h-3 rounded-full bg-purple-500 border-4 border-[#13151a]"></div> <span class="text-xs font-bold uppercase tracking-wider text-purple-500">2019 – 2020</span> <h3 class="text-lg font-bold text-[var(--fg-primary)] mt-1 mb-3">Chapter 3: Interactive Runtimes at Rive</h3> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-4"> I joined Rive as a Software Engineer in San Francisco, focusing heavily on interactive rendering pipelines. I built Next.js Flutter editor prototypes on top of CanvasKit, developed the core Android animation runtimes in Kotlin utilizing native SKIA graphics APIs, and authored modular desktop plugins using C++ and Swift for macOS, Windows, and Linux. </p> </div>

{/* Chapter 4 */} <div class="relative pl-6"> <div class="absolute -left-[27px] top-1.5 w-3 h-3 rounded-full bg-pink-500 border-4 border-[#13151a]"></div> <span class="text-xs font-bold uppercase tracking-wider text-pink-500">2020 – Present</span> <h3 class="text-lg font-bold text-[var(--fg-primary)] mt-1 mb-3">Chapter 4: Developer Advocacy & Platforms at Google</h3> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-4"> In July 2020, I joined Google as a Senior Developer Relations Engineer. Over the last several years, I have successfully supported multiple high-profile platform initiatives: </p>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-6">
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-5">
    <h4 class="text-sm font-bold text-[var(--fg-primary)] mt-0 mb-2 flex items-center gap-2">🕹️ Antigravity</h4>
    <p class="text-xs text-[var(--fg-secondary)] leading-relaxed mb-0">
      Orchestrated the product launch of Antigravity on November 1, 2025. Spearheaded technical 100-300 level documentation, produced highly-engaging video segments, designed Gemini 3 launch day simulations, and shaped cross-functional partnerships with Firebase and Flutter.
    </p>
  </div>
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-5">
    <h4 class="text-sm font-bold text-[var(--fg-primary)] mt-0 mb-2 flex items-center gap-2">🧱 Project IDX & Firebase Studio</h4>
    <p class="text-xs text-[var(--fg-secondary)] leading-relaxed mb-0">
      Launched Firebase Studio at Cloud Next 2025, ran large technical demonstrations at Google I/O events, created templates for Gemini interactions, and led community migration plans towards Antigravity and AI Studio.
    </p>
  </div>
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-5">
    <h4 class="text-sm font-bold text-[var(--fg-primary)] mt-0 mb-2 flex items-center gap-2">🎨 Material Design & Figma</h4>
    <p class="text-xs text-[var(--fg-secondary)] leading-relaxed mb-0">
      Supported Lit and Material Web Components. Designed the <strong>Material Theme Builder</strong> Figma plugin, scaling it successfully to **400,000+ active creators**. Handled multi-platform client libraries (MCU) across Swift, C, JS, and Dart.
    </p>
  </div>
  <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-lg p-5">
    <h4 class="text-sm font-bold text-[var(--fg-primary)] mt-0 mb-2 flex items-center gap-2">🚀 Developer Solutions</h4>
    <p class="text-xs text-[var(--fg-secondary)] leading-relaxed mb-0">
      Collaborated across Flutter, Go, Angular, and Firebase teams to unify full-stack developer experiences and publish standard developer recipes.
    </p>
  </div>
</div>

<div class="my-6">
  <img src={goldenGateImg.src} alt="San Francisco Golden Gate Bridge" class="w-full rounded-xl border border-[var(--border-main)] shadow-sm bg-[#13151a]" />
  <p class="text-xs text-center text-[var(--fg-secondary)] mt-2">Living and engineering in the San Francisco Bay Area</p>
</div>

</div>

{/* Chapter 5 */} <div class="relative pl-6"> <div class="absolute -left-[27px] top-1.5 w-3 h-3 rounded-full bg-red-500 border-4 border-[#13151a]"></div> <span class="text-xs font-bold uppercase tracking-wider text-red-500">Present</span> <h3 class="text-lg font-bold text-[var(--fg-primary)] mt-1 mb-3">Chapter 5: Open Source & Sound Synthesis</h3> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-4"> Beyond my work at Google, open-source development remains a core focus. I ported Preact signals to Dart (Signals), authored structured PowerPoint compilers in Dart (Flutter PPTX), engineered distributed synchronization modules for SQLite (sqlite-crdt), and have shipped over 40 plugins to the pub.dev directory. </p> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-4"> In my personal life, I am happily engaged to the love of my life, Molly ❤️. I compose original ambient music, build web-synthesizers, and teach music production classes with MIDI hardware interfaces. </p>

<div class="flex flex-col gap-6 my-6 max-w-2xl mx-auto">
  <img src={familyImg.src} alt="Rody Davis Family" class="w-full rounded-xl border border-[var(--border-main)] shadow-sm bg-[#13151a]" />
  <img src={rodyMollyImg.src} alt="Rody and Molly" class="w-full rounded-xl border border-[var(--border-main)] shadow-sm bg-[#13151a]" />
</div>
<p class="text-xs text-center text-[var(--fg-secondary)] mt-2">Cherished moments with family and Molly ❤️</p>

</div>

🛠️ Technical Competency Matrix

<table width="100%" text-align="left" class="text-sm text-[var(--fg-secondary)]"> <tr> <th width="50%">💻 Core Technologies</th> <th width="50%">🧱 Frameworks & Tools</th> </tr> <tr> <td valign="top"> <ul> <li><strong>Languages:</strong> JavaScript, TypeScript, Dart, Go, Node.js, Kotlin, Swift, C, C#, SQL</li> <li><strong>Open Source:</strong> Dart Signals, Flutter PPTX, sqlite-crdt</li> <li><strong>AI Tools:</strong> Gemini API, Gemma</li> </ul> </td> <td valign="top"> <ul> <li><strong>Frameworks:</strong> Flutter, Angular, Lit, Web Components, Material Design</li> <li><strong>Development Tools:</strong> Figma, VS Code, Git, Android Studio, SQLite, Docker</li> <li><strong>Concepts:</strong> On-device AI, Mobile Dev, Offline-First Architecture, CI/CD</li> </ul> </td> </tr> </table>

📣 Public Speaking & Presentations

Google I/O & Cloud Next: Delivered keynotes and technical talks on serverless deployments, generative UI, and full-stack app architecture.
DevShow: Recorded 15+ episodes for Google's longest-running video developer show.
Internal Classes: Taught music production and MIDI hardware classes across Google engineering teams.

Home

Wed, 20 Mar 2024 00:00:00 GMT

<p class="text-lg sm:text-xl leading-relaxed text-[var(--fg-primary)] mt-6 mb-8 font-normal"> Supporting developer success through key platform launches, synthesizing user feedback, creating comprehensive code examples and documentation, and empowering the community through talks, technical videos, and direct advocacy. </p>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"> <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-xl p-6 transition-all duration-300 hover:border-[var(--header-h1)] shadow-sm"> <h3 class="mt-0 text-[var(--header-h1)] flex items-center gap-2 text-lg font-bold"> 📣 Developer Advocacy </h3> <p class="mb-0 text-sm text-[var(--fg-secondary)] leading-relaxed"> Synthesizing user feedback, building robust SDK integrations, and delivering clear documentation, blogs, and talks that empower developers worldwide. </p> </div> <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-xl p-6 transition-all duration-300 hover:border-[var(--header-h1)] shadow-sm"> <h3 class="mt-0 text-[var(--header-h1)] flex items-center gap-2 text-lg font-bold"> 🧱 UI Tooling & Architecture </h3> <p class="mb-0 text-sm text-[var(--fg-secondary)] leading-relaxed"> Creating visual builders, rich component libraries, and modular widget kits to streamline visual design-to-code pipelines. </p> </div> <div class="bg-[var(--bg-sidebar)] border border-[var(--border-main)] rounded-xl p-6 transition-all duration-300 hover:border-[var(--header-h1)] shadow-sm"> <h3 class="mt-0 text-[var(--header-h1)] flex items-center gap-2 text-lg font-bold"> 🎵 Creative & Sound Synthesis </h3> <p class="mb-0 text-sm text-[var(--fg-secondary)] leading-relaxed"> Exploring web synthesizers, digital signal processing (DSP), Ableton custom extensions, and podcast hosting for "Creative Engineering". </p> </div> </div>

Featured Apps

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 my-8">  <div class="relative group rounded-xl bg-[var(--bg-sidebar)] border border-[var(--border-main)] hover:border-purple-500/50 p-6 flex flex-col justify-between transition-all duration-300 shadow-sm overflow-hidden"> <div class="absolute top-0 right-0 w-24 h-24 bg-purple-500/5 rounded-bl-full pointer-events-none transition-all group-hover:bg-purple-500/10"></div> <div> <div class="flex items-center gap-3 mb-3"> <img src="https://widget.studio/icons/Icon-192.png" alt="Widget Studio Logo" class="w-10 h-10 rounded-lg object-contain shadow-sm border border-purple-500/20 bg-purple-950/10" /> <h3 class="text-lg font-bold text-[var(--fg-primary)] m-0">Widget Studio</h3> </div> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-6"> A premium visual editor and widget building suite designed to compile component code in real time for modern web frameworks and Flutter. </p> </div> <a href="https://widget.studio/" target="_blank" rel="noopener noreferrer" class="block w-full text-center px-4 py-2.5 rounded-lg bg-purple-600 hover:bg-purple-500 text-white text-xs font-semibold no-underline transition-colors duration-200" style="color: #ffffff !important; text-decoration: none !important;"> Launch Visual Editor </a> </div>

<div class="relative group rounded-xl bg-[var(--bg-sidebar)] border border-[var(--border-main)] hover:border-sky-500/50 p-6 flex flex-col justify-between transition-all duration-300 shadow-sm overflow-hidden"> <div class="absolute top-0 right-0 w-24 h-24 bg-sky-500/5 rounded-bl-full pointer-events-none transition-all group-hover:bg-sky-500/10"></div> <div> <div class="flex items-center gap-3 mb-3"> <img src="https://pitchpipe.app/icons/Icon-192.png" alt="The Pitch Pipe Logo" class="w-10 h-10 rounded-lg object-contain shadow-sm border border-sky-500/20 bg-sky-950/10" /> <h3 class="text-lg font-bold text-[var(--fg-primary)] m-0">The Pitch Pipe</h3> </div> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-6"> An interactive ear training and vocal guide tool helping musicians perfect their tuning, scale recognition, and acoustic intervals. </p> </div> <a href="https://pitchpipe.app/" target="_blank" rel="noopener noreferrer" class="block w-full text-center px-4 py-2.5 rounded-lg bg-sky-600 hover:bg-sky-500 text-white text-xs font-semibold no-underline transition-colors duration-200" style="color: #ffffff !important; text-decoration: none !important;"> Open Vocal Guide </a> </div>

<div class="relative group rounded-xl bg-[var(--bg-sidebar)] border border-[var(--border-main)] hover:border-emerald-500/50 p-6 flex flex-col justify-between transition-all duration-300 shadow-sm overflow-hidden"> <div class="absolute top-0 right-0 w-24 h-24 bg-emerald-500/5 rounded-bl-full pointer-events-none transition-all group-hover:bg-emerald-500/10"></div> <div> <div class="flex items-center gap-3 mb-3"> <img src="https://pocketpiano.app/icons/Icon-192.png" alt="The Pocket Piano Logo" class="w-10 h-10 rounded-lg object-contain shadow-sm border border-emerald-500/20 bg-emerald-950/10" /> <h3 class="text-lg font-bold text-[var(--fg-primary)] m-0">The Pocket Piano</h3> </div> <p class="text-sm text-[var(--fg-secondary)] leading-relaxed mb-6"> A highly responsive virtual synthesizer and interactive keyboard that enables portable melody building right in your browser. </p> </div> <a href="https://pocketpiano.app/" target="_blank" rel="noopener noreferrer" class="block w-full text-center px-4 py-2.5 rounded-lg bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-semibold no-underline transition-colors duration-200" style="color: #ffffff !important; text-decoration: none !important;"> Play Synthesizer </a> </div> </div>

Current Work

Currently supporting Google Antigravity developer success:

🚀 Empowering global developer communities by sharing modern architecture practices, widget kits, and robust SDK integrations.
📝 Synthesizing user feedback, building comprehensive example applications, and leading workshops/technical recording sessions.

Ecosystem & Technical Foundations

Supporting developers across core Google platforms and surrounding tech stacks:

Flutter & Dart: Architecting highly responsive, multi-platform design-to-code packages.
Gemini & Gemma (AI Logic): Writing production-ready generative workflows, function-calling models, and web UI integrations.
Firebase: Implementing unified authentication, remote configurations, and Firestore security systems.

Focus Areas & Creations

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 my-6"> <div> <h3 class="text-base font-bold text-[var(--fg-primary)] mb-3 flex items-center gap-2 m-0"> <span class="text-sky-500">🧪</span> Core Explorations </h3> <ul class="space-y-2 text-sm text-[var(--fg-secondary)] list-disc pl-4 mt-2"> <li><strong><a href="https://www.sqlite.org" target="_blank" rel="noopener noreferrer">SQLite Engine</a></strong>: Building embedded database integrations.</li> <li><strong><a href="https://flutter.dev" target="_blank" rel="noopener noreferrer">Dart/Flutter</a></strong>: Creating robust package ecosystems.</li> <li><strong><a href="https://aframe.io" target="_blank" rel="noopener noreferrer">VR/AR Experiences</a></strong>: Experimenting with WebXR frameworks.</li> <li><strong><a href="https://www.ableton.com" target="_blank" rel="noopener noreferrer">Ableton Logic</a></strong>: Custom midi scripts & synthesizer integration.</li> </ul> </div> <div> <h3 class="text-base font-bold text-[var(--fg-primary)] mb-3 flex items-center gap-2 m-0"> <span class="text-purple-500">🎧</span> Contributions & Media </h3> <ul class="space-y-2 text-sm text-[var(--fg-secondary)] list-disc pl-4 mt-2"> <li><strong><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components" target="_blank" rel="noopener noreferrer">Web Components</a></strong>: Crafting lightweight, framework-agnostic elements.</li> <li><strong><a href="https://pub.dev/publishers/rodydavis.com/packages" target="_blank" rel="noopener noreferrer">pub.dev Packages</a></strong>: Publishing utility kits for the Flutter ecosystem.</li> <li><strong><a href="https://podcasts.apple.com/us/podcast/creative-engineering/id1507852833" target="_blank" rel="noopener noreferrer">Podcast Host</a></strong>: Producing episode scripts and hosting "Creative Engineering".</li> <li><strong><a href="https://soundcloud.com/theonlysounddr" target="_blank" rel="noopener noreferrer">Original Music</a></strong>: Compositing soundscapes available on SoundCloud & Spotify.</li> </ul> </div> </div>

Previous Projects

Deep engineering contribution history across key developer platforms:

Firebase Studio & CLI Tools: Built initial user-focused UI frameworks.
Project IDX: Assisted early validation and SDK embedding.
Developer Solutions: Advocated and mapped client developer requirements.
Lit Framework & Material Design: Standardized custom theme variables and templates.

How to Deploy PocketBase to Cloud Run

Sat, 18 Jan 2025 22:12:22 GMT

How to Deploy PocketBase to Cloud Run

It is now possible to run PocketBase on Google CloudRun because of the recent support for mounting volumes. This is a guide on how to deploy PocketBase on Google Cloud Run.

Features

Scale to zero
Infinite storage (and file deletion protection, file versions, and multi region)
pb_data/pb_public/pb_hooks all in the same file system
Backups can be done either by PocketBase or by protecting the bucket

Prerequisites

Google Cloud project
Google Cloud Storage bucket

Getting Started

Fork this repository or click "Use this template" to create your own repository.

Steps

Create a new service

Google Cloud Build

Setup with Cloud Build
- Repository Provider: GitHub
- Select Repository: THIS_REPOSITORY_FORK
Branch: main
Build Configuration: Dockerfile

General Settings

Allow unauthenticated invocations
CPU is only allocated when the service is handling requests
Maximum number of requests per container is set to 1000
Maximum number of containers is set to 1
Timeout is set to 3600
Ingress is set to internal and all traffic

Container(s), Volumes, Networking, Security

Volumes

Add volume
- Volume type: Google Storage bucket
- Volume name: remote-storage (or any name you want)
- Bucket: YOUR_BUCKET_NAME
- Read-only: false

Container(s)

Startup CPU boost is enabled
Volume mount (s)
- Volume name: remote-storage
- Mount path: /cloud/storage

Add Health Checks

You can add a health check to your service that uses Pocketbase's health check endpoint /api/health.

Deploy and Wait

Now create the service and wait for the cloud build to finish.

If everything goes well, you should see the service deployed.

FAQ

What if I have local files that I want to use?

pb_data, pb_public, and pb_hooks are all directories you might use during development.

You can upload these directories to your Google Cloud Storage bucket you created earlier to the root directory.

Can I use a custom domain?

Yes, you can use a custom domain. You can follow the guide on the official documentation.

Migrating my Blog to PocketBase

Mon, 20 Jan 2025 20:08:23 GMT

Migrating my Blog to PocketBase

As the plight of every developer, we must constantly improve our personal website and blog to reflect our latest passion and exploration.

...of course not all developers need to do this but it is a fun exercise none the less.

I really enjoy being able to look at new tech stacks and find ways to simplify my setup or make it more fun to use.

Context

For those that have not been following my migrations, I have been an early adopter on various tech stacks and especially for my blog.

My very first website for rodydavis.com was made with Wix which was great to get started but it was before I became a developer.

I later migrated my blog to Github Pages with Jekyll and was very happy with it and introduced me to Frontmatter and Markdown.

This worked for awhile, but then I wanted to make it a lot more customized which is when I migrated to 11ty. This was a dead simple migration as I just needed to move my blog posts and add some config for my website metadata.

As much as I loved the customization, it became hard to make my blog depend on Node and npm but I still adopted it and setup some Github Actions to build my website when I push commits.

I then migrated my blog to a custom solution based on lit web components but did not last long as it was mostly just for exploration. In the past I even had a version of my website built with Flutter too.

The next big migration was to Obsidian which allowed me to publish my website with Obsidian Publish very easily from my phone or laptop.

This finally broke me free of needing to bundle my website and was very happy with this setup, which leads me to today...

PocketBase

For those that are not familiar, PocketBase is a Go library that compiles to a single binary, backed by SQLite as an open source CMS.

This makes it dead simple to deploy to a small VPS and and just point your custom domain to it with free SSL cert generation using Let's Encrypt.

Coolify

The other thing I am now doing is hosting my website on Coolify via a Hetzner server.

This has been a joy to use and makes it easy to deploy to VPS you own in GCP, Digitial Ocean, Hetzner or even a Rasberry PI 👀.

Conclusion

Now I can deploy my website with no build step (for the frontend) and have dynamic features like the Open Heart Protocol, live view counts, dynamic tag pages, live editor on the web and generated RSS feed.

If you want to see the source code you can find it here.

Privacy Policy

Sat, 18 Jan 2025 19:15:26 GMT

Privacy Policy

Your privacy is critically important to us.

Rody Davis Productions is located at:

Rody Davis Productions
6142 Pinewood Rd
Oakland CA, United States

It is Rody Davis Productions's policy to respect your privacy regarding any information we may collect while operating our website. This Privacy Policy applies to https://rodydavis.com (hereinafter, "us", "we", or "https://rodydavis.com"). We respect your privacy and are committed to protecting personally identifiable information you may provide us through the Website. We have adopted this privacy policy ("Privacy Policy") to explain what information may be collected on our Website, how we use this information, and under what circumstances we may disclose the information to third parties. This Privacy Policy applies only to information we collect through the Website and does not apply to our collection of information from other sources.
This Privacy Policy, together with the Terms and conditions posted on our Website, set forth the general rules and policies governing your use of our Website. Depending on your activities when visiting our Website, you may be required to agree to additional terms and conditions.

Website Visitors

Like most website operators, Rody Davis Productions collects non-personally-identifying information of the sort that web browsers and servers typically make available, such as the browser type, language preference, referring site, and the date and time of each visitor request. Rody Davis Productions's purpose in collecting non-personally identifying information is to better understand how Rody Davis Productions's visitors use its website. From time to time, Rody Davis Productions may release non-personally-identifying information in the aggregate, e.g., by publishing a report on trends in the usage of its website.
Rody Davis Productions also collects potentially personally-identifying information like Internet Protocol (IP) addresses for logged in users and for users leaving comments on https://rodydavis.com blog posts. Rody Davis Productions only discloses logged in user and commenter IP addresses under the same circumstances that it uses and discloses personally-identifying information as described below.

Gathering of Personally-Identifying Information

Certain visitors to Rody Davis Productions's websites choose to interact with Rody Davis Productions in ways that require Rody Davis Productions to gather personally-identifying information. The amount and type of information that Rody Davis Productions gathers depends on the nature of the interaction. For example, we ask visitors who sign up for a blog at https://rodydavis.com to provide a username and email address.

Security

The security of your Personal Information is important to us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect your Personal Information, we cannot guarantee its absolute security.

Ads appearing on our website may be delivered to users by advertising partners, who may set cookies. These cookies allow the ad server to recognize your computer each time they send you an online advertisement to compile information about you or others who use your computer. This information allows ad networks to, among other things, deliver targeted advertisements that they believe will be of most interest to you. This Privacy Policy covers the use of cookies by Rody Davis Productions and does not cover the use of cookies by any advertisers.

Links To External Sites

Our Service may contain links to external sites that are not operated by us. If you click on a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy and terms and conditions of every site you visit.
We have no control over, and assume no responsibility for the content, privacy policies or practices of any third party sites, products or services.

Protection of Certain Personally-Identifying Information

Rody Davis Productions discloses potentially personally-identifying and personally-identifying information only to those of its employees, contractors and affiliated organizations that (i) need to know that information in order to process it on Rody Davis Productions's behalf or to provide services available at Rody Davis Productions's website, and (ii) that have agreed not to disclose it to others. Some of those employees, contractors and affiliated organizations may be located outside of your home country; by using Rody Davis Productions's website, you consent to the transfer of such information to them. Rody Davis Productions will not rent or sell potentially personally-identifying and personally-identifying information to anyone. Other than to its employees, contractors and affiliated organizations, as described above, Rody Davis Productions discloses potentially personally-identifying and personally-identifying information only in response to a subpoena, court order or other governmental request, or when Rody Davis Productions believes in good faith that disclosure is reasonably necessary to protect the property or rights of Rody Davis Productions, third parties or the public at large.
If you are a registered user of https://rodydavis.com and have supplied your email address, Rody Davis Productions may occasionally send you an email to tell you about new features, solicit your feedback, or just keep you up to date with what's going on with Rody Davis Productions and our products. We primarily use our blog to communicate this type of information, so we expect to keep this type of email to a minimum. If you send us a request (for example via a support email or via one of our feedback mechanisms), we reserve the right to publish it in order to help us clarify or respond to your request or to help us support other users. Rody Davis Productions takes all measures reasonably necessary to protect against the unauthorized access, use, alteration or destruction of potentially personally-identifying and personally-identifying information.

Aggregated Statistics

Rody Davis Productions may collect statistics about the behavior of visitors to its website. Rody Davis Productions may display this information publicly or provide it to others. However, Rody Davis Productions does not disclose your personally-identifying information.

Cookies

To enrich and perfect your online experience, Rody Davis Productions uses "Cookies", similar technologies and services provided by others to display personalized content, appropriate advertising and store your preferences on your computer.
A cookie is a string of information that a website stores on a visitor's computer, and that the visitor's browser provides to the website each time the visitor returns. Rody Davis Productions uses cookies to help Rody Davis Productions identify and track visitors, their usage of https://rodydavis.com, and their website access preferences. Rody Davis Productions visitors who do not wish to have cookies placed on their computers should set their browsers to refuse cookies before using Rody Davis Productions's websites, with the drawback that certain features of Rody Davis Productions's websites may not function properly without the aid of cookies.
By continuing to navigate our website without changing your cookie settings, you hereby acknowledge and agree to Rody Davis Productions's use of cookies.

Privacy Policy Changes
Although most changes are likely to be minor, Rody Davis Productions may change its Privacy Policy from time to time, and in Rody Davis Productions's sole discretion. Rody Davis Productions encourages visitors to frequently check this page for any changes to its Privacy Policy. Your continued use of this site after any change in this Privacy Policy will constitute your acceptance of such change.

Credit & Contact Information

This privacy policy was created at https://termsandconditionstemplate.com/privacy-policy-generator/. If you have any questions about this Privacy Policy, please contact us via or phone.

How to do Offline Recommendations with SQLite and Gemini

Mon, 10 Feb 2025 12:00:00 GMT

How to do Offline Recommendations with SQLite and Gemini

When working with a CMS (like PocketBase) it is common to add some sort of recommendatios for related content. For example you can have a list of blog posts, and show related posts either by random selection or recently viewed.

I first learned about this technique from Aaron Francis on his YouTube channel:

Text Embeddings

Text embeddings are a way to convert a chunk of text into a an array of numbers. Having a mathematical representation means we can easily store them in a database and run common functions to calculate the distances between vectors that we have stored.

You will need an API Key from AI Studio to generate the descriptions and embeddings.

In order to create the embedding we need to first generate chunk small enough to fit in the embedding window size. For example we can use an LLM like Gemini to generate a description for a blog post and then vectorize the description which we can store in the database.

We only need to generate a new embedding and description when the content changes which limits the billing costs to the frequency of the content changes.

Storing the Vectors

To store the text embeddings as vectors we can save them in a SQLite database using a runtime loadable extension called sqlite-vec. Here is an example from the readme on how to query the vectors directly in SQLite:

.load ./vec0

create virtual table vec_examples using vec0(
  sample_embedding float[8]
);

-- vectors can be provided as JSON or in a compact binary format
insert into vec_examples(rowid, sample_embedding)
  values
    (1, '[-0.200, 0.250, 0.341, -0.211, 0.645, 0.935, -0.316, -0.924]'),
    (2, '[0.443, -0.501, 0.355, -0.771, 0.707, -0.708, -0.185, 0.362]'),
    (3, '[0.716, -0.927, 0.134, 0.052, -0.669, 0.793, -0.634, -0.162]'),
    (4, '[-0.710, 0.330, 0.656, 0.041, -0.990, 0.726, 0.385, -0.958]');


-- KNN style query
select
  rowid,
  distance
from vec_examples
where sample_embedding match '[0.890, 0.544, 0.825, 0.961, 0.358, 0.0196, 0.521, 0.175]'
order by distance
limit 2;
/*
┌───────┬──────────────────┐
│ rowid │     distance     │
├───────┼──────────────────┤
│ 2     │ 2.38687372207642 │
│ 1     │ 2.38978505134583 │
└───────┴──────────────────┘
*/

Now we can just take the vectors we created earlier and store them in a table which can update as content changes.

CREATE TABLE posts (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  title TEXT NOT NULL,
  content TEXT NOT NULL,
  description TEXT.
  embeddings TEXT
);

CREATE VIRTUAL TABLE vec_posts USING vec0(
  id INTEGER PRIMARY KEY,
  embedding float[768]
);

-- Sync vectors
INSERT INTO vec_posts(id, embedding) SELECT id, embeddings FROM posts;

We could also setup triggers to keep them up to date but in PocketBase I am using event hooks to keep the virtual table udpated.

Generate the Recommendation

Now to generate the recommendation offline we just need to use one of the blog posts to use as the input query to then use k-nearest neighbor search (kNN) to get N number of related posts.

SELECT
  vec_posts.id as id,
  vec_posts.embedding as embedding,
  posts.title as title,
  posts.description as description,
  posts.slug as slug
FROM vec_posts
INNER JOIN vec_posts.id = posts.id
WHERE embedding match ?
AND k = 6
ORDER BY distance;

We just need to provide the ? argument with the vector of the currently selected blog post, and then after we filter out the current blog post from the list then we have the N closest number of blog posts that are related in a vector database.

Conclusion

This makes it so no matter how many times a blog posts is visited no network calls are made for the recommendation which enables this to scale really well.

To see this in action you can click around on the various blog posts I have on my site and see the generated descriptions and related posts at the end of each article.

How To Host Your Podcast For Free On Github Pages

Mon, 20 Jan 2025 01:07:48 GMT

How To Host Your Podcast For Free On Github Pages

Do you have a story to tell and want to share it with the world but do not know where to start? Are you a developer looking to start a tech podcast? Are you looking to save money for hosting? Well this article is for you!

TLDR You can fork this repo and customize it for your podcast!

Github Pages allows you to host any website for free on Github. You can host any kind of file or content and will be distributed with Github CDN around the world. You can even setup your Podcast to release new content with Github Actions for each new episode.

Create New Repo

If you already familiar with Github you can skip this step.

How to create a new Github repository.

Clone the Repo

Now that you have the repo created on Github, download the project using Github Desktop.

How to clone a repository from Github.

After it finishes downloading you can open up the project in your favorite text editor. In this example we will be using VSCode.

Download Visual Studio Code

Create the Website

You can create the website with whatever tech stack you wish but in this example we will be using Flutter.

You can skip this step if you do not want an online player.

Learn about Flutter.

Open up the project if you haven’t already with VSCode and open the terminal and type the following:

flutter create player

Once the process finishes then you can edit the application UI. Make sure you have Flutter installed.

How to install Flutter.

Edit the website files to the following:

Flutter podcast template.

Setting up Github Actions

Create a new Github Action that will release the new episode pushed to the master branch. If you chose not to have a podcast player and just want to host the files then you can add the audio files and the rss feed directly to the gh-pages or master branch and the files will be hosted instantly. Regardless make sure you have a file call .nojekyll so the web deployment will be much faster.

Custom Domain

If you want to have your podcast hosted with a custom domain you can easily do this with Github pages. Follow this guide to set up your custom domain:

Custom domain on Github Pages.

Releasing new Content

When you have a new episode to release the steps are very simple. Make sure to export your audio file to mono and use mp3 format so it is smaller that 100mb otherwise you will need to set up Git LFS for the repo.

Setup Git LFS for Github repository.

Put the new mp3 audio file in the “player/web/audio” folder. Now edit the RSS feed which is located at “player/web/feed.xml” and add the following:

<?xml version="1.0" encoding="UTF-8" ?>
<rss xmlns:googleplay="http://www.google.com/schemas/play-podcasts/1.0" xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:rawvoice="http://www.rawvoice.com/rawvoiceRssModule/" xmlns:content="http://purl.org/rss/1.0/modules/content/" version="2.0">
  <channel>
    <title>Creative Engineering</title>
    <googleplay:author>Rody Davis, Norbert Kozsir</googleplay:author>
    <rawvoice:rating>TV-G</rawvoice:rating>
    <rawvoice:location>San Francisco, California</rawvoice:location>
    <rawvoice:frequency>Weekly</rawvoice:frequency>
    <author>Rody Davis, Norbert Kozsir</author>
    <itunes:author>Rody Davis, Norbert Kozsir</itunes:author>
    <itunes:email>rody.davis.jr@gmail.com</itunes:email>
    <itunes:category text="Technology" />
    <image>
      <url>https://rodydavis.github.io/podcast-player/img/icon.webp</url>
      <title>Creative Engineering</title>
      <link>https://rodydavis.github.io/podcast-player/</link>
    </image>
    <itunes:owner>
      <itunes:name>Rody Davis</itunes:name>
      <itunes:email>rody.davis.jr@gmail.com</itunes:email>
    </itunes:owner>
    <itunes:keywords>flutter,dart,github,vr,ar,web</itunes:keywords>
    <copyright>Rody Davis Productions 2020</copyright>
    <description>Exploring Flutter, VR, AR, Cross-Platform Projects</description>
    <googleplay:image href="https://rodydavis.github.io/podcast-player/img/icon.webp" />
    <language>en-us</language>
    <itunes:explicit>no</itunes:explicit>
    <pubDate>Mon, 13 Apr 2020 13:00:00 PDT</pubDate>
    <link>https://rodydavis.github.io/podcast-player/feed.xml</link>
    <itunes:image href="https://rodydavis.github.io/podcast-player/img/icon.webp" />
    <item>
      <author>Rody Davis, Norbert Kozsir</author>
      <itunes:author>Rody Davis, Norbert Kozsir</itunes:author>
      <title>Flutter Desktop/Web and VR</title>
      <pubDate>Mon, 13 Apr 2020 13:00:00 GMT</pubDate>
      <enclosure url="https://rodydavis.github.io/podcast-player/audio/01-create-eng.mp3" type="audio/mpeg" length="34216300" />
      <itunes:duration>54:08</itunes:duration>
      <guid isPermaLink="false">cepod01</guid>
      <itunes:explicit>no</itunes:explicit>
      <description>
Norbert Kozsir - @norbertkozsir

https://twitter.com/norbertkozsir

https://github.com/norbert515


Rody Davis - @rodydavis

https://twitter.com/rodydavis

https://github.com/rodydavis

https://youtube.com/rodydavis

https://rodydavis.com

Our podcast player: 

https://rodydavis.github.io/podcast-player/
        </description>
    </item>
  </channel>
</rss>

For every episode you just have to add a new item to the feed and change the info for the episode. I would suggest putting the new episodes at the bottom.

<item>        
    <author>COMMA\_SEPERATED\_LIST\_OF\_AUTHORS</author>        
    <itunes:author>COMMA\_SEPERATED\_LIST\_OF\_AUTHORS</itunes:author>      
    <title>PODCAST\_EPISODE\_TITLE</title>        
    <pubDate>Mon, 13 Apr 2020 13:00:00 GMT</pubDate>        
    <enclosure url="LINK\_TO\_AUDIO\_FILE" type="audio/mpeg" length="34216300" />        
    <itunes:duration>54:08</itunes:duration>        
    <guid isPermaLink="false">cepod01</guid>      
    <itunes:explicit>no</itunes:explicit>        
    <description>  
    Show Notes Here!         
    </description>      
</item>

Publishing

Once your Github Action is finished building you now have an RSS feed that you can use to submit to Apple Podcasts, Google Podcasts and Spotify for Podcasters.

https://GITHUB\_USERNAME.github.io/GITHUB\_REPO/feed.xml

You can also use this RSS Feed link to support any podcast player!

Conclusion

Hopefully you can see now how easy it is to host your podcast for free on Github Pages. You can find the final code for this example here:

Final Project.

Live Example

My “Creative Engineering” podcast is hosted using this technique:

How to do Bitwise operations in Dart

Sun, 19 Jan 2025 02:35:57 GMT

How to do Bitwise operations in Dart

In Dart it is possible to do Bitwise Operations with int and bool types.

AND

Checks if the left and right side are both true. Learn more.

// int
print(0 & 1); // 0
print(1 & 0); // 0
print(1 & 1); // 1
print(0 & 0); // 0

// bool
print(false & true); // false
print(true & false); // false
print(true & true); // true
print(false & false); // false

OR

Inclusive

Checks if either the left or right side are true. Learn more.

// int
print(0 | 1); // 1
print(1 | 0); // 1
print(1 | 1); // 1
print(0 | 0); // 0

// bool
print(false | true); // true
print(true | false); // true
print(true | true); // true
print(false | false); // false

Exclusive

Checks if both the left or right side are true but not both. Learn more.

// int
print(0 ^ 1); // 1
print(1 ^ 0); // 1
print(1 ^ 1); // 0
print(0 ^ 0); // 0

// bool
print(false ^ true); // true
print(true ^ false); // true
print(true ^ true); // false
print(false ^ false); // false

NAND

Negated AND operation.

// int
print(~(0 & 1) & 1); // 1
print(~(1 & 0) & 1); // 1
print(~(1 & 1) & 1); // 0
print(~(0 & 0) & 1); // 1

// bool
print(!(false & true)); // true
print(!(true & false)); // true
print(!(true & true)); // false
print(!(false & false)); // true

NOR

Negated inclusive OR operation.

// int
print(~(0 | 1) & 1); // 0
print(~(1 | 0) & 1); // 0
print(~(1 | 1) & 1); // 0
print(~(0 | 0) & 1); // 1

// bool
print(!(false | true)); // false
print(!(true | false)); // false
print(!(true | true)); // false
print(!(false | false)); // true

XNOR

Negated exclusive OR operation.

// int
print(~(0 ^ 1) & 1); // 0
print(~(1 ^ 0) & 1); // 0
print(~(1 ^ 1) & 1); // 1
print(~(0 ^ 0) & 1); // 1

// bool
print(!(false ^ true)); // false
print(!(true ^ false)); // false
print(!(true ^ true)); // true
print(!(false ^ false)); // true

How to Run Astro SSR and PocketBase on the Same Server

Sat, 18 Jan 2025 22:05:53 GMT

How to Run Astro SSR and PocketBase on the Same Server

In this article I will show you how to host PocketBase and Astro in SSR mode on the same server. PocketBase does let you render templates on the server but requires Go Templates or pre-building with Static Site Generation (SSG).

This could also be modified to use your web server or framework of choice (Next.js, SvelteKit, Qwik, Angular).

Before getting started make sure you have the latest version of Node and Go installed locally.

Getting started

In a terminal run the following to create the base project:

mkdir pocketbase_astro_ssr
cd pocketbase_astro_ssr
mkdir server
mkdir www

This will create the server and www folders in our project needed for both Astro and PocketBase.

Setting up the server

Create a file at server/main.go and update it with the following:

package main

import (
	"log"
	"net/http/httputil"
	"net/url"

	"github.com/labstack/echo/v5"
	"github.com/pocketbase/pocketbase"
	"github.com/pocketbase/pocketbase/core"
)

func main() {
    app := pocketbase.New()

    app.OnBeforeServe().Add(func(e *core.ServeEvent) error {
        proxy := httputil.NewSingleHostReverseProxy(&url.URL{
			Scheme: "http",
			Host:   "localhost:4321",
		})
		e.Router.Any("/*", echo.WrapHandler(proxy))
		e.Router.Any("/", echo.WrapHandler(proxy))
        return nil
    })

    if err := app.Start(); err != nil {
        log.Fatal(err)
    }
}

Here we are extending PocketBase with Go and taking advantage of the Echo router integration and using a reverse proxy to handle all requests not defined by PocketBase already and delegating them to Astro.

Next run the following in a terminal to install the dependencies:

go mod init server
go mod tidy

Now we can start the server and move on to the client:

go run main.go serve

You should see the following and note that this will run in debug mode so all the SQL statements will start to show:

2023/11/09 10:28:52 Server started at http://127.0.0.1:8090
├─ REST API: http://127.0.0.1:8090/api/
└─ Admin UI: http://127.0.0.1:8090/_/

Collections

Open up the Admin UI url and after creating a new admin user, create a new collection items and add the following metadata:

Column Name

Column Type

Column Settings

title

Plain Text

Then update the API Rules to allow read access for list and view.

This is just for example purposes and on a production app you will rely on auth for ACLs

Create 3 new records with placeholder data.

Creating the client

Now we can create the client that will be used to connect to PocketBase and serve all of the web traffic.

Navigate to the www directory and run the following in a terminal:

npm create astro@latest

Follow the prompts and enter the following:

Question

Answer

Where should we create your new project?

How would you like to start your new project?

Empty

Install dependencies?

Yes

Do you plan to write TypeScript?

Yes

How strict should TypeScript be?

Strict

Initialize a new git repository?

You can of course customize this as you need, but next we can install the dependencies needed by running the following in a terminal:

npm i -D @astrojs/node
npm i pocketbase

Next update www/astro.config.mjs and update it with the following:

import { defineConfig } from "astro/config";
import nodejs from "@astrojs/node";

// https://astro.build/config
export default defineConfig({
  adapter: nodejs({
    mode: "standalone",
  }),
  output: "server",
});

This will use Server Side Rendering (SSR) instead of Static Site Generation (SSG) when we run the web server.

UI

Layouts

We can start by creating a shared layout for all the routes. Create a file at www/src/layouts/Root.astro and update it with the following:

---
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>

Routes

Now we can update the index / route by updating the following file www/src/pages/index.astro:

---
import Root from "../layouts/Root.astro";

import PocketBase from "pocketbase";

const pb = new PocketBase("http://127.0.0.1:8090");
const items = pb.collection("items");
const records = await items.getFullList();
---

<Root title="Items">
  <h1>Items</h1>
  <ul>
    {
      records.map((record) => (
        <li>
          <a href={`/items/${record.id}`}>{record.title}</a>
        </li>
      ))
    }
  </ul>
</Root>

This will call the items collection on the server and render it with 0 JS on the client.

Next create a file www/src/pages/[...slug].astro and update it with the following:

---
import Root from "../layouts/Root.astro";

import PocketBase from "pocketbase";

const slug = Astro.params.slug!;
const id = slug.split("/").pop()!;

const pb = new PocketBase("http://127.0.0.1:8090");
const items = pb.collection("items");

const records = await items.getList(1, 1, {
  filter: `id = '${id}'`,
});

if (records.items.length === 0) {
  return new Response("Not found", { status: 404 });
}

const {title} = records.items[0];
---

<Root {title}>
  <a href="/">Back</a>
  <h1>{title}</h1>
</Root>

This is almost like before but now we can return a proper 404 response if not found for an item.

Running

Now we can run the web server with the following command:

npm run dev

You should see the following:

> dev
> astro dev

  🚀  astro  v3.4.4 started in 67ms
  
  ┃ Local    http://localhost:4321/
  ┃ Network  use --host to expose

Then if we open up the PocketBase url http://127.0.0.1:8090 and you should see the following for the index route and detail routes:

Conclusion

Now you can build a new binary for both the server and client and deploy them both on the same server instance. 🎉

You can find the final code here.

How to Build a WebRTC Signal Server with PocketBase

Sat, 18 Jan 2025 22:32:05 GMT

How to Build a WebRTC Signal Server with PocketBase

Overview

If you are new to WebRTC then I suggest checking out this great Fireship video on WebRTC in 100 seconds:

Also if you are looking for a Firebase example then check out this repository which this example is largely based on.

This example is built using PocketBase as the signal server for WebRTC and runs SQLite on the server with easy to use realtime SDKs built on top of Server Sent Events (SSE).

Setting up the server

Download PocketBase and create a new directory that we will use for the project.

mkdir webrtc-pocketbase-demo
cd webrtc-pocketbase-demo

Copy the PocketBase binary into the directory you just created under a sub directory .pb. If you are on MacOS you will need to allow the executable to run in settings.

Start the PocketBase server with the following command:

.pb/pocketbase serve

If all goes well you should see the following:

2023/11/04 15:10:56 Server started at http://127.0.0.1:8090
├─ REST API: http://127.0.0.1:8090/api/
└─ Admin UI: http://127.0.0.1:8090/_/

Open up the Admin UI url and create a new username and password.

For this example the email and password will be the following:

Key

Value

test@example.com

Password

Test123456789

You should now see the following:

Creating the collections

ice_servers

Create a new collection named ice_servers with the following columns:

Column Name

Column Type

url

Plain text

Add the following API rule to the List/Search and View:

@request.auth.id != ''

After the collection is created add 2 records for each of the following values for the url:

stun:stun1.l.google.com:19302
stun:stun2.l.google.com:19302

calls

Create a new collection named calls with the following columns:

Column Name

Column Type

Column Settings

user_id

Relation

Non empty, users, Cascade delete is true

offer

JSON

answer

JSON

it is also possible to limit the user to one call each by setting the Unique constraint on the user_id column.

Add the following API rule to all of the methods:

@request.auth.id != ''

offer_candidates

Create a new collection named offer_candidates with the following columns:

Column Name

Column Type

Column Settings

call_id

Relation

Non empty, calls, Cascade delete is true

data

JSON

Add the following API rule to all of the methods:

@request.auth.id != ''

answer_candidates

Create a new collection named answer_candidates with the following columns:

Column Name

Column Type

Column Settings

call_id

Relation

Non empty, calls, Cascade delete is true

data

JSON

Add the following API rule to all of the methods:

@request.auth.id != ''

users

For demo purposes we will not be including an auth form for the user, but to make the example simple create a new user with the same login info for the admin.

Setting up the client

Navigate to the directory and run the following commands to get started:

npm init -y
npm i -D vite
npm i pocketbase

Update the package.json to be the following:

{
  "name": "webrtc-pocketbase-demo",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "vite": "^4.5.0"
  },
  "dependencies": {
    "pocketbase": "^0.19.0"
  }
}

If you are in a Git repository update/create the .gitignore to have the following:

node_modules
.DS_Store
dist
dist-ssr
*.local
.pb
.env

HTML

Create index.html and add the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebRTC Pocketbase Demo</title>
  </head>
  <body>
    <h2>1. Start your Webcam</h2>
    <div class="videos">
      <span>
        <h3>Local Stream</h3>
        <video id="webcamVideo" autoplay playsinline></video>
      </span>
      <span>
        <h3>Remote Stream</h3>
        <video id="remoteVideo" autoplay playsinline></video>
      </span>
    </div>
    <button id="webcamButton">Start webcam</button>
    <h2>2. Create a new Call</h2>
    <button id="callButton" disabled>Create Call (offer)</button>``
    <h2>3. Join a Call</h2>
    <p>Answer the call from a different browser window or device</p>
    <input id="callInput" />
    <button id="answerButton" disabled>Answer</button>
    <h2>4. Hangup</h2>
    <button id="hangupButton" disabled>Hangup</button>
    <script type="module" src="/main.js"></script>
  </body>
</html>

CSS

Create style.css and add the following:

body {
  --text-color: #2c3e50;
  --video-background-color: #2c3e50;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: var(--text-color);
  margin: 80px 10px;
}

video {
  width: 40vw;
  height: 30vw;
  margin: 2rem;
  background: var(--video-background-color);
}

.videos {
  display: flex;
  align-items: center;
  justify-content: center;
}

JS

Create main.js and add the following:

import "./style.css";

import PocketBase from "pocketbase";

const pb = new PocketBase("http://127.0.0.1:8090");

const calls = pb.collection("calls");
const offerCandidates = pb.collection("offer_candidates");
const answerCandidates = pb.collection("answer_candidates");

const webcamButton = document.getElementById("webcamButton");
const webcamVideo = document.getElementById("webcamVideo");
const callButton = document.getElementById("callButton");
const callInput = document.getElementById("callInput");
const answerButton = document.getElementById("answerButton");
const remoteVideo = document.getElementById("remoteVideo");
const hangupButton = document.getElementById("hangupButton");

const auth = await pb
  .collection("users")
  .authWithPassword(
    import.meta.env.VITE_POCKETBASE_USERNAME,
    import.meta.env.VITE_POCKETBASE_PASSWORD
  );
const userId = auth.record.id;
const iceServers = await pb.collection("ice_servers").getFullList();

const servers = {
  iceServers: [{ urls: iceServers.map((e) => e.url) }],
  iceCandidatePoolSize: 10,
};

const pc = new RTCPeerConnection(servers);
let localStream = null;
let remoteStream = null;

webcamButton.onclick = async () => {
  localStream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  });
  remoteStream = new MediaStream();

  localStream.getTracks().forEach((track) => {
    pc.addTrack(track, localStream);
  });

  pc.ontrack = (event) => {
    const stream = event.streams[0];
    stream.getTracks().forEach((track) => {
      remoteStream.addTrack(track);
    });
  };

  webcamVideo.srcObject = localStream;
  remoteVideo.srcObject = remoteStream;

  callButton.disabled = false;
  answerButton.disabled = false;
  webcamButton.disabled = true;
};

callButton.onclick = async () => {
  const call = await calls.create({
    user_id: userId,
  });
  const callId = call.id;

  callInput.value = callId;

  pc.onicecandidate = (event) => {
    event.candidate &&
      offerCandidates.create({
        call_id: callId,
        data: event.candidate.toJSON(),
      });
  };

  const offerDescription = await pc.createOffer();
  await pc.setLocalDescription(offerDescription);

  const offer = {
    sdp: offerDescription.sdp,
    type: offerDescription.type,
  };

  await calls.update(callId, { offer });

  calls.subscribe(callId, (e) => {
    const data = e.record;
    if (!pc.currentRemoteDescription && data?.answer) {
      const answerDescription = new RTCSessionDescription(data.answer);
      pc.setRemoteDescription(answerDescription);
    }
  });

  answerCandidates.subscribe("*", (e) => {
    if (e.action === "create") {
      if (e.record?.call_id === callId) {
        const data = e.record.data;
        const candidate = new RTCIceCandidate(data);
        pc.addIceCandidate(candidate);
      }
    }
  });

  hangupButton.disabled = false;
};

answerButton.onclick = async () => {
  const callId = callInput.value;
  const call = await calls.getOne(callId);

  pc.onicecandidate = (event) => {
    event.candidate &&
      answerCandidates.create({
        call_id: call.id,
        data: event.candidate.toJSON(),
      });
  };

  const offerDescription = call.offer;
  const remoteDescription = new RTCSessionDescription(offerDescription);
  await pc.setRemoteDescription(remoteDescription);

  const answerDescription = await pc.createAnswer();
  await pc.setLocalDescription(answerDescription);

  const answer = {
    type: answerDescription.type,
    sdp: answerDescription.sdp,
  };

  await calls.update(call.id, { answer });

  offerCandidates.subscribe("*", async (e) => {
    if (e.record?.call_id === call.id) {
      if (e.action === "create") {
        const data = e.record.data;
        const candidate = new RTCIceCandidate(data);
        await pc.addIceCandidate(candidate);
      } else if (e.action === "delete") {
        await offerCandidates.unsubscribe();
        window.location.reload();
      }
    }
  });
};

hangupButton.onclick = async () => {
  const callId = callInput.value;
  pc.close();
  await calls.unsubscribe(callId);
  await calls.delete(callId);
  await answerCandidates.unsubscribe();
  window.location.reload();
};

Running the example

Run the following command to start the client (make sure the server is running in a separate terminal client):

npm run dev

If successful you should see the following:

  VITE v4.5.0  ready in 547 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

Open up two browsers with the same url:

In the first window click Start webcam and then Create Call (offer).

This will ask for camera permission and then generate a new id and add it to the Join a Call text field.

Copy the new id and paste it in the second window field and click Start webcam.

Then click Hangup when you are done with the call 🎉.

Conclusion

You can find the source code here.

How to Export SQLite Tables to CREATE Statements

Sat, 18 Jan 2025 20:43:35 GMT

How to Export SQLite Tables to CREATE Statements

In this article I will show you how to export all the tables and indexes in a SQLite database to CREATE statements at runtime.

Getting started

Start by creating a new directory and Flutter project:

mkdir sqlite_introspect
cd sqlite_introspect
flutter create .
flutter pub add sqlite3 mustache_template

This will add the sqlite3 package which uses FFI to call the native executable and mustache that we will use for templates later.

Creating the database

Creating the database can be done either in memory or based on a local file. For this example we will use in memory:

final Database db = sqlite3.openInMemory();

Don't forget to dispose of the database after use:

db.dispose();

Defining the template

Since we will be using Mustache we can define the variables that we will pass to the template as JSON.

Create a TableInfo class that will store the fields and indexes:

class TableInfo {
  final String name;
  final List<Map<String, dynamic>> fields;
  final List<Map<String, dynamic>> indexes;

  TableInfo({
    required this.name,
    required this.fields,
    required this.indexes,
  });

  Map<String, dynamic> toJson() {
    return {
      'name': name,
      'fields': [
        for (var i = 0; i < fields.length; i++)
          {
            'index': i,
            'table': name,
            'isLast': i == fields.length - 1,
            ...fields[i],
          },
      ],
      'indexes': [
        for (var i = 0; i < indexes.length; i++)
          {
            'index': i,
            'table': name,
            'isLast': i == indexes.length - 1,
            ...indexes[i],
          },
      ],
    };
  }
}

Now we can create the Mustache template used to build up the CREATE statements:

const template = '''
{{#tables}}
CREATE TABLE {{name}} (
  {{#fields}}
  {{name}} {{#type}} {{.}}{{/type}}{{#notnull}} NOT NULL{{/notnull}}{{#pk}} PRIMARY KEY{{/pk}}{{#dflt_value}} DEFAULT {{.}}{{/dflt_value}}{{^isLast}},{{/isLast}}
  {{/fields}}
);
{{#indexes}}
CREATE {{#unique}} UNIQUE{{/unique}} {{name}}
ON {{table}}({{#values}} {{name}} {{/values}}{{^isLast}},{{/isLast}});
{{/indexes}}
{{/tables}}
''';

Exporting the PRAGMA

Now we can export the PRAGMA for the database by exporting the list of tables, querying the column information and indexes about each one.

final tables = <TableInfo>[];
// Export table names
final tableNames = db
	.select("SELECT name FROM sqlite_master WHERE type='table';")
	.map((e) => e['name'] as String);
for (final t in tableNames) {
  // Export column information
  final info = db.select('PRAGMA table_info($t);');
  final tbl = TableInfo(name: t, fields: [], indexes: []);
  for (final c in info) {
    tbl.fields.add(c);
  }
  // Export index names
  final indexList = db.select('PRAGMA index_list($t);');
  for (final index in indexList) {
    final name = index['name'] as String;
    // Export index information
    final infos = db.select('PRAGMA index_info($name);');
    final indexValue = {...index, 'values': infos};
    tbl.indexes.add(indexValue);
  }
  tables.add(tbl);
}

Rendering the template

Now take the tables we just exported and pass them to the mustache template to render:

final tml = Template(template);
final args = {"tables": tables.map((e) => e.toJson()).toList()};
final str = tml.renderString(args);
print(str);

This will now print out all the tables and indexes as CREATE as valid SQL. 🎉

Various Ways to Invoke Functions in Dart

Sun, 19 Jan 2025 02:43:50 GMT

Various Ways to Invoke Functions in Dart

There are multiple ways to call a Function in Dart.

The examples below will assume the following function:

void myFunction(int a, int b, {int? c, int? d}) {
  print((a, b, c, d));
}

But recently I learned that you can call a functions positional arguments in any order mixed with the named arguments. 🤯

myFunction(1, 2, c: 3, d: 4);
myFunction(1, c: 3, d: 4, 2);
myFunction(c: 3, d: 4, 1, 2);
myFunction(c: 3, 1, 2, d: 4);

In addition you can use the .call operator to invoke the function if you have a reference to it:

myFunction.call(1, 2, c: 3, d: 4);

You can also use Function.apply to dynamically invoke a function with a reference but it should be noted that it will effect js dart complication size and performance:

Function.apply(myFunction, [1, 2], {#c: 3, #d: 4});

All of these methods print the following:

(1, 2, 3, 4)

Demo

How to create HTML Web Components with Dart

Fri, 14 Feb 2025 12:00:00 GMT

How to create HTML Web Components with Dart

I am a long time Web Components fan (since helping DevRel lit.dev and Material Web Components) and have also loved writing Dart in both Flutter applications and full stack apps.

Despite being used at so many companies, Web Components have faced a lot of pushback from JavaScript developers that use frameworks to target the web. ☹️

What you may not realize is that the web has a way to create new HTML tags that can be used in ANY JS framework or place that returns HTML and you can progressively enchance applications. 🤩

Since they are custom HTML tags, if you swap implementations, you do not need to update where it is used and you can ship components a separate files instead of one big bundle.

Dart used to support Web Components at one point and was even used by a precursor to Lit in a product call Polymer.

Creating a Web Component in Javascript

To create a web component in Javascript you just need to extend HTML element and provide callbacks for when the component is mounted.

class HelloWorld extends HTMLElement {
  static observedAttributes = ["name"];

  constructor() {
    super();
  }

  update() {
    this.innerHTML = `Hello: ${this.getAttribute('name')}`;
  }

  connectedCallback() {
    console.log("Custom element added to page.");
    this. update();
  }

  disconnectedCallback() {
    console.log("Custom element removed from page.");
  }

  adoptedCallback() {
    console.log("Custom element moved to new page.");
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute ${name} has changed.`);
    if (name === 'name') {
      this. update();
    }
  }
}

customElements.define("hello-world", HelloWorld);

We can then use it in HTML like the following:

<html>
  <body>
    <hello-world name="Rody"></hello-world>
    <script src="./index.js"></script>
  </body>
</html>

This works really well, and we don't even need a build step to create them!

Creating Web Components with Dart

To create them on the Dart side we need to use the js_interop package and the new web package.

We need to create a factory on the dart side that can create these JS classes without actually being able to create a class in the normal way (since JS and Dart classes are different).

There is a great API Reflect.construct() which allows us to take a normal function and invoke it class a class constructor. JavaScript did not always support native classes and was only added with ES6.

By using this built in API, we can create the classes with just pure Dart:

import 'dart:js_interop';
import 'dart:js_interop_unsafe';

import 'package:web/web.dart';

class WebComponent<T extends HTMLElement> {
  late T element;
  final String extendsType = 'HTMLElement';

  void connectedCallback() {}

  void disconnectedCallback() {}

  void adoptedCallback() {}

  void attributeChangedCallback(
    String name,
    String? oldValue,
    String? newValue,
  ) {}

  Iterable<String> get observedAttributes => [];

  bool get formAssociated => false;

  ElementInternals? get internals => element['_internals'] as ElementInternals?;
  set internals(ElementInternals? value) {
    element['_internals'] = value;
  }

  R getRoot<R extends JSObject>() {
    final hasShadow = element.shadowRoot != null;
    return (hasShadow ? element.shadowRoot! : element) as R;
  }

  static void define(String tag, WebComponent Function() create) {
    final obj = _factory(create);
    window.customElements.define(tag, obj);
  }
}

@JS('Reflect.construct')
external JSAny _reflectConstruct(
  JSObject target,
  JSAny args,
  JSFunction constructor,
);

final _instances = <HTMLElement, WebComponent>{};

JSFunction _factory(WebComponent Function() create) {
  final base = create();
  final elemProto = globalContext[base.extendsType] as JSObject;
  late JSAny obj;

  JSAny constructor() {
    final args = <String>[].jsify()!;
    final self = _reflectConstruct(elemProto, args, obj as JSFunction);
    final el = self as HTMLElement;
    _instances.putIfAbsent(el, () => create()..element = el);
    return self;
  }

  obj = constructor.toJS;
  obj = obj as JSObject;

  final observedAttributes = base.observedAttributes;
  final formAssociated = base.formAssociated;

  obj['prototype'] = elemProto['prototype'];
  obj['observedAttributes'] = observedAttributes.toList().jsify()!;
  obj['formAssociated'] = formAssociated.jsify()!;

  final prototype = obj['prototype'] as JSObject;
  prototype['connectedCallback'] = (HTMLElement instance) {
    _instances[instance]?.connectedCallback();
  }.toJSCaptureThis;
  prototype['disconnectedCallback'] = (HTMLElement instance) {
    _instances[instance]?.disconnectedCallback();
    _instances.remove(instance);
  }.toJSCaptureThis;
  prototype['adoptedCallback'] = (HTMLElement instance) {
    _instances[instance]?.adoptedCallback();
  }.toJSCaptureThis;
  prototype['attributeChangedCallback'] = (
    HTMLElement instance,
    String name,
    String? oldName,
    String? newName,
  ) {
    _instances[instance]?.attributeChangedCallback(name, oldName, newName);
  }.toJSCaptureThis;

  return obj as JSFunction;
}

This may seem like a lot to digest, but that is ok. It simply does some JS magic to upgrade functions to classes and provide the correct callbacks to create the web components.

If you want a package that does this for you, html_web_components is on pub.dev.

To create a Web Component like we did before, we can just extend the class and define the component.

import 'package:html_web_components/html_web_components.dart';

class HelloWorld extends WebComponent {
  @override
  List<String> observedAttributes = ['name'];

  void update() {
    element.innerText = "Hello: ${element.getAttribute('name')}!";
  }

  @override
  void connectedCallback() {
    super.connectedCallback();
    update();
  }

  @override
  void attributeChangedCallback(
    String name,
    String? oldValue,
    String? newValue,
  ) {
    super.attributeChangedCallback(name, oldValue, newValue);
    if (observedAttributes.contains(name)) {
      update();
    }
  }
}

void main() {
  WebComponent.define('hello-world', HelloWorld.new);
}

This should look very similar (that is the goal) and makes it so easy to publish the compoents or build a full web application with it.

Conclusion

Web Components allow you to upgrade your client side interactivity while having the freedom to use server rendering to create the template files or just use a SPA on the frontend. You can take these components and use them in ANY JS frameworks! 🤯

I would highly suggest that you try it out for yourself before you write off Web Components. This is especially true for Flutter developers wanting an alternative to Flutter web (and even use with Jaspr).

You can take advantage of Dart's great ecosystem of packages on pub.dev and the ability to compile to WASM and JS. If you use a builder like peanut it will even create the script that tries to load WASM and can fallback to JS for you 🔥

If you want to see the code, you can find it on GitHub. Reach out if you have any questions or want to show off something cool you built with them!

How to Print Multiple Objects to the Console with print() in Dart

Sun, 19 Jan 2025 02:39:50 GMT

How to Print Multiple Objects to the Console with print() in Dart

If you are coming from JavaScript you may be used to printing multiple objects to the console with console.log():

console.log('a', 1, 'b', 2); // a 1 b 2

In Dart we can only print Object? to the console with print():

print(1); // 1
print(null); // null
print({'a': 1, 'b': 2}); // {a: 1, b: 1}

But it is totally possible to print multiple objects too, we need to use Records:

final number = 1;
final str = 'Hello World';

print((number, str));

print((DateTime.now(), str));

print((DateTime.now(), count: number, description: str));

print((DateTime.now(), StackTrace.current));

Print the following:

(1, Hello World)
(2024-03-06 15:48:26.514, Hello World)
(2024-03-06 15:48:26.514, count: 1, description: Hello World)
(2024-03-06 15:48:26.514, Error
    at get current [as current] (https://storage.googleapis.com/nnbd_artifacts/3.3.0/dart_sdk.js:139991:30)
    at Object.main$0 [as main] (<anonymous>:52:94)
    at Object.main$ [as main] (<anonymous>:44:10)
    at <anonymous>:89:26
    at Object.execCb (https://dartpad.dev/require.js:5:16727)
    at e.check (https://dartpad.dev/require.js:5:10499)
    at e.<anonymous> (https://dartpad.dev/require.js:5:12915)
    at https://dartpad.dev/require.js:5:1542
    at https://dartpad.dev/require.js:5:13376
    at each (https://dartpad.dev/require.js:5:1020)
    at e.emit (https://dartpad.dev/require.js:5:13344)
    at e.check (https://dartpad.dev/require.js:5:11058)
    at e.enable (https://dartpad.dev/require.js:5:13242)
    at e.init (https://dartpad.dev/require.js:5:9605)
    at a (https://dartpad.dev/require.js:5:8305)
    at Object.completeLoad (https://dartpad.dev/require.js:5:15962)
    at HTMLScriptElement.onScriptLoad (https://dartpad.dev/require.js:5:16882))

Demo

Check if an Object is Truthy in Dart

Sun, 19 Jan 2025 02:25:47 GMT

Check if an Object is Truthy in Dart

If you are coming from language like JavaScript you may be used to checking if an object is truthy.

if (true)
if ({})
if ([])
if (42)
if ("0")
if ("false")
if (new Date())
if (-42)
if (12n)
if (3.14)
if (-3.14)
if (Infinity)
if (-Infinity)

In Dart you need to explicitly check if an object is not null, true/false or determine if the value is true based on the type.

It is possible however to use Dart extensions to add the truthy capability.

extension on Object? {
  bool get isTruthy => truthy(this);
}

bool truthy(Object? val) {
  if (val == null) return false;
  if (val is bool) return val;
  if (val is num && val == 0) return false;
  if (val is String && (val == 'false' || val == '')) return false;
  if (val is Iterable && val.isEmpty) return false;
  if (val is Map && val.isEmpty) return false;
  return true;
}

This will now make it possible for any object to be evaluated as a truthy value in if statements or value assignments.

Prints the following:

(null, false)
(, false)
(false, false)
(true, true)
(0, false)
(1, true)
(false, false)
(true, true)
([], false)
([1, 2, 3], true)
({}, false)
({1, 2, 3}, true)
({a: 1, b: 2}, true)

Demo

Calling the PaLM 2 API with Dart and Flutter

Sun, 19 Jan 2025 07:17:50 GMT

Calling the PaLM 2 API with Dart and Flutter

Example

Prompt Template

To call the API with a prompt we can start by creating a template:

This post will talk about how to call the PaLM 2 API with pure Dart in Flutter.

Getting Started

Make sure you have the Flutter SDK installed and an API key for the PaLM API.

In a terminal window create a new directory and Flutter project:

mkdir flutter_ai_example
cd flutter_ai_example
flutter create .

Then run the following to add the required dependencies to you pubspec.yaml:

flutter pub add flutter_dotenv mustache_template http

API Keys

Now create a .env and the root of the project and add the API key you created earlier to the file:

GOOGLE_AI_API_KEY=[Your API Key Here]

Update lib/main.dart main method to be async and load the .env file on launch:

+ import 'package:flutter_dotenv/flutter_dotenv.dart';

- void main() {
+ Future<void> main() async {
+	await dotenv.load(fileName: ".env");

This example loads the API key into the bundle as plain text but for production apps you need to call the API from a server

Firebase has an extension for securely calling the API from your mobile app. 🎉

In addition you can help prevent abuse to your API by using App Check. 🔐

If you want to learn more check out this codelab. 👀

API Wrapper

Create a new file called lib/palm_api.dart and add the following:

import 'dart:convert';

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:mustache_template/mustache_template.dart';
import 'package:http/http.dart' as http;

class PalmApi {
  final String template;
  final String model;

  PalmApi(
    this.template, {
    this.model = 'text-bison-001',
    this.settings = const {
      "temperature": 0.7,
      "top_k": 40,
      "top_p": 0.95,
      "candidate_count": 1,
      "max_output_tokens": 1024,
      "stop_sequences": [],
      "safety_settings": [
        {"category": "HARM_CATEGORY_DEROGATORY", "threshold": 1},
        {"category": "HARM_CATEGORY_TOXICITY", "threshold": 1},
        {"category": "HARM_CATEGORY_VIOLENCE", "threshold": 2},
        {"category": "HARM_CATEGORY_SEXUAL", "threshold": 2},
        {"category": "HARM_CATEGORY_MEDICAL", "threshold": 2},
        {"category": "HARM_CATEGORY_DANGEROUS", "threshold": 2}
      ]
    },
  });

  Uri _createUrl(String apiKey) {
    const domain = 'https://generativelanguage.googleapis.com';
    final path = 'v1beta3/models/$model:generateText';
    return Uri.parse('$domain/$path?key=$apiKey');
  }

  final Map<String, Object?> settings;

  Future<List<String>> execute([Map<String, Object?> args = const {}]) async {
    // Load the API key from .env
    final apiKey = dotenv.env['GOOGLE_AI_API_KEY'];
    if (apiKey == null) throw Exception('GOOGLE_AI_API_KEY Required in .env');

    // Create the API url to call the correct model
    final uri = _createUrl(apiKey);

    // Render the prompt with the tokens
    final text = Template(template).renderString(args);

    // Call the API with the model settings and prompt template
    final response = await http.post(
      uri,
      headers: {'Content-Type': 'application/json'},
      body: jsonEncode({
        "prompt": {"text": text},
        ...settings
      }),
    );

    // Check for a successful response and parse out the results
    if (response.statusCode == 200) {
      final body = response.body;
      final json = jsonDecode(body) as Map<String, dynamic>;
      final candidates = (json['candidates'] as List<dynamic>)
          .map((e) => e as Map<String, dynamic>)
          .toList();
      return candidates.map((e) => e['output'] as String).toList();
    }

    // Default to empty result set
    return [];
  }
}

Here we are using Mustache to add tokens to our prompt that we pass to the API. This will feel familiar if you are used to working with MakerSuite and makes it easier to iterate on prompts and desired outputs.

You can also copy the config from MakerSuite if you want to change the model or other settings.

Example

Prompt Template

To call the API with a prompt we can start by creating a template:

const _template = '''
Generate a valid SVG that does not include animations based on the following UI description "{{description}}".

Make sure that the content is centered in the middle of the svg.

The width will be {{width}}.
The height will be {{height}}.
The viewbox will be 0 0 {{width}} {{height}}.
''';

Here we are adding tokens for description, width, and height that we will pass in later. Notice that the template is a const since it will reuse this string at compile time.

Now we can create the API wrapper:

final api = PalmApi(_template);

Passing Tokens

To call the API we can pass in the tokens we defined earlier:

final results = await api.execute({
  'description': 'Red rectangle with blue circle',
  'width': 300,
  'height': 600,
});

Since the API can return different results we can check for just the SVG code and extract it out:

final res = results.first;
var result = res.trim();
final startIdx = result.indexOf('```');
final endIdx = result.lastIndexOf('```');
result = result.substring(startIdx + 3, endIdx).trim();
if (result.startsWith('svg')) {
  result = result.replaceFirst('svg', '').trim();
}
if (result.startsWith('xml')) {
  result = result.replaceFirst('xml', '').trim();
}
result = result.trim();

If result is not empty then we can work with it as an SVG string now 🎉

import 'package:flutter_svg/flutter_svg.dart';
...
SvgPicture(SvgStringLoader(result))

Conclusion

If you still want to explore PaLM 2 in Flutter further check out this codelab.

Automate Flutter App Releases

Sun, 19 Jan 2025 06:09:34 GMT

Automate Flutter App Releases

TLDR You can find the script here.

#!/bin/bash

echo "App Release Automator by @rodydavis"

action="$1"
red=`tput setaf 1`
green=`tput setaf 2`
reset=`tput sgr0`

if [ ${action} = "build" ]; then

    echo "${green}Generating built files.. ${reset}"
    flutter packages pub run build_runner clean
    flutter packages pub run build_runner build --delete-conflicting-outputs

    pub global activate pubspec_version
    git commit -a -m "Build $(pubver bump patch)"
    
    echo "${green}Building Project...${reset}"
    find . -name "*-e" -type f -delete
    flutter format .
    flutter clean

    echo "${green}Project Size: $(find . -name "*.dart" | xargs cat | wc -c)${reset}"

    echo "${green}Building APK...${reset}"
    flutter build apk

    echo "${green}Builing IPA..${reset}"
    cd ./ios && pod install && pod repo update && cd ..
    flutter build ios

    git commit -a -m "Project Rebuilt"


elif [ ${action} = "beta" ]; then

    echo "${green}Generating built files..${reset}"
    flutter packages pub run build_runner clean
    flutter packages pub run build_runner build --delete-conflicting-outputs

    pub global activate pubspec_version
    git commit -a -m "Beta $(pubver bump patch)"
    
    echo "${green}Building Project...${reset}"
    find . -name "*-e" -type f -delete
    flutter format .
    flutter clean

    echo "${green}Project Size: $(find . -name "*.dart" | xargs cat | wc -c)${reset}"

    echo "${green}Building APK...${reset}"
    flutter build apk

    echo "${green}Sending Android to Beta...${reset}"
    cd ./android && fastlane beta && cd ..

    echo "${green}Builing IPA..${reset}"
    flutter build ios

    echo "${green}Sending iOS to Beta..${reset}"
    cd ./ios && fastlane beta && cd ..

    git commit -a -m "Sent to Beta"


elif [ ${action} = "release" ]; then

    echo "${green}Generating built files..${reset}"
    flutter packages pub run build_runner clean
    flutter packages pub run build_runner build --delete-conflicting-outputs

    pub global activate pubspec_version
    git commit -a -m "Production $(pubver bump minor)"

    echo "${green}Building Project...${reset}"
    find . -name "*-e" -type f -delete
    flutter format .
    flutter clean

    echo "${green}Project Size: $(find . -name "*.dart" | xargs cat | wc -c)${reset}"

    echo "${green}Building APK...${reset}"
    flutter build apk

    echo "${green}Sending Android to Production...${reset}"
    cd ./android && fastlane release && cd ..

    echo "${green}Builing IPA..${reset}"
    flutter build ios

    echo "${green}Sending iOS to Production...${reset}"
    cd ./ios && fastlane release && cd ..

    git commit -a -m "Sent to Production"

fi

echo "${green}Successfully completed${reset}"

Needed:

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

Steps to Run:

Download this file and 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

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

It will do the following:

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 message

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

Flutter Terminal Cheat Sheet

Mon, 20 Jan 2025 00:13:39 GMT

Flutter Terminal Cheat Sheet

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

Clean every flutter project

find . -name "pubspec.yaml" -exec $SHELL -c '
    echo "Done. Cleaning all projects."
    for i in "$@" ; do
        DIR=$(dirname "${i}")
        echo "Cleaning ${DIR}..."
        (cd "$DIR" && flutter clean >/dev/null 2>&1)
    done
    echo "DONE!"
' {} +

Conditional Export/Import

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

Kill Dart Running

killall -9 dart

Flutter scripts

Add all the scripts to your pubspec.yaml with flutter_scripts.

Displaying HTML in Flutter

Sun, 19 Jan 2025 08:08:22 GMT

Displaying HTML in Flutter

Sometimes you have content in HTML that needs to be displayed and interacted with in Flutter.

Online Demo:https://rodydavis.github.io/easy_web_view/#/

For those impatient I created a package for you to get all the following functionally and more here: https://pub.dev/packages/easy_web_view

Getting Started

Create a new flutter project named whatever you want.

If you plan on showing HTML content on iOS/Android you will need to add the following to your pubspec.yaml

dependencies:
    webview_flutter: ^0.3.15+1

Web

Reference: /lib/src/web.dart

To show html on Flutter web we need to use an HTMLElementView. This is a platform view that allows us to display native content.

We first need to register the Element and add all the options we need. Here we are creating an iFrame element and setting the source based on if it is markdown, html or a url.

To display valid HTML you can set the src field to the following:

_src = "data:text/html;charset=utf-8," + Uri.encodeComponent("HTML_CONTENT_HERE");

For the package you can also pass markdown to the src and it will convert it for you.

After you call the setup method it is now time to display your new platform view:

You need to use the same viewType string as you registered for “registerViewFactory” method earlier.

Finally you need to wrap it in a container or sized box with an explicit width and height!

Mobile

Reference: https://github.com/rodydavis/easy_web_view/blob/master/lib/src/mobile.dart

Mobile setup should be easier. Let’s add a method for updating the url that we will pass to the web view.

Create the controller:

WebViewController _controller;

And when ever the src changes call this method:

_controller.loadUrl(_updateUrl(widget.src), headers: widget.headers);

Finally lets show the html in the widget tree:

Conclusion

If you want to see a complete example and advanced use case view the source here: https://github.com/rodydavis/easy_web_view

And if you just want to have it all done for you use this package: https://pub.dev/packages/easy_web_view

Feel free to make PRs if you have anything that could help make it better too (Or if you find bugs).

When you show HTML this way you will find that you can interact, select text and work with it just like you would it it were a regular web page. If you are using the package you can also just pass embedded content or html elements too without needing a full html valid file (YouTube video for example).

Using Fastlane in Flutter and CI

Mon, 20 Jan 2025 02:50:39 GMT

Using Fastlane in Flutter and CI

Prerequisites:

Understand what Fastlane is and how it works
Project builds correctly following these docs
Android app setup in Google Play Console
iOS app setup in AppStore Connect
Flutter is installed and your project is created

Steps

Open your Flutter project
Run: cd ios
Run: fastlane init and follow the prompts
Replace the Fastfile contents with this:

#!/bin/bash

echo "App Release Automator by @rodydavis"

action="$1"
red=`tput setaf 1`
green=`tput setaf 2`
reset=`tput sgr0`

if [ ${action} = "build" ]; then

    echo "${green}Generating built files.. ${reset}"
    flutter packages pub run build_runner clean
    flutter packages pub run build_runner build --delete-conflicting-outputs

    pub global activate pubspec_version
    git commit -a -m "Build $(pubver bump patch)"
    
    echo "${green}Building Project...${reset}"
    find . -name "*-e" -type f -delete
    flutter format .
    flutter clean

    echo "${green}Project Size: $(find . -name "*.dart" | xargs cat | wc -c)${reset}"

    echo "${green}Building APK...${reset}"
    flutter build apk

    echo "${green}Builing IPA..${reset}"
    cd ./ios && pod install && pod repo update && cd ..
    flutter build ios

    git commit -a -m "Project Rebuilt"


elif [ ${action} = "beta" ]; then

    echo "${green}Generating built files..${reset}"
    flutter packages pub run build_runner clean
    flutter packages pub run build_runner build --delete-conflicting-outputs

    pub global activate pubspec_version
    git commit -a -m "Beta $(pubver bump patch)"
    
    echo "${green}Building Project...${reset}"
    find . -name "*-e" -type f -delete
    flutter format .
    flutter clean

    echo "${green}Project Size: $(find . -name "*.dart" | xargs cat | wc -c)${reset}"

    echo "${green}Building APK...${reset}"
    flutter build apk

    echo "${green}Sending Android to Beta...${reset}"
    cd ./android && fastlane beta && cd ..

    echo "${green}Builing IPA..${reset}"
    flutter build ios

    echo "${green}Sending iOS to Beta..${reset}"
    cd ./ios && fastlane beta && cd ..

    git commit -a -m "Sent to Beta"


elif [ ${action} = "release" ]; then

    echo "${green}Generating built files..${reset}"
    flutter packages pub run build_runner clean
    flutter packages pub run build_runner build --delete-conflicting-outputs

    pub global activate pubspec_version
    git commit -a -m "Production $(pubver bump minor)"

    echo "${green}Building Project...${reset}"
    find . -name "*-e" -type f -delete
    flutter format .
    flutter clean

    echo "${green}Project Size: $(find . -name "*.dart" | xargs cat | wc -c)${reset}"

    echo "${green}Building APK...${reset}"
    flutter build apk

    echo "${green}Sending Android to Production...${reset}"
    cd ./android && fastlane release && cd ..

    echo "${green}Builing IPA..${reset}"
    flutter build ios

    echo "${green}Sending iOS to Production...${reset}"
    cd ./ios && fastlane release && cd ..

    git commit -a -m "Sent to Production"

fi

echo "${green}Successfully completed${reset}"

Run: cd .. && cd android
Run: fastlane init and follow the prompts
Replace the Fastfile contents with this:

# Uncomment the line if you want fastlane to automatically update itself
# update_fastlane

default_platform(:android)

platform :android do
  desc "Prepare and archive app"
  lane :prepare  do |options|
    #bundle_install
    Dir.chdir "../.." do
      sh("flutter", "packages", "get")
      sh("flutter", "clean")
      sh("flutter", "build", "appbundle", "--release")
    end
  end
  
  desc "Push a new beta build to Google Play"
  lane :beta do
    prepare(release: false)
    upload_to_play_store(
      track: 'beta',
      aab: "../build/app/outputs/bundle/release/app.aab"
    )
    add_git_tag(
      grouping: "fastlane-builds",
      prefix: "v",
      build_number: android_get_version_code
    )
    push_to_git_remote
  end

  desc "Push a new release build to the Google Play"
  lane :release do
    prepare(release: true)
    upload_to_play_store(
      track: 'production',
      aab: "../build/app/outputs/bundle/release/app.aab"
    )
    add_git_tag(
      grouping: "release",
      prefix: "v",
      build_number: android_get_version_name
    )
    push_to_git_remote
  end
end

Run: fastlane add_plugin versioning_android and enter your password if needed
Run: cd ..

Now you are ready to launch your app to beta!

For ios run: cd ios && fastlane beta

For android run: cd android && fastlane beta

Stay tuned for an article soon where we use these fastlane sub folders for automating the releases on Github Actions CI

Creating Your First Flutter Project

Sun, 19 Jan 2025 07:34:27 GMT

Creating Your First Flutter Project

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.

Or this short:

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.

Learn about Flutter.

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:

How to install Flutter.

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:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  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.
      _counter++;
    });
  }

  @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 MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      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(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

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

name: example
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.webp
  #   - images/a_dot_ham.webp

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

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...                                   141ms

Flutter 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 screen
q 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:

// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility that Flutter provides. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.

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

import 'package:example/main.dart';

void main() {
  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
    // Build our app and trigger a frame.
    await tester.pumpWidget(MyApp());

    // Verify that our counter starts at 0.
    expect(find.text('0'), findsOneWidget);
    expect(find.text('1'), findsNothing);

    // Tap the '+' icon and trigger a frame.
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();

    // Verify that our counter has incremented.
    expect(find.text('0'), findsNothing);
    expect(find.text('1'), findsOneWidget);
  });
}

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

flutter test
00: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:

SF:lib/main.dart
DA:3,0
DA:4,0
DA:9,1
DA:11,1
DA:13,1
DA:27,1
DA:29,1
DA:35,2
DA:48,1
DA:49,1
DA:55,1
DA:56,2
DA:62,2
DA:66,1
DA:74,1
DA:75,1
DA:78,3
DA:80,1
DA:83,1
DA:99,1
DA:100,1
DA:103,1
DA:104,2
DA:105,3
DA:110,1
DA:111,1
DA:113,1
LF:27
LH:25
end_of_record

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

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:

Final source code.

You can also find the Flutter source code here:

Flutter source code.

How to Manage Multiple Flutter Versions with Git Worktrees and ZSH

Sun, 19 Jan 2025 02:32:18 GMT

How to Manage Multiple Flutter Versions with Git Worktrees and ZSH

If you have been using Flutter for any length of time then you probably have needed to use multiple flutter versions across multiple projects.

In the past I used to use FVM (Flutter Version Management) which is similar to NVM (Node Version Manager) in the JS world.

I wanted a solution that only relied on Git, and started using worktrees to manage the Flutter channels.

Download the SDK

Check out the flutter repo in a known directory, in this case I will download it to ~/Developer/:

git clone https://github.com/flutter/flutter ~/Developer/flutter

Add Flutter Channels

Now we can add the branches we want to track:

cd ~/Developer/flutter
git checkout origin/dev
git worktree add ../flutter-stable stable
git worktree add ../flutter-beta beta
git worktree add ../flutter-master master

We need to checkout the dev channel to allow us to create the worktree for the master branch. This will keep the flutter directory separate so we can work on PRs and apply local changes.

After this runs we should have 4 directories: flutter, flutter-master, flutter-beta and flutter-stable.

Add ZSH Alias for each Channel

Now we need a way to reference each SDK on the fly with an alias in ZSH. Add the following to ~/.zshrc:

alias flutter-master='~/Developer/flutter-master/bin/flutter'
alias dart-master='~/Developer/flutter-master/bin/dart'

alias flutter-beta='~/Developer/flutter-beta/bin/flutter'
alias dart-beta='~/Developer/flutter-beta/bin/dart'

alias flutter-stable='~/Developer/flutter-stable/bin/flutter'
alias dart-stable='~/Developer/flutter-stable/bin/dart'

Conclusion

After reopening the terminal, you can verify it is working by running (or add any channel we added above):

flutter-master doctor
dart-master --version

flutter-stable doctor
dart-stable --version

You can update any of the channels by navigating to the directory of the worktree for the given channel and pulling changes like any other Git repo.

cd ~/Developer/flutter-master
git checkout origin/master

Git worktrees are just a way to checkout multiple branches as separate folders instead of needing to stash changes.

How to build a graph database with Flutter

Sat, 18 Jan 2025 21:09:38 GMT

How to build a graph database with Flutter

In this article I will go over how to create and use a graph database with Flutter.

TLDR The final source here and an online demo.

Prerequisites

Flutter installed and setup (Refer to this article if you need help).

Basic knowledge of SQLite.

Basic knowledge of Graph Databases (Refer to this video if you need to learn more).

Overview

First of all, why do we need a graph database when other storage options exist?

Why not use key value stores, document stores, or relational databases?

Well, the answer is that it depends on the problem you are trying to solve.

Graph databases are great for modeling relationships between data.

A couple examples:

A social network app can model the relationships between users and posts
A game can model the relationships between players and items
A blog can model the relationships between posts and comments

The possibilities are endless.

Instead of storing data in a table for each collection we store the data as a graph in a nodes and edges table with some additional extensions in SQLite to make it easier.

Here is a page that goes in to detail about it and showcases what we are trying to build.

Getting Started

First we need to create a new Flutter project.

mkdir flutter_graph_database
cd flutter_graph_database
flutter create .

After the project is created open it in your favorite code editor.

code .

Creating the Database

We are going to use the drift package to create the database.

Update the pubspec.yaml file with the following:

name: flutter_graph_database
description: A new Flutter package project.
version: 0.0.1
publish_to: none

environment:
  sdk: ">=2.19.0-238.0.dev <3.0.0"
  flutter: ">=1.17.0"

dependencies:
  flutter:
    sdk: flutter
  drift: ^2.1.0
  sqlite3_flutter_libs: ^0.5.5
  http: ^0.13.5
  path_provider: ^2.0.0
  path: ^1.8.2
  sqlite3: ^1.7.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  build_runner: ^2.2.0
  drift_dev: ^2.1.0

flutter:

Database Connection

Next we need to create the database.

Create a new file at lib/database/connection/unsupported.dart and update it with the following:

import 'package:drift/drift.dart';
import 'package:drift/native.dart';

DatabaseConnection connect(
  String dbName, {
  bool useWebWorker = false,
  bool logStatements = false,
}) {
  return DatabaseConnection(NativeDatabase.memory(
    logStatements: logStatements,
  ));
}

Create a new file at lib/database/connection/native.dart and update it with the following:

import 'dart:io';
import 'dart:isolate';

import 'package:drift/drift.dart';
import 'package:drift/isolate.dart';
import 'package:drift/native.dart';
import 'package:path_provider/path_provider.dart';
import 'package:path/path.dart' as p;

DatabaseConnection connect(
  String dbName, {
  bool useWebWorker = false,
  bool logStatements = false,
}) {
  return DatabaseConnection.delayed(Future.sync(() async {
    final appDir = await getApplicationDocumentsDirectory();
    final dbPath = p.join(appDir.path, dbName);

    final receiveDriftIsolate = ReceivePort();
    await Isolate.spawn(_entrypointForDriftIsolate,
        _IsolateStartRequest(receiveDriftIsolate.sendPort, dbPath));

    final driftIsolate = await receiveDriftIsolate.first as DriftIsolate;
    return driftIsolate.connect();
  }));
}

class _IsolateStartRequest {
  final SendPort talkToMain;
  final String databasePath;

  _IsolateStartRequest(this.talkToMain, this.databasePath);
}

void _entrypointForDriftIsolate(_IsolateStartRequest request) {
  final databaseImpl = NativeDatabase(
    File(request.databasePath),
    logStatements: false,
  );

  final driftServer = DriftIsolate.inCurrent(
    () => DatabaseConnection(databaseImpl),
  );

  request.talkToMain.send(driftServer);
}

Create a new file at lib/database/connection/web.dart and update it with the following:

import 'dart:async';

// ignore: avoid_web_libraries_in_flutter
import 'dart:html';

import 'package:drift/drift.dart';
import 'package:drift/remote.dart';
import 'package:drift/web.dart';
import 'package:drift/wasm.dart';
import 'package:http/http.dart' as http;
import 'package:sqlite3/wasm.dart';

DatabaseConnection connect(
  String dbName, {
  bool useWebWorker = false,
  bool logStatements = false,
}) {
  if (useWebWorker) {
    final worker = SharedWorker('shared_worker.dart.js');
    return remote(worker.port!.channel());
  } else {
    return DatabaseConnection.delayed(Future.sync(() async {
      final response = await http.get(Uri.parse('sqlite3.wasm'));
      final fs = await IndexedDbFileSystem.open(dbName: '/db/');
      final path = '/drift/db/$dbName';
      final sqlite3 = await WasmSqlite3.load(
        response.bodyBytes,
        SqliteEnvironment(fileSystem: fs),
      );
      final databaseImpl = WasmDatabase(
        sqlite3: sqlite3,
        path: path,
        fileSystem: fs, // <- this is required but not documented
        logStatements: logStatements,
      );
      return DatabaseConnection(databaseImpl);
    }));
  }
}

Create a new file at lib/database/connection/connection.dart and update it with the following:

export 'unsupported.dart'
    if (dart.library.js) 'web.dart'
    if (dart.library.ffi) 'native.dart';

Database SQL Files

Schema

Create a new file at lib/database/sql/schema.drift and update it with the following:

CREATE TABLE IF NOT EXISTS nodes (
    body TEXT,
    id   TEXT GENERATED ALWAYS AS (json_extract(body, '$.id')) VIRTUAL NOT NULL UNIQUE
);

CREATE INDEX IF NOT EXISTS id_idx ON nodes(id);

CREATE TABLE IF NOT EXISTS edges (
    source     TEXT,
    target     TEXT,
    properties TEXT,
    UNIQUE(source, target, properties) ON CONFLICT REPLACE,
    FOREIGN KEY(source) REFERENCES nodes(id),
    FOREIGN KEY(target) REFERENCES nodes(id)
);

CREATE INDEX IF NOT EXISTS source_idx ON edges(source);
CREATE INDEX IF NOT EXISTS target_idx ON edges(target);

The ID column is a virtual column that is generated from the body column. This is done so that we can query the database by ID without having to parse the JSON body column.

Queries

Create a new file at lib/database/sql/queries.drift and update it with the following:

import 'schema.drift';

getAllNodes: 
    SELECT * FROM nodes;
getAllEdges: 
    SELECT * FROM edges;

Delete Edge

Create a new file at lib/database/sql/delete-edge.drift and update it with the following:

import 'schema.drift';

deleteEdge:
    DELETE FROM edges 
    WHERE source = ? OR target = ?;

Delete Node

Create a new file at lib/database/sql/delete-node.drift and update it with the following:

import 'schema.drift';

deleteNode: 
    DELETE FROM nodes 
    WHERE id = ?;

Insert Edge

Create a new file at lib/database/sql/insert-edge.drift and update it with the following:

import 'schema.drift';

insertEdge(:source as TEXT, :target as TEXT, :body as TEXT): 
    INSERT INTO edges VALUES(:source, :target, json(:body));

Search Edges Inbound

Create a new file at lib/database/sql/search-edges-inbound.drift and update it with the following:

import 'schema.drift';

searchEdgesInbound: 
    SELECT * FROM edges 
    WHERE source = ?;

Search Edges Outbound

Create a new file at lib/database/sql/search-edges-outbound.drift and update it with the following:

import 'schema.drift';

searchEdgesOutbound: 
    SELECT * FROM edges 
    WHERE target = ?;

Search Edges

Create a new file at lib/database/sql/search-edges.drift and update it with the following:

import 'schema.drift';

searchEdges: 
    SELECT * FROM edges WHERE source = ? 
    UNION 
    SELECT * FROM edges WHERE target = ?;

Search Node By ID

Create a new file at lib/database/sql/search-node-by-id.drift and update it with the following:

import 'schema.drift';

searchNodeById: 
    SELECT body FROM nodes 
    WHERE id = ?;

Search Node

Create a new file at lib/database/sql/search-node.drift and update it with the following:

import 'schema.drift';

-- Create a text index of entries, see https://www.sqlite.org/fts5.html#external_content_tables
CREATE VIRTUAL TABLE node_entries USING fts5 (
    body,
    content=nodes,
    content_rowid=id
);

-- Triggers to keep entries and fts5 index in sync.
CREATE TRIGGER nodes_insert AFTER INSERT ON nodes BEGIN
  INSERT INTO node_entries(rowid, body) VALUES (new.id, new.body);
END;

CREATE TRIGGER nodes_delete AFTER DELETE ON nodes BEGIN
  INSERT INTO node_entries(node_entries, rowid, body) VALUES ('delete', old.id, old.body);
END;

CREATE TRIGGER nodes_update AFTER UPDATE ON nodes BEGIN
  INSERT INTO node_entries(node_entries, rowid, body) VALUES ('delete', new.id, new.body);
  INSERT INTO node_entries(rowid, body) VALUES (new.id, new.body);
END;

-- Full text search query.
searchNode: SELECT r.** FROM node_entries
    INNER JOIN nodes r ON r.id = node_entries.rowid
    WHERE node_entries MATCH :query
    ORDER BY rank;

Here we are using the fts5 extension to create a full text search index. This is a very powerful feature that allows us to search for nodes by their body text.

Traverse Inbound

Create a new file at lib/database/sql/traverse-inbound.drift and update it with the following:

import 'schema.drift';

traverseInbound(:source AS TEXT): 
  WITH RECURSIVE traverse(id) AS (
  SELECT :source
  UNION
  SELECT source FROM edges JOIN traverse ON target = id
) SELECT id FROM traverse;

Traverse Outbound

Create a new file at lib/database/sql/traverse-outbound.drift and update it with the following:

import 'schema.drift';

traverseOutbound(:source AS TEXT): 
  WITH RECURSIVE traverse(id) AS (
  SELECT :source
  UNION
  SELECT target FROM edges JOIN traverse ON source = id
) SELECT id FROM traverse;

Traverse Bodies Inbound

Create a new file at lib/database/sql/traverse-with-bodies-inbound.drift and update it with the following:

import 'schema.drift';

traverseWithBodiesInbound(:source AS TEXT): 
  WITH RECURSIVE traverse(x, y, obj) AS (
  SELECT :source, '()', '{}'
  UNION
  SELECT id, '()', body FROM nodes JOIN traverse ON id = x
  UNION
  SELECT source, '<-', properties FROM edges JOIN traverse ON target = x
) SELECT x, y, obj FROM traverse;

Traverse Bodies Outbound

Create a new file at lib/database/sql/traverse-with-bodies-outbound.drift and update it with the following:

import 'schema.drift';

traverseWithBodiesOutbound(:source AS TEXT): 
  WITH RECURSIVE traverse(x, y, obj) AS (
  SELECT :source, '()', '{}'
  UNION
  SELECT id, '()', body FROM nodes JOIN traverse ON id = x
  UNION
  SELECT target, '->', properties FROM edges JOIN traverse ON source = x
) SELECT x, y, obj FROM traverse;

Traverse Bodies

Create a new file at lib/database/sql/traverse-bodies.drift and update it with the following:

import 'schema.drift';

traverseWithBodies(:source AS TEXT): 
  WITH RECURSIVE traverse(x, y, obj) AS (
  SELECT :source, '()', '{}'
  UNION
  SELECT id, '()', body FROM nodes JOIN traverse ON id = x
  UNION
  SELECT source, '<-', properties FROM edges JOIN traverse ON target = x
  UNION
  SELECT target, '->', properties FROM edges JOIN traverse ON source = x
) SELECT x, y, obj FROM traverse;

Traverse

Create a new file at lib/database/sql/traverse.drift and update it with the following:

import 'schema.drift';

traverse(:source AS TEXT): 
  WITH RECURSIVE traverse(id) AS (
  SELECT :source
  UNION
  SELECT source FROM edges JOIN traverse ON target = id
  UNION
  SELECT target FROM edges JOIN traverse ON source = id
) SELECT id FROM traverse;

Update Node

Create a new file at lib/database/sql/update-node.drift and update it with the following:

import 'schema.drift';

updateNode: 
    UPDATE nodes SET body = json(?) 
    WHERE id = ?;

Database Setup

Create a new file at lib/database/database.dart and update it with the following:

import 'dart:convert';

import 'package:drift/drift.dart';
import 'package:flutter/foundation.dart';

import 'connection/connection.dart' as impl;

part 'database.g.dart';

@DriftDatabase(include: {
  'sql/schema.drift',
  'sql/queries.drift',
  'sql/delete-edge.drift',
  'sql/delete-node.drift',
  'sql/insert-edge.drift',
  'sql/insert-node.drift',
  'sql/search-edges-inbound.drift',
  'sql/search-edges-outbound.drift',
  'sql/search-edges.drift',
  'sql/search-node-by-id.drift',
  'sql/search-node.drift',
  'sql/traverse-inbound.drift',
  'sql/traverse-outbound.drift',
  'sql/traverse-with-bodies-inbound.drift',
  'sql/traverse-with-bodies-outbound.drift',
  'sql/traverse-with-bodies.drift',
  'sql/traverse.drift',
  'sql/update-node.drift',
})
class GraphDatabase extends _$GraphDatabase {
  GraphDatabase({
    String dbName = 'graph_db.db',
    DatabaseConnection? connection,
    bool useWebWorker = false,
    bool logStatements = false,
  }) : super.connect(
          connection ??
              impl.connect(
                dbName,
                useWebWorker: useWebWorker,
                logStatements: logStatements,
              ),
        );

  @override
  int get schemaVersion => 1;

  /// Helper method to add graph data from json
  Future<void> addGraphData(
    Map<String, dynamic> data, {
    bool shouldBatch = false,
  }) {
    return transaction(() async {
      try {
        final localNodes = data['nodes'] as List<dynamic>;
        final localEdges = data['edges'] as List<dynamic>;
        // Update nodes
        for (final node in localNodes) {
          final id = node['id'] as String?;
          if (id != null) {
            final current = await searchNodeById(id).getSingleOrNull();
            final body = jsonEncode(node);
            if (current != null) {
              await updateNode(id, body);
            } else {
              await insertNode(body);
            }
          }
        }
        // Update edges
        for (final edge in localEdges) {
          final source = edge['from'] ?? edge['source'] as String?;
          final target = edge['to'] ?? edge['target'] as String?;
          if (source != null && target != null) {
            final body = jsonEncode(edge);
            await insertEdge(source, target, body);
          }
        }
      } catch (e) {
        debugPrint('Error adding graph data: $e');
      }
    });
  }

  Future<void> deleteAll() {
    return transaction(() async {
      try {
        await deleteAllEdges();
        await deleteAllNodes();
      } catch (e) {
        debugPrint('Error clearing graph data: $e');
      }
    });
  }

  Future<void> deleteAllEdges() {
    return transaction(() async {
      final edges = await getAllEdges().get();
      for (final edge in edges) {
        await deleteEdge(edge.source, edge.target);
      }
    });
  }

  Future<void> deleteAllNodes() {
    return transaction(() async {
      final nodes = await getAllNodes().get();
      for (final node in nodes) {
        await deleteNode(node.id);
      }
    });
  }
}

Create a new file at build.yaml and update it with the following:

targets:
  $default:
    sources:
      - lib/**
      - web/**
      - "tool/**"
      - pubspec.yaml
      - lib/$lib$
      - $package$
    builders:
      drift_dev:
        options:
          sql:
            dialect: sqlite
            options:
              version: "3.38"
              modules:
                - json1
                - fts5
          generate_connect_constructor: true
          apply_converters_on_variables: true
          generate_values_in_copy_with: true
          scoped_dart_components: true

Now run the following command to generate the database files:

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

Connecting to the Database

Add a new dependency to your pubspec.yaml file:

flutter pub add graphview

This will be used for the graph visualization.

Create a new file at lib/main.dart and update it with the following:

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_graph_database/flutter_graph_database.dart' as db;
import 'package:graphview/GraphView.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Graph Database',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: const Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final database = db.GraphDatabase();
  Graph graph = Graph();
  Algorithm builder = FruchtermanReingoldAlgorithm();

  final nodes = <String, db.Node>{};
  bool loaded = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) => loadData());
  }

  @override
  void reassemble() {
    super.reassemble();
    // Needed to reset graph on hot reload
    loadData();
  }

  void setLoadedState(bool value) {
    if (mounted) {
      setState(() {
        loaded = value;
      });
    }
  }

  Future<void> addDummyData() async {
    // Load example data
    try {
      // Optionally reset data
      await database.deleteAll();
      // Add example data to database
      await database.addGraphData({
        "nodes": [
          {"id": '1', "label": 'circle'},
          {"id": '2', "label": 'ellipse'},
          {"id": '3', "label": 'database'},
          {"id": '4', "label": 'box'},
          {"id": '5', "label": 'diamond'},
          {"id": '6', "label": 'dot'},
          {"id": '7', "label": 'square'},
          {"id": '8', "label": 'triangle'},
          {"id": '9', "label": "star"},
        ],
        "edges": [
          {"from": '1', "to": '2'},
          {"from": '2', "to": '3'},
          {"from": '2', "to": '4'},
          {"from": '2', "to": '5'},
          {"from": '5', "to": '6'},
          {"from": '5', "to": '7'},
          {"from": '6', "to": '8'},
          {"from": '2', "to": '8'},
          {"from": '1', "to": '8'},
          {"from": '1', "to": '7'},
          {"from": '1', "to": '6'},
          {"from": '1', "to": '5'},
          {"from": '1', "to": '4'},
          {"from": '1', "to": '3'},
          {"from": '1', "to": '9'},
          {"from": '9', "to": '8'},
          {"from": '9', "to": '5'},
          {"from": '9', "to": '3'},
        ]
      });
      loadData();
    } catch (e) {
      debugPrint('Error loading example data: $e');
    }
  }

  Future<void> loadData() async {
    setLoadedState(false);

    final nodeMap = <String, Node>{};
    this.nodes.clear();
    graph = Graph();
    builder = FruchtermanReingoldAlgorithm();

    // Load graph data
    final nodes = await database.getAllNodes().get();
    final edges = await database.getAllEdges().get();

    for (final node in nodes) {
      final newNode = Node.Id(node.id);
      nodeMap[node.id] = newNode;
      this.nodes[node.id] = node;
      graph.addNode(newNode);
    }
    for (final edge in edges) {
      final source = nodeMap[edge.source];
      final target = nodeMap[edge.target];
      if (source != null && target != null) {
        graph.addEdge(source, target);
      }
    }

    setLoadedState(true);
  }

  Widget buildNode(Node node) {
    final dbNode = nodes[node.key!.value];
    final data = jsonDecode(dbNode?.body ?? '{}') as Map<String, dynamic>;
    final label = data['label'] ?? '';
    return SizedBox(
      width: 80,
      height: 80,
      child: Center(
        child: Text(
          label,
          textAlign: TextAlign.center,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Graph Database'),
        actions: [
          IconButton(
            icon: const Icon(Icons.restore),
            onPressed: addDummyData,
          ),
        ],
      ),
      body: !loaded
          ? const Center(child: CircularProgressIndicator())
          : nodes.isEmpty
              ? const Center(child: Text('No Data Loaded'))
              : LayoutBuilder(builder: (context, dimens) {
                  return SizedBox.expand(
                    child: InteractiveViewer(
                      constrained: false,
                      boundaryMargin: EdgeInsets.symmetric(
                        horizontal: dimens.maxWidth * 0.75,
                        vertical: dimens.maxHeight * 0.75,
                      ),
                      minScale: 0.01,
                      maxScale: 5.6,
                      child: GraphView(
                        key: UniqueKey(),
                        graph: graph,
                        algorithm: builder,
                        paint: Paint()
                          ..color = Colors.green
                          ..strokeWidth = 1
                          ..style = PaintingStyle.stroke,
                        builder: buildNode,
                      ),
                    ),
                  );
                }),
    );
  }
}

When you run the flutter app you should see the following:

Conclusion

If you want to learn more about building a graph database in Flutter, check out the source code.

Lit and Flutter

Mon, 20 Jan 2025 02:22:00 GMT

Lit and Flutter

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: {
      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!

Host your Flutter Project as a REST API

Mon, 20 Jan 2025 00:30:40 GMT

Host your Flutter Project as a REST API

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 solution is 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_dart
description: A new Flutter project.
publish_to: none
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  shelf: ^0.7.3
  cupertino_icons: ^0.1.2
  http: ^0.12.0+2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  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!

Multi-touch Canvas with Flutter

Mon, 20 Jan 2025 03:07:56 GMT

Multi-touch Canvas with Flutter

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.

TLDR The final source here and an online demo.

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_touch
cd flutter_multi_touch
flutter 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 it
class 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 it
class 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 it
class 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 it
class 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 it
class 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 build a native cross platform project with Flutter

Mon, 20 Jan 2025 00:56:31 GMT

How to build a native cross platform project with Flutter

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

TLDR The final source 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:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  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.
      _counter++;
    });
  }

  @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 MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      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(
              '$_counter',
              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.
    );
  }
}

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.

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_x
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

cupertino_icons: ^0.1.2
  universal_html: ^1.1.0
  url_launcher: ^5.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

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!

Flutter + Fastlane (One Click Beta)

Mon, 20 Jan 2025 00:07:34 GMT

Flutter + Fastlane (One Click Beta)

1. Install Flutter

Download Flutter

2. Create new Flutter Project

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

3. Create App in iTunes Connect

If you are not familiar with iTunes Connect, check out this article for getting started and setting up your first app for the App Store.

4. Create App in Google Play

Setting up an app in the Google Play Console can be tricky, make sure to check out the official reference and this guide if you are having trouble.

5. Navigate to Project > ios and Setup Fastlane

Reference

6. Navigate to Project > android and Setup Fastlane

Reference

7. Update Fastlane Fastfiles for iOS and Android and Change accordingly for each platform

Make sure to change "YOUR PROJECT PATH" to the path to your project in Finder.
Only copy the correct platform code for each Fastfile. For example, default_platform(:ios) for iOS and `default_platform(:android)1st for Android.

update_fastlane

default_platform(:ios)

platform :ios do
  desc "Push a new beta build to TestFlight"
  lane :beta do
    increment_build_number(xcodeproj: "Runner.xcodeproj")
    build_app(workspace: "Runner.xcworkspace", scheme: "Runner")
    upload_to_testflight(skip_waiting_for_build_processing: true)
  end
  desc "Push a new release build to the App Store"
  lane :release do  
    increment_build_number(xcodeproj: "Runner.xcodeproj")
    build_app(workspace: "Runner.xcworkspace", scheme: "Runner")
    upload_to_app_store(submit_for_review: true,
                            automatic_release: true,
                            skip_screenshots: true,
                            force: true,
                            skip_waiting_for_build_processing: true)
  end
end


  
//YOUR PROJECT PATH > android > fastlane > Fastfile
default_platform(:android)

platform :android do
  desc "Runs all the tests"
  lane :test do
    gradle(task: "test")
  end

  desc "Submit a new Build to Beta"
  lane :beta do
    gradle(task: 'clean')
    increment_version_code
    sh "cd YOUR PROJECT PATH && flutter build apk"
    upload_to_play_store(
      track: 'beta',
      apk: '../build/app/outputs/apk/release/app-release.apk',
      skip_upload_screenshots: true,
      skip_upload_images: true
    )
    # crashlytics
  end

  desc "Deploy a new version to the Google Play"
  lane :deploy do
    gradle(task: 'clean')
    increment_version_code
    sh "cd YOUR PROJECT PATH && flutter build apk"
    upload_to_play_store(
      track: 'production',
      apk: '../build/app/outputs/apk/release/app-release.apk',
      skip_upload_screenshots: true,
      skip_upload_images: true
    )
  end
end

For Android increment_version_code install here.

Sometimes it will fail and you will need to run:

bundle exec fastlane add_plugin increment_version_code

For iOS increment_build_number set up Generic Versioning by enabling the agvtool.

Source

8. Metadata (Optional)

For iOS you can have Fastlane download all your apps existing metadata including screenshots from iTunes Connect. In terminal navigate to the project and run.

fastlane deliver download_metadata && fastlane deliver download_screenshots

For Android you can use Fastlane Supply.

9. Open Automator

Right now everything is working just by the command line. If you navigate to your project in terminal by adding "cd " and dragging in the project folder and hitting Enter, you can type "cd ios && fastlane beta" or "cd android && fastlane beta" and both will run fastlane.

If you want to be able to submit your app to Google Play and the App Store with one click we will be using Automator. Create a new Automator Application. And Search for "Ask for Confirmation" and "Run AppleScript" and drag in.

Here is the Script for beta and release. You will need to create a Automator Application for both Beta and Release for each app you want automated. Save it where ever you want and create an Alias to be but on the Desktop.

Make sure to change YOUR PROJECT PATH to the path to your project in Finder

Hint: I have my automator application save in the Github Repo of my project for versioning and easy access for different projects.

//Beta
on run {input, parameters}
	tell application "Terminal"
		activate
		do script "cd YOUR PROJECT PATH/android && fastlane beta && cd YOUR PROJECT PATH/ios && fastlane beta"
	end tell
	tell application "System Events"
		try
			set visible of application process "Terminal" to false
		end try
	end tell
end run

//Release
on run {input, parameters}
	tell application "Terminal"
		activate
		do script "cd YOUR PROJECT PATH/android && fastlane deploy && cd YOUR PROJECT PATH/ios && fastlane release"
	end tell
	tell application "System Events"
		try
			set visible of application process "Terminal" to false
		end try
	end tell
end run

10. Try It Out!

Everything should be working now. If you double click on the automator application you should get a confirmation pop up to release the app. The Script will run terminal in the background and you can stay focused on developing awesome flutter applications. If you want to see the progress on fastlane uploading your apps you can click on the terminal icon and the terminal window will reappear. Thanks for reading and please reach out for any questions you have!

Signals and Flutter Hooks

Fri, 31 Jan 2025 12:00:00 GMT

Signals and Flutter Hooks

When working with data in Flutter, on of the first things you are exposed to is setState.

setState

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: Counter()));
}

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  void increment() {
    if (mounted) {
      setState(() {
        count++;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('Count: $count')),
      floatingActionButton: FloatingActionButton(
        onPressed: increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

This simply marks the widget as dirty every time you call setState but requires you (as the developer) to be mindful and explict about when those updates happen. If you forget to call setState when mutating data the widget tree can become stale.

ValueNotifier

We can impove this by using ValueNotifier instead of storing the value directly. This gives us the ability to read and write a value in a container and use helper widgets like ValueListenableBuilder to update sub parts of the widget tree on value changes.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: Counter()));
}

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  final count = ValueNotifier(0);

  void increment() {
    count.value++;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: ValueListenableBuilder(
        valueListenable: count,
        builder: (context, value, child) {
          return Text('Count: $value');
        }
      )),
      floatingActionButton: FloatingActionButton(
        onPressed: increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

FlutterSignal

Using the signals package we can upgrade ValueNotifier to a signal backed implmentation which uses a reactive graph based on a push / pull architecture.

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: Counter()));
}

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  final count = signal(0);

  void increment() {
    count.value++;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: ValueListenableBuilder(
          valueListenable: count,
          builder: (context, value, child) {
            return Text('Count: $value');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Signals created after 6.0.0 also implement ValueNotifier so you can easily migrate them without changing any other code.

Instead of ValueListenableBuilder we can use the Watch widget or .watch(context) extension.

import 'package:flutter/material.dart';
import 'package:signals/signals_flutter.dart';

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: Counter()));
}

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  final count = signal(0);

  void increment() {
    count.value++;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: Text('Count: ${count.watch(context)}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

flutter_hooks

Using Flutter Hooks we can reduce boilerplate of StatefulWidget by switching to a HookWidget. With useState we can define the state directly in the build method and easily share them across widgets.

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

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: Counter()));
}

class Counter extends HookWidget {
  const Counter({super.key});

  @override
  Widget build(BuildContext context) {
    final count = useState(0);
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('Count: ${count.value}')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        child: const Icon(Icons.add),
      ),
    );
  }
}

useState returns a ValueNotifier that automatically rebuilds the widget on changes

signals_hooks

Using a new package signals_hooks we can now define signals in HookWidgets and have the benifits of a reactive graph with shareable lifecycles between widgets.

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:signals_hooks/signals_hooks.dart';

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: Counter()));
}

class Counter extends HookWidget {
  const Counter({super.key});

  @override
  Widget build(BuildContext context) {
    final count = useSignal(0);
    final countStr = useComputed(() => count.value.toString());
    useSignalEffect(() {
      print('count: $count');
    });
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('Count: $countStr')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => count.value++,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Server Side Rendering Flutter Apps with RFW

Mon, 20 Jan 2025 02:59:01 GMT

Server Side Rendering Flutter Apps with RFW

This post will guide you how to build a Flutter app that takes advantage of Server Side Rendering (SSR) and being able to update UI dynamically.

If you are new to flutter you can follow this post on getting started

This technique will use the rfw package on the server and client to send binary data via HTTP requests.

TLDR You can find the final source here.

Getting started

Create a new directory called flutter_ssr and navigate to it in terminal or open it up in your favorite IDE.

Approaches to updates

If you are in the mobile world then you know how challenging it can be to get all your users on the latest version. Even just having an API or database schema can be very hard to update because of users on older versions (sometimes due to OS limitations).

Code Push

Shorebird takes an interesting approach to delivering updates to the users via Code Push and will update the apps live. This does have an advantage since it will update the UI and logic but what if the content update was only intended for a specific user or set of users?

Latest version supported

Another approach is to simply have an SLO/Policy that you only support X number of recent releases and that the app will not work on older versions.

For something like this on mobile you would use upgrader via AppCast or in_app_update to use Google Play APIs to update the app in the background or prevent using until updated.

This has an advantage to know that users will be on the latest or no be supported and allow you to target newer APIs and roll updates easier. This does mean that users will be frustrated by updates more and that older devices may not be supported.

Server driven updates

Not all apps need to render data on the server and sometimes when building an offline first application you want to do everything local first, but this is for when you need to build a server first application. Here are some examples and use cases:

Bank accounts
Airline / Hotel / Car booking
Chat applications (Instant messaging)
Marketing and AB testing
Database first applications

Each of these examples does not mean they are server only and in many cases you want to still cache the data locally to still offer a great offline experience.

With Flutter you are building a runtime that you are shipping to the user as a Single Page Application (SPA) on the web and a mobile/desktop app on the stores. This means you need to ship all the logic and UI for every update.

This has an advantage for doing more logic on the server and potentially really heavy requests are done server side and just the rendered UI is sent to the client. The client can still cache the response and allow for offline viewing too. These disadvantage here is that the client is expected to communicate with the server at some point and may not be suitable for offline only applications.

Remote Flutter Widgets (RFW)

The Flutter team has a package for creating widgets on the client and server and sending data necessary to connect them. This package is called rfw.

While it is possible to ship logic in addition to UI as WASM that is out of scope for this post

The rfw package uses a text format that can be compiled to binary and be used to represent state and dispatch events.

import core;
import material;

widget MaterialShop = Scaffold(
  appBar: AppBar(
    title: Text(text: ['Products']),
  ),
  body: ListView(
    children: [
      ...for product in data.server.games:
        Product(product: product)
    ],
  ),
);

widget Product = ListTile(
  title: Text(text: args.product.name),
  onTap: event 'shop.productSelect' { name: args.product.name, path: args.product.link },
);

Multiple widgets can be defined and it may even look similar to the Dart API you are used to in Flutter but it is not quite the same.

There are not logic branching blocks or conditional rendering but rather is a stateless format capable of updating every frame if needed.

Take the following Flutter counter app that is generated when you create a new project:

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

We could represent that in rfw like this:

import widgets;
import material;

widget root = Scaffold(
  appBar: AppBar(
    title: Text(text: ['Counter Example']),
    centerTitle: true,
    backgroundColor: data.colorScheme.inversePrimary,
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: "center",
      children: [
        Text(text: ["You have pushed the button this many times:"]),
        Text(
          text: [data.counter.value],
          style: {
            fontSize: 20.0,
          },
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
     onPressed: event "click" {},
     tooltip: ["Increment"],
     child: Icon(
        icon: 0xe047,
        fontFamily: 'MaterialIcons',
     ),
  ),
);

You may have noticed some arrays for strings and different ways of defining widgets. That is by design and the API will not be 100% with the Flutter SDK, but with the limitation comes different tradeoffs.

You can define any custom widgets in your application and only uses the UI you have defined in your design system and the server will only be able to generate UI that you expect.

It is also possible to create all the UI in the text format with rows, columns, containers and more.

Setting up the server

For this example we will be using dart_frog to create the server application.

In the directory that you created earlier run the following commands:

dart_frog create server
flutter pub add rfw

This will generate the server boilerplate for us and add the correct dependencies.

Feel free to delete the test directory for now or update it later to check for the correct response.

Navigate to /server/routes/index.dart and update the file with the following:

import 'package:dart_frog/dart_frog.dart';
import 'package:rfw/formats.dart';

Response onRequest(RequestContext context) {
  var count = context.request.headers['COUNTER_VALUE'] ?? '0';

  if (context.request.method == HttpMethod.post) {
    count = (int.parse(count) + 1).toString();
  }

  return Response.bytes(
    body: encodeLibraryBlob(parseLibraryFile(template)),
    headers: {'COUNTER_VALUE': count},
  );
}

const template = '''
import widgets;
import material;

widget root = Scaffold(
  appBar: AppBar(
    title: Text(text: ['Counter Example']),
    centerTitle: true,
    backgroundColor: data.colorScheme.inversePrimary,
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: "center",
      children: [
        Text(text: ["You have pushed the button this many times:"]),
        Text(
          text: [data.counter.value],
          style: {
            fontSize: 20.0,
          },
        ),
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
     onPressed: event "click" {},
     tooltip: ["Increment"],
     child: Icon(
        icon: 0xe047,
        fontFamily: 'MaterialIcons',
     ),
  ),
);
''';

This takes the rfw text format we defined earlier and adds it to a string template.

Using that template we can call encodeLibraryBlob(parseLibraryFile(template)) to create a binary representation of the text format.

We are also checking for the COUNTER_VALUE from the header to send state to/from the client. Since servers are stateless or easier to scale when they are this will help with not needing a type of session storage or context.

If you navigate inside the server directly you can start the dev server that will be needed for the next step:

dart_frog dev

You should see the following:

✓ Running on http://localhost:8080

Setting up the client

In a new terminal tab you can navigate to the root of the directory and run the following commands:

flutter create app
flutter pub add rfw http

This will generate the counter app boilerplate and add the correct dependencies for us.

The rfw package comes with core and material widgets but for this example we will be adding them manually to show how they are being called and created.

Create and update the following file located att app/lib/rfw/decoders.dart:

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

class CustomArgumentDecoders {
  static ButtonStyle? outlinedButtonStyle(
    DataSource source,
    List<Object> key,
    BuildContext context,
  ) {
    if (!source.isMap(key)) {
      return null;
    }
    return OutlinedButton.styleFrom(
      foregroundColor: ArgumentDecoders.color(source, ['foregroundColor']),
      backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
      disabledForegroundColor:
          ArgumentDecoders.color(source, [...key, 'disabledForegroundColor']),
      disabledBackgroundColor:
          ArgumentDecoders.color(source, [...key, 'disabledBackgroundColor']),
      shadowColor: ArgumentDecoders.color(source, [...key, 'shadowColor']),
      surfaceTintColor:
          ArgumentDecoders.color(source, [...key, 'surfaceTintColor']),
      elevation: source.v<double>(['elevation']),
      textStyle: ArgumentDecoders.textStyle(source, [...key, 'textStyle']),
      padding: ArgumentDecoders.edgeInsets(source, [...key, 'padding']),
      minimumSize: CustomArgumentDecoders.size(source, [...key, 'minimumSize']),
      fixedSize: CustomArgumentDecoders.size(source, [...key, 'fixedSize']),
      maximumSize: CustomArgumentDecoders.size(source, [...key, 'maximumSize']),
      side: ArgumentDecoders.borderSide(source, [...key, 'side']),
      shape: CustomArgumentDecoders.outlinedBorder(source, [...key, 'shape']),
      enabledMouseCursor: CustomArgumentDecoders.mouseCursor(
          source, [...key, 'enabledMouseCursor']),
      disabledMouseCursor: CustomArgumentDecoders.mouseCursor(
          source, [...key, 'disabledMouseCursor']),
      visualDensity:
          ArgumentDecoders.visualDensity(source, [...key, 'visualDensity']),
      tapTargetSize: ArgumentDecoders.enumValue<MaterialTapTargetSize>(
              MaterialTapTargetSize.values,
              source,
              [...key, 'tapTargetSize']) ??
          MaterialTapTargetSize.shrinkWrap,
      animationDuration: ArgumentDecoders.duration(
          source, [...key, 'animationDuration'], context),
      enableFeedback: source.v<bool>([...key, 'enableFeedback']),
      alignment: ArgumentDecoders.alignment(source, [...key, 'alignment']),
    );
  }

  static ButtonStyle? filledButtonStyle(
    DataSource source,
    List<Object> key,
    BuildContext context,
  ) {
    if (!source.isMap(key)) {
      return null;
    }
    return FilledButton.styleFrom(
      foregroundColor: ArgumentDecoders.color(source, ['foregroundColor']),
      backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
      disabledForegroundColor:
          ArgumentDecoders.color(source, [...key, 'disabledForegroundColor']),
      disabledBackgroundColor:
          ArgumentDecoders.color(source, [...key, 'disabledBackgroundColor']),
      shadowColor: ArgumentDecoders.color(source, [...key, 'shadowColor']),
      surfaceTintColor:
          ArgumentDecoders.color(source, [...key, 'surfaceTintColor']),
      elevation: source.v<double>(['elevation']),
      textStyle: ArgumentDecoders.textStyle(source, [...key, 'textStyle']),
      padding: ArgumentDecoders.edgeInsets(source, [...key, 'padding']),
      minimumSize: CustomArgumentDecoders.size(source, [...key, 'minimumSize']),
      fixedSize: CustomArgumentDecoders.size(source, [...key, 'fixedSize']),
      maximumSize: CustomArgumentDecoders.size(source, [...key, 'maximumSize']),
      side: ArgumentDecoders.borderSide(source, [...key, 'side']),
      shape: CustomArgumentDecoders.outlinedBorder(source, [...key, 'shape']),
      enabledMouseCursor: CustomArgumentDecoders.mouseCursor(
          source, [...key, 'enabledMouseCursor']),
      disabledMouseCursor: CustomArgumentDecoders.mouseCursor(
          source, [...key, 'disabledMouseCursor']),
      visualDensity:
          ArgumentDecoders.visualDensity(source, [...key, 'visualDensity']),
      tapTargetSize: ArgumentDecoders.enumValue<MaterialTapTargetSize>(
              MaterialTapTargetSize.values,
              source,
              [...key, 'tapTargetSize']) ??
          MaterialTapTargetSize.shrinkWrap,
      animationDuration: ArgumentDecoders.duration(
          source, [...key, 'animationDuration'], context),
      enableFeedback: source.v<bool>([...key, 'enableFeedback']),
      alignment: ArgumentDecoders.alignment(source, [...key, 'alignment']),
    );
  }

  static ButtonStyle? textButtonStyle(
    DataSource source,
    List<Object> key,
    BuildContext context,
  ) {
    if (!source.isMap(key)) {
      return null;
    }
    return TextButton.styleFrom(
      foregroundColor: ArgumentDecoders.color(source, ['foregroundColor']),
      backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
      disabledForegroundColor:
          ArgumentDecoders.color(source, [...key, 'disabledForegroundColor']),
      disabledBackgroundColor:
          ArgumentDecoders.color(source, [...key, 'disabledBackgroundColor']),
      shadowColor: ArgumentDecoders.color(source, [...key, 'shadowColor']),
      surfaceTintColor:
          ArgumentDecoders.color(source, [...key, 'surfaceTintColor']),
      elevation: source.v<double>(['elevation']),
      textStyle: ArgumentDecoders.textStyle(source, [...key, 'textStyle']),
      padding: ArgumentDecoders.edgeInsets(source, [...key, 'padding']),
      minimumSize: CustomArgumentDecoders.size(source, [...key, 'minimumSize']),
      fixedSize: CustomArgumentDecoders.size(source, [...key, 'fixedSize']),
      maximumSize: CustomArgumentDecoders.size(source, [...key, 'maximumSize']),
      side: ArgumentDecoders.borderSide(source, [...key, 'side']),
      shape: CustomArgumentDecoders.outlinedBorder(source, [...key, 'shape']),
      enabledMouseCursor: CustomArgumentDecoders.mouseCursor(
          source, [...key, 'enabledMouseCursor']),
      disabledMouseCursor: CustomArgumentDecoders.mouseCursor(
          source, [...key, 'disabledMouseCursor']),
      visualDensity:
          ArgumentDecoders.visualDensity(source, [...key, 'visualDensity']),
      tapTargetSize: ArgumentDecoders.enumValue<MaterialTapTargetSize>(
              MaterialTapTargetSize.values,
              source,
              [...key, 'tapTargetSize']) ??
          MaterialTapTargetSize.shrinkWrap,
      animationDuration: ArgumentDecoders.duration(
          source, [...key, 'animationDuration'], context),
      enableFeedback: source.v<bool>([...key, 'enableFeedback']),
      alignment: ArgumentDecoders.alignment(source, [...key, 'alignment']),
    );
  }

  static EdgeInsets? edgeInsets(DataSource source, List<Object> key) {
    if (!source.isMap(key)) {
      return null;
    }
    final all = source.v<double>([...key, 'all']);
    if (all != null) return EdgeInsets.all(all);
    final vertical = source.v<double>([...key, 'vertical']);
    final horizontal = source.v<double>([...key, 'horizontal']);
    if (vertical != null || horizontal != null) {
      return EdgeInsets.symmetric(
        vertical: vertical ?? 0,
        horizontal: horizontal ?? 0,
      );
    }
    final top = source.v<double>([...key, 'top']);
    final bottom = source.v<double>([...key, 'bottom']);
    final left = source.v<double>([...key, 'left']);
    final right = source.v<double>([...key, 'right']);
    return EdgeInsets.only(
      top: top ?? 0,
      bottom: bottom ?? 0,
      left: left ?? 0,
      right: right ?? 0,
    );
  }

  static Size? size(DataSource source, List<Object> key) {
    if (!source.isMap(key)) {
      return null;
    }
    return Size(
      source.v<double>([...key, 'width']) ?? 0.0,
      source.v<double>([...key, 'height']) ?? 0.0,
    );
  }

  static MouseCursor? mouseCursor(DataSource source, List<Object> key) {
    if (!source.isMap(key)) {
      return null;
    }
    final type = source.v<String>([...key, 'type']);
    final value = source.v<String>([...key, 'value']);
    if (type == 'system') {
      switch (value) {
        case 'alias':
          return SystemMouseCursors.alias;
        case 'none':
          return SystemMouseCursors.none;
        case 'basic':
          return SystemMouseCursors.basic;
        case 'click':
          return SystemMouseCursors.click;
        case 'forbidden':
          return SystemMouseCursors.forbidden;
        case 'wait':
          return SystemMouseCursors.wait;
        case 'progress':
          return SystemMouseCursors.progress;
        case 'contextMenu':
          return SystemMouseCursors.contextMenu;
        case 'help':
          return SystemMouseCursors.help;
        case 'text':
          return SystemMouseCursors.text;
        case 'verticalText':
          return SystemMouseCursors.verticalText;
        case 'cell':
          return SystemMouseCursors.cell;
        case 'precise':
          return SystemMouseCursors.precise;
        case 'move':
          return SystemMouseCursors.move;
        case 'grab':
          return SystemMouseCursors.grab;
        case 'grabbing':
          return SystemMouseCursors.grabbing;
        case 'noDrop':
          return SystemMouseCursors.noDrop;
        case 'alias':
          return SystemMouseCursors.alias;
        case 'copy':
          return SystemMouseCursors.copy;
        case 'disappearing':
          return SystemMouseCursors.disappearing;
        case 'allScroll':
          return SystemMouseCursors.allScroll;
        case 'resizeLeftRight':
          return SystemMouseCursors.resizeLeftRight;
        case 'resizeUpDown':
          return SystemMouseCursors.resizeUpDown;
        case 'resizeUpLeftDownRight':
          return SystemMouseCursors.resizeUpLeftDownRight;
        case 'resizeUpRightDownLeft':
          return SystemMouseCursors.resizeUpRightDownLeft;
        case 'resizeUp':
          return SystemMouseCursors.resizeUp;
        case 'resizeDown':
          return SystemMouseCursors.resizeDown;
        case 'resizeLeft':
          return SystemMouseCursors.resizeLeft;
        case 'resizeRight':
          return SystemMouseCursors.resizeRight;
        case 'resizeUpLeft':
          return SystemMouseCursors.resizeUpLeft;
        case 'resizeUpRight':
          return SystemMouseCursors.resizeUpRight;
        case 'resizeDownLeft':
          return SystemMouseCursors.resizeDownLeft;
        case 'resizeDownRight':
          return SystemMouseCursors.resizeDownRight;
        case 'resizeColumn':
          return SystemMouseCursors.resizeColumn;
        case 'resizeRow':
          return SystemMouseCursors.resizeRow;
        case 'zoomIn':
          return SystemMouseCursors.zoomIn;
        case 'zoomOut':
          return SystemMouseCursors.zoomOut;
        default:
      }
    }
    return null;
  }

  static LinearBorderEdge? linearBorderEdge(
      DataSource source, List<Object> key) {
    if (!source.isMap(key)) {
      return null;
    }
    return LinearBorderEdge(
      size: source.v<double>([...key, 'size']) ?? 1.0,
      alignment: source.v<double>([...key, 'alignment']) ?? 0.0,
    );
  }

  static OutlinedBorder? outlinedBorder(DataSource source, List<Object> key) {
    if (!source.isMap(key)) {
      return null;
    }
    final type = source.v<String>([...key, 'type']);
    switch (type) {
      case "RoundedRectangleBorder":
        return RoundedRectangleBorder(
          side: ArgumentDecoders.borderSide(source, [...key, 'side']) ??
              BorderSide.none,
          borderRadius:
              ArgumentDecoders.borderRadius(source, [...key, 'borderRadius']) ??
                  BorderRadius.zero,
        );
      case "BeveledRectangleBorder":
        return BeveledRectangleBorder(
          side: ArgumentDecoders.borderSide(source, [...key, 'side']) ??
              BorderSide.none,
          borderRadius:
              ArgumentDecoders.borderRadius(source, [...key, 'borderRadius']) ??
                  BorderRadius.zero,
        );
      case "ContinuousRectangleBorder":
        return ContinuousRectangleBorder(
          side: ArgumentDecoders.borderSide(source, [...key, 'side']) ??
              BorderSide.none,
          borderRadius:
              ArgumentDecoders.borderRadius(source, [...key, 'borderRadius']) ??
                  BorderRadius.zero,
        );
      case "CircleBorder":
        return CircleBorder(
          side: ArgumentDecoders.borderSide(source, [...key, 'side']) ??
              BorderSide.none,
          eccentricity: source.v<double>([...key, 'eccentricity']) ?? 0.0,
        );
      case "LinearBorder":
        return LinearBorder(
          side: ArgumentDecoders.borderSide(source, [...key, 'side']) ??
              BorderSide.none,
          start: CustomArgumentDecoders.linearBorderEdge(
              source, [...key, 'start']),
          end: CustomArgumentDecoders.linearBorderEdge(source, [...key, 'end']),
          top: CustomArgumentDecoders.linearBorderEdge(source, [...key, 'top']),
          bottom: CustomArgumentDecoders.linearBorderEdge(
              source, [...key, 'bottom']),
        );
      case "OvalBorder":
        return OvalBorder(
          side: ArgumentDecoders.borderSide(source, [...key, 'side']) ??
              BorderSide.none,
          eccentricity: source.v<double>([...key, 'eccentricity']) ?? 0.0,
        );
      case "StadiumBorder":
        return StadiumBorder(
          side: ArgumentDecoders.borderSide(source, [...key, 'side']) ??
              BorderSide.none,
        );
      case "StarBorder":
        return StarBorder(
          side: ArgumentDecoders.borderSide(source, [...key, 'side']) ??
              BorderSide.none,
          points: source.v<double>([...key, 'points']) ?? 5.0,
          innerRadiusRatio:
              source.v<double>([...key, 'innerRadiusRatio']) ?? 0.4,
          pointRounding: source.v<double>([...key, 'pointRounding']) ?? 0.0,
          valleyRounding: source.v<double>([...key, 'valleyRounding']) ?? 0.0,
          rotation: source.v<double>([...key, 'rotation']) ?? 0.0,
          squash: source.v<double>([...key, 'squash']) ?? 0.0,
        );
      default:
        break;
    }
    return null;
  }
}

This creates the custom decoders needed for the widgets we are about to define.

Defining the core library

Create and update the following file located at app/lib/rfw/core.dart:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:rfw/rfw.dart';

LocalWidgetLibrary createCoreWidgets() =>
    LocalWidgetLibrary(_coreWidgetsDefinitions);

Map<String, LocalWidgetBuilder> get _coreWidgetsDefinitions =>
    <String, LocalWidgetBuilder>{
      'AnimationDefaults': (BuildContext context, DataSource source) {
        return AnimationDefaults(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          child: source.child(['child']),
        );
      },
      'Align': (BuildContext context, DataSource source) {
        return AnimatedAlign(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          alignment: ArgumentDecoders.alignment(source, ['alignment']) ??
              Alignment.center,
          widthFactor: source.v<double>(['widthFactor']),
          heightFactor: source.v<double>(['heightFactor']),
          onEnd: source.voidHandler(['onEnd']),
          child: source.optionalChild(['child']),
        );
      },
      'AspectRatio': (BuildContext context, DataSource source) {
        return AspectRatio(
          aspectRatio: source.v<double>(['aspectRatio']) ?? 1.0,
          child: source.optionalChild(['child']),
        );
      },
      'Center': (BuildContext context, DataSource source) {
        return Center(
          widthFactor: source.v<double>(['widthFactor']),
          heightFactor: source.v<double>(['heightFactor']),
          child: source.optionalChild(['child']),
        );
      },
      'ColoredBox': (BuildContext context, DataSource source) {
        return ColoredBox(
          color: ArgumentDecoders.color(source, ['color']) ??
              const Color(0xFF000000),
          child: source.optionalChild(['child']),
        );
      },
      'Column': (BuildContext context, DataSource source) {
        return Column(
          mainAxisAlignment: ArgumentDecoders.enumValue<MainAxisAlignment>(
                  MainAxisAlignment.values, source, ['mainAxisAlignment']) ??
              MainAxisAlignment.start,
          mainAxisSize: ArgumentDecoders.enumValue<MainAxisSize>(
                  MainAxisSize.values, source, ['mainAxisSize']) ??
              MainAxisSize.max,
          crossAxisAlignment: ArgumentDecoders.enumValue<CrossAxisAlignment>(
                  CrossAxisAlignment.values, source, ['crossAxisAlignment']) ??
              CrossAxisAlignment.center,
          textDirection: ArgumentDecoders.enumValue<TextDirection>(
              TextDirection.values, source, ['textDirection']),
          verticalDirection: ArgumentDecoders.enumValue<VerticalDirection>(
                  VerticalDirection.values, source, ['verticalDirection']) ??
              VerticalDirection.down,
          textBaseline: ArgumentDecoders.enumValue<TextBaseline>(
              TextBaseline.values, source, ['textBaseline']),
          children: source.childList(['children']),
        );
      },
      'Container': (BuildContext context, DataSource source) {
        return AnimatedContainer(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          alignment: ArgumentDecoders.alignment(source, ['alignment']),
          padding: ArgumentDecoders.edgeInsets(source, ['padding']),
          color: ArgumentDecoders.color(source, ['color']),
          decoration: ArgumentDecoders.decoration(source, ['decoration']),
          foregroundDecoration:
              ArgumentDecoders.decoration(source, ['foregroundDecoration']),
          width: source.v<double>(['width']),
          height: source.v<double>(['height']),
          constraints: ArgumentDecoders.boxConstraints(source, ['constraints']),
          margin: ArgumentDecoders.edgeInsets(source, ['margin']),
          transform: ArgumentDecoders.matrix(source, ['transform']),
          transformAlignment:
              ArgumentDecoders.alignment(source, ['transformAlignment']),
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          onEnd: source.voidHandler(['onEnd']),
          child: source.optionalChild(['child']),
        );
      },
      'DefaultTextStyle': (BuildContext context, DataSource source) {
        return AnimatedDefaultTextStyle(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          style: ArgumentDecoders.textStyle(source, ['style']) ??
              const TextStyle(),
          textAlign: ArgumentDecoders.enumValue<TextAlign>(
              TextAlign.values, source, ['textAlign']),
          softWrap: source.v<bool>(['softWrap']) ?? true,
          overflow: ArgumentDecoders.enumValue<TextOverflow>(
                  TextOverflow.values, source, ['overflow']) ??
              TextOverflow.clip,
          maxLines: source.v<int>(['maxLines']),
          textWidthBasis: ArgumentDecoders.enumValue<TextWidthBasis>(
                  TextWidthBasis.values, source, ['textWidthBasis']) ??
              TextWidthBasis.parent,
          textHeightBehavior: ArgumentDecoders.textHeightBehavior(
              source, ['textHeightBehavior']),
          onEnd: source.voidHandler(['onEnd']),
          child: source.child(['child']),
        );
      },
      'Directionality': (BuildContext context, DataSource source) {
        return Directionality(
          textDirection: ArgumentDecoders.enumValue<TextDirection>(
                  TextDirection.values, source, ['textDirection']) ??
              TextDirection.ltr,
          child: source.child(['child']),
        );
      },
      'Expanded': (BuildContext context, DataSource source) {
        return Expanded(
          flex: source.v<int>(['flex']) ?? 1,
          child: source.child(['child']),
        );
      },
      'FittedBox': (BuildContext context, DataSource source) {
        return FittedBox(
          fit: ArgumentDecoders.enumValue<BoxFit>(
                  BoxFit.values, source, ['fit']) ??
              BoxFit.contain,
          alignment: ArgumentDecoders.alignment(source, ['alignment']) ??
              Alignment.center,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          child: source.optionalChild(['child']),
        );
      },
      'FractionallySizedBox': (BuildContext context, DataSource source) {
        return FractionallySizedBox(
          alignment: ArgumentDecoders.alignment(source, ['alignment']) ??
              Alignment.center,
          widthFactor: source.v<double>(['widthFactor']),
          heightFactor: source.v<double>(['heightFactor']),
          child: source.child(['child']),
        );
      },
      'GestureDetector': (BuildContext context, DataSource source) {
        return GestureDetector(
          onTap: source.voidHandler(['onTap']),
          onTapDown: source.handler(['onTapDown'],
              (VoidCallback trigger) => (TapDownDetails details) => trigger()),
          onTapUp: source.handler(['onTapUp'],
              (VoidCallback trigger) => (TapUpDetails details) => trigger()),
          onTapCancel: source.voidHandler(['onTapCancel']),
          onDoubleTap: source.voidHandler(['onDoubleTap']),
          onLongPress: source.voidHandler(['onLongPress']),
          behavior: ArgumentDecoders.enumValue<HitTestBehavior>(
              HitTestBehavior.values, source, ['behavior']),
          child: source.optionalChild(['child']),
        );
      },
      'GridView': (BuildContext context, DataSource source) {
        return GridView.builder(
          scrollDirection: ArgumentDecoders.enumValue<Axis>(
                  Axis.values, source, ['scrollDirection']) ??
              Axis.vertical,
          reverse: source.v<bool>(['reverse']) ?? false,
          primary: source.v<bool>(['primary']),
          shrinkWrap: source.v<bool>(['shrinkWrap']) ?? false,
          padding: ArgumentDecoders.edgeInsets(source, ['padding']),
          gridDelegate:
              ArgumentDecoders.gridDelegate(source, ['gridDelegate']) ??
                  const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2),
          itemBuilder: (BuildContext context, int index) =>
              source.child(['children', index]),
          itemCount: source.length(['children']),
          addAutomaticKeepAlives:
              source.v<bool>(['addAutomaticKeepAlives']) ?? true,
          addRepaintBoundaries:
              source.v<bool>(['addRepaintBoundaries']) ?? true,
          addSemanticIndexes: source.v<bool>(['addSemanticIndexes']) ?? true,
          cacheExtent: source.v<double>(['cacheExtent']),
          semanticChildCount: source.v<int>(['semanticChildCount']),
          dragStartBehavior: ArgumentDecoders.enumValue<DragStartBehavior>(
                  DragStartBehavior.values, source, ['dragStartBehavior']) ??
              DragStartBehavior.start,
          keyboardDismissBehavior:
              ArgumentDecoders.enumValue<ScrollViewKeyboardDismissBehavior>(
                      ScrollViewKeyboardDismissBehavior.values,
                      source,
                      ['keyboardDismissBehavior']) ??
                  ScrollViewKeyboardDismissBehavior.manual,
          restorationId: source.v<String>(['restorationId']),
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.hardEdge,
        );
      },
      'Icon': (BuildContext context, DataSource source) {
        return Icon(
          ArgumentDecoders.iconData(source, []) ?? Icons.flutter_dash,
          size: source.v<double>(['size']),
          color: ArgumentDecoders.color(source, ['color']),
          semanticLabel: source.v<String>(['semanticLabel']),
          textDirection: ArgumentDecoders.enumValue<TextDirection>(
              TextDirection.values, source, ['textDirection']),
        );
      },
      'IconTheme': (BuildContext context, DataSource source) {
        return IconTheme(
          data: ArgumentDecoders.iconThemeData(source, []) ??
              const IconThemeData(),
          child: source.child(['child']),
        );
      },
      'IntrinsicHeight': (BuildContext context, DataSource source) {
        return IntrinsicHeight(
          child: source.optionalChild(['child']),
        );
      },
      'IntrinsicWidth': (BuildContext context, DataSource source) {
        return IntrinsicWidth(
          stepWidth: source.v<double>(['width']),
          stepHeight: source.v<double>(['height']),
          child: source.optionalChild(['child']),
        );
      },
      'Image': (BuildContext context, DataSource source) {
        return Image(
          image: ArgumentDecoders.imageProvider(source, []) ??
              const AssetImage('error.png'),
          semanticLabel: source.v<String>(['semanticLabel']),
          excludeFromSemantics:
              source.v<bool>(['excludeFromSemantics']) ?? false,
          width: source.v<double>(['width']),
          height: source.v<double>(['height']),
          color: ArgumentDecoders.color(source, ['color']),
          colorBlendMode: ArgumentDecoders.enumValue<BlendMode>(
              BlendMode.values, source, ['blendMode']),
          fit: ArgumentDecoders.enumValue<BoxFit>(
              BoxFit.values, source, ['fit']),
          alignment: ArgumentDecoders.alignment(source, ['alignment']) ??
              Alignment.center,
          repeat: ArgumentDecoders.enumValue<ImageRepeat>(
                  ImageRepeat.values, source, ['repeat']) ??
              ImageRepeat.noRepeat,
          centerSlice: ArgumentDecoders.rect(source, ['centerSlice']),
          matchTextDirection: source.v<bool>(['matchTextDirection']) ?? false,
          gaplessPlayback: source.v<bool>(['gaplessPlayback']) ?? false,
          isAntiAlias: source.v<bool>(['isAntiAlias']) ?? false,
          filterQuality: ArgumentDecoders.enumValue<FilterQuality>(
                  FilterQuality.values, source, ['filterQuality']) ??
              FilterQuality.low,
        );
      },
      'ListBody': (BuildContext context, DataSource source) {
        return ListBody(
          mainAxis: ArgumentDecoders.enumValue<Axis>(
                  Axis.values, source, ['mainAxis']) ??
              Axis.vertical,
          reverse: source.v<bool>(['reverse']) ?? false,
          children: source.childList(['children']),
        );
      },
      'ListView': (BuildContext context, DataSource source) {
        return ListView.builder(
          scrollDirection: ArgumentDecoders.enumValue<Axis>(
                  Axis.values, source, ['scrollDirection']) ??
              Axis.vertical,
          reverse: source.v<bool>(['reverse']) ?? false,
          primary: source.v<bool>(['primary']),
          shrinkWrap: source.v<bool>(['shrinkWrap']) ?? false,
          padding: ArgumentDecoders.edgeInsets(source, ['padding']),
          itemExtent: source.v<double>(['itemExtent']),
          prototypeItem: source.optionalChild(['prototypeItem']),
          itemCount: source.length(['children']),
          itemBuilder: (BuildContext context, int index) =>
              source.child(['children', index]),
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.hardEdge,
          addAutomaticKeepAlives:
              source.v<bool>(['addAutomaticKeepAlives']) ?? true,
          addRepaintBoundaries:
              source.v<bool>(['addRepaintBoundaries']) ?? true,
          addSemanticIndexes: source.v<bool>(['addSemanticIndexes']) ?? true,
          cacheExtent: source.v<double>(['cacheExtent']),
          semanticChildCount: source.v<int>(['semanticChildCount']),
          dragStartBehavior: ArgumentDecoders.enumValue<DragStartBehavior>(
                  DragStartBehavior.values, source, ['dragStartBehavior']) ??
              DragStartBehavior.start,
          keyboardDismissBehavior:
              ArgumentDecoders.enumValue<ScrollViewKeyboardDismissBehavior>(
                      ScrollViewKeyboardDismissBehavior.values,
                      source,
                      ['keyboardDismissBehavior']) ??
                  ScrollViewKeyboardDismissBehavior.manual,
          restorationId: source.v<String>(['restorationId']),
        );
      },
      'Opacity': (BuildContext context, DataSource source) {
        return AnimatedOpacity(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          opacity: source.v<double>(['opacity']) ?? 0.0,
          onEnd: source.voidHandler(['onEnd']),
          alwaysIncludeSemantics:
              source.v<bool>(['alwaysIncludeSemantics']) ?? true,
        );
      },
      'Padding': (BuildContext context, DataSource source) {
        return AnimatedPadding(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          padding: ArgumentDecoders.edgeInsets(source, ['padding']) ??
              EdgeInsets.zero,
          onEnd: source.voidHandler(['onEnd']),
          child: source.optionalChild(['child']),
        );
      },
      'Placeholder': (BuildContext context, DataSource source) {
        return Placeholder(
          color: ArgumentDecoders.color(source, ['color']) ??
              const Color(0xFF455A64),
          strokeWidth: source.v<double>(['strokeWidth']) ?? 2.0,
          fallbackWidth: source.v<double>(['placeholderWidth']) ?? 400.0,
          fallbackHeight: source.v<double>(['placeholderHeight']) ?? 400.0,
        );
      },
      'Positioned': (BuildContext context, DataSource source) {
        return AnimatedPositionedDirectional(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          start: source.v<double>(['start']),
          top: source.v<double>(['top']),
          end: source.v<double>(['end']),
          bottom: source.v<double>(['bottom']),
          width: source.v<double>(['width']),
          height: source.v<double>(['height']),
          onEnd: source.voidHandler(['onEnd']),
          child: source.child(['child']),
        );
      },
      'Rotation': (BuildContext context, DataSource source) {
        return AnimatedRotation(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          turns: source.v<double>(['turns']) ?? 0.0,
          alignment: (ArgumentDecoders.alignment(source, ['alignment']) ??
                  Alignment.center)
              .resolve(Directionality.of(context)),
          filterQuality: ArgumentDecoders.enumValue<FilterQuality>(
              FilterQuality.values, source, ['filterQuality']),
          onEnd: source.voidHandler(['onEnd']),
          child: source.optionalChild(['child']),
        );
      },
      'Row': (BuildContext context, DataSource source) {
        return Row(
          mainAxisAlignment: ArgumentDecoders.enumValue<MainAxisAlignment>(
                  MainAxisAlignment.values, source, ['mainAxisAlignment']) ??
              MainAxisAlignment.start,
          mainAxisSize: ArgumentDecoders.enumValue<MainAxisSize>(
                  MainAxisSize.values, source, ['mainAxisSize']) ??
              MainAxisSize.max,
          crossAxisAlignment: ArgumentDecoders.enumValue<CrossAxisAlignment>(
                  CrossAxisAlignment.values, source, ['crossAxisAlignment']) ??
              CrossAxisAlignment.center,
          textDirection: ArgumentDecoders.enumValue<TextDirection>(
              TextDirection.values, source, ['textDirection']),
          verticalDirection: ArgumentDecoders.enumValue<VerticalDirection>(
                  VerticalDirection.values, source, ['verticalDirection']) ??
              VerticalDirection.down,
          textBaseline: ArgumentDecoders.enumValue<TextBaseline>(
              TextBaseline.values, source, ['textBaseline']),
          children: source.childList(['children']),
        );
      },
      'SafeArea': (BuildContext context, DataSource source) {
        return SafeArea(
          left: source.v<bool>(['left']) ?? true,
          top: source.v<bool>(['top']) ?? true,
          right: source.v<bool>(['right']) ?? true,
          bottom: source.v<bool>(['bottom']) ?? true,
          minimum: (ArgumentDecoders.edgeInsets(source, ['minimum']) ??
                  EdgeInsets.zero)
              .resolve(Directionality.of(context)),
          maintainBottomViewPadding:
              source.v<bool>(['maintainBottomViewPadding']) ?? false,
          child: source.child(['child']),
        );
      },
      'Scale': (BuildContext context, DataSource source) {
        return AnimatedScale(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          scale: source.v<double>(['scale']) ?? 1.0,
          alignment: (ArgumentDecoders.alignment(source, ['alignment']) ??
                  Alignment.center)
              .resolve(Directionality.of(context)),
          filterQuality: ArgumentDecoders.enumValue<FilterQuality>(
              FilterQuality.values, source, ['filterQuality']),
          onEnd: source.voidHandler(['onEnd']),
          child: source.optionalChild(['child']),
        );
      },
      'SingleChildScrollView': (BuildContext context, DataSource source) {
        return SingleChildScrollView(
          scrollDirection: ArgumentDecoders.enumValue<Axis>(
                  Axis.values, source, ['scrollDirection']) ??
              Axis.vertical,
          reverse: source.v<bool>(['reverse']) ?? false,
          padding: ArgumentDecoders.edgeInsets(source, ['padding']),
          primary: source.v<bool>(['primary']) ?? true,
          dragStartBehavior: ArgumentDecoders.enumValue<DragStartBehavior>(
                  DragStartBehavior.values, source, ['dragStartBehavior']) ??
              DragStartBehavior.start,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.hardEdge,
          restorationId: source.v<String>(['restorationId']),
          keyboardDismissBehavior:
              ArgumentDecoders.enumValue<ScrollViewKeyboardDismissBehavior>(
                      ScrollViewKeyboardDismissBehavior.values,
                      source,
                      ['keyboardDismissBehavior']) ??
                  ScrollViewKeyboardDismissBehavior.manual,
          child: source.optionalChild(['child']),
        );
      },
      'SizedBox': (BuildContext context, DataSource source) {
        return SizedBox(
          width: source.v<double>(['width']),
          height: source.v<double>(['height']),
          child: source.optionalChild(['child']),
        );
      },
      'SizedBoxExpand': (BuildContext context, DataSource source) {
        return SizedBox.expand(
          child: source.optionalChild(['child']),
        );
      },
      'SizedBoxShrink': (BuildContext context, DataSource source) {
        return SizedBox.shrink(
          child: source.optionalChild(['child']),
        );
      },
      'Spacer': (BuildContext context, DataSource source) {
        return Spacer(
          flex: source.v<int>(['flex']) ?? 1,
        );
      },
      'Stack': (BuildContext context, DataSource source) {
        return Stack(
          alignment: ArgumentDecoders.alignment(source, ['alignment']) ??
              AlignmentDirectional.topStart,
          textDirection: ArgumentDecoders.enumValue<TextDirection>(
              TextDirection.values, source, ['textDirection']),
          fit: ArgumentDecoders.enumValue<StackFit>(
                  StackFit.values, source, ['fit']) ??
              StackFit.loose,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.hardEdge,
          children: source.childList(['children']),
        );
      },
      'Text': (BuildContext context, DataSource source) {
        String? text = source.v<String>(['text']);
        if (text == null) {
          final StringBuffer builder = StringBuffer();
          final int count = source.length(['text']);
          for (int index = 0; index < count; index += 1) {
            builder.write(source.v<String>(['text', index]) ?? '');
          }
          text = builder.toString();
        }
        return Text(
          text,
          style: ArgumentDecoders.textStyle(source, ['style']),
          strutStyle: ArgumentDecoders.strutStyle(source, ['strutStyle']),
          textAlign: ArgumentDecoders.enumValue<TextAlign>(
              TextAlign.values, source, ['textAlign']),
          textDirection: ArgumentDecoders.enumValue<TextDirection>(
              TextDirection.values, source, ['textDirection']),
          locale: ArgumentDecoders.locale(source, ['locale']),
          softWrap: source.v<bool>(['softWrap']),
          overflow: ArgumentDecoders.enumValue<TextOverflow>(
              TextOverflow.values, source, ['overflow']),
          textScaleFactor: source.v<double>(['textScaleFactor']),
          maxLines: source.v<int>(['maxLines']),
          semanticsLabel: source.v<String>(['semanticsLabel']),
          textWidthBasis: ArgumentDecoders.enumValue<TextWidthBasis>(
              TextWidthBasis.values, source, ['textWidthBasis']),
          textHeightBehavior: ArgumentDecoders.textHeightBehavior(
              source, ['textHeightBehavior']),
        );
      },
      'Wrap': (BuildContext context, DataSource source) {
        return Wrap(
          direction: ArgumentDecoders.enumValue<Axis>(
                  Axis.values, source, ['direction']) ??
              Axis.horizontal,
          alignment: ArgumentDecoders.enumValue<WrapAlignment>(
                  WrapAlignment.values, source, ['alignment']) ??
              WrapAlignment.start,
          spacing: source.v<double>(['spacing']) ?? 0.0,
          runAlignment: ArgumentDecoders.enumValue<WrapAlignment>(
                  WrapAlignment.values, source, ['runAlignment']) ??
              WrapAlignment.start,
          runSpacing: source.v<double>(['runSpacing']) ?? 0.0,
          crossAxisAlignment: ArgumentDecoders.enumValue<WrapCrossAlignment>(
                  WrapCrossAlignment.values, source, ['crossAxisAlignment']) ??
              WrapCrossAlignment.start,
          textDirection: ArgumentDecoders.enumValue<TextDirection>(
              TextDirection.values, source, ['textDirection']),
          verticalDirection: ArgumentDecoders.enumValue<VerticalDirection>(
                  VerticalDirection.values, source, ['verticalDirection']) ??
              VerticalDirection.down,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          children: source.childList(['children']),
        );
      },
    };

This created all the core widgets that are not apart of a design system. Keeping these separate will let you update the design system separately than the core widgets.

Defining the Material library

Create and update the following file located at app/lib/rfw/material.dart:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:rfw/rfw.dart';

import 'decoders.dart';

LocalWidgetLibrary createMaterialWidgets() =>
    LocalWidgetLibrary(_materialWidgetsDefinitions);

Map<String, LocalWidgetBuilder> get _materialWidgetsDefinitions =>
    <String, LocalWidgetBuilder>{
      'AboutListTile': (context, source) {
        return AboutListTile(
          icon: source.optionalChild(['icon']),
          applicationName: source.v<String>(['applicationName']),
          applicationVersion: source.v<String>(['applicationVersion']),
          applicationIcon: source.optionalChild(['applicationIcon']),
          applicationLegalese: source.v<String>(['applicationLegalese']),
          aboutBoxChildren: source.childList(['aboutBoxChildren']),
          dense: source.v<bool>(['dense']),
          child: source.optionalChild(['child']),
        );
      },
      'AppBar': (context, source) {
        return AppBar(
          leading: source.optionalChild(['leading']),
          automaticallyImplyLeading:
              source.v<bool>(['automaticallyImplyLeading']) ?? true,
          title: source.optionalChild(['title']),
          actions: source.childList(['actions']),
          elevation: source.v<double>(['elevation']),
          shadowColor: ArgumentDecoders.color(source, ['shadowColor']),
          shape: ArgumentDecoders.shapeBorder(source, ['shape']),
          backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
          foregroundColor: ArgumentDecoders.color(source, ['foregroundColor']),
          iconTheme: ArgumentDecoders.iconThemeData(source, ['iconTheme']),
          actionsIconTheme:
              ArgumentDecoders.iconThemeData(source, ['actionsIconTheme']),
          primary: source.v<bool>(['primary']) ?? true,
          centerTitle: source.v<bool>(['centerTitle']),
          excludeHeaderSemantics:
              source.v<bool>(['excludeHeaderSemantics']) ?? false,
          titleSpacing: source.v<double>(['titleSpacing']),
          toolbarOpacity: source.v<double>(['toolbarOpacity']) ?? 1.0,
          toolbarHeight: source.v<double>(['toolbarHeight']),
          leadingWidth: source.v<double>(['leadingWidth']),
          toolbarTextStyle:
              ArgumentDecoders.textStyle(source, ['toolbarTextStyle']),
          titleTextStyle:
              ArgumentDecoders.textStyle(source, ['titleTextStyle']),
        );
      },
      'ButtonBar': (context, source) {
        return ButtonBar(
          alignment: ArgumentDecoders.enumValue<MainAxisAlignment>(
                  MainAxisAlignment.values, source, ['alignment']) ??
              MainAxisAlignment.start,
          mainAxisSize: ArgumentDecoders.enumValue<MainAxisSize>(
                  MainAxisSize.values, source, ['mainAxisSize']) ??
              MainAxisSize.max,
          buttonMinWidth: source.v<double>(['buttonMinWidth']),
          buttonHeight: source.v<double>(['buttonHeight']),
          buttonPadding: ArgumentDecoders.edgeInsets(source, ['buttonPadding']),
          buttonAlignedDropdown:
              source.v<bool>(['buttonAlignedDropdown']) ?? false,
          layoutBehavior: ArgumentDecoders.enumValue<ButtonBarLayoutBehavior>(
              ButtonBarLayoutBehavior.values, source, ['layoutBehavior']),
          overflowDirection: ArgumentDecoders.enumValue<VerticalDirection>(
              VerticalDirection.values, source, ['overflowDirection']),
          overflowButtonSpacing: source.v<double>(['overflowButtonSpacing']),
          children: source.childList(['children']),
        );
      },
      'Card': (context, source) {
        return Card(
          color: ArgumentDecoders.color(source, ['color']),
          shadowColor: ArgumentDecoders.color(source, ['shadowColor']),
          elevation: source.v<double>(['elevation']),
          shape: ArgumentDecoders.shapeBorder(source, ['shape']),
          borderOnForeground: source.v<bool>(['borderOnForeground']) ?? true,
          margin: ArgumentDecoders.edgeInsets(source, ['margin']),
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          semanticContainer: source.v<bool>(['semanticContainer']) ?? true,
          child: source.optionalChild(['child']),
        );
      },
      'CircularProgressIndicator': (context, source) {
        return CircularProgressIndicator(
          value: source.v<double>(['value']),
          color: ArgumentDecoders.color(source, ['color']),
          backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
          strokeWidth: source.v<double>(['strokeWidth']) ?? 4.0,
          semanticsLabel: source.v<String>(['semanticsLabel']),
          semanticsValue: source.v<String>(['semanticsValue']),
        );
      },
      'Divider': (context, source) {
        return Divider(
          height: source.v<double>(['height']),
          thickness: source.v<double>(['thickness']),
          indent: source.v<double>(['indent']),
          endIndent: source.v<double>(['endIndent']),
          color: ArgumentDecoders.color(source, ['color']),
        );
      },
      'Drawer': (context, source) {
        return Drawer(
          elevation: source.v<double>(['elevation']) ?? 16.0,
          semanticLabel: source.v<String>(['semanticLabel']),
          child: source.optionalChild(['child']),
        );
      },
      'DrawerHeader': (context, source) {
        return DrawerHeader(
          duration: ArgumentDecoders.duration(source, ['duration'], context),
          curve: ArgumentDecoders.curve(source, ['curve'], context),
          decoration: ArgumentDecoders.decoration(source, ['decoration']),
          margin: ArgumentDecoders.edgeInsets(source, ['margin']) ??
              const EdgeInsets.only(bottom: 8.0),
          padding: ArgumentDecoders.edgeInsets(source, ['padding']) ??
              const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0),
          child: source.optionalChild(['child']),
        );
      },
      'ElevatedButton': (context, source) {
        return ElevatedButton(
          onPressed: source.voidHandler(['onPressed']),
          onLongPress: source.voidHandler(['onLongPress']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          child: source.child(['child']),
        );
      },
      'InkWell': (context, source) {
        return InkWell(
          onTap: source.voidHandler(['onTap']),
          onDoubleTap: source.voidHandler(['onDoubleTap']),
          onLongPress: source.voidHandler(['onLongPress']),
          onTapDown: source.handler(['onTapDown'],
              (VoidCallback trigger) => (TapDownDetails details) => trigger()),
          onTapCancel: source.voidHandler(['onTapCancel']),
          radius: source.v<double>(['radius']),
          borderRadius: ArgumentDecoders.borderRadius(source, ['borderRadius'])
              ?.resolve(Directionality.of(context)),
          customBorder: ArgumentDecoders.shapeBorder(source, ['customBorder']),
          enableFeedback: source.v<bool>(['enableFeedback']) ?? true,
          excludeFromSemantics:
              source.v<bool>(['excludeFromSemantics']) ?? false,
          autofocus: source.v<bool>(['autofocus']) ?? false,
          child: source.optionalChild(['child']),
        );
      },
      'LinearProgressIndicator': (context, source) {
        return LinearProgressIndicator(
          value: source.v<double>(['value']),
          color: ArgumentDecoders.color(source, ['color']),
          backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
          minHeight: source.v<double>(['minHeight']),
          semanticsLabel: source.v<String>(['semanticsLabel']),
          semanticsValue: source.v<String>(['semanticsValue']),
        );
      },
      'ListTile': (context, source) {
        return ListTile(
          leading: source.optionalChild(['leading']),
          title: source.optionalChild(['title']),
          subtitle: source.optionalChild(['subtitle']),
          trailing: source.optionalChild(['trailing']),
          isThreeLine: source.v<bool>(['isThreeLine']) ?? false,
          dense: source.v<bool>(['dense']),
          visualDensity:
              ArgumentDecoders.visualDensity(source, ['visualDensity']),
          shape: ArgumentDecoders.shapeBorder(source, ['shape']),
          contentPadding:
              ArgumentDecoders.edgeInsets(source, ['contentPadding']),
          enabled: source.v<bool>(['enabled']) ?? true,
          onTap: source.voidHandler(['onTap']),
          onLongPress: source.voidHandler(['onLongPress']),
          selected: source.v<bool>(['selected']) ?? false,
          focusColor: ArgumentDecoders.color(source, ['focusColor']),
          hoverColor: ArgumentDecoders.color(source, ['hoverColor']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          tileColor: ArgumentDecoders.color(source, ['tileColor']),
          selectedTileColor:
              ArgumentDecoders.color(source, ['selectedTileColor']),
          enableFeedback: source.v<bool>(['enableFeedback']),
          horizontalTitleGap: source.v<double>(['horizontalTitleGap']),
          minVerticalPadding: source.v<double>(['minVerticalPadding']),
          minLeadingWidth: source.v<double>(['minLeadingWidth']),
        );
      },
      'Scaffold': (context, source) {
        final Widget? appBarWidget = source.optionalChild(['appBar']);
        final List<Widget> persistentFooterButtons =
            source.childList(['persistentFooterButtons']);
        return Scaffold(
          appBar: appBarWidget == null
              ? null
              : PreferredSize(
                  preferredSize: Size.fromHeight(
                      source.v<double>(['bottomHeight']) ?? 56.0),
                  child: appBarWidget,
                ),
          body: source.optionalChild(['body']),
          floatingActionButton: source.optionalChild(['floatingActionButton']),
          persistentFooterButtons:
              persistentFooterButtons.isEmpty ? null : persistentFooterButtons,
          drawer: source.optionalChild(['drawer']),
          endDrawer: source.optionalChild(['endDrawer']),
          bottomNavigationBar: source.optionalChild(['bottomNavigationBar']),
          bottomSheet: source.optionalChild(['bottomSheet']),
          backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
          resizeToAvoidBottomInset:
              source.v<bool>(['resizeToAvoidBottomInset']),
          primary: source.v<bool>(['primary']) ?? true,
          drawerDragStartBehavior:
              ArgumentDecoders.enumValue<DragStartBehavior>(
                      DragStartBehavior.values,
                      source,
                      ['drawerDragStartBehavior']) ??
                  DragStartBehavior.start,
          extendBody: source.v<bool>(['extendBody']) ?? false,
          extendBodyBehindAppBar:
              source.v<bool>(['extendBodyBehindAppBar']) ?? false,
          drawerScrimColor:
              ArgumentDecoders.color(source, ['drawerScrimColor']),
          drawerEdgeDragWidth: source.v<double>(['drawerEdgeDragWidth']),
          drawerEnableOpenDragGesture:
              source.v<bool>(['drawerEnableOpenDragGesture']) ?? true,
          endDrawerEnableOpenDragGesture:
              source.v<bool>(['endDrawerEnableOpenDragGesture']) ?? true,
          restorationId: source.v<String>(['restorationId']),
        );
      },
      'VerticalDivider': (context, source) {
        return VerticalDivider(
          width: source.v<double>(['width']),
          thickness: source.v<double>(['thickness']),
          indent: source.v<double>(['indent']),
          endIndent: source.v<double>(['endIndent']),
          color: ArgumentDecoders.color(source, ['color']),
        );
      },
      'FilledButton': (context, source) {
        return FilledButton(
          onPressed: source.voidHandler(['onPressed']),
          onLongPress: source.voidHandler(['onLongPress']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          style: CustomArgumentDecoders.filledButtonStyle(
              source, ['style'], context),
          child: source.child(['child']),
        );
      },
      'FilledButtonIcon': (context, source) {
        return FilledButton.icon(
          onPressed: source.voidHandler(['onPressed']),
          onLongPress: source.voidHandler(['onLongPress']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          style: CustomArgumentDecoders.filledButtonStyle(
              source, ['style'], context),
          icon: source.child(['icon']),
          label: source.child(['label']),
        );
      },
      'FilledButtonTonal': (context, source) {
        return FilledButton.tonal(
          onPressed: source.voidHandler(['onPressed']),
          onLongPress: source.voidHandler(['onLongPress']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          style: CustomArgumentDecoders.filledButtonStyle(
              source, ['style'], context),
          child: source.child(['child']),
        );
      },
      'FilledButtonTonalIcon': (context, source) {
        return FilledButton.tonalIcon(
          onPressed: source.voidHandler(['onPressed']),
          onLongPress: source.voidHandler(['onLongPress']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          style: CustomArgumentDecoders.filledButtonStyle(
              source, ['style'], context),
          icon: source.child(['icon']),
          label: source.child(['label']),
        );
      },
      'TextButton': (context, source) {
        return TextButton(
          onPressed: source.voidHandler(['onPressed']),
          onLongPress: source.voidHandler(['onLongPress']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          style: CustomArgumentDecoders.textButtonStyle(
              source, ['style'], context),
          child: source.child(['child']),
        );
      },
      'TextButtonIcon': (context, source) {
        return TextButton.icon(
          onPressed: source.voidHandler(['onPressed']),
          onLongPress: source.voidHandler(['onLongPress']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          style: CustomArgumentDecoders.textButtonStyle(
              source, ['style'], context),
          icon: source.child(['icon']),
          label: source.child(['label']),
        );
      },
      'OutlinedButton': (context, source) {
        return OutlinedButton(
          onPressed: source.voidHandler(['onPressed']),
          onLongPress: source.voidHandler(['onLongPress']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          style: CustomArgumentDecoders.outlinedButtonStyle(
              source, ['style'], context),
          child: source.child(['child']),
        );
      },
      'OutlinedButtonIcon': (context, source) {
        return OutlinedButton.icon(
          onPressed: source.voidHandler(['onPressed']),
          onLongPress: source.voidHandler(['onLongPress']),
          autofocus: source.v<bool>(['autofocus']) ?? false,
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          style: CustomArgumentDecoders.outlinedButtonStyle(
              source, ['style'], context),
          icon: source.child(['icon']),
          label: source.child(['label']),
        );
      },
      'FloatingActionButton': (context, source) {
        return FloatingActionButton(
          onPressed: source.voidHandler(['onPressed']),
          tooltip: source.v<String>(['tooltip']),
          foregroundColor: ArgumentDecoders.color(source, ['foregroundColor']),
          backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
          focusColor: ArgumentDecoders.color(source, ['focusColor']),
          hoverColor: ArgumentDecoders.color(source, ['hoverColor']),
          splashColor: ArgumentDecoders.color(source, ['splashColor']),
          heroTag: source.v<String>(['heroTag']),
          elevation: source.v<double>(['elevation']),
          focusElevation: source.v<double>(['focusElevation']),
          hoverElevation: source.v<double>(['hoverElevation']),
          highlightElevation: source.v<double>(['highlightElevation']),
          disabledElevation: source.v<double>(['disabledElevation']),
          mini: source.v<bool>(['mini']) ?? false,
          shape: ArgumentDecoders.shapeBorder(source, ['shape']),
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          autofocus: source.v<bool>(['autofocus']) ?? false,
          mouseCursor:
              CustomArgumentDecoders.mouseCursor(source, ['mouseCursor']),
          materialTapTargetSize:
              ArgumentDecoders.enumValue<MaterialTapTargetSize>(
                  MaterialTapTargetSize.values,
                  source,
                  ['materialTapTargetSize']),
          isExtended: source.v<bool>(['isExtended']) ?? false,
          enableFeedback: source.v<bool>(['enableFeedback']),
          child: source.child(['child']),
        );
      },
      'FloatingActionButtonExtended': (context, source) {
        return FloatingActionButton.extended(
          onPressed: source.voidHandler(['onPressed']),
          tooltip: source.v<String>(['tooltip']),
          foregroundColor: ArgumentDecoders.color(source, ['foregroundColor']),
          backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
          focusColor: ArgumentDecoders.color(source, ['focusColor']),
          hoverColor: ArgumentDecoders.color(source, ['hoverColor']),
          splashColor: ArgumentDecoders.color(source, ['splashColor']),
          heroTag: source.v<String>(['heroTag']),
          elevation: source.v<double>(['elevation']),
          focusElevation: source.v<double>(['focusElevation']),
          hoverElevation: source.v<double>(['hoverElevation']),
          highlightElevation: source.v<double>(['highlightElevation']),
          disabledElevation: source.v<double>(['disabledElevation']),
          shape: ArgumentDecoders.shapeBorder(source, ['shape']),
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          autofocus: source.v<bool>(['autofocus']) ?? false,
          mouseCursor:
              CustomArgumentDecoders.mouseCursor(source, ['mouseCursor']),
          materialTapTargetSize:
              ArgumentDecoders.enumValue<MaterialTapTargetSize>(
                  MaterialTapTargetSize.values,
                  source,
                  ['materialTapTargetSize']),
          isExtended: source.v<bool>(['isExtended']) ?? true,
          enableFeedback: source.v<bool>(['enableFeedback']),
          label: source.child(['label']),
          icon: source.child(['icon']),
        );
      },
      'FloatingActionButtonSmall': (context, source) {
        return FloatingActionButton.small(
          onPressed: source.voidHandler(['onPressed']),
          tooltip: source.v<String>(['tooltip']),
          foregroundColor: ArgumentDecoders.color(source, ['foregroundColor']),
          backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
          focusColor: ArgumentDecoders.color(source, ['focusColor']),
          hoverColor: ArgumentDecoders.color(source, ['hoverColor']),
          splashColor: ArgumentDecoders.color(source, ['splashColor']),
          heroTag: source.v<String>(['heroTag']),
          elevation: source.v<double>(['elevation']),
          focusElevation: source.v<double>(['focusElevation']),
          hoverElevation: source.v<double>(['hoverElevation']),
          highlightElevation: source.v<double>(['highlightElevation']),
          disabledElevation: source.v<double>(['disabledElevation']),
          shape: ArgumentDecoders.shapeBorder(source, ['shape']),
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          autofocus: source.v<bool>(['autofocus']) ?? false,
          mouseCursor:
              CustomArgumentDecoders.mouseCursor(source, ['mouseCursor']),
          materialTapTargetSize:
              ArgumentDecoders.enumValue<MaterialTapTargetSize>(
                  MaterialTapTargetSize.values,
                  source,
                  ['materialTapTargetSize']),
          enableFeedback: source.v<bool>(['enableFeedback']),
          child: source.child(['child']),
        );
      },
      'FloatingActionButtonLarge': (context, source) {
        return FloatingActionButton.large(
          onPressed: source.voidHandler(['onPressed']),
          tooltip: source.v<String>(['tooltip']),
          foregroundColor: ArgumentDecoders.color(source, ['foregroundColor']),
          backgroundColor: ArgumentDecoders.color(source, ['backgroundColor']),
          focusColor: ArgumentDecoders.color(source, ['focusColor']),
          hoverColor: ArgumentDecoders.color(source, ['hoverColor']),
          splashColor: ArgumentDecoders.color(source, ['splashColor']),
          heroTag: source.v<String>(['heroTag']),
          elevation: source.v<double>(['elevation']),
          focusElevation: source.v<double>(['focusElevation']),
          hoverElevation: source.v<double>(['hoverElevation']),
          highlightElevation: source.v<double>(['highlightElevation']),
          disabledElevation: source.v<double>(['disabledElevation']),
          shape: ArgumentDecoders.shapeBorder(source, ['shape']),
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          autofocus: source.v<bool>(['autofocus']) ?? false,
          mouseCursor:
              CustomArgumentDecoders.mouseCursor(source, ['mouseCursor']),
          materialTapTargetSize:
              ArgumentDecoders.enumValue<MaterialTapTargetSize>(
                  MaterialTapTargetSize.values,
                  source,
                  ['materialTapTargetSize']),
          enableFeedback: source.v<bool>(['enableFeedback']),
          child: source.child(['child']),
        );
      },
      'InteractiveViewer': (context, source) {
        return InteractiveViewer(
          clipBehavior: ArgumentDecoders.enumValue<Clip>(
                  Clip.values, source, ['clipBehavior']) ??
              Clip.none,
          alignPanAxis: source.v<bool>(['alignPanAxis']) ?? false,
          panAxis: ArgumentDecoders.enumValue<PanAxis>(
                  PanAxis.values, source, ['panAxis']) ??
              PanAxis.free,
          boundaryMargin:
              CustomArgumentDecoders.edgeInsets(source, ['boundaryMargin']) ??
                  EdgeInsets.zero,
          constrained: source.v<bool>(['constrained']) ?? true,
          maxScale: source.v<double>(['maxScale']) ?? 2.5,
          minScale: source.v<double>(['minScale']) ?? 0.8,
          interactionEndFrictionCoefficient:
              source.v<double>(['interactionEndFrictionCoefficient']) ??
                  0.0000135,
          panEnabled: source.v<bool>(['panEnabled']) ?? true,
          scaleEnabled: source.v<bool>(['scaleEnabled']) ?? true,
          scaleFactor: source.v<double>(['scaleFactor']) ?? 0.8,
          alignment:
              ArgumentDecoders.alignment(source, ['alignment']) as Alignment?,
          trackpadScrollCausesScale:
              source.v<bool>(['trackpadScrollCausesScale']) ?? false,
          child: source.child(['child']),
        );
      },
    };

In this example we are using the Material widgets but this could be the fluent_ui or macos_ui package set of components or even your custom design system.

Now that we have defined the core of rfw we can start to add the logic and UI for our app.

The rfw package includes material and core directly so you can simply import it directly and not need to define like this.

Connecting to the server

Create and update the following file located at app/lib/main.dart:

import 'package:flutter/material.dart';

import 'network.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SSR Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const NetworkExample(),
    );
  }
}

Next create and update the following file located at app/lib/network.dart:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

import 'package:rfw/rfw.dart';

import 'rfw/material.dart' as m;
import 'rfw/core.dart' as c;

class NetworkExample extends StatefulWidget {
  const NetworkExample({super.key});

  @override
  State<NetworkExample> createState() => _NetworkExampleState();
}

class _NetworkExampleState extends State<NetworkExample> {
  final Runtime _runtime = Runtime();
  final DynamicContent _data = DynamicContent();
  bool loaded = false;
  int count = 0;
  final route = Uri.parse('http://localhost:8080/');

  @override
  void initState() {
    super.initState();
    _update();
  }

  @override
  void reassemble() {
    super.reassemble();
    _update();
  }

  static const coreName = LibraryName(['widgets']);
  static const materialName = LibraryName(['material']);
  static const remoteName = LibraryName(['remote']);

  void _update() async {
    _runtime.update(coreName, c.createCoreWidgets());
    _runtime.update(materialName, m.createMaterialWidgets());
    await fetchWidget();
    if (mounted) setState(() => loaded = true);
  }

  Future<void> fetchWidget() async {
    final res = await http.get(route, headers: {
      'COUNTER_VALUE': count.toString(),
    });
    if (res.statusCode == 200) {
      count = int.tryParse(res.headers['counter_value'].toString()) ?? count;
      _data.update('counter', <String, Object>{'value': '$count'});
      _runtime.update(remoteName, decodeLibraryBlob(res.bodyBytes));
    }
  }

  void onEvent(String name, DynamicMap arguments) async {
    debugPrint('user triggered event "$name" with data: $arguments');
    if (name == 'click') {
      final res = await http.post(route, headers: {
        'COUNTER_VALUE': count.toString(),
      });
      if (res.statusCode == 200) {
        count = int.tryParse(res.headers['counter_value'].toString()) ?? count;
        _data.update('counter', <String, Object>{'value': '$count'});
        _runtime.update(remoteName, decodeLibraryBlob(res.bodyBytes));
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    _data.update('colorScheme', <String, Object>{
      'inversePrimary': colors.inversePrimary.value,
      'inverseSurface': colors.inverseSurface.value,
      'onInverseSurface': colors.onInverseSurface.value,
      'primary': colors.primary.value,
      'onPrimary': colors.onPrimary.value,
      'primaryContainer': colors.primaryContainer.value,
      'onPrimaryContainer': colors.onPrimaryContainer.value,
      'secondary': colors.secondary.value,
      'onSecondary': colors.onSecondary.value,
      'secondaryContainer': colors.secondaryContainer.value,
      'onSecondaryContainer': colors.onSecondaryContainer.value,
      'tertiary': colors.tertiary.value,
      'onTertiary': colors.onTertiary.value,
      'tertiaryContainer': colors.tertiaryContainer.value,
      'onTertiaryContainer': colors.onTertiaryContainer.value,
      'error': colors.error.value,
      'onError': colors.onError.value,
      'errorContainer': colors.errorContainer.value,
      'onErrorContainer': colors.onErrorContainer.value,
      'background': colors.background.value,
      'onBackground': colors.onBackground.value,
      'surface': colors.surface.value,
      'onSurface': colors.onSurface.value,
      'outline': colors.outline.value,
      'outlineVariant': colors.outlineVariant.value,
      'scrim': colors.scrim.value,
      'shadow': colors.shadow.value,
    });
    if (!loaded) {
      return const Center(child: CircularProgressIndicator());
    }
    const root = FullyQualifiedWidgetName(remoteName, 'root');
    return Container(
      color: Theme.of(context).scaffoldBackgroundColor,
      child: RemoteWidget(
        runtime: _runtime,
        data: _data,
        widget: root,
        onEvent: onEvent,
      ),
    );
  }
}

There is a lot going on here but simply we are connecting to our server and defining the local widgets we created and creating a local counter state that is used to send to the server and update per the response.

Because the DynamicContent _data can be updated every frame we are setting the local colors from the apps current theme int he build method:

_data.update('colorScheme', <String, Object>{
      'inversePrimary': colors.inversePrimary.value,
      'inverseSurface': colors.inverseSurface.value,
      'onInverseSurface': colors.onInverseSurface.value,
      'primary': colors.primary.value,
      'onPrimary': colors.onPrimary.value,
      'primaryContainer': colors.primaryContainer.value,
      'onPrimaryContainer': colors.onPrimaryContainer.value,
      'secondary': colors.secondary.value,
      'onSecondary': colors.onSecondary.value,
      'secondaryContainer': colors.secondaryContainer.value,
      'onSecondaryContainer': colors.onSecondaryContainer.value,
      'tertiary': colors.tertiary.value,
      'onTertiary': colors.onTertiary.value,
      'tertiaryContainer': colors.tertiaryContainer.value,
      'onTertiaryContainer': colors.onTertiaryContainer.value,
      'error': colors.error.value,
      'onError': colors.onError.value,
      'errorContainer': colors.errorContainer.value,
      'onErrorContainer': colors.onErrorContainer.value,
      'background': colors.background.value,
      'onBackground': colors.onBackground.value,
      'surface': colors.surface.value,
      'onSurface': colors.onSurface.value,
      'outline': colors.outline.value,
      'outlineVariant': colors.outlineVariant.value,
      'scrim': colors.scrim.value,
      'shadow': colors.shadow.value,
    });

When we first load the UI we want to make a GET request to get the latest from the server or fallback to the latest in cache (or even rootBundle):

Future<void> fetchWidget() async {
    final res = await http.get(route, headers: {
      'COUNTER_VALUE': count.toString(),
    });
    if (res.statusCode == 200) {
      count = int.tryParse(res.headers['counter_value'].toString()) ?? count;
      _data.update('counter', <String, Object>{'value': '$count'});
      _runtime.update(remoteName, decodeLibraryBlob(res.bodyBytes));
    }
  }

Setting and reading the headers will allow us to send state to the server and respond on updates.

We can also respond to events in the UI and trigger requests:

void onEvent(String name, DynamicMap arguments) async {
    debugPrint('user triggered event "$name" with data: $arguments');
    if (name == 'click') {
      final res = await http.post(route, headers: {
        'COUNTER_VALUE': count.toString(),
      });
      if (res.statusCode == 200) {
        count = int.tryParse(res.headers['counter_value'].toString()) ?? count;
        _data.update('counter', <String, Object>{'value': '$count'});
        _runtime.update(remoteName, decodeLibraryBlob(res.bodyBytes));
      }
    }
  }

Here we are using the response of the POST request to update the UI but we could also call the fetchWidget method again to get the latest and use the headers to update the data.

To run the application simply run using flutter run and make sure if you use MacOS desktop target to set the correct network permissions.

If all goes well you should see the following:

This will trigger network requests for each button press and the UI will reflect the logic done on the server.

You could also call a database and update the UI based on the response.

Conclusion

There is a lot more we can do with this example but after doing a deep dive on the format I thought it would be useful for others to understand and see some examples.

The final code can be found here.

If you have any questions reach out to me on Twitter or Github!

Deep Linking for Flutter Web

Sun, 19 Jan 2025 07:56:03 GMT

Deep Linking for Flutter Web

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.

TLDR The final source here and an online demo.

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

How To Send Push Notifications on Flutter Web (FCM)

Mon, 20 Jan 2025 01:11:12 GMT

How To Send Push Notifications on Flutter Web (FCM)

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:

importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.5.0/firebase-messaging.js");
firebase.initializeApp({
    apiKey: "API_KEY",
    authDomain: "AUTH_DOMAIN",
    databaseURL: "DATABASE_URL",
    projectId: "PROJECT_ID",
    storageBucket: "STORAGE_BUCKET",
    messagingSenderId: "MESSAGING_SENDER_ID",
    appId: "APP_ID",
    measurementId: "MEASUREMENT_ID"
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
    const promiseChain = clients
        .matchAll({
            type: "window",
            includeUncontrolled: true
        })
        .then(windowClients => {
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                windowClient.postMessage(payload);
            }
        })
        .then(() => {
            return registration.showNotification("New Message");
        });
    return promiseChain;
});
self.addEventListener('notificationclick', function (event) {
    console.log('notification received: ', event)
});

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:

import 'dart:async';
import 'package:firebase/firebase.dart' as firebase;

class FBMessaging {
  FBMessaging._();
  static FBMessaging _instance = FBMessaging._();
  static FBMessaging get instance => _instance;
  firebase.Messaging _mc;
  String _token;

  final _controller = StreamController<Map<String, dynamic>>.broadcast();
  Stream<Map<String, dynamic>> get stream => _controller.stream;

  void close() {
    _controller?.close();
  }

  Future<void> init() async {
    _mc = firebase.messaging();
    _mc.usePublicVapidKey('FCM_SERVER_KEY');
    _mc.onMessage.listen((event) {
      _controller.add(event?.data);
    });
  }

  Future requestPermission() {
    return _mc.requestPermission();
  }

  Future<String> getToken([bool force = false]) async {
    if (force || _token == null) {
      await requestPermission();
      _token = await _mc.getToken();
    }
    return _token;
  }
}

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.

How to build a Flutter app on Xcode Cloud

Mon, 20 Jan 2025 00:38:40 GMT

How to build a Flutter app on Xcode Cloud

In this article we are going to go over how to setup Xcode Cloud to build your Flutter application for TestFlight and the AppStore.

Step 1

Before we begin Flutter needs to be installed, and you can check by running the following:

flutter doctor -v

After it is installed we can run the following command to create and open our Flutter project (skip down to step 2 if adding to an existing app).

mkdir flutter_ci_example
cd flutter_ci_example
flutter create .

If you need more help with creating the first project you can check out my previous blog post here.

After the project is created open it in your favorite code editor.

code .

Step 2

The generated files should look like the following:

Create a new file at ios/ci_scripts/ci_post_install.sh and update it with the following:

#!/bin/sh

# Install CocoaPods using Homebrew.
brew install cocoapods

# Install Flutter
brew install --cask flutter

# Run Flutter doctor
flutter doctor

# Get packages
flutter packages get

# Update generated files
flutter pub run build_runner build

# Build ios app
flutter build ios --no-codesign

This is a file Xcode Cloud needs to run after the project is downloaded. We need to install cocoapods for any plugins we are using and Flutter to prebuild our application.

Then run the following command which will make the script executable:

chmod +x ios/ci_scripts/ci_post_clone.sh

Step 3

Open up the iOS project in Xcode by right clicking on the iOS folder and selecting "Open in Xcode".

You can also open the project by double clicking on the ios/Runner.xcworkspace file.

Make sure you have the latest version of Xcode Cloud install and that you have access to the beta. Create a new workflow by the menu Product > Xcode Cloud > Create Workflow:

Follow the flow to add the project and choose which type of build you want.

Make sure to remove MacOS as a target in the workflow by selecting Archive - MacOS and the delete icon on the top right.

If you want to build and release the MacOS app you will need to do that with another script in the macos folder and a workflow in that Xcode workspace.

You can create the file macos/ci_scripts/ci_post_clone.sh and update it with the following:

#!/bin/sh

# Install CocoaPods using Homebrew.
brew install cocoapods

# Install Flutter
brew install --cask flutter

# Run Flutter doctor
flutter doctor

# Enable macos
flutter config --enable-macos-desktop

# Get packages
flutter packages get

# Update generated files
flutter pub run build_runner build

# Build ios app
flutter build ios --no-codesign

If all goes well it will look like the following after a successful build:

Conclusion

Flutter makes it ease to build and deploy to multiple platforms and Xcode Cloud takes care of the signing for Apple platforms.

You can learn more about cd and flutter here.

Dynamic Themes with CodeMirror

Sun, 19 Jan 2025 23:52:54 GMT

Dynamic Themes with CodeMirror

In this article I will go over how to set up a Lit web component and use it to create a a code window that uses CodeMirror and apply a dynamic theme with Material Design.

TLDR The final source here and an online demo.

Prerequisites

Vscode
Node >= 16
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-ts

Then enter a project name codemirror-dynamic-theme and now open the project in vscode and install the dependencies:

cd codemirror-dynamic-theme
npm i lit codemirror @material/material-color-utilities
npm i -D @types/node @types/codemirror
code .

Update the vite.config.ts with the following:

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

export default defineConfig({
  base: "/codemirror-dynamic-theme/",
  build: {
    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" />
    <title>CodeMirror Dynamic Theme</title>
    <script type="module" src="/src/code-window.ts"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <code-window> </code-window>
  </body>
</html>

Web Component

Before we update our component we need to rename my-element.ts to code-window.ts

Open up code-window.ts and update it with the following:

import { html, css, LitElement, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators.js";
import {
  applyTheme,
  argbFromHex,
  hexFromArgb,
  themeFromSourceColor,
} from "@material/material-color-utilities";
import CodeMirror from "codemirror";
import codemirrorStyles from "codemirror/lib/codemirror.css";

@customElement("code-window")
export class CodeWindow extends LitElement {
  static styles = css`
    ${unsafeCSS(codemirrorStyles)}

    main {
      width: 100vw;
      height: 100vh;
      background-color: var(--md-sys-color-background);
      color: var(--md-sys-color-on-background);
      --header-height: 48px;
      --input-size: 32px;
    }

    .toolbar {
      height: var(--header-height);
      background-color: var(--md-sys-color-primary-container);
      color: var(--md-sys-color-on-primary-container);
      display: flex;
      align-items: center;
    }

    .actions > * {
      margin-left: 4px;
      margin-right: 4px;
    }

    .toolbar .title {
      font-family: sans-serif;
      font-size: 18px;
      padding-left: 4px;
    }

    .toolbar .actions {
      display: flex;
      align-items: center;
    }

    .toolbar a {
      padding: 0;
      margin: 0;
      padding-left: 8px;
      padding-right: 8px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    input[type="color"] {
      width: calc(var(--input-size) * 2);
      height: var(--input-size);
      outline: none;
      border: none;
      border-radius: 50%;
      background-color: var(--md-sys-color-primary-container);
    }
    input[type="color"]::-webkit-color-swatch-wrapper {
      padding: 0;
    }
    input[type="color"]::-webkit-color-swatch {
      border: none;
      border-radius: var(--input-size);
      border: var(--md-sys-color-outline) solid 1px;
    }

    button {
      border: none;
      border-radius: 4px;
      padding: 8px;
    }

    .tertiary {
      background-color: var(--md-sys-color-tertiary);
      color: var(--md-sys-color-on-tertiary);
    }

    .secondary {
      background-color: var(--md-sys-color-secondary);
      color: var(--md-sys-color-on-secondary);
    }

    .spacer {
      flex: 1;
    }

    .editor {
      height: calc(100% - var(--header-height));
      width: 100%;
    }
  `;

  @property() value = [
    `import {html, css, LitElement} from 'lit';`,
    `import {customElement, property} from 'lit/decorators.js';`,
    ``,
    `@customElement('simple-greeting')`,
    `export class SimpleGreeting extends LitElement {`,
    `  static styles = css\`p { color: blue }\`;`,
    ``,
    `  @property()`,
    `  name = 'Somebody';`,
    ``,
    `  render() {`,
    `    return html\`<p>Hello, \${this.name}!</p>\`;`,
    `  }`,
    `}`,
  ].join("\n");

  @property() color = "#6750A4";
  @property({ type: Boolean }) dark = window.matchMedia(
    "(prefers-color-scheme: dark)"
  ).matches;

  render() {
    return html`<main>
      <header class="toolbar">
        <div class="title">${document.title}</div>
        <div class="spacer"></div>
        <div class="actions">
          <button class="secondary" @click=${this.toggleDark.bind(this)}>
            ${this.dark ? "Light" : "Dark"}
          </button>
          <button class="tertiary" @click=${this.randomColor.bind(this)}>
            Random
          </button>
          <input
            type="color"
            .value=${this.color}
            @input=${this.onColor.bind(this)}
          />
        </div>
      </header>
      <div class="editor"></div>
    </main>`;
  }

  firstUpdated() {
    const root = this.shadowRoot!.querySelector(".editor") as HTMLElement;
    const editor = CodeMirror(root, {
      value: this.value,
      mode: "javascript",
      lineNumbers: true,
      lineWrapping: true,
      indentUnit: 4,
      tabSize: 4,
      indentWithTabs: true,
      autofocus: true,
    });
    console.debug(editor);
    editor.setSize("100%", `100%`);
    this.updateTheme();
    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", (e) => {
        this.dark = e.matches;
        this.updateTheme();
      });
  }

  private updateTheme() {
   // TODO: Generate Theme
  }

  private setColor(val: string) {
    this.color = val;
    this.updateTheme();
  }

  private onColor(e: Event) {
    const target = e.target as HTMLInputElement;
    this.setColor(target.value);
  }

  private randomColor() {
    const letters = "0123456789ABCDEF";
    let color = "#";
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    this.setColor(color);
  }

  private toggleDark() {
    this.dark = !this.dark;
    this.updateTheme();
  }

}

declare global {
  interface HTMLElementTagNameMap {
    "code-window": CodeWindow;
  }
}

Here we are setting up some of the editor basics to load in the styles needed for the basic layout.

There are also few methods that handle updating of properties on the element such as toggleDark and setColor. When you run the application you should see the following:

It doesn't look great yet, but now we can add a CodeMirror theme to import. Create a file src/theme.ts and update it with the following:

import { css } from "lit";

export const codeMirrorTheme = css`
  .CodeMirror {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
  }

  .CodeMirror-gutters {
    background: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    border: none;
  }

  .CodeMirror-guttermarker,
  .CodeMirror-guttermarker-subtle,
  .CodeMirror-linenumber {
    color: var(--md-sys-color-on-background);
  }

  .CodeMirror-cursor {
    border-left: 1px solid var(--md-sys-color-primary);
  }
  .cm-fat-cursor .CodeMirror-cursor {
    background-color: var(--md-sys-color-background);
  }
  .cm-animate-fat-cursor {
    background-color: var(--md-sys-color-background);
  }

  div.CodeMirror-selected {
    background: var(--md-sys-color-surface-variant);
  }

  .CodeMirror-focused div.CodeMirror-selected {
    background: var(--md-sys-color-surface-variant);
  }

  .CodeMirror-line::selection,
  .CodeMirror-line > span::selection,
  .CodeMirror-line > span > span::selection {
    background: var(--md-sys-color-surface-variant);
  }

  .CodeMirror-line::-moz-selection,
  .CodeMirror-line > span::-moz-selection,
  .CodeMirror-line > span > span::-moz-selection {
    background: var(--md-sys-color-surface-variant);
  }

  .CodeMirror-activeline-background {
    background: var(--md-sys-color-surface);
  }

  .cm-keyword {
    color: var(--md-custom-color-keyword) !important;
  }

  .cm-operator {
    color: var(--md-custom-color-operator) !important;
  }

  .cm-variable-2 {
    color: var(--md-custom-color-variable-2) !important;
  }

  .cm-variable-3,
  .cm-type {
    color: var(--md-custom-color-variable-3) !important;
  }

  .cm-builtin {
    color: var(--md-custom-color-builtin) !important;
  }

  .cm-atom {
    color: var(--md-custom-color-atom) !important;
  }

  .cm-number {
    color: var(--md-custom-color-number) !important;
  }

  .cm-def {
    color: var(--md-custom-color-def) !important;
  }

  .cm-string {
    color: var(--md-custom-color-string) !important;
  }

  .cm-string-2 {
    color: var(--md-custom-color-string-2) !important;
  }

  .cm-comment {
    color: var(--md-custom-color-comment) !important;
  }

  .cm-variable {
    color: var(--md-custom-color-variable) !important;
  }

  .cm-tag {
    color: var(--md-custom-color-tag) !important;
  }

  .cm-meta {
    color: var(--md-custom-color-meta) !important;
  }

  .cm-attribute {
    color: var(--md-custom-color-attribute) !important;
  }

  .cm-property {
    color: var(--md-custom-color-property) !important;
  }

  .cm-qualifier {
    color: var(--md-custom-color-qualifier) !important;
  }

  .cm-variable-3,
  .cm-type {
    color: var(--md-custom-color-variable-3) !important;
  }

  .cm-error {
    color: var(--md-sys-color-on-error);
    background-color: var(--md-sys-color-error);
  }

  .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: var(--md-sys-color-on-surface);
  }
`;

Here we are defining all the styles as CSS Custom Properties so we can easily update them.

Now import the theme and apply the styles in the component:

import { codeMirrorTheme } from "./theme";

@customElement("code-window")
export class CodeWindow extends LitElement {
  static styles = css`
    ${unsafeCSS(codemirrorStyles)}
    ${codeMirrorTheme}
    ...

Now we need to implement the updateTheme method in our element:

updateTheme() {
    const source = this.color;
    const dark = this.dark;
    const target = this.shadowRoot!.querySelector("main") as HTMLElement;
    const properties = [
        `--md-custom-color-keyword: #c75779;`,
        `--md-custom-color-operator: #008800;`,
        `--md-custom-color-variable: #90ccff;`,
        `--md-custom-color-variable-2: #dd7700;`,
        `--md-custom-color-variable-3: #3333bb;`,
        `--md-custom-color-variable-3: #decb6b;`,
        `--md-custom-color-builtin: #003388;`,
        `--md-custom-color-atom: #bb4646;`,
        `--md-custom-color-number: #b4c5ff;`,
        `--md-custom-color-def: #82aaff;`,
        `--md-custom-color-string: #ffb4a9;`,
        `--md-custom-color-string-2: #ffb4a9;`,
        `--md-custom-color-comment: #888888;`,
        `--md-custom-color-tag: #000080;`,
        `--md-custom-color-meta: #a9c7ff;`,
        `--md-custom-color-attribute: #008080;`,
        `--md-custom-color-property: #336699;`,
        `--md-custom-color-qualifier: #690;`,
    ];
    const customColors = properties.map((property) => {
        const [key, value] = property.split(":");
        const name = key.trim().replace(/^--md-custom-color-/, "");
        const color = argbFromHex(value.trim().replace(";", ""));
        return {
        name,
        value: color,
        blend: true,
        };
    });
    const theme = themeFromSourceColor(argbFromHex(source), customColors);
    applyTheme(theme, { target, dark });
    for (const custom of theme.customColors) {
        const name = custom.color.name;
        const section = dark ? custom.dark : custom.light;
        target.style.setProperty(
        `--md-custom-color-${name}`,
        hexFromArgb(section.color)
        );
    }
}

Here we are using the Material Color Utilities package and generating a theme from a source color. We can take advantage of Custom Colors to blend the values to the theme.

After the theme is generated we can apply them to the root element and have the custom properties update the editor.

Changing the source color can update the theme:

Changing the brightness can set the colors as well:

Conclusion

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

The source for this example can be found here.

If you want to check out dynamic themes for VSCode I created an extension here.

Lit and Figma

Mon, 20 Jan 2025 02:00:23 GMT

Lit and Figma

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_example
cd 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.json
touch 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 /src/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 src
cd src
touch my-app.ts
touch code.ts
touch ui.ts
cd ..

Open /src/ui.ts and paste the following:

import "./my-app";

Open /src/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 {
  @property() amount = "5";
  @query("#count") countInput!: HTMLInputElement;

  render() {
    return html`
      <div>
        <h2>Rectangle Creator</h2>
        <p>Count: <input id="count" value="${this.amount}" /></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.

WASM Support

If there is a heavy computation that could benefit from running in WebAssembly the following will ensure that it is hardware accelerated when possible.

Let's add AssemblyScript and some dependencies that will be used for loading the WASM into the figma ui.

npm i @assemblyscript/loader
npm i --D assemblyscript js-inline-wasm
npx asinit .

Confirm yes to the prompt to have it generate the project files and add the following to the scripts in package.json:

"asbuild:untouched": "asc assembly/index.ts --target debug",
"asbuild:optimized": "asc assembly/index.ts --target release",
"asbuild": "npm run asbuild:untouched && npm run asbuild:optimized",
"inlinewasm": "inlinewasm build/optimized.wasm --output src/wasm.ts",

The code that will be used for the WASM is in /assembly/index.ts and it should show the following:

// The entry file of your WebAssembly module.

export function add(a: i32, b: i32): i32 {
  return a + b;
}

Now let's build the wasm module:

npm run asbuild

For the wasm build to be ignored for git add the following to .gitignore:

build

This will generate the wasm and wat files in the build directory, but for figma to load them into the ui it needs to be inlined so run the following command to generate the js from the wasm file:

npm run inlinewasm

This should generate src/wasm.ts with the following:

const encoded = 'AGFzbQEAAAABBwFgAn9/AX8DAgEABQMBAAAHEAIDYWRkAAAGbWVtb3J5AgAKCQEHACAAIAFqCwAmEHNvdXJjZU1hcHBpbmdVUkwULi9vcHRpbWl6ZWQud2FzbS5tYXA=';
export default new Promise(resolve => {
    const decoded = atob(encoded);
    const len = decoded.length;
    const bytes = new Uint8Array(len);
    for (var i = 0; i < len; i++) {
        bytes[i] = decoded.charCodeAt(i);
    }
    resolve(new Response(bytes, { status: 200, headers: { "Content-Type": "application/wasm" } }));
});

Now open up the /src/my-app.ts and update with the following:

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

@customElement("my-app")
export class MyApp extends LitElement {
  @property() amount = "5"; // <-- Pass in a value for the number of rectangles to create
  @query("#count") countInput!: HTMLInputElement;

  render() {
    return html`
      <div>
        <h2>Rectangle Creator</h2>
        <!-- Pass in the amount to the input value -->
        <p>Count: <input id="count" value="${this.amount}" /></p>
        ...
      </div>
    `;
  }
  ...
}

This will let us pass in the amount of boxes to create externally.

Now open /src/ui.ts and update it with the following:

import "./my-app";

import wasm from "./wasm"; // <-- Our WASM file to load

WebAssembly.instantiateStreaming(wasm as Promise<Response>).then((obj) => {
  // @ts-ignore
  const value: number = obj.instance.exports.add(2, 4);
  console.log("return from wasm", value);
  const elem = document.querySelector('my-app')! as HTMLElement;
  elem.setAttribute('amount', `${value}`);
});

Now when we build the plugin and run it in figma the amount of boxes will be the result of calling into wasm!

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.

Draggable DOM with Lit

Sun, 19 Jan 2025 08:19:15 GMT

Draggable DOM with Lit

In this article I will go over how to set up a Lit web component and use it to create a interactive dom with CSS transforms and slots.

TLDR The final source here and an online demo.

Prerequisites

Vscode
Node >= 16
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-ts

Then enter a project name lit-draggable-dom and now open the project in vscode and install the dependencies:

cd lit-draggable-dom
npm i lit
npm i -D @types/node
code .

Update the vite.config.ts with the following:

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

export default defineConfig({
  base: "/lit-draggable-dom/",
  build: {
    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" />
    <title>Lit Draggable DOM</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
      }
    </style>
    <script type="module" src="/src/draggable-dom.ts"></script>
  </head>
  <body>
    <draggable-dom>
      <img
        src="https://lit.dev/images/logo.svg"
        alt="Lit Logo"
        width="500"
        height="333"
        style="--dx: 59.4909px; --dy: 32.8429px"
      />
      <svg width="400" height="110" style="--dx: 230.057px; --dy: 33.6257px">
        <rect
          width="400"
          height="100"
          style="fill: rgb(0, 0, 255); stroke-width: 3; stroke: rgb(0, 0, 0)"
        />
      </svg>
      <svg height="100" width="100">
        <circle
          cx="50"
          cy="50"
          r="40"
          stroke="black"
          stroke-width="3"
          fill="red"
        />
      </svg>
    </draggable-dom>
  </body>
</html>

We are setting up the lit-element to have a few slots which can be any valid HTML or SVG Elements.

It is optional to set the css custom properties --dx and --dy as this is just the initial positions on the canvas.

Web Component

Before we update our component we need to rename my-element.ts to draggable-dom.ts

Open up draggable-dom.ts and update it with the following:

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

type DragType = "none" | "canvas" | "element";
type SupportedNode = HTMLElement | SVGElement;

@customElement("draggable-dom")
export class CSSCanvas extends LitElement {
  @query("main") root!: HTMLElement;
  @query("#children") container!: HTMLElement;
  @query("canvas") canvas!: HTMLCanvasElement;
  dragType: DragType = "none";
  offset: Offset = { x: 0, y: 0 };
  pointerMap: Map<number, PointerData> = new Map();

  static styles = css`
    :host {
      --offset-x: 0;
      --offset-y: 0;
      --grid-background-color: white;
      --grid-color: black;
      --grid-size: 40px;
      --grid-dot-size: 1px;
    }
    main {
      overflow: hidden;
    }
    canvas {
      background-size: var(--grid-size) var(--grid-size);
      background-image: radial-gradient(
        circle,
        var(--grid-color) var(--grid-dot-size),
        var(--grid-background-color) var(--grid-dot-size)
      );
      background-position: var(--offset-x) var(--offset-y);
      z-index: 0;
    }
    .full-size {
      width: 100%;
      height: 100%;
      position: fixed;
    }
    .child {
      --dx: 0px;
      --dy: 0px;
      position: fixed;
      flex-shrink: 1;
      z-index: var(--layer, 0);
      transform: translate(var(--dx), var(--dy));
    }
    @media (prefers-color-scheme: dark) {
      main {
        --grid-background-color: black;
        --grid-color: grey;
      }
    }
  `;

  render() {
    return html`
      <main class="full-size">
        <canvas class="full-size"></canvas>
        <div id="children" class="full-size"></div>
      </main>
    `;
  }
}

interface Offset {
  x: number;
  y: number;
}

interface PointerData {
  id: number;
  startPos: Offset;
  currentPos: Offset;
}

Here we are just setting up some boilerplate to render a main element with a canvas element as a background and the div element to contain the canvas elements.

We are also making sure to clip and only render what is visible.

The Offset and PointerData interfaces will be used for storing the location of each pointer interacting with the screen.

When the user has dark mode enabled for the system it will change the colors of the canvas grid.

Now let's add the slot children to the canvas by adding the following to the class:

async firstUpdated() {
    const items = Array.from(this.childNodes);
    let i = 0;
    for (const node of items) {
        if (node instanceof SVGElement || node instanceof HTMLElement) {
            const child = node as SupportedNode;
            child.classList.add("child");
            child.style.setProperty("--layer", `${i}`);
            this.container.append(child);
            child.addEventListener("pointerdown", (e: any) => {
                // Pointer Down for Child
            });
            child.addEventListener("pointermove", (e: any) => {
                // Pointer Move for Child
            });
            i++;
        }
    }
    this.requestUpdate();
    this.root.addEventListener("pointerdown", (e: any) => {
        // Pointer Down for Canvas
    });
    this.root.addEventListener("pointermove", (e: any) => {
        // Pointer Move for Canvas
    });
    this.root.addEventListener("pointerup", (e: any) => {
        // Pointer Up for Canvas
    });
}

The order of the slots defines what renders on top of each other. For each item in the slot it sets--layer and z-index to the current index.

Currently nothing is happening when we interact with the elements but things should be rendering.

Now let's add the event handlers for the pointer events by appending the following to the class:

handleDown(event: PointerEvent, type: DragType) {
    if (this.dragType === "none") {
        event.preventDefault();
        this.dragType = type;
        (event.target as Element).setPointerCapture(event.pointerId);
        this.pointerMap.set(event.pointerId, {
            id: event.pointerId,
            startPos: { x: event.clientX, y: event.clientY },
            currentPos: { x: event.clientX, y: event.clientY },
        });
    }
}

handleMove(
    event: PointerEvent,
    type: DragType,
    onMove: (delta: Offset) => void
) {
    if (this.dragType === type) {
        event.preventDefault();
        const saved = this.pointerMap.get(event.pointerId)!;
        const current = { ...saved.currentPos };
        saved.currentPos = { x: event.clientX, y: event.clientY };
        const delta = {
            x: saved.currentPos.x - current.x,
            y: saved.currentPos.y - current.y,
        };
        onMove(delta);
    }
}

handleUp(event: PointerEvent) {
    this.dragType = "none";
    (event.target as Element).releasePointerCapture(event.pointerId);
}

For each event we want to check if the current event canvas or element so if we start moving an element it doesn't move the canvas and vice versa.

When we have a pointer interact with the screen we will add it to the pointer map (since it can be multi touch) and start tracking the offset.

The delta is calculated to move the elements but a global offset is used for the canvas background.

We are setting the pointer capture events so if the mouse is not perfectly on the item it won't lose tracking.

Now let's add methods for moving the canvas and elements by appending the following to the class:

moveCanvas(delta: Offset) {
    this.offset.x += delta.x;
    this.offset.y += delta.y;
    this.root.style.setProperty("--offset-x", `${this.offset.x}px`);
    this.root.style.setProperty("--offset-y", `${this.offset.y}px`);
}

moveElement(child: SupportedNode, delta: Offset) {
    const getNumber = (key: "--dx" | "--dy", fallback: number) => {
      const saved = child.style.getPropertyValue(key);
      if (saved.length > 0) {
        return parseFloat(saved.replace("px", ""));
      }
      return fallback;
    };
    const dx = getNumber("--dx", 0) + delta.x;
    const dy = getNumber("--dy", 0) + delta.y;
    child.style.transform = `translate(${dx}px, ${dy}px)`;
    child.style.setProperty("--dx", `${dx}px`);
    child.style.setProperty("--dy", `${dy}px`);
}

For the canvas it will set a global offset for the CSS background-position and update the saved offset.

For the element we want to transform by the delta so the animation is smooth thanks to hardware acceleration. After the transform it will store the offset as CSS custom properties.

Now let's add the event handlers to the canvas and elements by adjusting the following:

async firstUpdated() {
    const items = Array.from(this.childNodes);
    let i = 0;
    for (const node of items) {
      if (node instanceof SVGElement || node instanceof HTMLElement) {
        const child = node as SupportedNode;
        child.classList.add("child");
        child.style.setProperty("--layer", `${i}`);
        this.container.append(child);
        child.addEventListener("pointerdown", (e: any) => {
          this.handleDown(e, "element");
        });
        child.addEventListener("pointermove", (e: any) => {
          this.handleMove(e, "element", (delta) => {
            this.moveElement(child, delta);
          });
        });
        i++;
      }
    }
    this.requestUpdate();
    this.root.addEventListener("pointerdown", (e: any) => {
      this.handleDown(e, "canvas");
    });
    this.root.addEventListener("pointermove", (e: any) => {
      this.handleMove(e, "canvas", (delta) => {
        this.moveCanvas(delta);
        for (const node of Array.from(this.container.children)) {
          if (node instanceof SVGElement || node instanceof HTMLElement) {
            this.moveElement(node, delta);
          }
        }
      });
    });
    this.root.addEventListener("pointerup", (e: any) => {
      this.handleUp(e);
    });
}

Everything should work as expected now and the final code should look like the following:

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

type DragType = "none" | "canvas" | "element";
type SupportedNode = HTMLElement | SVGElement;

@customElement("draggable-dom")
export class DraggableDOM extends LitElement {
  @query("main") root!: HTMLElement;
  @query("#children") container!: HTMLElement;
  @query("canvas") canvas!: HTMLCanvasElement;
  dragType: DragType = "none";
  offset: Offset = { x: 0, y: 0 };
  pointerMap: Map<number, PointerData> = new Map();

  static styles = css`
    :host {
      --offset-x: 0;
      --offset-y: 0;
      --grid-background-color: white;
      --grid-color: black;
      --grid-size: 40px;
      --grid-dot-size: 1px;
    }
    main {
      overflow: hidden;
    }
    canvas {
      background-size: var(--grid-size) var(--grid-size);
      background-image: radial-gradient(
        circle,
        var(--grid-color) var(--grid-dot-size),
        var(--grid-background-color) var(--grid-dot-size)
      );
      background-position: var(--offset-x) var(--offset-y);
      z-index: 0;
    }
    .full-size {
      width: 100%;
      height: 100%;
      position: fixed;
    }
    .child {
      --dx: 0px;
      --dy: 0px;
      position: fixed;
      flex-shrink: 1;
      z-index: var(--layer, 0);
      transform: translate(var(--dx), var(--dy));
    }
    @media (prefers-color-scheme: dark) {
      main {
        --grid-background-color: black;
        --grid-color: grey;
      }
    }
  `;

  render() {
    console.log("render");
    return html`
      <main class="full-size">
        <canvas class="full-size"></canvas>
        <div id="children" class="full-size"></div>
      </main>
    `;
  }

  handleDown(event: PointerEvent, type: DragType) {
    if (this.dragType === "none") {
      event.preventDefault();
      this.dragType = type;
      (event.target as Element).setPointerCapture(event.pointerId);
      this.pointerMap.set(event.pointerId, {
        id: event.pointerId,
        startPos: { x: event.clientX, y: event.clientY },
        currentPos: { x: event.clientX, y: event.clientY },
      });
    }
  }

  handleMove(
    event: PointerEvent,
    type: DragType,
    onMove: (delta: Offset) => void
  ) {
    if (this.dragType === type) {
      event.preventDefault();
      const saved = this.pointerMap.get(event.pointerId)!;
      const current = { ...saved.currentPos };
      saved.currentPos = { x: event.clientX, y: event.clientY };
      const delta = {
        x: saved.currentPos.x - current.x,
        y: saved.currentPos.y - current.y,
      };
      onMove(delta);
    }
  }

  handleUp(event: PointerEvent) {
    this.dragType = "none";
    (event.target as Element).releasePointerCapture(event.pointerId);
  }

  moveCanvas(delta: Offset) {
    this.offset.x += delta.x;
    this.offset.y += delta.y;
    this.root.style.setProperty("--offset-x", `${this.offset.x}px`);
    this.root.style.setProperty("--offset-y", `${this.offset.y}px`);
  }

  moveElement(child: SupportedNode, delta: Offset) {
    const getNumber = (key: "--dx" | "--dy", fallback: number) => {
      const saved = child.style.getPropertyValue(key);
      if (saved.length > 0) {
        return parseFloat(saved.replace("px", ""));
      }
      return fallback;
    };
    const dx = getNumber("--dx", 0) + delta.x;
    const dy = getNumber("--dy", 0) + delta.y;
    child.style.transform = `translate(${dx}px, ${dy}px)`;
    child.style.setProperty("--dx", `${dx}px`);
    child.style.setProperty("--dy", `${dy}px`);
  }

  async firstUpdated() {
    const items = Array.from(this.childNodes);
    let i = 0;
    for (const node of items) {
      if (node instanceof SVGElement || node instanceof HTMLElement) {
        const child = node as SupportedNode;
        child.classList.add("child");
        child.style.setProperty("--layer", `${i}`);
        this.container.append(child);
        child.addEventListener("pointerdown", (e: any) => {
          this.handleDown(e, "element");
        });
        child.addEventListener("pointermove", (e: any) => {
          this.handleMove(e, "element", (delta) => {
            this.moveElement(child, delta);
          });
        });
        child.setAttribute("draggable", "false");
        i++;
      }
    }
    this.requestUpdate();
    this.root.addEventListener("pointerdown", (e: any) => {
      this.handleDown(e, "canvas");
    });
    this.root.addEventListener("pointermove", (e: any) => {
      this.handleMove(e, "canvas", (delta) => {
        this.moveCanvas(delta);
        for (const node of Array.from(this.container.children)) {
          if (node instanceof SVGElement || node instanceof HTMLElement) {
            this.moveElement(node, delta);
          }
        }
      });
    });
    this.root.addEventListener("touchstart", function (e) {
      e.preventDefault();
    });
    this.root.addEventListener("pointerup", (e: any) => {
      this.handleUp(e);
    });
  }
}

interface Offset {
  x: number;
  y: number;
}

interface PointerData {
  id: number;
  startPos: Offset;
  currentPos: Offset;
}

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.

2D or 3D Force Graph with Lit

Sun, 19 Jan 2025 06:03:11 GMT

2D or 3D Force Graph with Lit

In this article we will cover how to create a 2D/3D force graph using Lit.

TLDR The final source here and an online demo.

Prerequisites

Vscode
Node >= 16
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-ts

Then enter a project name lit-force-graph and now open the project in vscode and install the dependencies:

cd lit-force-graph force-graph
npm i lit 3d-force-graph
npm i -D @types/node
code .

Update the vite.config.ts with the following:

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

export default defineConfig({
  base: "/lit-force-graph/",
  build: {
    lib: {
      entry: "src/lit-force-graph.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" />
    <title>Lit Force Graph</title>
    <script type="module" src="/src/lit-force-graph.ts"></script>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <lit-force-graph>
      <script type="application/json">
        {
          "name": "Lit Force Graph",
          "description": "A force graph built with Lit",
          "nodes": [
            {
              "id": "1",
              "name": "Node 1"
            },
            {
              "id": "2",
              "name": "Node 2"
            },
            {
              "id": "3",
              "name": "Node 3"
            },
            {
              "id": "4",
              "name": "Node 4"
            }
          ],
          "links": [
            {
              "source": "1",
              "target": "2"
            },
            {
              "source": "1",
              "target": "3"
            },
            {
              "source": "2",
              "target": "3"
            },
            {
              "source": "2",
              "target": "4"
            },
            {
              "source": "3",
              "target": "4"
            },
            {
              "source": "4",
              "target": "1"
            }
          ]
        }
      </script>
    </lit-force-graph>
  </body>
</html>

We are passing the graph data as JSON here, but we could also set a src attribute pointed to a remote or local file. It is still possible to set the graph data directly on a component.

Styles

Create and open the public/style.css file and update it with the following:

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: 12px;
  font-family: sans-serif;
  position: relative;
  width: 100%;
  height: 100%;
}

lit-force-graph {
  width: 100%;
  height: 100vh;
}

:root {
  --graph-background-color: #eee;
  --graph-foreground-color: #000;
  --graph-line-color: rgb(90, 90, 90);
  --graph-node-color: rgb(218, 14, 14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --graph-background-color: #000;
    --graph-foreground-color: #fafafa;
    --graph-line-color: rgb(214, 214, 214);
    --graph-node-color: rgb(228, 8, 8);
  }
}

Web Component

Before we update our component we need to rename my-element.ts to lit-force-graph.ts

Open up lit-force-graph.ts and update it with the following:

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

export const tagName = "lit-force-graph";

@customElement(tagName)
export class LitForceGraph extends LitElement {
  static styles = css`
    :host {
      background-color: var(--graph-background-color, #000011);
      color: var(--graph-foreground-color, #ffffff);
      width: var(--graph-width, 100%);
      height: var(--graph-height, 100vh);
    }

    #graph {
      width: 100%;
      height: 100%;
      width: var(--graph-width, 100%);
      height: var(--graph-height, 100vh);
    }

    #controls {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 100 !important;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    #controls div {
      padding: 5px;
    }

    #info {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 100 !important;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    #tooltips {
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: center;
      justify-content: center;
    }

    .node-tooltip {
      background-color: var(--graph-foreground-color, #ffffff);
      color: var(--graph-background-color, #000011);
      border-radius: 5px;
      font-size: 12px;
      padding: 5px;
      opacity: 0.67;
    }

    #graph-description {
      opacity: 0.67;
    }

    .scene-tooltip {
      color: var(--graph-foreground-color, #ffffff);
      background-color: transparent;
      display: none;
    }
  `;

  @query("#graph") graph!: HTMLElement;
  @property() src = "";
  @property() mode = "2D";

  render() {
    return html` <main
      accept="application/json"
      @drop="${this.onDrop}"
      @dragover="${(e: Event) => e.preventDefault()}"
    >
      <div id="graph"></div>
      <div id="controls">
        <div>
          <label for="render-mode">Render mode</label>
          <select id="render-mode" @change=${this.onChangeMode}>
            <!-- TODO: Add render options -->
          </select>
        </div>
      </div>
      <div id="info">
        <!-- TODO: Add labels for graph -->
      </div>
      <div id="tooltips">
        <!-- TODO: Add tooltip for node -->
      </div>
    </main>`;
  }

  override async firstUpdated() {
    await this.refresh();
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
    prefersDark.addEventListener("change", () => {
      this.refresh();
    });
  }

  override attributeChangedCallback(
    name: string,
    _old: string | null,
    value: string | null
  ): void {
    if (name === "src" && value) {
      this.refresh();
    }
    if (name === "data" && value) {
      this.setData(JSON.parse(value));
    }
    if (name === "mode" && value) {
      this.mode = value;
      if (this.data) {
        this.setData({ ...this.data! });
      }
    }
    super.attributeChangedCallback(name, _old, value);
  }

  /**
   * Set the graph data and update the renderer
   *
   * @param data Graph JSON
   */
  setData(data: GraphData) {
    this.data = data;
    // TODO: Render the graph!
  }

  private async refresh() {
    // Get json from script tag
    const children = Array.from(this.children);
    const elem = children.find((child) => child.tagName === "SCRIPT");
    if (elem) {
      // Render from script tag contents
      if (elem.textContent) {
        const data = JSON.parse(elem.textContent);
        if (data) this.setData(data);
        // Render from script tag src
      } else if (elem.hasAttribute("src")) {
        const url = elem.getAttribute("src")!;
        const data = await fetch(url).then((res) => res.json());
        if (data) this.setData(data);
      }
    } else if (this.src.length > 0) {
      // Render from src attribute
      const data = await fetch(this.src).then((res) => res.json());
      if (data) this.setData(data);
    }
  }

  private onDrop(e: DragEvent) {
    e.preventDefault();
    const files = e.dataTransfer?.files;
    if (files && files.length > 0) {
      const file = files[0];
      const reader = new FileReader();
      reader.onload = () => {
        const json = JSON.parse(reader.result as string);
        this.data = json;
        this.setData(json);
      };
      reader.readAsText(file);
    }
    return false;
  }

  private onChangeMode(e: Event) {
    const mode = (e.target as HTMLSelectElement).value;
    this.mode = mode;
    if (!this.data) return;
    this.setData({ ...this.data! });
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "lit-force-graph": LitForceGraph;
  }
}

Here we are creating the base component and wiring it up to listen for a drop event of JSON, accept the src attribute or script tag with json in the text contents.

The CSS just sets the tooltip at the bottom of the screen, title to the left and the render selection controls to the top right.

With Lit it makes it easy to support multiple ways to set the data of the component.

Inline

<lit-source-graph>
  <script type="application/json">
    {
      "nodes": [],
      "links": []
    }
  </script>
</lit-source-graph>

Lazy Loading

<lit-source-graph></lit-source-graph>
<script>
  const elem = document.createElement("lit-source-graph");
  elem.src = "./graph-data.json";
  // Or remote url
  elem.src = "https://example.com/graph-data.json";
  // Or data from an object
  elem.data = { node: [], links: [] };
</script>

Graph Data

Create and open the file src/classes/graph.ts and add the following:

export class Graph {
  private ids = new Set();
  private graph: GraphData = {
    nodes: [],
    links: [],
  };

  addNode<T = any>(node: GraphNode<T>) {
    if (this.ids.has(node.id)) {
      return this.graph.nodes.find((n) => n.id === node.id)!;
    }
    this.ids.add(node.id);
    this.graph.nodes.push(node);
    return node;
  }

  addLink<T = any>(link: GraphLink<T>) {
    this.graph.links.push(link);
    return link;
  }

  toJSON() {
    return this.graph;
  }
}

export interface GraphNode<T = any> {
  id: string;
  name?: string;
  group?: string;
  value?: T;
}

export interface GraphLink<T = any> {
  source: string;
  target: string;
  name?: string;
  value?: T;
}

export interface GraphData<A = any, B = any> {
  name?: string;
  description?: string;
  nodes: GraphNode<A>[];
  links: GraphLink<B>[];
}

Here we are creating a utility class that can generate the nodes and links while excluding duplicates and returning the graph data.

Create and open the file src/classes/context.ts and add the following:

import { GraphData, GraphNode } from "./graph";

export interface RenderContext {
  data: GraphData;
  element: HTMLElement;
  onHover: (node?: GraphNode) => void;
}

export type Renderer = (context: RenderContext) => void;

Here is the context type that we will use to create the renderers and pass with the data.

2D Renderer

Create and open the file src/renderers/mode-2d.ts and add the following:

import ForceGraph from "force-graph";
import { RenderContext } from "../classes/context";

export function render(context: RenderContext) {
  const graph = ForceGraph();
  const style = getComputedStyle(context.element);
  const lineColor = style.getPropertyValue("--graph-line-color").trim();
  const bgColor = style.getPropertyValue("--graph-background-color").trim();
  const fgColor = style.getPropertyValue("--graph-foreground-color").trim();
  const nodeColor = style.getPropertyValue("--graph-node-color").trim();
  graph(context.element)
    .graphData(context.data)
    .width(Number(style.width.slice(0, -2)))
    .height(Number(style.height.slice(0, -2)))
    .cooldownTicks(100)
    .backgroundColor(bgColor)
    .linkColor(() => lineColor)
    .linkWidth(0.2)
    .nodeCanvasObject((node: any, ctx, globalScale) => {
      // Draw a circle
      ctx.beginPath();
      const size = 5 / globalScale;
      ctx.arc(node.x, node.y, size, 0, 2 * Math.PI);
      //   ctx.fillStyle = nodeColor(node, groupColors);
      ctx.fillStyle = nodeColor;
      ctx.fill();
      ctx.lineWidth = 1 / globalScale;
      ctx.strokeStyle = lineColor;
      ctx.stroke();

      if (globalScale >= 4) {
        const label = node.name ?? node.id;
        const fontSize = 12 / globalScale;
        ctx.font = `${fontSize}px Sans-Serif`;
        const textWidth = ctx.measureText(label).width;
        const bckgDimensions = [textWidth, fontSize].map(
          (n) => n + fontSize * 0.2
        ); // some padding

        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = fgColor;
        // Measure text
        ctx.fillText(label, node.x + size * 2 + textWidth / 2, node.y);

        node.__bckgDimensions = bckgDimensions;
      }
    })
    .onNodeHover((node: any, prev: any) => {
      if (node) {
        const graphNode = context.data.nodes.find((n) => n.id === node.id);
        context.onHover(graphNode);
      }
      if (prev) {
        context.onHover(undefined);
      }
    });
}

Here we are importing the context and creating the boilerplate for the 2D renderer. When the scale is greater than 4 we draw the node name to add a little more detail.

Notice that on node hover we are calling the onHover callback with the hovered node and we are using custom properties to render the colors.

3D Renderer

Create and open the file src/renderers/mode-3d.ts and add the following:

import ForceGraph from "3d-force-graph";
import { RenderContext } from "../classes/context.js";

export function render(context: RenderContext) {
  const graph = ForceGraph({
    controlType: "trackball",
    rendererConfig: { antialias: true, alpha: true },
  });
  const style = getComputedStyle(context.element);
  const lineColor = style.getPropertyValue("--graph-line-color").trim();
  const bgColor = style.getPropertyValue("--graph-background-color").trim();
  const nodeColor = style.getPropertyValue("--graph-node-color").trim();
  graph(context.element)
    .graphData(context.data)
    .width(Number(style.width.slice(0, -2)))
    .height(Number(style.height.slice(0, -2)))
    .showNavInfo(false)
    .linkColor(() => lineColor)
    .backgroundColor(bgColor)
    .nodeThreeObject((node: any) => {
      const color = node.color ?? nodeColor;
      node.color = color;
      return false as any;
    })
    .nodeThreeObjectExtend(true)
    .onNodeHover((node: any, prev: any) => {
      if (node) {
        const graphNode = context.data.nodes.find((n) => n.id === node.id);
        context.onHover(graphNode);
      }
      if (prev) {
        context.onHover(undefined);
      }
    })
    .cooldownTicks(100);
}

We are almost doing the same thing as the 2D renderer but creating it with Three.js instead.

Rendering

Now open up src/lit-force-graph.ts and the imports for the renderers and graph/context classes we created:

// ...
import { Renderer } from "./classes/context";
import { GraphData, GraphNode } from "./classes/graph";
import { render as render2D } from "./modes/mode-2d";
import { render as render3D } from "./modes/mode-3d";
// ...

Now add the property for the graph data and the renderers in the class:

  @property({ type: Object }) data?: GraphData;
  @state() hovered?: GraphNode;

  renderers = new Map<string, Renderer>([
    ["2D", render2D],
    ["3D", render3D],
  ]);

Update setData to render with the current renderer:

setData(data: GraphData) {
    this.data = data;
    const renderer = this.renderers.get(this.mode);
    renderer?.({
        element: this.graph,
        data,
        onHover: (node) => (this.hovered = node),
    });
}

And finally update the render method to show the graph title and currently hovered node:

render() {
    return html` <main
      accept="application/json"
      @drop="${this.onDrop}"
      @dragover="${(e: Event) => e.preventDefault()}"
    >
      <div id="graph"></div>
      <div id="controls">
        <div>
          <label for="render-mode">Render mode</label>
          <select id="render-mode" @change=${this.onChangeMode}>
            ${Array.from(this.renderers.keys()).map((mode) => {
              return html` <option value="${mode}">${mode}</option> `;
            })}
          </select>
        </div>
      </div>
      <div id="info">
        <h2 id="graph-name">${this.data?.name}</h2>
        <div id="graph-description">${this?.data?.description}</div>
      </div>
      <div id="tooltips">
        ${this.hovered
          ? html` <div class="node-tooltip">
              ${this.hovered?.name ?? this.hovered?.id}
            </div>`
          : html``}
      </div>
    </main>`;
}

Final Code

If everything was added correctly it should look like this:

import { html, css, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators.js";
import { Renderer } from "./classes/context";
import { GraphData, GraphNode } from "./classes/graph";
import { render as render2D } from "./modes/mode-2d";
import { render as render3D } from "./modes/mode-3d";

export const tagName = "lit-force-graph";

@customElement(tagName)
export class LitForceGraph extends LitElement {
  static styles = css`
    :host {
      background-color: var(--graph-background-color, #000011);
      color: var(--graph-foreground-color, #ffffff);
      width: var(--graph-width, 100%);
      height: var(--graph-height, 100vh);
    }

    #graph {
      width: 100%;
      height: 100%;
      width: var(--graph-width, 100%);
      height: var(--graph-height, 100vh);
    }

    #controls {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 100 !important;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    #controls div {
      padding: 5px;
    }

    #info {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 100 !important;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    #tooltips {
      position: absolute;
      bottom: 10px;
      left: 10px;
      right: 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: center;
      justify-content: center;
    }

    .node-tooltip {
      background-color: var(--graph-foreground-color, #ffffff);
      color: var(--graph-background-color, #000011);
      border-radius: 5px;
      font-size: 12px;
      padding: 5px;
      opacity: 0.67;
    }

    #graph-description {
      opacity: 0.67;
    }

    .scene-tooltip {
      color: var(--graph-foreground-color, #ffffff);
      background-color: transparent;
      display: none;
    }
  `;

  @query("#graph") graph!: HTMLElement;
  @property() src = "";
  @property() mode = "2D";
  @property({ type: Object }) data?: GraphData;
  @state() hovered?: GraphNode;

  renderers = new Map<string, Renderer>([
    ["2D", render2D],
    ["3D", render3D],
  ]);

  render() {
    return html` <main
      accept="application/json"
      @drop="${this.onDrop}"
      @dragover="${(e: Event) => e.preventDefault()}"
    >
      <div id="graph"></div>
      <div id="controls">
        <div>
          <label for="render-mode">Render mode</label>
          <select id="render-mode" @change=${this.onChangeMode}>
            ${Array.from(this.renderers.keys()).map((mode) => {
              return html` <option value="${mode}">${mode}</option> `;
            })}
          </select>
        </div>
      </div>
      <div id="info">
        <h2 id="graph-name">${this.data?.name}</h2>
        <div id="graph-description">${this?.data?.description}</div>
      </div>
      <div id="tooltips">
        ${this.hovered
          ? html` <div class="node-tooltip">
              ${this.hovered?.name ?? this.hovered?.id}
            </div>`
          : html``}
      </div>
    </main>`;
  }

  async firstUpdated() {
    await this.refresh();
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
    prefersDark.addEventListener("change", () => {
      this.refresh();
    });
  }

  /**
   * Set the graph data and update the renderer
   *
   * @param data Graph JSON
   */
  setData(data: GraphData) {
    this.data = data;
    const renderer = this.renderers.get(this.mode);
    renderer?.({
      element: this.graph,
      data,
      onHover: (node) => (this.hovered = node),
    });
  }

  private async refresh() {
    // Get json from script tag
    const children = Array.from(this.children);
    const elem = children.find((child) => child.tagName === "SCRIPT");
    if (elem) {
      // Render from script tag contents
      if (elem.textContent) {
        const data = JSON.parse(elem.textContent);
        if (data) this.setData(data);
        // Render from script tag src
      } else if (elem.hasAttribute("src")) {
        const url = elem.getAttribute("src")!;
        const data = await fetch(url).then((res) => res.json());
        if (data) this.setData(data);
      }
    } else if (this.src.length > 0) {
      // Render from src attribute
      const data = await fetch(this.src).then((res) => res.json());
      if (data) this.setData(data);
    }
  }

  private onChangeMode(e: Event) {
    const mode = (e.target as HTMLSelectElement).value;
    this.mode = mode;
    if (!this.data) return;
    this.setData({ ...this.data! });
  }

  private onDrop(e: DragEvent) {
    e.preventDefault();
    const files = e.dataTransfer?.files;
    if (files && files.length > 0) {
      const file = files[0];
      const reader = new FileReader();
      reader.onload = () => {
        const json = JSON.parse(reader.result as string);
        this.data = json;
        this.setData(json);
      };
      reader.readAsText(file);
    }
    return false;
  }

  attributeChangedCallback(
    name: string,
    _old: string | null,
    value: string | null
  ): void {
    if (name === "src" && value) {
      this.refresh();
    }
    if (name === "data" && value) {
      this.setData(JSON.parse(value));
    }
    if (name === "mode" && value) {
      this.mode = value;
      if (this.data) {
        this.setData({ ...this.data! });
      }
    }
    super.attributeChangedCallback(name, _old, value);
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "lit-force-graph": LitForceGraph;
  }
}

2D Light:

2D Dark:

3D Light:

3D Dark:

Conclusion

Now you can render the complex data structures with ease using web components!

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

The source for this example can be found here.

Building A Piano with Flutter

Sun, 19 Jan 2025 06:48:38 GMT

Building A Piano with Flutter

This piano uses only 5032 bytes of Dart Code!

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

TLDR The final source here and an online demo.

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: flutter 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:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.rodydavis.flutter_piano">

    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutter_piano"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:screenOrientation="landscape"
            android:windowSoftInputMode="adjustResize">
            <!-- This keeps the window background of the activity showing
                 until Flutter renders its first frame. It can be removed if
                 there is no splash screen (such as the default splash screen
                 defined in @style/LaunchTheme). -->
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

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

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

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()

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: 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(),
    );
  }
}

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(),

and 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:

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();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter Piano")),
      ),
    );
  }
}

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.

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();
  }

  @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) {
              return Container();
            },
          )),
    );
  }
}

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:

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 Container();
            },
          )),
    );
  }
}

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!

Demo

JSON to HTML Table with Lit

Mon, 20 Jan 2025 01:18:07 GMT

JSON to HTML Table with Lit

In this article I will go over how to set up a Lit web component and use it to create a HTML Table from json url or inline json.

TLDR The final source here and an online demo.

Prerequisites

Vscode
Node >= 16
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-ts

Then enter a project name lit-html-table and now open the project in vscode and install the dependencies:

cd lit-html-table
npm i lit
npm i -D @types/node
code .

Update the vite.config.ts with the following:

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

export default defineConfig({
  base: "/lit-html-table/",
  build: {
    lib: {
      entry: "src/lit-html-table.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" />
    <title>JSON to Lit HTML Table</title>
    <script type="module" src="/src/lit-html-table.ts"></script>
  </head>

  <body>
    <lit-html-table src="https://jsonplaceholder.typicode.com/posts">
      <!-- <span slot="title" style="color: red;">Title</span> -->
      <!-- <script type="application/json">
      [
        {
          "id": "0",
          "name": "First Item"
        }
      ]
    </script> -->
    </lit-html-table>
  </body>
</html>

We are passing a src attribute to the web component for this example but we can also add a script tag with the type attribute set to application/json with the contents containing the json.

If any table header cell needed to be replaced an element can be provided with the slot name set to the key in the json object.

Web Component

Before we update our component we need to rename my-element.ts to lit-html-table.ts

Open up lit-html-table.ts and update it with the following:

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

type ObjectData = { [key: string]: any };

@customElement("lit-html-table")
export class LitHtmlTable extends LitElement {
  @property() src = "";

  data?: ObjectData[];

  static styles = css`
    tr {
      text-align: var(--table-tr-text-align, left);
      vertical-align: var(--table-tr-vertical-align, top);
      padding: var(--table-tr-padding, 10px);
    }
  `;

  render() {
    // Check if data is loaded
    if (!this.values) {
      return html`<slot name="loading">Loading...</slot>`;
    }
    // Check if items are not empty
    if (this.values.length === 0) {
      return html`<slot name="empty">No Items Found!</slot>`;
    }
    // Convert JSON to HTML Table
    return html`
      <table>
        <thead>
          <tr>
            ${Object.keys(this.values[0]).map((key) => {
              const name = key.replace(/\b([a-z])/g, (_, val) =>
                val.toUpperCase()
              );
              return html`<th>
                <slot name="${key}">${name}</slot>
              </th>`;
            })}
          </tr>
        </thead>
        <tbody>
          ${this.values.map((item) => {
            return html`
              <tr>
                ${Object.values(item).map((row) => {
                  return html`<td>${row}</td>`;
                })}
              </tr>
            `;
          })}
        </tbody>
      </table>
    `;
  }

  async firstUpdated() {
    await this.fetchData();
  }

  // Download the latest json and update it locally
  async fetchData() {
    let _data: any;
    if (this.src.length > 0) {
      // If a src attribute is set prefer it over any slots
      _data = await fetch(this.src).then((res) => res.json());
    } else {
      // If no src attribute is set then grab the inline json in the slot
      const elem = this.parentElement?.querySelector(
        'script[type="application/json"]'
      ) as HTMLScriptElement;
      if (elem) _data = JSON.parse(elem.innerHTML);
    }
    this.values = this.transform(_data ?? []);
    this.requestUpdate();
  }

  transform(data: any) {
    return data;
  }
}

We have defined a few CSS Custom Properties to style the table cell but many more can be added here.

If everything goes well run the command npm run dev and the follow should appear:

Editing

What if we wanted to support editing of any cell? With Lit and Web Components we can progressively enhance the experience without changing the html.

At the top of the class add the following boolean property:

@property({ type: Boolean }) editable = false;

Now update the tbody tag in the render method:

<tbody>
  ${this.values.map((item, index) => {
    return html`
      <tr>
        ${Object.entries(item).map((row) => {
          return html`<td>
            ${this.editable
              ? html`<input
                  value="${row[1]}"
                  type="text"
                  @input=${(e: any) => {
                    const value = e.target.value;
                    const key = row[0];
                    const current = this.values![index];
                    current[key] = value;
                    this.values![index] = current;
                    this.requestUpdate();
                    this.dispatchEvent(
                      new CustomEvent("input-cell", {
                        detail: {
                          index: index,
                          data: current,
                        },
                      })
                    );
                  }}
                />`
              : html`${row[1]}`}
          </td>`;
        })}
      </tr>
    `;
  })}
</tbody>

By checking to see if the editable and if true return an input with an event listener to update the data and dispatch an input event.

Add the editable attribute to the index.html:

<lit-html-table editable> ... </lit-html-table>

After a reload the table should look like this and any cell can be edited.

An event listener can be added just before the closing body tag in index.html to grab the latest values or cell information:

<script>
  const elem = document.querySelector("lit-html-table");
  elem.addEventListener(
    "input-cell",
    (e) => {
      // Index and data for the individual cell
      const { index, data } = e.detail;
      // New array of json items
      const values = elem.values;
    },
    false
  );
</script>

This can be taken farther by checking for the type of the value and returning a color, number or checkbox input.

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 Monaco Editor

Mon, 20 Jan 2025 02:32:31 GMT

Lit and Monaco Editor

In this article I will go over how to set up a Lit web component and use it to wrap the Monaco Editor that powers VSCode.

TLDR You can find the final source here and an online demo here.

To learn how to build an extension with VSCode and Lit check out the blog post here.

Prerequisites

Vscode
Node >= 16
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-ts

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

cd lit-code-editor
npm i lit monaco-editor
npm i -D @types/node
code .

Update the vite.config.ts with the following:

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

export default defineConfig({
  base: "/lit-code-editor/",
  build: {
    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" />
    <title>Lit Code Editor</title>
    <script type="module" src="/src/code-editor.ts"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <code-editor>
      <script type="text/javascript">
function x() {
  console.log("Hello world! :)");
}
      </script>
    </code-editor>
  </body>
</html>

We are setting up the lit-element to have a slot which will be the code for the editor to start with. The language can be set with the type or adding an attribute to the code-editor component.

Web Component

Before we update our component we need to rename my-element.ts to code-editor.ts

Open up code-editor.ts and update it with the following:

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

// -- Monaco Editor Imports --
import * as monaco from "monaco-editor";
import styles from "monaco-editor/min/vs/editor/editor.main.css";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

// @ts-ignore
self.MonacoEnvironment = {
  getWorker(_: any, label: string) {
    if (label === "json") {
      return new jsonWorker();
    }
    if (label === "css" || label === "scss" || label === "less") {
      return new cssWorker();
    }
    if (label === "html" || label === "handlebars" || label === "razor") {
      return new htmlWorker();
    }
    if (label === "typescript" || label === "javascript") {
      return new tsWorker();
    }
    return new editorWorker();
  },
};

@customElement("code-editor")
export class CodeEditor extends LitElement {
  private container: Ref<HTMLElement> = createRef();
  editor?: monaco.editor.IStandaloneCodeEditor;
  @property() theme?: string;
  @property() language?: string;
  @property() code?: string;

  static styles = css`
    :host {
      --editor-width: 100%;
      --editor-height: 100vh;
    }
    main {
      width: var(--editor-width);
      height: var(--editor-height);
    }
  `;

  render() {
    return html`
      <style>
        ${styles}
      </style>
      <main ${ref(this.container)}></main>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "code-editor": CodeEditor;
  }
}

Here we are just setting up some boilerplate to set up the web workers with vite and passing the reference from the container element to the template using the ref directive.

The styles from monaco editor are also passed as a style element load in the shadow root.

Now let's add some helper methods for accessing the code and language provided:

private getFile() {
  if (this.children.length > 0) return this.children[0];
  return null;
}

private getCode() {
  if (this.code) return this.code;
  const file = this.getFile();
  if (!file) return;
  return file.innerHTML.trim();
}

private getLang() {
  if (this.language) return this.language;
  const file = this.getFile();
  if (!file) return;
  const type = file.getAttribute("type")!;
  return type.split("/").pop()!;
}

private getTheme() {
  if (this.theme) return this.theme;
  if (this.isDark()) return "vs-dark";
  return "vs-light";
}

private isDark() {
  return (
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: dark)").matches
  );
}

These methods are checking the slot for the script tag with the language provided or looking for a property set on code-editor and then returning the value.

Now let's attach the editor to the container reference:

firstUpdated() {
  this.editor = monaco.editor.create(this.container.value!, {
    value: this.getCode(),
    language: this.getLang(),
    theme: this.getTheme(),
    automaticLayout: true,
  });
   window
    .matchMedia("(prefers-color-scheme: dark)")
    .addEventListener("change", () => {
      monaco.editor.setTheme(this.getTheme());
    });
}

Now the editor should be running and able to be interacted with:

When the system changes to dark mode it will switch as well!

To get and set the value from the editor we can add 2 helper methods:

setValue(value: string) {
  this.editor!.setValue(value);
}

getValue() {
  const value = this.editor!.getValue();
  return value;
}

Everything should work as expected now and the final code should look like the following:

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

// -- Monaco Editor Imports --
import * as monaco from "monaco-editor";
import styles from "monaco-editor/min/vs/editor/editor.main.css";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

// @ts-ignore
self.MonacoEnvironment = {
  getWorker(_: any, label: string) {
    if (label === "json") {
      return new jsonWorker();
    }
    if (label === "css" || label === "scss" || label === "less") {
      return new cssWorker();
    }
    if (label === "html" || label === "handlebars" || label === "razor") {
      return new htmlWorker();
    }
    if (label === "typescript" || label === "javascript") {
      return new tsWorker();
    }
    return new editorWorker();
  },
};

@customElement("code-editor")
export class CodeEditor extends LitElement {
  private container: Ref<HTMLElement> = createRef();
  editor?: monaco.editor.IStandaloneCodeEditor;
  @property() theme?: string;
  @property() language?: string;
  @property() code?: string;

  static styles = css`
    :host {
      --editor-width: 100%;
      --editor-height: 100vh;
    }
    main {
      width: var(--editor-width);
      height: var(--editor-height);
    }
  `;

  render() {
    return html`
      <style>
        ${styles}
      </style>
      <main ${ref(this.container)}></main>
    `;
  }

  private getFile() {
    if (this.children.length > 0) return this.children[0];
    return null;
  }

  private getCode() {
    if (this.code) return this.code;
    const file = this.getFile();
    if (!file) return;
    return file.innerHTML.trim();
  }

  private getLang() {
    if (this.language) return this.language;
    const file = this.getFile();
    if (!file) return;
    const type = file.getAttribute("type")!;
    return type.split("/").pop()!;
  }

  private getTheme() {
    if (this.theme) return this.theme;
    if (this.isDark()) return "vs-dark";
    return "vs-light";
  }

  private isDark() {
    return (
      window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches
    );
  }

  setValue(value: string) {
    this.editor!.setValue(value);
  }

  getValue() {
    const value = this.editor!.getValue();
    return value;
  }

  firstUpdated() {
    this.editor = monaco.editor.create(this.container.value!, {
      value: this.getCode(),
      language: this.getLang(),
      theme: this.getTheme(),
      automaticLayout: true,
    });
    window
      .matchMedia("(prefers-color-scheme: dark)")
      .addEventListener("change", () => {
        monaco.editor.setTheme(this.getTheme());
      });
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "code-editor": CodeEditor;
  }
}

Usage

To use this component it can have the code provided by slots:

<code-editor>
  <script type="text/javascript">
function x() {
  console.log("Hello world! :)");
}
  </script>
</code-editor>

Or for properties:

<code-editor 
  code="console.log('Hello World');" 
  language="javascript"
  >
</code-editor>

Or both:

<code-editor language="typescript">
  <script>
function x() {
  console.log("Hello world! :)");
}
  </script>
</code-editor>

The theme can also be manually set:

<code-editor theme="vs-light"> </code-editor>

Conclusion

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

The source for this example can be found here.

Building a Rich Text Editor with Lit

Sun, 19 Jan 2025 07:04:52 GMT

Building a Rich Text Editor with Lit

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 >= 16
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-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-editor
npm i @material/mwc-icon-button
npm i -D @types/node
code .

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 { html, css, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";

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 checks 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.

The source for this example can be found here.

How to do Full Text Search with SQLite

Sat, 18 Jan 2025 20:49:31 GMT

How to do Full Text Search with SQLite

SQLite has a powerful way to add new functionality via loadable extensions. The first-party ones include fts5, json1 and a couple others.

When building applications it is common to add searching features based on data coming from tables and you may already have queries for fuzzy searching with LIKE. You may be excited to hear that SQLite can easily add fully query capabilities over a dataset all with just a simple MATCH keyword. 👀

Creating your first search index

Full text search in SQLite requires storing the index in VIRTUAL tables, which allow for optimized storage of the index based on the queries we will execute against it.

You can create the virtual table for the index making sure to include the USING directive for the fts5 target.

CREATE VIRTUAL TABLE posts_fts USING fts5 (
    title,
    description,
    content,
    content=posts,
    content_rowid=id
);

Text IDs are also supported instead of just INTEGERS.

This is a standard callout. You can customize its content and even the icon.

Contentless tables

You can also create a contentless table that will not be based on any existing tables:

CREATE VIRTUAL TABLE example_fts USING fts5 (
    name,
    description,
    content=''
);

Keeping the index up to date

By having the source content be stored in another table we need to make sure to keep both tables in sync and avoid updating the index in a hot path when trying to make a query.

By default when you create table it will be empty, even if the source table is populated. You do have various options for populating the index.

Update by query

If you use a contentless table or want to pull in data from a view you can update by query.

INSERT INTO posts_fts (id, title, description, content)
SELECT id, title, description, content FROM posts;

Rebuild command

Using the rebuild command it will update the index based on the content table specified.

INSERT INTO posts_fts(posts_fts) VALUES('rebuild');

Triggers

We can use SQLite triggers to automatically keep the records updated:

CREATE TRIGGER posts_insert AFTER INSERT ON posts BEGIN
  INSERT INTO posts_fts(id, title, description, content)
  VALUES (new.id, new.title, new.description, new.content);
END;

CREATE TRIGGER posts_delete AFTER DELETE ON posts BEGIN
  INSERT INTO posts_fts(posts_fts, id, title, description, content)
  VALUES ('delete', old.id, old.title, old.description, old.content);
END;

CREATE TRIGGER posts_update AFTER UPDATE ON posts BEGIN
  INSERT INTO posts_fts(posts_fts, id, title, description, content)
  VALUES ('delete', old.id, old.title, old.description, old.content);
  INSERT INTO posts_fts(id, title, description, content)
  VALUES (new.id, new.title, new.description, new.content);
END;

This will always ensure the two tables are in sync for any CRUD actions on the source table.

Searching the index

Query syntax

Here is the supported query syntax:

<phrase>    := string [*]
<phrase>    := <phrase> + <phrase>
<neargroup> := NEAR ( <phrase> <phrase> ... [, N] )
<query>     := [ [-] <colspec> :] [^] <phrase>
<query>     := [ [-] <colspec> :] <neargroup>
<query>     := [ [-] <colspec> :] ( <query> )
<query>     := <query> AND <query>
<query>     := <query> OR <query>
<query>     := <query> NOT <query>
<colspec>   := colname
<colspec>   := { colname1 colname2 ... }

To preform an actual query on the index we will need to use the MATCH keyword and order by the rank.

SELECT posts.* FROM posts_fts
INNER JOIN posts ON posts.id = posts_fts.rowid
WHERE posts_fts MATCH :query
ORDER BY rank;

Reference

Lit and VSCode Extensions

Mon, 20 Jan 2025 02:41:17 GMT

Lit and VSCode Extensions

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

TLDR You can find the final source here.

Prerequisites

Vscode
Node >= 16
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-ts

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

cd lit-vscode-extension
npm i -D @types/node
code .

Update the vite.config.ts with the following:

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

export default defineConfig({
  base: "/lit-vscode-extension/",
  build: {
    outDir: "build",
    rollupOptions: {
      external: /^vscode/,
      input: {
        main: resolve(__dirname, "index.html"),
      },
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
});

Open package.json and update it with the following:

{
  "name": "lit-vscode-extension",
  "description": "Lit VSCode Extension Example",
  "version": "0.0.1",
  "publisher": "rodydavis",
  "private": true,
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/rodydavis/lit-vscode-extension"
  },
  "engines": {
    "vscode": "^1.47.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:lit.start",
    "onCommand:lit.reset",
    "onWebviewPanel:lit"
  ],
  "main": "./build/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "lit.start",
        "title": "Open Plugin",
        "category": "lit"
      },
      {
        "command": "lit.reset",
        "title": "Reset",
        "category": "lit"
      }
    ]
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "ext": "tsc src/extension.ts --outdir build --skipLibCheck --module commonjs",
    "compile": "npm run build && npm run ext",
    "serve": "vite preview"
  },
  "dependencies": {
    "lit": "^2.0.0-rc.2"
  },
  "devDependencies": {
    "@types/node": "^15.12.4",
    "@types/vscode": "^1.57.0",
    "typescript": "^4.2.3",
    "vite": "^2.3.5"
  }
}

After the package.json is updated run npm i.

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" />
    <title>Lit Example</title>
    <script type="module" src="/src/my-element.ts"></script>
  </head>
  <body>
    <my-element>
      <p>This is child content</p>
    </my-element>
  </body>
</html>

Web Component

Open up src/my-element.ts and update it with the following:

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

@customElement("my-element")
export class MyElement extends LitElement {
  static styles = css`
    :host {
      display: block;
      border: solid 1px gray;
      padding: 16px;
      max-width: 800px;
    }
  `;

  @property() name = "World";
  @state() count = 0;

  render() {
    return html`
      <h1>Hello, ${this.name}!</h1>
      <button @click=${() => this.modify(1)} part="button">
        Click Count: ${this.count}
      </button>
      <slot></slot>
    `;
  }

  modify(val: number) {
    this.count += val;
  }

  reset() {
    this.count = 0;
  }

  async firstUpdated() {
    window.addEventListener(
      "message",
      (e: any) => {
        const message = e.data;
        const { command } = message;
        if (command === "reset") {
          this.reset();
        }
      },
      false
    );
  }
}

Here we are just modifying the example to include a message listener for communicating with the vscode extension, methods for updating the count, and updating the render method.

VSCode communicates with the plugin via post messages because the UI will be loaded in an iframe.

Now let's write the extension code in src/extension.ts. First start by adding top level declarations that will be referenced multiple times.

import * as vscode from "vscode";

const WEB_DIR: string = "build";
const WEB_SCRIPT: string = "main.js";
const TITLE: string = "Lit Example";
const TAG: string = "my-element";


const possible = [
  "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  "abcdefghijklmnopqrstuvwxyz",
  "0123456789",
].join("");

function getNonce() {
  let text = "";
  for (let i = 0; i < 32; i++) {
    const char = possible.charAt(Math.floor(Math.random() * possible.length));
    text += char;
  }
  return text;
}

We also are creating a getNonce method that will be used for making sure the scripts we load are the ones we passed in.

Now create a Panel that will contain the ui for our plugin:

class Panel {
  public static currentPanel: Panel | undefined;
  public static readonly viewType = "litExample";
  private _disposables: vscode.Disposable[] = [];

  public static createOrShow(extensionUri: vscode.Uri) {
    const column = vscode.window.activeTextEditor
      ? vscode.window.activeTextEditor.viewColumn
      : undefined;
    if (Panel.currentPanel) {
      Panel.currentPanel.panel.reveal(column);
      return;
    }
    const panel = vscode.window.createWebviewPanel(
      Panel.viewType,
      TITLE,
      column || vscode.ViewColumn.One,
      getWebviewOptions(extensionUri)
    );
    Panel.currentPanel = new Panel(panel, extensionUri);
  }

  public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
    Panel.currentPanel = new Panel(panel, extensionUri);
  }

  private constructor(
    public readonly panel: vscode.WebviewPanel,
    public readonly extensionUri: vscode.Uri
  ) {
    this._update();
    this.panel.onDidDispose(() => this.dispose(), null, this._disposables);
    this.panel.onDidChangeViewState(
      (_) => {
        if (this.panel.visible) {
          this._update();
        }
      },
      null,
      this._disposables
    );
    this.panel.webview.onDidReceiveMessage(
      (message) => {
        switch (message.command) {
          case "alert":
            vscode.window.showErrorMessage(message.text);
            return;
        }
      },
      null,
      this._disposables
    );
  }

  public sendMessage(command: string) {
    this.panel.webview.postMessage({ command: command });
  }

  public dispose() {
    Panel.currentPanel = undefined;
    this.panel.dispose();
    while (this._disposables.length) {
      const x = this._disposables.pop();
      if (x) {
        x.dispose();
      }
    }
  }

  private _update() {
    const webview = this.panel.webview;
    webview.html = this._getHtmlForWebview(webview);
  }

  private _getHtmlForWebview(webview: vscode.Webview) {
    const scriptPathOnDisk = vscode.Uri.joinPath(
      this.extensionUri,
      WEB_DIR,
      WEB_SCRIPT
    );
    const scriptUri = webview.asWebviewUri(scriptPathOnDisk);
    const nonce = getNonce();

    const slot = "<p>This is child content</p>";

    return `<!DOCTYPE html>
			<html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>${TITLE}</title>
        </head>
        <body class="vscode-light">
          <${TAG} nonce="${nonce}" >
            ${slot}
          </${TAG}>
          <script nonce="${nonce}" type="module" src="${scriptUri}"></script>
        </body>
			</html>`;
  }
}

Notice how we are recreating the html and not using the index.html. This allows us to use the component for a deployed website but also the extension with separate app logic code.

Everything else is just boilerplate for managing the panel state and disposing when it is finished.

Now we can add the methods for loading our plugin and listening for the commands:

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.commands.registerCommand("lit.start", () => {
      Panel.createOrShow(context.extensionUri);
    })
  );

  context.subscriptions.push(
    vscode.commands.registerCommand("lit.reset", () => {
      if (Panel.currentPanel) {
        Panel.currentPanel.sendMessage("reset");
      }
    })
  );

  if (vscode.window.registerWebviewPanelSerializer) {
    vscode.window.registerWebviewPanelSerializer(Panel.viewType, {
      async deserializeWebviewPanel(
        webviewPanel: vscode.WebviewPanel,
        state: any
      ) {
        console.log(`Received state: ${state}`);
        webviewPanel.webview.options = getWebviewOptions(context.extensionUri);
        Panel.revive(webviewPanel, context.extensionUri);
      },
    });
  }
}

function getWebviewOptions(extensionUri: vscode.Uri): vscode.WebviewOptions {
  return {
    enableScripts: true,
    localResourceRoots: [vscode.Uri.joinPath(extensionUri, WEB_DIR)],
  };
}

Here we are loading the extension and passing messages when the lit.reset command. We are also returning the getWebviewOptions options which enableScripts is set to true so we can run the injected js.

The final code should look like the follow:

import * as vscode from "vscode";

const WEB_DIR: string = "build";
const WEB_SCRIPT: string = "main.js";
const TITLE: string = "Lit Example";
const TAG: string = "my-element";

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.commands.registerCommand("lit.start", () => {
      Panel.createOrShow(context.extensionUri);
    })
  );

  context.subscriptions.push(
    vscode.commands.registerCommand("lit.reset", () => {
      if (Panel.currentPanel) {
        Panel.currentPanel.sendMessage("reset");
      }
    })
  );

  if (vscode.window.registerWebviewPanelSerializer) {
    vscode.window.registerWebviewPanelSerializer(Panel.viewType, {
      async deserializeWebviewPanel(
        webviewPanel: vscode.WebviewPanel,
        state: any
      ) {
        console.log(`Received state: ${state}`);
        webviewPanel.webview.options = getWebviewOptions(context.extensionUri);
        Panel.revive(webviewPanel, context.extensionUri);
      },
    });
  }
}

function getWebviewOptions(extensionUri: vscode.Uri): vscode.WebviewOptions {
  return {
    enableScripts: true,
    localResourceRoots: [vscode.Uri.joinPath(extensionUri, WEB_DIR)],
  };
}

class Panel {
  public static currentPanel: Panel | undefined;
  public static readonly viewType = "litExample";
  private _disposables: vscode.Disposable[] = [];

  public static createOrShow(extensionUri: vscode.Uri) {
    const column = vscode.window.activeTextEditor
      ? vscode.window.activeTextEditor.viewColumn
      : undefined;
    if (Panel.currentPanel) {
      Panel.currentPanel.panel.reveal(column);
      return;
    }
    const panel = vscode.window.createWebviewPanel(
      Panel.viewType,
      TITLE,
      column || vscode.ViewColumn.One,
      getWebviewOptions(extensionUri)
    );
    Panel.currentPanel = new Panel(panel, extensionUri);
  }

  public static revive(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
    Panel.currentPanel = new Panel(panel, extensionUri);
  }

  private constructor(
    public readonly panel: vscode.WebviewPanel,
    public readonly extensionUri: vscode.Uri
  ) {
    this._update();
    this.panel.onDidDispose(() => this.dispose(), null, this._disposables);
    this.panel.onDidChangeViewState(
      (_) => {
        if (this.panel.visible) {
          this._update();
        }
      },
      null,
      this._disposables
    );
    this.panel.webview.onDidReceiveMessage(
      (message) => {
        switch (message.command) {
          case "alert":
            vscode.window.showErrorMessage(message.text);
            return;
        }
      },
      null,
      this._disposables
    );
  }

  public sendMessage(command: string) {
    this.panel.webview.postMessage({ command: command });
  }

  public dispose() {
    Panel.currentPanel = undefined;
    this.panel.dispose();
    while (this._disposables.length) {
      const x = this._disposables.pop();
      if (x) {
        x.dispose();
      }
    }
  }

  private _update() {
    const webview = this.panel.webview;
    webview.html = this._getHtmlForWebview(webview);
  }

  private _getHtmlForWebview(webview: vscode.Webview) {
    const scriptPathOnDisk = vscode.Uri.joinPath(
      this.extensionUri,
      WEB_DIR,
      WEB_SCRIPT
    );
    const scriptUri = webview.asWebviewUri(scriptPathOnDisk);
    const nonce = getNonce();

    const slot = "<p>This is child content</p>";

    const htmlSource = `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>${TITLE}</title>
      </head>
      <body class="vscode-light">
        <${TAG} nonce="${nonce}" >
          ${slot}
        </${TAG}>
        <script nonce="${nonce}" type="module" src="${scriptUri}"></script>
      </body>
    </html>`;

    return htmlSource;
  }
}

const possible = [
  "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  "abcdefghijklmnopqrstuvwxyz",
  "0123456789",
].join("");

function getNonce() {
  let text = "";
  for (let i = 0; i < 32; i++) {
    const char = possible.charAt(Math.floor(Math.random() * possible.length));
    text += char;
  }
  return text;
}

Running

Make sure to install the dependencies by running npm i.

To build the extension run npm run compile.

To open the extension and debug hit F5.

To run the commands to open the extension run lit: open plugin or lit: reset:

To debug the extension when it is open run Developer: Open Webview Developer Tools from the command pallet.

Conclusion

If you want to learn more about building a vscode extension you can read more here and for Lit you can read the docs here.

Using SQLite as a Key Value Store

Fri, 17 Jan 2025 06:54:23 GMT

Using SQLite as a Key Value Store

SQLite is a very capable edge database that can store various shapes of data.

Key/Value databases are popular in applications for storing settings, and other non-relational data.

By using SQLite to store the key/values you can contain all the data for a user in a single file and can attach it to other databases or sync it to a server.

Create the table

To store key/value type data we need to first create our table.

CREATE TABLE key_value (
  key TEXT NOT NULL PRIMARY KEY,
  value,
  UNIQUE(key)
);

key	value
user_id	1
foo	bar
active	1
guest	0

SQLite has optional column types and can be very useful for dynamic values.

Save a value

To save a value for a given key we can run the following:

INSERT OR REPLACE 
INTO key_value (key, value) 
VALUES (:key, :value)
RETURNING *;

key	value
user_id	1

Since the key is UNIQUE we do not have to worry about conflicts as it will overwrite the value as intended.

Read a value

To read a value we can pass in a key to our query:

SELECT value FROM key_value 
WHERE key = :key;

value

This will only return a single value column with a max of 1 rows.

Delete a value

To delete a value or key we can run the following:

DELETE FROM key_value 
WHERE key = :key;

Search for key or value

We can also search for a specific key or value (if it is a string) with the following:

SELECT key, value
FROM key_value 
WHERE key LIKE :query 
OR value LIKE :query;

key	value
bar	1
foo	bar

Drift Support

If you are using Drift in dart, create a new file key_value.drift and add the following:

CREATE TABLE key_value (
  "key" TEXT NOT NULL PRIMARY KEY,
  value TEXT,
  UNIQUE("key")
);

setItem:
INSERT OR REPLACE 
INTO key_value ("key", value) 
VALUES (:key, :value)
RETURNING *;

getItem:
SELECT value FROM key_value 
WHERE "key" = :key;

deleteItem:
DELETE FROM key_value 
WHERE "key" = :key;

searchItem:
SELECT "key", value
FROM key_value 
WHERE "key" LIKE :query 
OR value LIKE :query;

Lit Sheet Music

Mon, 20 Jan 2025 02:46:46 GMT

Lit Sheet Music

In this article I will go over how to set up a Lit web component and use it to render musicxml from a src attribute or inline xml using opensheetmusicdisplay.

Now any sheet music can be rendered based on the browser width as an svg or canvas (and will resize when the viewport changes).

TLDR The final source here and an online demo.

Prerequisites

Vscode
Node >= 16
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-ts

Then enter a project name lit-sheet-music and now open the project in vscode and install the dependencies:

cd lit-sheet-music
npm i lit opensheetmusicdisplay
npm i -D @types/node
code .

Update the vite.config.ts with the following:

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

export default defineConfig({
  base: "/lit-sheet-music/",
  build: {
    lib: {
      entry: "src/lit-sheet-music.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" />
    <title>Lit Sheet Music</title>
    <script type="module" src="/src/sheet-music.ts"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <sheet-music
      src="https://raw.githubusercontent.com/opensheetmusicdisplay/opensheetmusicdisplay/develop/demo/BrahWiMeSample.musicxml"
    >
    </sheet-music>
  </body>
</html>

If local musicxml is intended to be used update index.html 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" />
    <title>Lit Sheet Music</title>
    <script type="module" src="/src/sheet-music.ts"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <sheet-music>
      <script type="text/xml">
        <?xml version="1.0" standalone="no"?>
        <!DOCTYPE score-partwise PUBLIC
            "-//Recordare//DTD MusicXML Partwise//EN"
            "http://www.musicxml.org/dtds/partwise.dtd">
          <score-partwise>
            <part-list>
              <score-part id="P1">
                <part-name>Voice</part-name>
              </score-part>
            </part-list>
            <part id="P1">
              <measure number="0" implicit="yes">
                <attributes>
                  <divisions>4</divisions>
                  <key>
                    <fifths>-3</fifths>
                    <mode>major</mode>
                  </key>
                  <time>
                    <beats>2</beats>
                    <beat-type>4</beat-type>
                  </time>
                  <clef>
                    <sign>G</sign>
                    <line>2</line>
                  </clef>
                  <directive>Langsam, innig.</directive>
                </attributes>
                <note>
                  <pitch>
                    <step>G</step>
                    <octave>4</octave>
                  </pitch>
                  <duration>2</duration>
                  <type>eighth</type>
                  <stem>up</stem>
                  <notations>
                    <dynamics>
                      <p/>
                    </dynamics>
                  </notations>
                  <lyric>
                    <syllabic>single</syllabic>
                    <text>W&auml;rst</text>
                  </lyric>
                </note>
              </measure>
              <measure number="1">
                <note>
                  <pitch>
                    <step>F</step>
                    <octave>4</octave>
                  </pitch>
                  <duration>3</duration>
                  <type>eighth</type>
                  <dot/>
                  <stem>up</stem>
                  <lyric>
                    <syllabic>single</syllabic>
                    <text>du</text>
                  </lyric>
                </note>
                <note>
                  <pitch>
                    <step>E</step>
                    <alter>-1</alter>
                    <octave>4</octave>
                  </pitch>
                  <duration>1</duration>
                  <type>16th</type>
                  <stem>up</stem>
                  <lyric>
                    <syllabic>single</syllabic>
                    <text>nicht,</text>
                  </lyric>
                </note>
                <note>
                  <pitch>
                    <step>E</step>
                    <alter>-1</alter>
                    <octave>4</octave>
                  </pitch>
                  <duration>2</duration>
                  <type>eighth</type>
                  <stem>up</stem>
                  <lyric>
                    <syllabic>begin</syllabic>
                    <text>heil</text>
                  </lyric>
                </note>
                <note>
                  <pitch>
                    <step>B</step>
                    <alter>-1</alter>
                    <octave>4</octave>
                  </pitch>
                  <duration>1</duration>
                  <type>16th</type>
                  <stem>up</stem>
                  <beam number="1">begin</beam>
                  <beam number="2">begin</beam>
                  <notations>
                    <slur type="start" number="1"/>
                  </notations>
                  <lyric>
                    <syllabic>end</syllabic>
                    <text>ger</text>
                    <extend/>
                  </lyric>
                </note>
                <note>
                  <pitch>
                    <step>G</step>
                    <octave>4</octave>
                  </pitch>
                  <duration>1</duration>
                  <type>16th</type>
                  <stem>up</stem>
                  <beam number="1">end</beam>
                  <beam number="2">end</beam>
                  <notations>
                    <slur type="stop" number="1"/>
                  </notations>
                  <lyric>
                    <extend/>
                  </lyric>
                </note>
              </measure>
            </part>
          </score-partwise>
      </script>
    </sheet-music>
  </body>
</html>

We are passing a src attribute to the web component for this example but we can also add a script tag with the type attribute set to text/xml with the contents containing the json.

Web Component

Before we update our component we need to rename my-element.ts to sheet-music.ts

Open up sheet-music.ts and update it with the following:

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

type BackendType = "svg" | "canvas";
type DrawingType = "compact" | "default";

@customElement("sheet-music")
export class SheetMusic extends LitElement {
  _zoom = 1.0;

  @property({ type: Boolean }) allowDrop = false;
  @property() src = "";

  @query("main") canvas!: HTMLElement;

  controller?: OpenSheetMusicDisplay;
  options: IOSMDOptions = {
    autoResize: true,
    backend: "canvas" as BackendType,
    drawingParameters: "default" as DrawingType,
  };

  static styles = css`
    main {
      overflow-x: auto;
    }
  `;

  render() {
    return html`<main></main>`;
  }

  async renderMusic(content: string) {
    if (!this.controller) return;
    await this.controller.load(content);
    this.controller.zoom = this._zoom;
    this.controller.render();
    this.requestUpdate();
  }

  private async getMusic(): Promise<string> {
    // Check if src attribute is set and prefer it over the slot
    if (this.src.length > 0) return fetch(this.src).then((res) => res.text());

    // Check if slot children exist and return the xml
    const elem = this.parentElement?.querySelector(
      'script[type="text/xml"]'
    ) as HTMLScriptElement;
    if (elem) return elem.innerHTML;

    // Return nothing if neither is found
    return "";
  }

  async firstUpdated() {
    this.controller = new OpenSheetMusicDisplay(this.canvas, this.options);
    this.requestUpdate();

    // Check for any music and update if found
    const music = await this.getMusic();
    if (music.length > 0) this.renderMusic(music);
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "sheet-music": SheetMusic;
  }
}

Run npm run dev and the following should appear if all went well:

Conclusion

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

The source for this example can be found here.

How to store SQLite as NoSQL Store

Sat, 18 Jan 2025 06:24:22 GMT

How to store SQLite as NoSQL Store

SQLite is a very capable edge database that can store various shapes of data.

NoSQL databases are very popular due to the schema-less nature of storing of the data but it is totally possible to store these documents in SQLite.

SQLite actually has great JSON support and even supports JSONB.

Create the table

To store JSON documents we need to create a table to store the values as strings.

CREATE TABLE documents (
  path TEXT NOT NULL PRIMARY KEY,
  data TEXT,
  ttl INTEGER,
  created INTEGER NOT NULL,
  updated INTEGER NOT NULL,
  UNIQUE(path)
);

path	data	ttl
/posts/1	{"id":1}	NULL
/posts/2	{"id":2}	NULL
/users/1	{"id":1}	NULL

The basic idea is to store a JSON object and an unique path.

There is an optional TTL to automatically delete rows when they reach the stale date.

Save a document

To save a document we can encode our JSON as a string or binary and save in in the table with a unique path.

INSERT OR REPLACE 
INTO documents (path, data, ttl, created, updated) 
VALUES (:path, :data, :ttl, :created, :updated)
RETURNING *;

You can also use JSON functions to save the Object to a valid JSON string.

INSERT OR REPLACE 
INTO documents (path, data, ttl, created, updated) 
VALUES ("/posts/1", json('{"id" 1}'), NULL, 0, 0)
RETURNING *;

path	data	ttl	created	updated
/posts/1	{"id":1}	NULL	0	0

Reading a document

To read a document we just need the path. If a TTL is set we can calculate if the current date is greater than the offset and not return the document.

SELECT * FROM documents 
WHERE path = :path
AND (
	(ttl IS NOT NULL AND ttl + updated < unixepoch())
	OR
	ttl IS NULL
);

path	data	ttl	created	updated
/posts/1	{"id":1}	NULL	0	0

Get documents for a collection

We can query all the docs for a given collection using some built-in functions and a path prefix:

SELECT *
FROM documents 
WHERE (
	path LIKE :prefix
	AND
	(LENGTH(path) - LENGTH(REPLACE(path, '/', ''))) = (LENGTH(:prefix) - LENGTH(REPLACE(:prefix, '/', '')))
)
AND (
	(ttl IS NOT NULL AND ttl + updated < unixepoch())
	OR
	ttl IS NULL
)
ORDER BY created;

It is expected to search for a :prefix with the /% at the end:

"/my/path/%" // search for /my/path

Deleting expired documents

Using the TTL field we can delete all expired documents:

DELETE FROM documents
WHERE ttl IS NOT NULL
AND ttl + updated < unixepoch();

SQLite on the UI Thread

Sat, 18 Jan 2025 20:38:57 GMT

SQLite on the UI Thread

SQLite is a lot faster than you may realize. In Flutter for example there is drift, sqlite_async and sqflite which allow for async access of data. But with sqlite3 you can query with sync functions! 🤯

Here is a list view where there are 10000 items and each item is retrieved with a select statement 👀

Source: https://gist.github.com/rodydavis/4a6dca4a2e1afc530ac93e94a76a594a

SQLite, when used effectively, can be a powerful asset for UI-driven applications. Operating within the same process and thread as the UI, it offers a seamless integration that can significantly improve component building.

Async/await does not mean you will be building the most performant applications, and in some cases will incur a performance penalty.

Even with extensive datasets, SQLite demonstrates remarkable efficiency. Its ability to handle millions of rows without compromising speed is a testament to its robust architecture. Contrary to the misconception of being solely a background-thread database, SQLite functions as a process-level library, akin to any other C-based library.

By strategically employing indexes and queries, developers can achieve nanosecond response times and mitigate N+1 query issues. The judicious use of views, indexes, and virtual tables is paramount in optimizing performance.

Complex join operations and the ability to retrieve only essential data for display further underscore SQLite's versatility. For example, when presenting a list view or cards, SQLite can efficiently fetch the required 30 items without undue overhead.

SQLite's flexibility extends beyond single-database scenarios. The ATTACH feature enables the management of multiple databases within a single application. Additionally, the concept of isolates or workers allows for parallel processing, further enhancing performance and responsiveness.

From simple key-value stores to intricate data modeling, SQLite's capabilities are vast. By applying appropriate PRAGMAs, such as WAL mode, developers can tailor SQLite's behavior to meet specific application requirements.

Example PRAGMA:

PRAGMA journal_mode = WAL;
PRAGMA synchronous = NORMAL;
PRAGMA journal_size_limit = 67108864;
PRAGMA mmap_size = 134217728;
PRAGMA cache_size = 2000;
PRAGMA busy_timeout = 5000;

Narobi National Park

Sun, 19 Jan 2025 03:23:49 GMT

Narobi National Park

On a recent work trip to Nairobi, Kenya I was able to take a day trip to Narobi National Park.

What is so wild about this national park is the city is 100% visible from the part at all times. You can grab a pic of a Rhino with a sky scraper in the background. There is a sense of harmony and respect I really love about this place.

Rhinos

Something I have always wanted to see is White Rhinos. On a trip to Kruger National Park in South Africa I was not able to see them because of how protected they are. They would explicitly not track them on the game boards and had men with guns to protect them.

In addition to the adults there were also babies. They were sleeps so peacefully. I was able to get a few shots of them.

Giraffes

Giraffes are an animal you probably get to see a lot in the zoo, but when seeing it in the wild it still is incredible. They travel together and you can pick them out from the trees. They are so tall and the adults can get up to 18 feet tall.

Later that day we got to see the giraffes at the Giraffe Center. It was a really cool experience. You can feed them from a platform and they will come up and eat from your hand. It was a really cool experience. The tongue is so long and feels like sand paper.

Hippos

Hippos are so powerful and can be very dangerous. It's easy to forget that they are animals and not just statues. While they all lay in the water together, they are still very territorial and will attack if you get too close.

Impalas

The impalas are so cute and are the most common animal in the park. They are very fast and can jump up to 10 feet in the air.

Water Buffalo

The water buffalo are so cool. They are so big and can weigh up to 2,000 pounds. We got to see many skulls and feel the horns which are so dense.

Zebras

Zebras are something that is also common to see in zoos but in the wild they are so cool. We saw so many of them in the park and quite a few babies.

Location

The Perfect Brisket

Sun, 19 Jan 2025 02:57:22 GMT

The Perfect Brisket

This is a living document meant to be updated each time I improve on the perfect smoked brisket recipe. I don't get to cook it often but when I do I go all out.

Be prepared to take 4-6hrs to smoke the meat

Ingredients

13-16lb Whole Beef Brisket
Classic Yellow Mustard
Dry Rub (Mr. P's Rub-a-butt)
Large Cutting Board
Very Sharp Knife
Smoker (Akorn)
Apple Wood Chips
Charcoal Briquettes
Meat Thermometer
Aluminum Foil

First you need to source the brisket. I usually like to go to a local butcher shop and look for some good deals. This last time I went it was at $6.99/lb but I have gotten it as low as $3.99/lb. To cook for a big family and have leftovers you get get a 13-16lb brisket (This is usually what they already have in stock).

Prepare The Meat

After you have the meat out of the packaging you can place it on a cutting board and start to pat dry the meat. This will take quite a few paper towels to dry all the blood and moisture.

After the meat is dry you can grab a very sharp curved knife to be used to trim the fat. The goal of the trimming is to remove most of the hard fat in the thick areas.

You shouldn't have to trim that much unless you are preparing for a competition but in this case I am preparing for a group of people and need more meat. As you are trimming the fat you want to make sure to only cut the thick hard parts and not into the meat (it's ok if this is not perfect, you can use the trimmings for other stuff).

Season The Meat

With the meat trimmed it is now time to put the dry rub on the brisket. You will need to grab the mustard and whichever seasoning you chose. Be prepared to get very messy at this step, and id you have a helping hand that would be even better (Gloves also work).

Start of with lines of mustard on the meat so that you have a nice even coat to rub in. Don't worry if you do not like mustard like myself, it will cook out and is only used to keep the seasoning on the meat.

Now add the seasoning and rub it in with your hands or barbecue brush and repeat on the opposite side. You want to get a nice thick coat.

After you finish the meat make sure you leave it out for 20 min to bring it up to room temperature while you prepare the grill.

Prepare The Smoker

While the prepared meat is sitting you will need to prepare the grill. You need to light the coals but not all of them. I like to like the center of them and then control the airflow. Keep in mind you will need to keep the smoker under 250F throughout the duration of the cook.

Another thing I like to use is a diffuser to provide indirect heat and allow just the smoke to cook it. If you do not have this it is not a problem. You can also add the apple wood chips inside a aluminum pouch at this time.

This may take about 20-30 min to bring the grill up to the right temperature before putting the meat on.

Cook the Meat

Now that the meat is room temperature and the grill is warm or close to the right temperature, grab the meat and place it on the smoker.

Once you have placed the meat on the grate you can put in the temperature sensor sideways in the thickest side of the meat.

Now comes the fun part... waiting. You will need to come out every 30-60 min to make sure the meat is not getting too hot/cold and make micro adjustments to the vents.

The internal temperature you are shooting for is 190F and it will take awhile for it to come up. When the meat is at 150F or it's been 3 hours and the skin is getting brown, you can wrap the meat in foil to lock in the juices.

The foil should cover all sides of the meat, and around this time you can add more wood chips to increase the smoke.

Enjoy

Regardless of how it turned out it should still smell amazing and taste even better. If you made sure to come check on it often and not let it get to hot it should still be nice and juicy.

It will be really tempting to eat it right away, but you need to let the meat rest for 20 min before eating.

Let me know how it turned out by mentioning me on twitter or instagram.

File Based Routing for Static Sites

Sun, 19 Jan 2025 23:59:39 GMT

File Based Routing for Static Sites

In this article I will go over how to use file based routing to output as a static site multi page application.

TLDR The final source here and an online demo.

Step 1

Create a new folder called “static-site-file-based-routing” and open it up in VSCode.

mkdir static-site-file-based-routing
cd static-site-file-based-routing
code .

Step 2

Create a tsconfig.json and replace it with the following:

{
  "compilerOptions": {
    "incremental": true,
    "target": "es5",
    "module": "es2020",
    "outDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "typeRoots": [
      "node_modules/@types",
      "src/@types"
    ]
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Step 3

Create a package.json and update it with the following:

{
  "name": "static-site-file-based-routing",
  "version": "1.0.0",
  "description": "File based routing for HTML MPA",
  "type": "module",
  "scripts": {
    "start": "wds --node-resolve --root-dir build --base-path /static-site-file-based-routing --open --watch",
    "postinstall": "npm run tsc",
    "build": "node dist/main.js --inputDir ./example --outputDir ./build",
    "dev": "node dist/main.js --inputDir ./example --outputDir ./build -w",
    "tsc": "tsc",
    "tsc:watch": "tsc -w"
  },
  "devDependencies": {
    "@pkgjs/parseargs": "^0.10.0",
    "@types/markdown-it": "^12.2.3",
    "@types/node": "^18.7.23",
    "@web/dev-server": "^0.1.34",
    "chokidar": "^3.5.3",
    "highlight.js": "^11.6.0",
    "html-format": "^1.0.2",
    "markdown-it": "^13.0.1",
    "parse5": "^7.1.1",
    "typescript": "^4.8.4"
  }
}

Then run npm install to install all the dependencies.

I am using @web/dev-server to serve the site locally. You can use any server you want.

These dependencies are used for various file transformations such as markdown to HTML, HTML formatting, and file watching.

Step 4

Create a src folder and add 4 files:

`src/build.ts`

import * as fs from "fs";
import { compileDir, compileTarget } from "./compile.js";
import * as path from "path";
import chokidar from "chokidar";
import { publicDirectory } from "./static.js";

interface Options {
    inputDir?: string;
    outputDir?: string;
    publicDir?: string;
    watch?: boolean;
    clean?: boolean;
}

export default async function build(options: Options) {
    const inputDir = options.inputDir || "www";
    const outputDir = options.outputDir || "build";
    const publicDir = options.publicDir || "public";
    const watch = options.watch || false;
    const clean = options.clean || false;

    if (!fs.existsSync(inputDir)) {
        throw new Error(`Input directory ${inputDir} does not exist`);
    }

    if (clean) {
        if (fs.existsSync(outputDir)) {
            fs.rmdirSync(outputDir, { recursive: true });
        }
    }

    if (!fs.existsSync(outputDir)) {
        fs.mkdirSync(outputDir, { recursive: true });
    }

    if (watch) {
        console.log("Watching for changes...");
        chokidar.watch(inputDir).on("all", async (event, inputFile) => {
            console.log(event, inputFile);
            if (fs.existsSync(inputFile)) {
                const relativePath = path.relative(inputDir, inputFile);
                const outputFile = `${outputDir}/${relativePath}`;

                const stat = fs.statSync(inputFile);
                if (stat.isDirectory()) {
                    await compileDir(inputFile, outputFile);
                } else if (stat.isFile()) {
                    const filename = path.basename(inputFile);
                    if (filename === "layout.html") {
                        // Rebuild all related directories
                        const dir = path.dirname(inputFile);
                        const inDir = path.relative(inputDir, dir);
                        const outDir = `${outputDir}/${inDir}`;
                        await compileDir(dir, outDir);
                    } else {
                        await compileTarget(inputFile, outputFile);
                    }
                }
            }
        });
    } else {
        await compileDir(inputDir, outputDir);
    }

    if (publicDir.split(',').length > 1) {
        for (const dir of publicDir.split(',')) {
            publicDirectory(dir, outputDir, watch);
        }
    } else {
        publicDirectory(publicDir, outputDir, watch);
    }
}

`src/compile.ts`

import * as fs from "fs";
import * as path from "path";
import MarkdownIt from "markdown-it";
import hljs from "highlight.js";
import * as parse5 from "parse5";
import type { Document } from "parse5/dist/tree-adapters/default.js";
import format from 'html-format';

function compile(file: string) {
    const raw = fs.readFileSync(file, "utf-8");
    const ext = path.extname(file);

    switch (ext) {
        case ".md":
        case ".markdown":
            const md = new MarkdownIt({
                html: true,
                linkify: true,
                typographer: true,
                highlight: function (str, lang) {
                    if (lang && hljs.getLanguage(lang)) {
                        try {
                            return (
                                '<pre class="hljs"><code>' +
                                hljs.highlight(str, { language: lang, ignoreIllegals: true })
                                    .value +
                                "</code></pre>"
                            );
                        } catch (__) {
                            console.error(__);
                        }
                    }
                    return "";
                },
            });
            return parse5.parse(md.render(raw));
        case ".html":
            return parse5.parse(raw);
        default:
            break;
    }

    return raw;
}

function createHtml(options?: { head?: string; body?: string; }) {
    return `
<!DOCTYPE html>
<html lang="en">
<head>
${options?.head ?? ""}
</head>
<body>
${options?.body ?? "<slot></slot>"}
</body>
</html>
`;
}

export async function compileFile(file: string, target: string) {
    // Use regex to check if ends with index.*
    const isIndex = /index\.([a-z]+)$/i.test(file);

    if (!isIndex && !fs.statSync(file).isDirectory()) {
        // Skipping for nested layouts
        return;
    }

    const parent = path.dirname(target);

    // Render up the directory tree until we hit the root directory
    const files: string[] = [file];
    let filePath = file;
    while (filePath !== parent) {
        filePath = path.dirname(filePath);
        // Check for root level layout
        const layout = path.join(filePath, "layout.html");
        if (fs.existsSync(layout)) {
            files.unshift(layout);
        }
        if (filePath === ".") break;
    }

    // Check for root level index markdown or html
    const layout = path.join(parent, "layout.html");
    if (fs.existsSync(layout)) {
        if (
            fs.existsSync(path.join(parent, "index.html")) ||
            fs.existsSync(path.join(parent, "index.md")) ||
            fs.existsSync(path.join(parent, "index.markdown"))
        ) {
            files.unshift(layout);
        }
    }

    let output = createHtml();

    for (const item of files) {
        const doc = compile(item);
        if (typeof doc !== 'string') {
            const content = parse5.serialize(doc);
            output = mergeDocuments(output, content);
        }
    }

    // Replace extension
    const ext = path.extname(file);
    const newFile = target.replace(ext, '.html');

    // Check if parent directory exists
    const parentDir = path.dirname(newFile);
    if (!fs.existsSync(parentDir)) {
        fs.mkdirSync(parentDir, { recursive: true });
    }

    fs.writeFileSync(newFile, output);
    console.log(`--> ${newFile}`);
}

function mergeDocuments(current: string, source: string) {
    let raw = current;

    // Merge body
    const html = extractDoc(parse5.parse(source));
    // Check for <slot></slot>
    const hasSlot = raw.includes("<slot></slot>");
    if (hasSlot) {
        raw = raw.replace("<slot></slot>", parse5.serialize(html.body));
    } else {
        // Append to body
        const endBodyIdx = raw.lastIndexOf("</body>");
        const start = raw.slice(0, endBodyIdx);
        const end = raw.slice(endBodyIdx);
        const body = parse5.serialize(html.body);
        raw = start + body + end;
    }

    // Merge head
    const endHeadIdx = raw.lastIndexOf("</head>");
    const start = raw.slice(0, endHeadIdx);
    const end = raw.slice(endHeadIdx);
    const head = parse5.serialize(html.head);
    raw = start + head + end;

    // Format
    raw = format(raw);

    // Remove duplicate title tags
    const lastTitle = raw.lastIndexOf("<title>");
    const lastTitleEnd = raw.lastIndexOf("</title>");
    const title = raw.slice(lastTitle, lastTitleEnd + 8);
    raw = raw.replace(/<title>.*<\/title>/, "");
    raw = raw.replace("</head>", title + "</head>");

    return raw;
}

function extractDoc(doc: Document) {
    const html = (doc.childNodes[1] ?? doc.childNodes[0]) as unknown as Document;
    const head = html.childNodes.find(
        (node) => node.nodeName === "head"
    ) as unknown as Document;
    const body = html.childNodes.find(
        (node) => node.nodeName === "body"
    ) as unknown as Document;
    return { head, body };
}

export async function compileDir(inputDir: string, outputDir: string) {
    const files = fs.readdirSync(inputDir);
    for (const file of files) {
        const inputFile = `${inputDir}/${file}`;
        const outputFile = `${outputDir}/${file}`;

        await compileTarget(inputFile, outputFile);
    }
}

export async function compileTarget(input: string, output: string) {
    const stat = fs.statSync(input);
    if (stat.isDirectory()) {
        if (!fs.existsSync(output)) {
            fs.mkdirSync(output, { recursive: true });
        }
        await compileDir(input, output);
    } else if (stat.isFile()) {
        const ext = path.extname(input);
        if (['.html', '.md', '.markdown'].includes(ext)) {
            await compileFile(input, output);
        } else {
            const current = fs.readFileSync(input);
            const parentDir = path.dirname(output);
            if (!fs.existsSync(parentDir)) {
                fs.mkdirSync(parentDir, { recursive: true });
            }
            if (fs.existsSync(output)) {
                // Check if content is the same
                const previous = fs.readFileSync(output);
                if (Buffer.compare(current, previous) !== 0) {
                    fs.writeFileSync(output, current);
                }
            } else {
                // Copy the file
                fs.copyFileSync(input, output);
            }
        }
    }
}

`src/static.ts`

import * as fs from "fs";
import * as path from "path";
import chokidar from "chokidar";

export function publicDirectory(publicDir: string, outputDir: string, watch: boolean) {
    if (watch) {
        if (fs.existsSync(publicDir)) {
            chokidar.watch(publicDir).on("all", (event, inputFile) => {
                console.log(event, inputFile);
                if (fs.existsSync(inputFile)) {
                    const relativePath = path.relative(publicDir, inputFile);
                    const outputFile = `${outputDir}/${relativePath}`;

                    const stat = fs.statSync(inputFile);
                    if (stat.isDirectory()) {
                        copyStaticFiles(inputFile, outputFile);
                    } else if (stat.isFile()) {
                        fs.copyFileSync(inputFile, outputFile);
                    }
                }
            });
        }
    } else {
        // Copy static files
        if (fs.existsSync(publicDir)) {
            copyStaticFiles(publicDir, outputDir);
        }
    }
}

function copyStaticFiles(inDir: string, outDir: string) {
    const files = fs.readdirSync(inDir);
    for (const file of files) {
        const inputFile = `${inDir}/${file}`;
        const outputFile = `${outDir}/${file}`;

        const stat = fs.statSync(inputFile);
        if (stat.isDirectory()) {
            if (!fs.existsSync(outputFile)) {
                fs.mkdirSync(outputFile, { recursive: true });
            }

            copyStaticFiles(inputFile, outputFile);
        } else if (stat.isFile()) {
            fs.copyFileSync(inputFile, outputFile);
        }
    }
}

`src/main.ts`

#!/usr/bin/env node

// @ts-ignore
import { parseArgs } from "@pkgjs/parseargs";
import build from "./build.js";

export async function main() {
  const {
    values: { inputDir, outputDir, watch },
  } = parseArgs({
    options: {
      inputDir: {
        type: "string",
        short: "i",
      },
      outputDir: {
        type: "string",
        short: "o",
      },
      watch: {
        type: "boolean",
        short: "w",
      },
    },
    allowPositional: true,
  });

  if (inputDir === undefined || outputDir === undefined) {
    console.log("Usage: build -i <inputDir> -o <outputDir> [-w]");
    return;
  }

  await build({
    inputDir,
    outputDir,
    watch,
  });
}

main();

Step 5

Now that the project is setup we can start the typescript compiler in watch mode.

npm run ts:watch

Step 6

Now create a folder that will contain the source files for the website.

`example/index.md`

# Hello World

This is a test

`example/style.css`

body {
    background-color: #000;
    color: #fff;
}

`example/layout.html`

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <slot></slot>
</body>
</html>

Step 7

With the source files created we can now run the build script.

For a one time build run:

npm run build

For a watch mode run:

npm run dev

Now start the http server:

npm run start

Conclusion

As you make changes it will only update affected files and be very fast to update.

Note that this does not bundle the javascript and will be up to you if you are using node_modules in any files (for the example in the repo I show how to use UNPKG).

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!

Building a HTML Element Sandbox with Lit

Sun, 19 Jan 2025 06:17:00 GMT

Building a HTML Element Sandbox with Lit

In this article I will go over how to set up a Lit web component and use it to create a HTML Element sandbox that can be used to update a live component.

TLDR The final source here and an online demo.

Prerequisites

Vscode
Node >= 16
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-ts

Then enter a project name html-element-sandbox and now open the project in vscode and install the dependencies:

cd html-element-sandbox
npm i lit
npm i -D @types/node
code .

Update the vite.config.ts with the following:

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

export default defineConfig({
  base: "/html-element-sandbox/",
  build: {
    lib: {
      entry: "src/html-element-sandbox.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" />
    <title>HTML Element Sandbox</title>
    <script type="module" src="/src/html-element-sandbox.ts"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
      }
      html-element-sandbox {
        display: block;
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <html-element-sandbox>
      <template>
        <button
          class="button"
          knob-text="label"
          knob-css-color="fg-color"
          knob-css-background-color="bg-color"
          knob-css-border-radius="shape"
          knob-css-font-size="text-font-size"
          knob-css-padding="padding"
          knob-css---shadow-color="shadow"
        >
          My Button
        </button>
        <style>
          .button {
            --shadow-color: #000;
            --elevation: 3px;
            display: block;
            width: 100%;
            height: 100%;
            border: none;
            background-color: transparent;
            cursor: pointer;
            box-shadow: 0 var(--elevation) calc(var(--elevation) * 2) 0 var(--shadow-color);
          }
        </style>
      </template>
      <div slot="knobs">
        <knob-string id="label" name="Label" value="BUTTON"></knob-string>
        <knob-group name="Style" expanded>
          <knob-color
            id="bg-color"
            name="Background Color"
            value="#ff0000"
          ></knob-color>
          <knob-color
            id="fg-color"
            name="Foreground Color"
            value="#ffffff"
          ></knob-color>
          <knob-color
            id="shadow"
            name="Shadow Color"
            value="#000000"
          ></knob-color>
          <knob-number
            id="text-font-size"
            name="Font Size"
            value="16"
            suffix="px"
          ></knob-number>
          <knob-number
            id="shape"
            name="Border Radius"
            value="100"
            suffix="px"
          ></knob-number>
          <knob-number
            id="padding"
            name="Padding"
            value="12"
            suffix="px"
          ></knob-number>
        </knob-group>
      </div>
    </html-element-sandbox>
  </body>
</html>

Here we are defining the markup we want to use in our sandbox. We are using the html-element-sandbox component to create a sandbox for our HTML Element.

<html-element-sandbox></html-element-sandbox>

Each knob is defined by an id and a name. The id is used to identify the knob in the template and the name is used to display the knob in the UI.

<knob-number
  id="shape"
  name="Border Radius"
  value="30"
  suffix="px"
></knob-number>

For the element inside the template we use knob-* attributes to get the values of the knobs and set the attributes, CSS style or text content.

<!-- Attributes -->
<div knob-attr-disabled="disabled"></div>
<knob-boolean id="disabled" name="Disable" value="false"></knob-boolean>

<!-- CSS Properties -->
<div knob-css-color="fg-color" knob-css-background-color="bg-color"></div>
<knob-color id="bg-color" name="Background Color" value="#ff0000"></knob-color>
<knob-color id="fg-color" name="Foreground Color" value="#ffffff"></knob-color>

<!-- Text Content -->
<div knob-text="content"></div>
<knob-string id="content" name="Text Content" value="Hello World"></knob-string>

A single knob can point to multiple elements:

<html-element-sandbox>
  <template>
    <div id="buttons">
      <button
        knob-text="label"
        knob-css-color="fg-color"
        knob-css-background-color="bg-color"
        knob-css-border-radius="shape"
        knob-css-font-size="text-font-size"
        knob-css-padding="padding"
        knob-css---shadow-color="shadow"
        knob-attr-raised="raised"
        knob-attr-contenteditable="contenteditable"
      ></button>
      <mwc-button
        knob-attr-label="label"
        knob-css---mdc-theme-on-primary="fg-color"
        knob-css---mdc-theme-primary="bg-color"
        knob-css---mdc-shape-small="shape"
        knob-attr-raised="raised"
        label="My Button"
      ></mwc-button>
    </div>
    <script type="module">
      import "https://www.unpkg.com/@material/mwc-button@0.26.1/mwc-button.js?module";
    </script>
    <style>
      button {
        --shadow-color: #000;
        --elevation: 3px;
        display: block;
        border: none;
        background-color: transparent;
        cursor: pointer;
        box-shadow: 0 var(--elevation) calc(var(--elevation) * 2) 0 var(--shadow-color);
      }
      mwc-button {
        --mdc-theme-on-primary: #000;
        --mdc-theme-primary: #fff;
        --mdc-shape-small: none;
      }
      #buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
      }
    </style>
  </template>
  <div slot="knobs">
    <knob-string id="label" name="Label" value="BUTTON"></knob-string>
    <knob-group name="Style" expanded>
      <knob-color
        id="bg-color"
        name="Background Color"
        value="#ff0000"
      ></knob-color>
      <knob-color
        id="fg-color"
        name="Foreground Color"
        value="#ffffff"
      ></knob-color>
      <knob-color id="shadow" name="Shadow Color" value="#000000"></knob-color>
      <knob-number
        id="text-font-size"
        name="Font Size"
        value="16"
        suffix="px"
      ></knob-number>
      <knob-number
        id="shape"
        name="Border Radius"
        value="30"
        suffix="px"
      ></knob-number>
      <knob-number
        id="padding"
        name="Padding"
        value="12"
        suffix="px"
      ></knob-number>
    </knob-group>
    <knob-group name="Attributes" expanded>
      <knob-boolean id="raised" name="Raised" value="false"></knob-boolean>
      <knob-list id="contenteditable" name="Content Editable" value="false">
        <option value="true">true</option>
        <option value="false">false</option>
      </knob-list>
    </knob-group>
  </div>
</html-element-sandbox>

A style and script can be added to load extra content into the sandbox (e.g. a script to load a web component).

Web Component

Before we update our component we need to rename my-element.ts to html-element-sandbox.ts

Open up html-element-sandbox.ts and update it with the following:

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

import "./knobs/boolean";
import "./knobs/string";
import "./knobs/number";
import "./knobs/color";
import "./knobs/list";
import "./knobs/group";
import { KnobValue } from "./knobs/base";
import { BooleanKnob } from "./knobs/boolean";

export const tagName = "html-element-sandbox";

@customElement(tagName)
export class HTMLElementSandbox extends LitElement {
  static styles = css`
    main {
      --knobs-width: 300px;
      --code-height: calc(100% * 0.4);
      --mobile-height: 350px;
      display: grid;
      grid-template-areas: "preview" "knobs" "code";
      grid-template-columns: 100%;
      grid-template-rows: var(--mobile-height) auto auto;
      height: 100%;
      width: 100%;
    }
    #preview {
      grid-area: preview;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #272727;
      background-color: whitesmoke;
    }
    @media (min-width: 600px) {
      main {
        grid-template-areas:
          "preview knobs"
          "code knobs";
        grid-template-columns: calc(100% - var(--knobs-width)) var(
            --knobs-width
          );
        grid-template-rows: calc(100% - var(--code-height)) var(--code-height);
      }
      #preview {
        border-bottom: none;
      }
      slot[name="knobs"] {
        overflow-y: auto;
      }
      pre {
        overflow-y: scroll;
      }
    }
    section {
      flex: 1;
    }
    slot[name="knobs"] {
      grid-area: knobs;
      display: flex;
      flex-direction: column;
      border-left: 1px solid #000;
    }
    slot[name="code"] {
      grid-area: code;
    }
    pre {
      margin: 0;
      font-family: Monaco, Courier, monospace;
      padding: 16px;
      background-color: #272727;
      color: #c8c8c8;
    }
    code {
      font-size: 0.8rem;
      white-space: pre-wrap;
    }
  `;

  @state() code = "";

  render() {
    return html`<main>
      <section id="preview">
        <slot></slot>
      </section>
      <slot name="knobs"> </slot>
      <slot name="code">
        <pre><code>${this.code}</code></pre>
      </slot>
    </main>`;
  }

  firstUpdated() {
    this.init();
  }

  init() {
    this.setUpKnobs();
    this.code = this.getCode();
    // Update the code every time a knob value changes
    this.addEventListener("value", () => {
      this.code = this.getCode();
    });
  }

  setUpKnobs() {
    const root = this.shadowRoot!;
    const preview = root.getElementById("preview")!;
    const template = this.querySelector("template");
    if (template) {
      const div = document.createElement("div");
      div.appendChild(template.content.cloneNode(true));
      // Text Knobs (knob-text)
      div.querySelectorAll("[knob-text]").forEach((el) => {
        const elemId = el.getAttribute("knob-text") || "";
        const knob = this.querySelector(`#${elemId}`);
        if (knob && knob instanceof KnobValue) {
          knob.addEventListener("value", () => {
            const val = knob.value;
            el.textContent = val;
          });
          el.addEventListener("input", (e) => {
            const target = e.target as HTMLElement;
            knob.value = target.textContent;
          });
          knob.init();
        }
      });
      div.querySelectorAll("*").forEach((el) => {
        const attrs = el.attributes;
        for (let i = 0; i < attrs.length; i++) {
          const attr = attrs[i];
          const attrName = attr.name;
          // CSS Knobs (knob-css-*)
          if (attrName.startsWith("knob-css-")) {
            const cssKey = attrName.replace("knob-css-", "");
            const knob = this.querySelector(`#${attr.value}`);
            if (
              knob &&
              knob instanceof KnobValue &&
              el instanceof HTMLElement
            ) {
              knob.addEventListener("value", () => {
                const val = knob.value;
                if (knob.hasAttribute("suffix")) {
                  // Add suffix to the value (e.g. px)
                  el.style.setProperty(
                    cssKey,
                    val + knob.getAttribute("suffix")
                  );
                } else {
                  // No suffix, just set the value
                  el.style.setProperty(cssKey, val);
                }
              });
              knob.init();
            }
          }
          // Attribute Knobs (knob-attr-*)
          if (attrName.startsWith("knob-attr-")) {
            const attrKey = attrName.replace("knob-attr-", "");
            const knob = this.querySelector(`#${attr.value}`);
            if (knob && knob instanceof KnobValue) {
              knob.addEventListener("value", () => {
                const val = knob.value;
                if (knob instanceof BooleanKnob) {
                  if (val) {
                    // <div hidden>
                    el.setAttribute(attrKey, "");
                  } else {
                    // <div>
                    el.removeAttribute(attrKey);
                  }
                } else {
                  // <div value="foo">
                  el.setAttribute(attrKey, val);
                }
              });
              knob.init();
            }
          }
        }
      });
      preview.appendChild(div);
    }
  }

  getCode() {
    const root = this.shadowRoot!;
    const preview = root.getElementById("preview")!;
    if (preview.children.length > 0) {
      const child = preview.children[1];
      if (child && child.children.length > 0) {
        const lines = this.elementToString(child.children[0]);
        // Trim empty lines
        const linesArray = lines.split("\n");
        const filteredLines = linesArray.filter((line) => line.trim() !== "");
        return filteredLines.join("\n");
      }
    }
    return "";
  }

  elementToString(node: Element) {
    const sb: string[] = [];
    const tag = node.tagName.toLowerCase();
    sb.push(`<${tag}`);
    const attrs = node.attributes;
    // Add attributes
    for (let i = 0; i < attrs.length; i++) {
      const attr = attrs[i];
      if (attr.name.startsWith("knob-")) continue;
      // If the attribute is a boolean attribute, add it only if it's true
      if (attr.value === "") {
        sb.push(` ${attr.name}`);
      } else {
        sb.push(` ${attr.name}="${attr.value}"`);
      }
    }
    sb.push(">");
    if (node.childNodes.length > 0) {
      for (let i = 0; i < node.childNodes.length; i++) {
        const child = node.childNodes[i];
        // If the child is a text node, add the content
        if (child instanceof Text) {
          sb.push(child.textContent || "");
        } else if (child instanceof Element) {
          // If the child is an element, recurse
          sb.push(this.elementToString(child));
        }
      }
    }
    sb.push(`</${tag}>`);
    return sb.join("\n");
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: HTMLElementSandbox;
  }
}

Knobs

First let up create a base class that will be used to create all other knobs. Create src/knobs/base.ts and update with with the following:

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

export class Knob extends LitElement {
  constructor(name: string) {
    super();
    this.name = name;
  }

  @property() name: string;
}

export abstract class KnobValue<T> extends Knob {
  constructor(name: string, public val: T) {
    super(name);
    this._value = val;
    this.notify();
  }

  static styles = css`
    .knob {
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0.5rem;
    }
    .knob label {
      flex: 1;
    }
  `;

  _value: T;

  get value(): T {
    return this._value;
  }

  set value(value: T) {
    this._value = value;
    this.notify();
  }

  notify() {
    const value = this.value;
    this.onValue(value);
    this.dispatchEvent(
      new CustomEvent("value", {
        detail: value,
        bubbles: true,
        composed: true,
      })
    );
    this.requestUpdate();
  }

  render() {
    return html`
      <div class="knob">
        <label>${this.name}</label>
        ${this.buildInput()}
      </div>
    `;
  }

  onValue(_val: T) {}

  init() {
    this.notify();
  }

  resolveValue(val: T) {
    return val;
  }

  abstract buildInput(): TemplateResult;
}

Boolean knob

Create src/knobs/boolean.ts and update with the following:

import { KnobValue } from "./base";

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

export const tagName = "knob-boolean";

@customElement(tagName)
export class BooleanKnob extends KnobValue<boolean> {
  constructor(name: string, val: boolean) {
    super(name, val);
  }

  static styles = KnobValue.styles;

  @property({
    type: Boolean,
    attribute: "value",
  })
  _value = false;

  buildInput() {
    return html`<input
      type="checkbox"
      .checked=${this.resolveValue(this.value)}
      @change=${this.onChange}
    />`;
  }

  onChange(e: Event) {
    const target = e.target as HTMLInputElement;
    this.value = target.checked;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: BooleanKnob;
  }
}

Number Knob

Create src/knobs/number.ts and update with the following:

import { KnobValue } from "./base";

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

export const tagName = "knob-number";

@customElement(tagName)
export class NumberKnob extends KnobValue<number> {
  constructor(name: string, val: number) {
    super(name, val);
  }

  static styles = KnobValue.styles;

  @property({
    type: Number,
    attribute: "value",
    converter: {
      fromAttribute: (val: string) => parseFloat(val),
      toAttribute: (val: boolean) => val.toString(),
    },
  })
  _value = 0;

  buildInput() {
    return html`<input
      type="number"
      .valueAsNumber=${this.resolveValue(this.value)}
      @change=${this.onChange}
    />`;
  }

  onChange(e: Event) {
    const target = e.target as HTMLInputElement;
    this.value = target.valueAsNumber;
  }

  resolveValue(val: number): number {
    return val;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: NumberKnob;
  }
}

String Knob

Create src/knobs/string.ts and update with the following:

import { KnobValue } from "./base";

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

export const tagName = "knob-string";

@customElement(tagName)
export class StringKnob extends KnobValue<string> {
  constructor(name: string, val: string) {
    super(name, val);
  }

  static styles = KnobValue.styles;

  @property({ type: String, attribute: "value" })
  _value = "";

  buildInput() {
    return html`<input
      type="text"
      .value=${this.resolveValue(this.value)}
      @input=${this.onChange}
    />`;
  }

  onChange(e: Event) {
    const target = e.target as HTMLInputElement;
    this.value = target.value;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: StringKnob;
  }
}

Color Knob

Create src/knobs/color.ts and update with the following:

import { html } from "lit";
import { customElement } from "lit/decorators.js";
import { StringKnob } from "./string";

export const tagName = "knob-color";

@customElement(tagName)
export class ColorKnob extends StringKnob {
  buildInput() {
    return html`<input
      type="color"
      .value=${this.resolveValue(this.value)}
      @input=${this.onChange}
    />`;
  }

  resolveValue(value: string) {
    if (value && value.startsWith("--")) {
      const style = getComputedStyle(document.body);
      const resolved = style.getPropertyValue(value);
      return resolved;
    }
    return value;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: ColorKnob;
  }
}

List Knob

Create src/knobs/list.ts and update with the following:

import { KnobValue } from "./base";

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

export const tagName = "knob-list";

@customElement(tagName)
export class ListKnob extends KnobValue<string> {
  constructor(name: string, val: string) {
    super(name, val);
  }

  static styles = KnobValue.styles;

  @property({
    type: String,
    attribute: "value",
  })
  _value = "";

  buildInput() {
    const options = this.getOptions();
    return html`<select @change=${this.onChange}>
      ${Array.from(options).map(
        (option) =>
          html`<option
            value=${option.value}
            .selected=${this.value === option.value}
          >
            ${option.textContent}
          </option>`
      )}
    </select>`;
  }

  getOptions() {
    const options = this.querySelectorAll(
      "option"
    ) as NodeListOf<HTMLOptionElement>;
    return Array.from(options);
  }

  onChange(e: Event) {
    const target = e.target as HTMLSelectElement;
    this.value = target.value;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: ListKnob;
  }
}

Group Knob

Create src/knobs/group.ts and update with the following:

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

export const tagName = "knob-group";

@customElement(tagName)
export class GroupKnob extends Knob {
  constructor(name: string, knobs: Knob[] = []) {
    super(name);
    this.knobs = knobs;
  }

  static styles = css`
    details {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    details summary {
      padding: 0.5rem;
    }
  `;

  knobs: Knob[];

  @property({ type: Boolean }) expanded = false;

  render() {
    return html`<details ?open=${this.expanded}>
      <summary>${this.name}</summary>
      <div class="collection">
        <slot></slot>
        ${this.knobs.map((knob) => html`${knob}`)}
      </div>
    </details>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: GroupKnob;
  }
}

Conclusion

If everything worked as expected, you should see the following:

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

The source for this example can be found here.

Async Preact Signals

Tue, 28 Jan 2025 12:00:00 GMT

Async Preact Signals

When working with signals in Javascript, it is very common to work with async data from Promises.

Async vs Sync

But unlike other state management libraries, signals do not have an asynchronous state graph and all values must be computed synchronously.

When people first start using signals they want to simply add async to the function callback but this breaks how they work under the hood and leads to undefined behavior. ☹️

Async functions are a leaky abstraction and force you to handle them all the way up the graph. Async is also not always better and can have a performance impact. 😬

Working with Promises

We can still do so much with sync operations, and make it eaiser to work with common async patterns.

For example when you make a http request using fetch, you want to return the data in the Promise and update some UI.

const el = document.querySelector('#output');
let postId = '123';
fetch(`/posts/${postId}`).then(res => res.json()).then(post => {
    el.innerText = post.title;
})

Now when we add signals we can rerun the fetch everytime the post id changes.

import { effect, signal } from "@preact/signals-core";

const el = document.querySelector('#output');
const postId =  signal( '123');

effect(() => {
    fetch(`/posts/${postId.value}`).then(res => res.json()).then(post => {
        el.innerText = post.title;
    });
});

This is better, but now we need to handle stopping the previous request if the post id changes before the previous fetch completes.

import { effect, signal } from "@preact/signals-core";

const el = document.querySelector('#output');
const postId =  signal( '123');
let controller;

effect(() => {
    if (controller) {
         controller.abort();
    }
    controller = new AbortController();
    const signal = controller.signal;
    try {
       fetch(`/posts/${postId.value}`, { signal }).then(res => res.json()).then(post => {
            el.innerText = post.title;
        }); 
    } catch (err) {
       // todo: show error message
    }
});

But this still skips a lot of things we normally want to show like loading states and error states.

import { effect, signal, batch } from "@preact/signals-core";

const el = document.querySelector('#output');
const postId =  signal( '123');
const postData = signal({});
const errorMessage = signal('');
const loading = signal(false);
let controller;

effect(() => {
    if (controller) {
         controller.abort();
    }
    controller = new AbortController();
    const signal = controller.signal;
    batch(() => {
       loading.value = true;
       errorMessage.value = '';
       postData.value = {};
    });
    try {
       fetch(`/posts/${postId.value}`, { signal }).then(res => res.json()).then(post => {
            batch(() => {
                 postData.value = post;
                 loading.value = false;
             });
        }); 
    } catch (err) {
        errorMessage.value = err.message;
    }
});
effect(() =>  {
    if (loading.value) {
        el.innerText = 'Loading...';
    } else if (errorMessage.value) {
        el.innerText = `Error: ${errorMessage.value}`;
    } else {
        el.innerText = postData.value.title;
    }
});

Now we can show the proper states, but this is only for one request...

We could wrap this up in a class to reuse or create a new type of signal that can work with asynchronous data.

AsyncState

We want to have a base class that we can make our loading states easily extend from:

export class AsyncState<T> {
  constructor() {}

  get value(): T | null {
    return null;
  }

  get requireValue(): T {
    throw new Error("Value not set");
  }

  get error(): any {
    return null;
  }

  get isLoading(): boolean {
    return false;
  }

  get hasValue(): boolean {
    return false;
  }

  get hasError(): boolean {
    return false;
  }

  map<R>(builders: {
    onLoading: () => R;
    onError: (error: any) => R;
    onData: (data: T) => R;
  }): R {
    if (this.hasError) {
      return builders.onError(this.error);
    }
    if (this.hasValue) {
      return builders.onData(this.requireValue);
    }
    return builders.onLoading();
  }
}

This class actually comes from a Dart port of preact signals I created.

This allows us to easily check if there is an actual value, error or if it is loading. It also provides an easy builder method to map the state to another value. 🤩

AsyncData

The loading state extends AsyncState and passes the value in the constructor to the overriden methods.

export class AsyncData<T> extends AsyncState<T> {
  private _value: T;

  constructor(value: T) {
    super();
    this._value = value;
  }

  get requireValue(): T {
    return this._value;
  }

  get hasValue(): boolean {
    return true;
  }

  toString() {
    return `AsyncData{${this._value}}`;
  }
}

AsyncLoading

For the loading state we override the methods like AsyncData.

export class AsyncLoading<T> extends AsyncState<T> {
  get value(): T | null {
    return null;
  }

  get isLoading(): boolean {
    return true;
  }

  toString() {
    return `AsyncLoading{}`;
  }
}

AsyncError

For the error state we can pass an object of any type to return the error as value instead of throwing an exception (like Go).

export class AsyncError<T> extends AsyncState<T> {
  private _error: any;

  constructor(error: any) {
    super();
    this._error = error;
  }

  get error(): any {
    return this._error;
  }

  get hasError(): boolean {
    return true;
  }

  toString() {
    return `AsyncError{${this._error}}`;
  }
}

asyncSignal

Now we the state classes created, we can create a function to create an asynchronous signal with all the logic we talked about earlier.

We need to show the sync value at any time and have a way to abort previous requests.

export function asyncSignal<T>(
  cb: () => Promise<T>
): ReadonlySignal<AsyncState<T>> {
  const loading = new AsyncLoading<T>();
  const reset = Symbol("reset");
  const s = signal<AsyncState<T>>(loading);
  const c = computed<Promise<T>>(cb);
  let controller: AbortController | null;
  let abortSignal: AbortSignal | null;

  function execute(cb: Promise<T>, cancel: AbortSignal) {
    (async () => {
      s.value = loading;
      try {
        const result = await new Promise<T>(async (resolve, reject) => {
          if (cancel.aborted) {
            reject(cancel.reason);
          }
          cancel.addEventListener("abort", () => {
            reject(cancel.reason);
          });
          try {
            const result = await cb;
            if (cancel.aborted) {
              reject(cancel.reason);
              return;
            }
            resolve(result);
          } catch (error) {
            reject(error);
          }
        });
        s.value = new AsyncData<T>(result);
      } catch (error) {
        if (error === reset) {
          s.value = loading;
        } else {
          s.value = new AsyncError<T>(error);
        }
      }
    })();
  }

  effect(() => {
    if (controller != null) {
      controller.abort(reset);
    }
    controller = new AbortController();
    abortSignal = controller.signal;
    execute(c.value, abortSignal);
  });

  return s;
}

This makes it very easy to create multiple asynchronous signals and also use it anywhere else you have signals in the application like effects and computeds.

const el = document.querySelector('#output');
const postId =  signal('123');

const result = asyncSignal(() => fetch(`/posts/${postId.value}`).then(res => res.json()));

effect(() => {
   el.innerText = result.value.map({
      onLoading: () => 'Loading...',
      onError: (err) => `Error: ${err}`,
      onData: (post) => post.title, 
   });
});

postId.value = '456';

Conclusion

I have started a Preact Signals GitHub discussion here and you can find a gist with the final source code here. 🎉

This has made working with asynchronous data a lot eaiser to work with and would love to hear your thoughts about ways to improve it 👀

Also if you are curious about how Angular does asynchronous signals you can check out the resource signal and the computedFrom/Async signal.

Flutter Input Output Preview

Sun, 19 Jan 2025 05:35:39 GMT

Flutter Input Output Preview

First we need a two pane widget to properly render on mobile and desktop:

import 'package:flutter/material.dart';

class TwoPane extends StatefulWidget {
  const TwoPane({
    super.key,
    required this.primary,
    required this.secondary,
    required this.title,
    this.actions = const [],
    this.loading = false,
  });

  final (String, WidgetBuilder) primary, secondary;
  final List<Widget> actions;
  final String title;
  final bool loading;

  @override
  State<TwoPane> createState() => _TwoPaneState();
}

class _TwoPaneState extends State<TwoPane> {
  bool darkMode = false;

  void toggleDarkMode() {
    if (mounted) {
      setState(() {
        darkMode = !darkMode;
      });
    }
  }

  ThemeData theme(Color color, Brightness brightness) {
    return ThemeData(
      brightness: brightness,
      colorScheme: ColorScheme.fromSeed(
        seedColor: color,
        brightness: brightness,
      ),
      useMaterial3: true,
    );
  }

  @override
  void didUpdateWidget(covariant TwoPane oldWidget) {
    if (oldWidget.loading != widget.loading ||
        oldWidget.title != widget.title ||
        oldWidget.actions != widget.actions) {
      if (mounted) setState(() {});
    }
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: theme(Colors.purple, darkMode ? Brightness.dark : Brightness.light),
      child: Builder(builder: (context) {
        final (primaryTitle, primaryBuilder) = widget.primary;
        final (secondaryTitle, secondaryBuilder) = widget.secondary;
        return Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
              centerTitle: false,
              actions: [
                IconButton(
                  tooltip: 'Toggle dark mode',
                  onPressed: toggleDarkMode,
                  icon: Icon(darkMode ? Icons.light_mode : Icons.dark_mode),
                ),
                ...widget.actions,
              ],
            ),
            body: LayoutBuilder(
              builder: (context, dimens) {
                if (dimens.maxWidth > 800 && dimens.maxHeight > 600) {
                  return Column(
                    children: [
                      if (widget.loading) const LinearProgressIndicator(),
                      Expanded(
                        child: Row(
                          children: [
                            Flexible(
                              flex: 1,
                              child: primaryBuilder(context),
                            ),
                            Flexible(
                              flex: 1,
                              child: secondaryBuilder(context),
                            ),
                          ],
                        ),
                      ),
                    ],
                  );
                }
                return DefaultTabController(
                  length: 2,
                  child: Column(
                    children: [
                      SizedBox(
                        height: kToolbarHeight,
                        width: double.infinity,
                        child: TabBar(
                          tabs: [
                            Tab(text: primaryTitle),
                            Tab(text: secondaryTitle),
                          ],
                        ),
                      ),
                      if (widget.loading) const LinearProgressIndicator(),
                      Expanded(
                        child: TabBarView(
                          children: [
                            primaryBuilder(context),
                            secondaryBuilder(context),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ));
      }),
    );
  }
}

Then we can pass some text fields for one pane to render an output:

import 'package:flutter/material.dart';

import 'two_pane.dart';

class InputOutputPreview extends StatefulWidget {
  const InputOutputPreview({
    super.key,
    required this.title,
    required this.input,
    required this.output,
    required this.preview,
    required this.placeholder,
    this.actions = const [],
    this.codeTitle = 'Code',
    this.previewTitle = 'Preview',
    this.loading = false,
    this.lazy = false,
    this.previewSize = const Size(300, 700),
  });

  final (
    String,
    ValueChanged<(TextEditingController, TextEditingController)>
  ) input, output;
  final Widget? preview;
  final Widget placeholder;
  final String title;
  final List<Widget> actions;
  final String codeTitle, previewTitle;
  final Size? previewSize;
  final bool loading;
  final bool lazy;

  @override
  State<InputOutputPreview> createState() => _InputOutputPreviewState();
}

class _InputOutputPreviewState extends State<InputOutputPreview> {
  final input = TextEditingController();
  final output = TextEditingController();
  String? lastInput;
  String? lastOutput;

  @override
  void initState() {
    super.initState();
    if (!widget.lazy) input.addListener(onInput);
    output.addListener(onOutput);
  }

  @override
  void dispose() {
    super.dispose();
    if (!widget.lazy) input.removeListener(onInput);
    output.removeListener(onOutput);
    input.dispose();
    output.dispose();
  }

  void onInput() {
    final (_, update) = widget.input;
    final str = input.text;
    if (lastInput == str) return;
    update((input, output));
    lastInput = str;
  }

  void onOutput() {
    final (_, update) = widget.output;
    final str = output.text;
    if (lastOutput == str) return;
    update((output, input));
    lastOutput = str;
  }

  @override
  Widget build(BuildContext context) {
    final (inputTitle, _) = widget.input;
    final (outputTitle, _) = widget.output;
    return TwoPane(
      title: widget.title,
      actions: widget.actions,
      loading: widget.loading,
      primary: (
        widget.codeTitle,
        (context) => SizedBox(
              height: double.infinity,
              child: Column(
                children: [
                  Flexible(
                    child: Padding(
                      padding: const EdgeInsets.all(8),
                      child: Card(
                        child: ListTile(
                          title: Text(inputTitle),
                          subtitle: TextField(
                            maxLines: null,
                            controller: input,
                            expands: true,
                            decoration: InputDecoration(
                              isCollapsed: true,
                              border: InputBorder.none,
                              suffix: widget.lazy
                                  ? IconButton(
                                      onPressed: onInput,
                                      icon: const Icon(Icons.save),
                                      tooltip: 'Submit',
                                    )
                                  : null,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Flexible(
                    child: Padding(
                      padding: const EdgeInsets.all(8),
                      child: Card(
                        child: ListTile(
                          title: Text(outputTitle),
                          subtitle: TextField(
                            maxLines: null,
                            controller: output,
                            expands: true,
                            decoration: const InputDecoration(
                              isCollapsed: true,
                              border: InputBorder.none,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
      ),
      secondary: (
        widget.previewTitle,
        (context) => Container(
              color: Theme.of(context).colorScheme.surfaceVariant,
              child: Builder(builder: (context) {
                if (widget.previewSize == null) {
                  return widget.preview ?? widget.placeholder;
                }
                return Center(
                  child: Material(
                    elevation: 8,
                    child: SizedBox.fromSize(
                      size: widget.previewSize,
                      child: widget.preview ?? widget.placeholder,
                    ),
                  ),
                );
              }),
            )
      ),
    );
  }
}

Flutter Infinite Canvas

Sun, 19 Jan 2025 05:33:00 GMT

Flutter Infinite Canvas

Overview

The following is an example of how to build an infinite canvas with InteractiveViewer and CustomMultiChildLayout.

Blog post: Create a multi touch canvas in Flutter

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' hide Colors;

void main() {
  final controller = WidgetCanvasController([
    WidgetCanvasChild(
      key: UniqueKey(),
      offset: Offset.zero,
      size: const Size(400, 800),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Scaffold 1'),
        ),
        body: const Placeholder(),
      ),
    ),
    WidgetCanvasChild(
      key: UniqueKey(),
      offset: const Offset(200, 200),
      size: const Size(400, 800),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Scaffold 2'),
        ),
        body: const Placeholder(),
      ),
    ),
  ]);
  runApp(MaterialApp(home: WidgetCanvas(controller: controller)));
}

class WidgetCanvas extends StatefulWidget {
  const WidgetCanvas({super.key, required this.controller});

  final WidgetCanvasController controller;

  @override
  State<WidgetCanvas> createState() => WidgetCanvasState();
}

class WidgetCanvasState extends State<WidgetCanvas> {
  @override
  void initState() {
    super.initState();
    controller.addListener(onUpdate);
  }

  @override
  void dispose() {
    controller.removeListener(onUpdate);
    super.dispose();
  }

  void onUpdate() {
    if (mounted) setState(() {});
  }

  static const Size _gridSize = Size.square(50);
  WidgetCanvasController get controller => widget.controller;

  Rect axisAlignedBoundingBox(Quad quad) {
    double xMin = quad.point0.x;
    double xMax = quad.point0.x;
    double yMin = quad.point0.y;
    double yMax = quad.point0.y;
    for (final Vector3 point in <Vector3>[
      quad.point1,
      quad.point2,
      quad.point3,
    ]) {
      if (point.x < xMin) {
        xMin = point.x;
      } else if (point.x > xMax) {
        xMax = point.x;
      }

      if (point.y < yMin) {
        yMin = point.y;
      } else if (point.y > yMax) {
        yMax = point.y;
      }
    }

    return Rect.fromLTRB(xMin, yMin, xMax, yMax);
  }

  @override
  Widget build(BuildContext context) {
    const inset = 2.0;
    return Listener(
      onPointerDown: (details) {
        controller.mouseDown = true;
        controller.checkSelection(details.localPosition);
      },
      onPointerUp: (details) {
        controller.mouseDown = false;
      },
      onPointerCancel: (details) {
        controller.mouseDown = false;
      },
      onPointerMove: (details) {},
      child: LayoutBuilder(
        builder: (context, constraints) => InteractiveViewer.builder(
          transformationController: controller.transform,
          panEnabled: controller.canvasMoveEnabled,
          scaleEnabled: controller.canvasMoveEnabled,
          onInteractionStart: (details) {
            controller.mousePosition = details.focalPoint;
          },
          onInteractionUpdate: (details) {
            if (!controller.mouseDown) {
              controller.scale = details.scale;
            } else {
              controller.moveSelection(details.focalPoint);
            }
            controller.mousePosition = details.focalPoint;
          },
          onInteractionEnd: (details) {},
          minScale: 0.4,
          maxScale: 4,
          boundaryMargin: const EdgeInsets.all(double.infinity),
          builder: (context, viewport) {
            return SizedBox(
              width: 1,
              height: 1,
              child: Stack(
                clipBehavior: Clip.none,
                children: [
                  Positioned.fill(
                    child: GridBackgroundBuilder(
                      cellWidth: _gridSize.width,
                      cellHeight: _gridSize.height,
                      viewport: axisAlignedBoundingBox(viewport),
                    ),
                  ),
                  Positioned.fill(
                    child: CustomMultiChildLayout(
                      delegate: WidgetCanvasDelegate(controller),
                      children: controller.children.map((e) {
                        return LayoutId(
                            id: e,
                            child: Stack(
                              clipBehavior: Clip.none,
                              children: [
                                Positioned.fill(
                                  child: Material(
                                    elevation: 4,
                                    child: SizedBox.fromSize(
                                      size: e.size,
                                      child: e.child,
                                    ),
                                  ),
                                ),
                                if (controller.isSelected(e.key!))
                                  Positioned.fill(
                                    top: -inset,
                                    left: -inset,
                                    right: -inset,
                                    bottom: -inset,
                                    child: Container(
                                      decoration: BoxDecoration(
                                        border: Border.all(
                                          color: Colors.blue,
                                          width: 1,
                                        ),
                                      ),
                                    ),
                                  ),
                              ],
                            ));
                      }).toList(),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

class GridBackgroundBuilder extends StatelessWidget {
  const GridBackgroundBuilder({
    super.key,
    required this.cellWidth,
    required this.cellHeight,
    required this.viewport,
  });

  final double cellWidth;
  final double cellHeight;
  final Rect viewport;

  @override
  Widget build(BuildContext context) {
    final int firstRow = (viewport.top / cellHeight).floor();
    final int lastRow = (viewport.bottom / cellHeight).ceil();
    final int firstCol = (viewport.left / cellWidth).floor();
    final int lastCol = (viewport.right / cellWidth).ceil();

    return Stack(
      clipBehavior: Clip.none,
      children: <Widget>[
        for (int row = firstRow; row < lastRow; row++)
          for (int col = firstCol; col < lastCol; col++)
            Positioned(
              left: col * cellWidth,
              top: row * cellHeight,
              child: Container(
                height: cellHeight,
                width: cellWidth,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.grey.withOpacity(0.1),
                    width: 1,
                  ),
                ),
              ),
            ),
      ],
    );
  }
}

class WidgetCanvasDelegate extends MultiChildLayoutDelegate {
  WidgetCanvasDelegate(this.controller);
  final WidgetCanvasController controller;
  List<WidgetCanvasChild> get children => controller.children;

  Size backgroundSize = const Size(100000, 100000);
  late Offset backgroundOffset = Offset(
    -backgroundSize.width / 2,
    -backgroundSize.height / 2,
  );

  @override
  void performLayout(Size size) {
    // Then draw the screens.
    for (final widget in children) {
      layoutChild(widget, BoxConstraints.tight(widget.size));
      positionChild(widget, widget.offset);
    }
  }

  @override
  bool shouldRelayout(WidgetCanvasDelegate oldDelegate) => true;
}

class WidgetCanvasChild extends StatelessWidget {
  const WidgetCanvasChild({
    required Key key,
    required this.size,
    required this.offset,
    required this.child,
  }) : super(key: key);

  final Size size;
  final Offset offset;
  final Widget child;

  Rect get rect => offset & size;

  WidgetCanvasChild copyWith({
    Size? size,
    Offset? offset,
    Widget? child,
  }) {
    return WidgetCanvasChild(
      key: key!,
      size: size ?? this.size,
      offset: offset ?? this.offset,
      child: child ?? this.child,
    );
  }

  @override
  Widget build(BuildContext context) {
    return child;
  }
}

class WidgetCanvasController extends ChangeNotifier {
  WidgetCanvasController(this.children);

  final List<WidgetCanvasChild> children;
  final Set<Key> _selected = {};
  late final transform = TransformationController();
  Matrix4 get matrix => transform.value;
  double scale = 1;
  Offset mousePosition = Offset.zero;

  bool _mouseDown = false;
  bool get mouseDown => _mouseDown;
  set mouseDown(bool value) {
    _mouseDown = value;
    notifyListeners();
  }

  bool isSelected(Key key) => _selected.contains(key);

  bool get hasSelection => _selected.isNotEmpty;

  bool get canvasMoveEnabled => !mouseDown;

  Offset toLocal(Offset global) {
    return transform.toScene(global);
  }

  void checkSelection(Offset localPosition) {
    final offset = toLocal(localPosition);
    final selection = <Key>[];
    for (final child in children) {
      final rect = child.rect;
      if (rect.contains(offset)) {
        selection.add(child.key!);
      }
    }
    if (selection.isNotEmpty) {
      setSelection({selection.last});
    } else {
      deselectAll();
    }
  }

  void moveSelection(Offset position) {
    final delta = toLocal(position) - toLocal(mousePosition);
    for (final key in _selected) {
      final index = children.indexWhere((e) => e.key == key);
      if (index == -1) continue;
      final current = children[index];
      children[index] = current.copyWith(
        offset: current.offset + delta,
      );
    }
    mousePosition = position;
    notifyListeners();
  }

  void select(Key key) {
    _selected.add(key);
    notifyListeners();
  }

  void setSelection(Set<Key> keys) {
    _selected.clear();
    _selected.addAll(keys);
    notifyListeners();
  }

  void deselect(Key key) {
    _selected.remove(key);
    notifyListeners();
  }

  void deselectAll() {
    _selected.clear();
    notifyListeners();
  }

  void add(WidgetCanvasChild child) {
    children.add(child);
    notifyListeners();
  }

  void remove(Key key) {
    children.removeWhere((e) => e.key == key);
    notifyListeners();
  }
}

Demo

Lightweight Flutter Animations

Sun, 19 Jan 2025 05:45:19 GMT

Lightweight Flutter Animations

Overview

First we need to create the abstract class:

abstract class AnimationWidget<T extends StatefulWidget> extends State<T>
    with SingleTickerProviderStateMixin {
  Duration elapsed = Duration.zero;
  Duration delta = Duration.zero;
  late final Ticker ticker;
  BoxConstraints constraints = const BoxConstraints.tightFor();

  @override
  void initState() {
    super.initState();
    ticker = createTicker((elapsed) {
      delta = elapsed - this.elapsed;
      this.elapsed = elapsed;
      update(elapsed);
      if (mounted) setState(() {});
    });
    ticker.start();
    WidgetsBinding.instance.addPostFrameCallback(start);
  }

  @override
  void dispose() {
    ticker.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, dimens) {
      constraints = dimens;
      return paint(context, dimens);
    });
  }

  void start(Duration time) {}

  void update(Duration time);

  Widget paint(BuildContext context, BoxConstraints constraints);
}

This will let us replace State with AnimationWidget and not need to call setState to rebuild the ui.

Example

For the example we need an inline canvas painter:

class InlinePainter extends CustomPainter {
  InlinePainter({
    required this.draw,
    super.repaint,
  });

  final void Function(Canvas canvas, Size size) draw;

  @override
  void paint(Canvas canvas, Size size) {
    draw(canvas, size);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

And the example using the new widget class:

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

class SimpleExample extends StatefulWidget {
  const SimpleExample({Key? key}) : super(key: key);

  @override
  State<SimpleExample> createState() => _SimpleExampleState();
}

class _SimpleExampleState extends AnimationWidget<SimpleExample> {
  var x = 0.0;
  var y = 0.0;
  var z = 0.0;

  @override
  void update(Duration time) {
    final t = delta.inMilliseconds / 1000;
    x += t;
    y += t;
    z += t;
  }

  @override
  Widget paint(BuildContext context, BoxConstraints constraints) {
    return Material(
      child: Center(
        child: Container(
          width: 100,
          height: 100,
          transform: Matrix4.identity()
            ..rotateX(x)
            ..rotateY(y)
            ..rotateZ(z),
          child: const Text(
            'Hello World',
            style: TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

Demo

Flutter Master-detail view

Sun, 19 Jan 2025 05:38:59 GMT

Flutter Master-detail view

When building mobile, desktop and web applications with Flutter often times you are faced with what to do with lists and the content when selected. Depending on the data you may have a list that renders another list before resolving to a detail view. On tablet or desktop this can be achieved with multi-column layouts.

On mobile you will still need to push to the details screen since the space is constrained.

How to build a Master-detail view with Flutter:

import 'package:flutter/material.dart';

class MasterDetail<T> extends StatefulWidget {
  const MasterDetail({
    Key? key,
    required this.listBuilder,
    required this.detailBuilder,
    required this.onPush,
    this.emptyBuilder,
  }) : super(key: key);

  final Widget Function(BuildContext, ValueChanged<T?>, T?) listBuilder;
  final Widget Function(BuildContext, T, bool) detailBuilder;
  final void Function(BuildContext, T) onPush;
  final WidgetBuilder? emptyBuilder;

  @override
  State<MasterDetail<T>> createState() => _MasterDetailState<T>();
}

class _MasterDetailState<T> extends State<MasterDetail<T>> {
  final selected = ValueNotifier<T?>(null);
  double? detailsWidth;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      primary: false,
      body: LayoutBuilder(
        builder: (context, dimens) {
          const double minWidth = 350;
          final maxWidth = dimens.maxWidth - minWidth;
          if (detailsWidth != null) {
            if (detailsWidth! > maxWidth) {
              detailsWidth = maxWidth;
            }
            if (detailsWidth! < minWidth) {
              detailsWidth = minWidth;
            }
          }
          return ValueListenableBuilder<T?>(
            valueListenable: selected,
            builder: (context, item, child) {
              final canShowDetails = dimens.maxWidth > 800;
              final showDetails = item != null && canShowDetails;
              return Row(
                children: [
                  Expanded(
                    child: widget.listBuilder(context, (item) {
                      if (canShowDetails) {
                        selected.value = item;
                      } else {
                        selected.value = null;
                        if (item != null) widget.onPush(context, item);
                      }
                    }, selected.value),
                  ),
                  if (canShowDetails)
                    MouseRegion(
                      cursor: SystemMouseCursors.resizeLeftRight,
                      child: GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onHorizontalDragUpdate: (details) {
                          if (mounted) {
                            setState(() {
                              double w = detailsWidth ?? maxWidth;
                              w -= details.delta.dx;
                              // Check for min width
                              if (w < minWidth) {
                                w = minWidth;
                              }
                              // Check for max width
                              if (w > maxWidth) {
                                w = maxWidth;
                              }
                              detailsWidth = w;
                            });
                          }
                        },
                        child: const SizedBox(
                          width: 5,
                          height: double.infinity,
                          child: VerticalDivider(),
                        ),
                      ),
                    ),
                  if (canShowDetails)
                    SizedBox(
                      width: detailsWidth ?? maxWidth,
                      height: double.infinity,
                      child: showDetails
                          ? widget.detailBuilder(context, item, false)
                          : widget.emptyBuilder?.call(context) ??
                              const Center(
                                child: Text('Select a item to view details'),
                              ),
                    ),
                ],
              );
            },
          );
        },
      ),
    );
  }
}

This widget will size itself after layout and try to size the list as small as possible with the details filling up the rest. This is important for later when we nest multiple of these to create progressively adapting layouts.

Flutter Markdown View with Material 3

Sun, 19 Jan 2025 05:37:02 GMT

Flutter Markdown View with Material 3

Overview

How to style the Flutter markdown widget with Material 3 text and color styles:

import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:go_router/go_router.dart';
import 'package:markdown/markdown.dart' as md;
import 'package:url_launcher/url_launcher.dart';

class MarkdownView extends StatelessWidget {
  const MarkdownView({
    Key? key,
    required this.markdown,
    this.textScaleFactor = 1,
  }) : super(key: key);

  final String markdown;
  final double textScaleFactor;

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    final textTheme = Theme.of(context).textTheme;
    return Markdown(
        data: markdown,
        selectable: true,
        softLineBreak: true,
        onTapLink: (text, link, _) {
          final url = link ?? '/';
          if (url.startsWith('http')) {
            launchUrl(Uri.parse(url));
          } else {
            context.push(url);
          }
        },
        extensionSet: md.ExtensionSet(
          md.ExtensionSet.gitHubFlavored.blockSyntaxes,
          [md.EmojiSyntax(), ...md.ExtensionSet.gitHubFlavored.inlineSyntaxes],
        ),
        styleSheet: MarkdownStyleSheet(
            textScaleFactor: textScaleFactor,
            p: textTheme.bodyLarge!.copyWith(
              fontSize: 16,
              color: colors.onSurface.withOpacity(0.72),
            ),
            a: TextStyle(
              decoration: TextDecoration.underline,
              color: colors.onSurface.withOpacity(0.72),
            ),
            h1: textTheme.displaySmall!.copyWith(
              fontSize: 25,
              color: colors.onSurface,
            ),
            h2: textTheme.headlineLarge!.copyWith(
              fontSize: 20,
              color: colors.onSurface,
            ),
            h3: textTheme.headlineMedium!.copyWith(
              fontSize: 18,
              color: colors.onSurface,
            ),
            h4: textTheme.headlineSmall!.copyWith(
              fontSize: 16,
              color: colors.onSurface,
            ),
            h5: textTheme.titleLarge!.copyWith(
              fontSize: 16,
              color: colors.onSurface,
            ),
            h6: textTheme.titleMedium!.copyWith(
              fontSize: 16,
              color: colors.onSurface,
            ),
            listBullet: textTheme.bodyLarge!.copyWith(
              color: colors.onSurface,
            ),
            em: const TextStyle(fontStyle: FontStyle.italic),
            strong: const TextStyle(fontWeight: FontWeight.bold),
            blockquote: TextStyle(
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.w500,
              color: colors.onSurfaceVariant,
            ),
            blockquoteDecoration: BoxDecoration(
              color: colors.surfaceVariant,
              borderRadius: BorderRadius.circular(4),
            ),
            code: const TextStyle(fontFamily: 'monospace'),
            tableHead:
                const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
            tableBody:
                const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
            blockSpacing: 8,
            listIndent: 32,
            blockquotePadding: const EdgeInsets.all(8),
            h1Padding: const EdgeInsets.symmetric(vertical: 8),
            h2Padding: const EdgeInsets.symmetric(vertical: 8),
            h3Padding: const EdgeInsets.symmetric(vertical: 8),
            h4Padding: const EdgeInsets.symmetric(vertical: 8),
            h5Padding: const EdgeInsets.symmetric(vertical: 8),
            h6Padding: const EdgeInsets.symmetric(vertical: 8),
            codeblockPadding: const EdgeInsets.all(8),
            codeblockDecoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              color: colors.surfaceVariant,
            ),
            horizontalRuleDecoration: BoxDecoration(
              border: Border(
                top: BorderSide(
                  color: colors.outline.withOpacity(0.4),
                  width: 1,
                ),
              ),
            )),
    );
  }
}

Flutter Native HTTP Client

Sun, 19 Jan 2025 05:39:48 GMT

Flutter Native HTTP Client

import 'package:cronet_http/cronet_http.dart';
import 'package:cupertino_http/cupertino_http.dart';
import 'package:device_info_plus/device_info_plus.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:platform_info/platform_info.dart';

void main() async {
  var clientFactory = Client.new;
  final device = DeviceInfoPlugin();
  if (platform.isAndroid) {
    final engine = CronetEngine.build(
      cacheMode: CacheMode.memory,
      userAgent: (await device.androidInfo).model,
    );
    clientFactory = () => CronetClient.fromCronetEngine(engine);
  } else if (platform.isCupertino) {
    clientFactory = CupertinoClient.defaultSessionConfiguration.call;
  }
  runWithClient(() => runApp(const MyApp()),clientFactory);
}

Flutter Stream Widget

Sun, 19 Jan 2025 05:41:20 GMT

Flutter Stream Widget

Work with streams directly in the build method of a Flutter widget:

import 'dart:async';

import 'package:flutter/widgets.dart';

abstract class StreamWidget extends StatefulWidget {
  const StreamWidget({Key? key}) : super(key: key);

  Stream<Widget> build(BuildContext context);

  void initState() {}

  void dispose() {}

  void reassemble() {}

  Widget? buildEmpty(BuildContext context) => null;

  Widget? buildError(BuildContext context, Object? error) => null;

  @override
  State<StreamWidget> createState() => _StreamWidgetState();
}

class _StreamWidgetState extends State<StreamWidget> {
  @override
  void initState() {
    widget.initState.call();
    super.initState();
  }

  @override
  void dispose() {
    widget.dispose.call();
    super.dispose();
  }

  @override
  void reassemble() {
    widget.reassemble.call();
    super.reassemble();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: widget.build(context),
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          final result = widget.buildError(context, snapshot.error);
          if (result != null) return result;
        }
        if (snapshot.hasData) {
          return snapshot.data!;
        } else {
          final result = widget.buildEmpty(context);
          if (result != null) return result;
        }
        return const SizedBox.shrink();
      },
    );
  }
}

This could also be applied to Future widgets, but for reactive screens, streams are closer to what is actually happening.

Riverpod Example

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'generated.g.dart';

@riverpod
class GeneratedWidget extends _$GeneratedWidget {
  @override
  Widget build(BuildContext context) {
    return const Text('Generated widget!');
  }
}

@riverpod
class StreamWidget extends _$StreamWidget {
  @override
  Stream<Widget> build(BuildContext context) async* {
    final controller = StreamController<int>();
    final timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      controller.add(timer.tick);
    });
    yield* controller.stream.map((event) => Text('Stream widget: $event'));
    timer.cancel();
    await controller.close();
  }
}

@riverpod
class FutureWidget extends _$FutureWidget {
  @override
  Future<Widget> build(BuildContext context) async {
    await Future.delayed(const Duration(seconds: 3));
    return const Text('Future completed!');
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Consumer(builder: (context, ref, child) {
              final generated = ref.watch(generatedWidgetProvider(context));
              return generated;
            }),
            Consumer(builder: (context, ref, child) {
              final stream = ref.watch(streamWidgetProvider(context));
              return stream.when(
                data: (data) => data,
                error: (error, stack) => Text(error.toString()),
                loading: () => const CircularProgressIndicator(),
              );
            }),
            Consumer(builder: (context, ref, child) {
              final future = ref.watch(futureWidgetProvider(context));
              return future.when(
                data: (data) => data,
                error: (error, stack) => Text(error.toString()),
                loading: () => const CircularProgressIndicator(),
              );
            }),
          ],
        ),
      ),
    );
  }
}

Building a DND Agent with ADK, Antigravity, and Gemini 3

Thu, 04 Dec 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Building a DND Agent with ADK, Antigravity, and Gemini 3

Description

Nohe breaks down how he built a "Campaign Agent" for Dungeons & Dragons/Pathfinder. This system uses a loop of specialized agents—including a receptionist, storyteller, rules lawyer, and critic—to generate playable adventures grounded in actual rulebooks using Google Search grounding.

We also explore the Agent Development Kit (ADK), discussing why we prefer it for building sequential and parallel agent loops, how it handles tools (including GitHub MCP), and how to visualize your agent's logic as a graph.

In this episode:

00:00 - Intro: What we do at Google (Firebase, Genkit, GenUI)
01:22 - The state of AI Agents
02:34 - Building a D&D Campaign Agent
07:45 - The Architecture: Storyteller, Rules Lawyer & The Critic
09:58 - Why loops are better than single-shot prompts
12:41 - What is the ADK (Agent Development Kit)?
16:16 - Using GitHub MCP and Tools
18:25 - "That sounds like a Cron Job": When NOT to use AI
20:30 - Testing Agents and Vertex AI optimization
29:45 - Sneak Peek: Offline-first syncing with Better Auth & PowerSync

Resources & Topics Mentioned:

ADK: https://google.github.io/adk-docs/
Firebase Genkit: https://firebase.google.com/products/genkit
Model Context Protocol (MCP): https://modelcontextprotocol.io/
Google Vertex AI: https://cloud.google.com/vertex-ai
PowerSync (Offline-First Sync): https://www.powersync.com/
Better Auth: https://www.better-auth.com/
Pathfinder 2e (Archives of Nethys): https://2e.aonprd.com/

Hosts:

Nohe: Working on Firebase, Genkit, and ADK.
Rody: Working on Cross-platform full-stack AI and Generative UI.#AI #GoogleCloud #Genkit #ADK #SoftwareEngineering #DND #Pathfinder

Transcript

Intro: What we do at Google (Firebase, Genkit, GenUI)

0:00 · Hi, I'm Noey.

0:01 · And I'm Rodie. And today we're filming our first podcast here at the Google Plex. So, uh, this will be the ver worst version of our podcast we're ever going to record, but we're really excited to talk about AI today. Uh, before we get started, um, Noey, what kind of projects are you working on? What do you do at Google?

0:17 · So, uh, I work on Firebase, which is the platform as a service, you know, uh, uh, team or back end as a service, I should say. And we've been working on uh authentication traditionally, right?

0:30 · Security rules, o uh app check, that type of thing. But lately, I've been doing a lot with Genkit and the ADK and AI and agents.

0:39 · That's awesome. What uh languages do you like to work in?

0:42 · English.

0:43 · That's a good one.

0:44 · Yeah.

0:44 · Good for AI.

0:46 · No. Uh generally it's like Go, Typescript. Um I don't like Python, but to like write good ADK code recently, it's been a lot of drinking the Python Kool-Aid, you know.

0:58 · Yeah, that's interesting. And we'll uh be talking a little bit more about ADK later. Um, and for those that don't know, my name is Rodie. I'm also here at Google working on a bunch of AI stuff. Uh, currently focused on crossplatform full stack AI, uh, including generative UI, which is a kind of a new way to send dynamic components back to the client.

1:19 · But today, I really wanted to chat with you about like how we build agents. uh agents seem to be like this thing that everybody's talking about that they're uh involved in so many different parts of the application whether you're building a a client side agent to work with data or something that's hosted on a server like it just seems like a lot but I really want to find a way that we can practically build agents and actually break them down and how to build them. Do you have any like thoughts on that?

The state of AI Agents

1:50 · Like are you working with any type of agents?

1:53 · Download anti-gravity. Yeah.

1:54 · And just just say building me an agent, it would go boom, done.

1:57 · So that's actually my CLI too, right?

2:00 · Yeah, that's like a that's a good point because uh when you're working with an IDE, you have a coding agent and it has access to tools. It has access to context and they're probably one of the most uh contextheavy types of agents you possibly can build. But I feel like going from that to how do I build something for users that they can use is a big step. So like have you explored anything where you can start to break that process apart and be able to call it like an API?

2:31 · So uh I I had just finished wrapping up something uh and it what what it is is we play uh we play Dungeons and Dragons.

Building a D&D Campaign Agent

2:40 · Yep.

2:41 · I I play Roie shows up and he's like, "Oh god, what is this?" Uh, and in in the game, uh, I DM'd one time, right?

2:48 · And when you DM, you build out a story, a collaborative story with a bunch of different people, and you always want to try and like include everybody at the table, make them feel welcome, have some overarching goal that you're headed towards and things like that. And in my head, I was like, how can I make an agent that makes adventures that we would want to play, right?

3:08 · Yeah, totally. Uh because I'm sure you you probably know this like the first time you showed up we played a game you're like what in the world is going on?

3:15 · Yeah.

3:15 · Like who are these people? Why are they talking like this way and you know all these other things.

3:19 · Um so maybe for people like me I really didn't understand the concept of D&D coming into it for the first time. So could you maybe explain like what is like a basic flow of like why you'd even want an agent in that process anyway?

3:34 · like uh like for me I I kind of just thought people got together and and and dressed stuff up and just did a bunch of stuff. But when I got into it, it's like it's like a really cool like systematic uh way to build.

3:47 · Yeah.

3:47 · So like there there's a story and there's like these rule books, right?

3:50 · And so you can buy these pre-generated adventures. You can play them uh without doing anything. And I was like, what if we created an agent that has like some lore behind it, right? M. So, you give it some like general guidelines and then you let it fill in the details, right?

4:05 · Uh, and then there's a rule system as well. So, you know, if you show up the first night you're playing ever and you want to be the wizard and you want to cast fireball right away, you're going to be disappointed.

4:15 · Yes.

4:16 · Yeah.

4:16 · Because you got to like level up to get to a certain spot where you can cast fireball or you might not be able to do anything else, you know?

4:22 · Yeah.

4:22 · I mean, wizard level one, you can't do anything. Fair. Yeah. So, uh, so you show up the first night, you're all excited, can't do it. That that's that's the thing is like with with D and D and Pathfinder and all these other tabletop role playing games, you have this thing where there's a system of rules and all these other uh boundaries that you have to abide by.

4:43 · Yeah.

4:43 · Right.

4:43 · And then once you have that uh you you can kind of fill in the rest with your own story. And yeah, uh going back to what I said earlier, like every player is at the table, they they create a character that has their own motivations, right? So, you're playing like an alchemist and your goal is to find I forget what it is. It's okay if you don't remember either. Yeah. My my character is Oz the wizard. Yeah.

5:08 · Um no relation. Uh and his goal is to like search the world for knowledge, right?

5:16 · Yeah.

5:16 · But, you know, we're playing this campaign called Abomination Bolts, and there's not really a lot of like knowledge finding other than being like, what's underground, right?

5:26 · Yeah. So, uh, just to give you a little backstory, we're going into this vault and it's underground.

5:33 · Yeah. And I'm in the pursuit of knowledge. So, of course, I'm going to be like, "What's underground?"

5:37 · Uh, but like you might have something that like you might have a character that says like, "Oh, I want to find out like who murdered my father or something like that." Right.

5:45 · And it's really hard to include those like side stories.

5:50 · Yeah.

5:50 · In the main quest, you Well, I think even more than that, it's like uh at least for me, it's hard to be like, "Okay, this is where my current state is. This is the state I want to get to." And like, how do I do this along the way without just going the the fastest possible path to optimize for speed? How do I optimize for adventure? And I think that's kind of something you're exploring.

6:10 · Yeah.

6:10 · So, uh the you know, 3:00 a.m.

6:13 · text messages, that's why I'm a little tired right now. But 3 a.m. text messages to you are, "Hey, Rodie, check this thing out that I built."

6:19 · Yeah.

6:19 · Uh, and it's it's a campaign agent, right? So, yeah, the when you have a bunch of adventures grouped together, it's called a campaign. Uh, and each the campaign agent takes your idea for what you want to accomplish in that game and it builds out a story that you can play and it it provides loot, progression, story progression, all these types of things that I honestly am just bad at because I I don't think I'm very creative.

6:45 · Uh, and it it fills in the gaps to allow everybody at your story not everybody at your story, everybody at your table to get a story that they'd want to play and and understand and work through, right?

6:56 · So, uh, for instance, this campaign agent, what it does is it tries to like sus out some details from me, right?

7:02 · It's like, hey, uh, you want to play a campaign like what kind of campaign are you trying to play? Is it like a western? Is it uh like high adventure, high fantasy? Is it?

7:13 · And for people that don't know, like a D and D campaign is built around a theme and ultimately set of characters that has like a very specific set of rules to follow.

7:21 · Yeah.

7:21 · Exactly. So, uh when when when it comes down to like trying to sus out those details, it it kind of sets the tone for how that agent will interact with you after that point. Right. So, uh so the campaign agent has this like receptionist and the receptionist is like, "All right, let me get some details and I'm gonna hand you off to like the writing room." Yeah.

7:43 · And uh what happens in the writing room?

The Architecture: Storyteller, Rules Lawyer & The Critic

7:45 · Well, the writing room has a handful of people in there. It has a story agent who fills in the story. So uh you might want to like fight a dragon this adventure or something, right? So you say, "Oh, I want to fight a dragon.

7:58 · I don't have to know anything about dragons. I don't even have to come up with a story about why you're running into a dragon in in in the basement, right? Uh, but somehow you're going to run into a dragon and it it'll go and and say, "All right, you you run into this and and it kind of adds in those details that you don't have." Then you have something that says like the character advancement. So, uh, you know, you have a character, I have a character, we all have our own goals in the game to advance our character storyline. So, let's say, uh, my character is in the pursuit of knowledge.

8:29 · I might find some ruby or gem in the basement that leads me into another side quest or another story.

8:38 · Uh, and it's it's one of those things to allow your characters to like build on Yeah.

8:42 · to what they have, right?

8:44 · Well, one of the interesting things, too, is like you're building not only your character development, but also team development cuz like those side quests like at first like seem like, well, if we're just this is our goal, like why are we not just going straight there? like we can do the minimal number of operations per level to level up and whatever. And it's like it's really not about that. It's like exploring the unexpected turns, being able to like find new ways to uh you know, basically combat and like apply different methods and I feel like it's uh yeah, it's super cool.

9:16 · How did these agents connect together? You know, like let's take a step back like um you have this idea for like what you want to build. Yep.

9:24 · You have this basically PRD for what these agents descriptions are. Like how did you go from taking that to code?

9:31 · Like what what did you look at? Was there like something prior works for like maybe even existing solutions that just weren't meeting it?

9:39 · Oh yeah. I mean so I what I used to do was just single shot everything, right?

9:43 · Yeah.

9:43 · So hop hop into the Gemini app and say like it context stuff it just let it go. Fill in as much as you can. I want this and this and this and this and this. And that did like okay like the first few times.

9:55 · Uh but like what I really got into and you know this because I talked to you about it ungodly amounts of times is that uh you can actually run all of these agents in like a loop. Right? So and and the way that I like to think about it is like Uncle Bob, right? He wrote a book about function declarations. And I always like to cite this when I think about agents because it's like what?

Why loops are better than single-shot prompts

10:17 · Have one function do one thing and very tested. Yeah.

10:21 · Yeah. Nothing else. Right. Every time you have one that does one thing really well, leave it alone.

10:26 · Yep.

10:26 · Don't do that. Right. So I have I I started about the storyteller, the player advancement. Then I have the rules lawyer that comes in and like he writes some rules that says like oh like he's the enforcer.

10:36 · He's the enforcer, right? He knows like what's challenging for like six level one characters, right? Yep.

10:42 · Uh and he knows like how to balance things out and which he would know because uh D&D and Pathfinder have like a very extensive rule set open source.

10:51 · Yeah. And so you can actually like just crawl it.

10:53 · Yeah. Exactly. So uh we use like Google search grounding in the one that I have.

10:57 · Right.

10:57 · That's cool.

10:58 · And you can actually plug in like the Pathfinder rule book and all which is great. You can just upload the PDF which Gemini is great at. Yeah.

11:03 · Yeah. It can fit the whole PDF too, right? Yes. Which I do.

11:07 · And notebook LM which is also awesome for it. So, uh, once you have that done, the final step that I have is the critic, right? And this like I tell it, yeah, I I start by giving each LLM that I interact with like a persona, right?

11:23 · So, the first agent, I give it a persona. I say, you're the receptionist. You're trying to plan this out, whatever. The next one, I say like, you are, you know, the world's best storyteller, right? And you want to describe this world in all these different ways, right? And you keep going through these things. And then the final one is you are the world's biggest critic of people's homemade D&D adventures. You hate everything about them.

11:48 · Yeah.

11:48 · Unless it meets like a certain bar of like adventure and quality.

11:52 · So you're almost building like a pessimistic uh gate to try to pass.

11:55 · Right. Yeah. And and then I have it give feedback and you tell it give me very specific and actionable feedback and give it a grade. M.

12:03 · And if the grade is A+, if it's given to you as an A+ grade, you keep it.

12:08 · Oh, nice.

12:09 · And you write it to disk, right? And then you exit the loop, right?

12:12 · So I I run all these four or five agents except for the receptionist in this loop.

12:18 · So how can you do that? Cuz like I feel like that's one of the things like when I was building with Genkit or a bunch of other just maybe the API directly, I kind of had this idea and I felt like I was just building a lot of the boiler plate uh by myself. Uh what I've been using recently, I didn't think I would like it, right? And then it turns out I really like it because I've been doing it for everything is I've been using the ADK.

What is the ADK (Agent Development Kit)?

12:41 · Cool. And so what is ADK?

12:43 · It is the agent development kit and it's available in Python, Go, and Java.

12:49 · Sweet. Yeah. And then so um for those that may not know, it's actually, you know, fully open sourced and you can go check it out on GitHub. But why why does something like ADK exist? Like I feel like there's a lot of you know why not just use lang chain or like all these different adapters like or the API directly like um what are the things that you found in it that you're like oh this is like solving that thing that I was trying to do.

13:15 · So I can't speak to lang chain because I've never used it.

13:17 · Yeah. I've heard about it. I know people like it.

13:20 · Fair. Great. Uh, but for me, the thing that I really like about it is how well it gives me like the tools that I need to build these like looping, sequential agents, all these types of things, right?

13:32 · Which they call, I believe, workflow agents, do they?

13:35 · Yeah.

13:36 · Okay. Yeah. Oh, yeah. Yeah.

13:38 · Sequential looping.

13:39 · You read the docs right before we met, didn't you?

13:41 · Yeah. Sequential looping and something else.

13:44 · Parallel. Parallel.

13:44 · Parallel. Oh, yeah. Yeah. The parallel ones are cool, too.

13:46 · Yeah.

13:47 · Yeah. I I should have used the parallel one for like the Yes. Yeah.

13:51 · Which is cool because you can say like here are these things that are independent and can happen and then you can do these all at once and do like a race. Um I feel like writing that kind of code in ADK made it a whole lot easier to see oh my agent is a graph and here's how these nodes are connected together whereas I didn't really find that solution with other stuff.

14:10 · And I know there's things like um lane chain graph which some people uh will probably recommend but I feel like ADK is like taking a agnostic approach to it and be like you can write it in whatever language you want. You can deploy it really easy on cloud run, you know, well, any languages you want, but basically anything beyond just JavaScript, you know, like that's fair.

14:32 · You can uh you can bring these cloud first languages and you can deploy it on your own stuff, deploy it to cloud run really easily with a Docker container.

14:40 · And I feel like that's where I was like, oh that that's like a really cool. And then also like the telemetry, the logging, all of that just makes it really easy. The dashboards, the dev tools. Yeah. One thing I do like about the ADK is because as you said it's like graph based. You actually get to see the graph.

14:55 · You do and like on the events right when you when you get to see that like pop up in the dev tools is so awesome.

15:02 · And they also just launched uh an ADK visual builder where you can actually start to compose these together as well to help prototype that just came out. So we can Is it locally or is it I believe it is local. Yeah. So I can uh we can link the blog. But um I just I really like the concept of starting to think about agents and okay I have this idea I can start to really quickly to put these prompts into these individual nodes. Every node can have its own tools.

15:28 · I think that's something that's a big unlock when they come to something like this when you know when you're used to just making it work as really good in a oneshot you're like here's like a hundred tools and here's all the access to stuff. But with ADK, you can be like if you're building a customer support bot, for example, like you always have to query the orders. You always have to make sure they have a valid account, you always and you you can guarantee that all the nodes will work.

15:55 · You're right.

15:55 · And every time it's either going to fail or it's not.

15:57 · And you can have like each node do something specific, right? So like I think there's some portion of it where it's like, okay, I I really do want this one to have 15 tools available to you.

16:06 · Oh, totally. And like a bigger model and some you can have a really tiny model.

16:10 · Yeah.

16:10 · Yeah. You know, it's funny that you bring up the the tools because I actually ran into, you know, a fire with this recently. I know where I I was trying out the GitHub MCP server inside the ADK and I was like, you know, hacking away, getting it to work and I was like, "All right, like figure out like the code to fix this bug, right?" Yes. I was testing uh Gemini 3 Pro preview. When I got done testing it, uh I set it up to like, oh, solve this thing for me. I was running it in like a looping agent.

Using GitHub MCP and Tools

16:36 · I gave it like 50 max iterations, some high number, which by the way, for people wondering, is a way to actually limit how many times this workflow runs. So you don't have to write any of the code. You can have built-in rate limiting, built-in like control over this thing will never exceed a a certain type of thing, which is very important when you're deploying an agent uh where you are not really as human in the loop and can control.

17:02 · Yeah. So uh I got up and I went to go get something for myself. Uh, probably something to eat, probably take the dog out for a walk.

17:10 · And when I came back, it had actually submitted a PR because I didn't realize that it had that much like I didn't realize the the tools.

17:18 · I was like, I I don't even know. Like luckily, it was Gemini Pro 3, right? So, it did compile and run, fix the thing.

17:24 · Fortunately, it didn't like ask anybody to review it. I got a ping from somebody. I was like, did you mean this?

17:31 · Wow. Yeah. I mean, that's a that's a cool call out because I feel like tools I mean, there's some recent uh studies that even show that like you can spend up to like 50k on tokens just in tools themselves.

17:42 · Oh, in the definitions.

17:43 · Yeah.

17:43 · And there's like a new spec that's even kind of aiming to like dynamically find them. But I think that's kind of um kind of a more extreme side of it, but I feel like the ability to choose that like, hey, I know this customer support node is only ever going to need this tool or these three tools, right? And you can say you can support everything that this node can do. You can have a very specific prompt and you know that every time it calls it's going to work as expected and when it doesn't you can see the evals on why it's not and so you can write tests.

18:14 · Now here's the interesting thing. You said every time you call this node you know it's going to work. However, that seems like it's deterministic.

18:22 · That's fair. Well and I I've run into this issue where you know Jeff Yeah, I love Jeff. Jeff is great, but he grounds me to earth so fast sometimes.

"That sounds like a Cron Job": When NOT to use AI

18:32 · Yes.

18:33 · I like we ran into this thing where we were writing and or I say we Yeah.

18:37 · I was like, Jeff, I'm gonna build this agent that does this, this, this, and this, and this. I've gotten to here. He's like, you know, that sounds like a crown job. And I was like, thanks, Jeff.

18:47 · Thanks, Jeff. You're right.

18:49 · And I I think that there's something about, you know, obviously we're both very excited about Yeah. everything that you can do with AI and and plugging in the different bits and all these things. Like I'm starting to build agents for myself.

19:03 · Oh, all the time.

19:04 · Every little task. I'm like, you think in agents and you see agents as the hammer. Yeah.

19:09 · Yeah. It's like when when I first got uh into Android development.

19:12 · Yeah.

19:13 · God, 10 years ago now. And I was like, oh my gosh, I'm moving to an app that does this. Y and then I would show it to people and they're like it pen and paper. That's that's how notes work.

19:26 · It exists. Yeah.

19:27 · Yeah. Yeah. Stick it on the fridge. That's your to-do list, you know.

19:31 · And I just I got so amped up on that.

19:34 · And and I think there's there's a part where, you know, I think I'm at fault at this. I don't know if you are, but you got to like pull back and be like, is am I actually doing the right thing here?

19:46 · See, like, am I I'm installing Spanner for this like very light thing. Maybe there's another solution or or maybe like I don't want to use AI to do this thing. I could do deterministic.

19:57 · Right. Exactly. Yeah. So, when you go back to that uh that customer service example, Yeah.

20:03 · do you think in your head, were you thinking deterministically or were you thinking something like you could give it like some kind of like rough guidelines? So, I kind of actually think that um maybe the way I like to approach AI is if you have good enough tests and you have good enough filters, if even if you have a bunch of bad responses, but only the good ones make it through. So, like is that considered success?

20:28 · When you say tests, yes, define tests.

Testing Agents and Vertex AI optimization

20:32 · So, you could do testing with fuzzy or uh um automated integration or simulation style testing. M but really you want to say like and I think simulation testing is probably the best like analogous way to test AI for this where you say I have an agent or like basically a customer in this use case.

20:52 · This is the type of state they're in and you can say here are the tools that they have available here they can they can call the thing like do they how many times do they resolve to like a correct state. Oh, okay. So, you run through these scenarios almost like user journeys. And do we have another word for this?

21:07 · CJS or what were you thinking?

21:09 · I was thinking evals.

21:11 · That's fair. That's a good point.

21:12 · Are you referring to evals?

21:13 · I mean, it is a form of evals for sure.

21:15 · Okay.

21:15 · Yeah.

21:15 · Yeah. Yeah. Yeah. But it's one of those things where uh most of like what I work on right now is trying to get things like to a good enough running state where I manually test it. I know it's like the wrong way to do it though.

21:25 · Yeah.

21:26 · And I really do want to get back into eval. And there's actually like a really cool vertex. Totally uh AI that remember we were trying to move to Dan and he said like you just plug in your prompt in the model and it'll like optimize your prompts for you.

21:38 · Exactly. Yeah. There's so many cool tools now that we can use to help take our agents to the next level.

21:43 · I'm wondering if that works for if it's on a per a like per prompt basis or if it's like on a per giant. I would assume it's a bare minimum of per prompt basis.

21:55 · Yeah.

21:56 · But I'm I'm sure you could do it other ways too. So, getting it back to the the agent builder, um, what language did you decide to write it in? Because I feel like you have three options and you know, I know you may prefer Go, but I prefer Go. Uh, but it feels like the Go docs aren't necessarily there yet, which is very new to be clear as they came out last week.

22:19 · Yeah.

22:20 · So, I was like or two weeks ago or something, right?

22:22 · There's there's things in it that I feel like are there's things that might not be there. So I think it's also mapping a paradigm that doesn't exist necessarily one to one.

22:31 · Yeah.

22:32 · But still does an incredible job.

22:33 · Oh yeah, it does. Uh I think the Python one is a little bit further ahead.

22:37 · Yeah. Which I believe it was the oldest.

22:40 · It was the first one.

22:41 · Yeah, that's what Yeah. Okay. Yeah, that's the oldest.

22:43 · Yeah.

22:43 · And then Java Java was next. Um I chose just to go so I when I struggled with Go, I jumped out to Python. I remember doing I was doing like a You remember those training courses? They're like quick labs or something, I think.

22:56 · Yeah. Uh I was doing the training courses and I didn't know this but the Python one actually can wrap lang chain Yep. tools and other things.

23:06 · So I feel like it's a good base to set one totally because you are able to actually start from hey let me just do this like really basic and some existing work. There's a big ecosystem. Yeah. I feel like I was shocked uh when you sent me the example looking at the Python ADK code. Like it's amazing how much of the file is for your agent. Like like almost all of it's just your prompt and like a minimal function for like a tool or something like it.

23:33 · It really felt like it was not that much decoration or boiler plate. three lines of like maybe imports then like three lines saying like this is the agent, the name, the description and then 40 lines of the prompt.

23:47 · Yeah. Yeah. Yeah.

23:48 · Yeah.

23:48 · Totally.

23:49 · Yeah.

23:49 · It was it it's and it's you don't have to do anything special to call it either, right? It's just like ADK web and you get like the web UI and it spins up the agent all that.

23:59 · Totally. Yeah.

23:59 · Um with Go I think you have to like set up the launcher, the runner and then you call ADK or you say go run main.go agents.go go web UI like and you pass in like a bunch of arguments to get it to actually like launch.

24:13 · Yeah.

24:13 · You know, I'm sure it'll get better over time.

24:14 · Totally. And so like what are your next steps for this agent? Like do you feel like you did everything you set out to?

24:21 · You feel like there's like some edge cases or do you feel like maybe an agent wasn't the right way to build it at all?

24:28 · Like cuz I feel like sometimes we we need to look at it from all angles.

24:31 · So uh what the output was like good.

24:35 · Yeah.

24:35 · I feel like it wasn't detailed enough though. So I wrote between like 230 and three and then it's like it works. I I want to get more details out of it. I actually want to like ground it in actual JSON data about Pathfinder.

24:50 · Yeah.

24:50 · So there's like even a database you can connect to.

24:52 · Yeah. So I want to ground it in real data.

24:54 · Yeah.

24:55 · Like you said from SQLite or wherever.

24:57 · Yeah. So you can use like the MCP toolbox and have SQLite Postgress my SQL.

25:01 · Yeah. And then because right now like when I ask it for stats, it will do the Google search.

25:08 · But if you ever Google search Pathfinders things like, oh, I want like the wizard to get like a really cool weapon. Sometimes it'll pull from Pathfinder 1 or pull from Pathfinder 2 before the remastered edition.

25:18 · Well, for people that want like I there's actually revisions that like add new stuff and that was a big thing for me. I'm like there's a lot of times in our campaign of like oh blah blah blah and it's probably like outdated.

25:28 · Yeah.

25:28 · So, uh I want to pull from that. I think the storyteller just needs like a little bit of work. The mon the monster manual is probably one that I want to load in there. Right now, what I've noticed is it creates monsters. Yeah.

25:39 · Rather than references something to like pull existing monsters.

25:43 · So, okay, maybe this is a good refactoring point with ADK. How easy is it to be to change out an agent to add a new agent in the middle of some kind of a process or even just to like approach it differently?

25:55 · That is a great question. I think like dropping in and out of agents, yeah, is pretty easy, right? You just swap them out. So like when you have the ADK definition, Yeah.

26:05 · of like your loop agent or whatever, there's something that says like sub agents.

26:10 · Okay.

26:10 · And it's an array of other agents. You can just drop them in and out. Pop them in. It's a graph. Yeah.

26:15 · Yeah. It's a graph, right?

26:16 · Uh the one thing that is probably going to be hard about that is uh testing the results. So right now I don't test any of my agents in a vacuum.

26:27 · So this is come comes back to the Vert.Ex AI uh service that will actually optimize your prompts and stuff.

26:33 · Y um or basically rewriting your prompts, right?

26:36 · Rewriting your prompt.

26:37 · Yeah. Yeah. So I would probably want to jump into that service to get it to rewrite my prompts for me.

26:45 · So that way I'm not spending a bunch of time running this giant agent or like running every agent in isolation. And if there's something off the shelf that already works, I mean, that's the whole thing is we want to try to find things that let us focus on other stuff, but let us build our agents.

26:58 · Exactly.

26:58 · Yeah. Yeah. So, I think I think it should be pretty easy, but it's just one of those things where um I haven't tried it yet.

27:06 · Yeah, totally. Well, uh I feel like it was kind of a cool way to dive into an intro into agents.

27:13 · Yeah.

27:14 · Uh there's I mean obviously a lot more that we have to talk about, but uh yeah.

27:18 · Any any other last thoughts on the the dungeon agent?

27:22 · No, not off the top of my head. Um it was like a lot of fun to build.

27:27 · Yeah. And really fast, too. I mean, like it really did not take that long. Yeah.

27:30 · You know, the one thing that I would do like not not the one thing I would do different next time, but like the next thing I think I'm going to have to like do is stop myself from building so many.

27:41 · Yeah.

27:42 · Because like every time I pull out my laptop now, I'll start working on like doing one thing or some other thing. I'm like, you know what? I bet I could write an agent that would take like an arbitrary input and I could just like say like, "Oh, go solve this thing." It'll go and solve it. Right.

27:54 · So, like Ash and I have one that we want to build for like her job and like Totally.

27:58 · There's there's like small little things that, you know, I just have a sledgehammer. I just want to hit it on everything.

28:04 · Totally.

28:05 · Yeah. So, that's awesome. Yeah.

28:07 · I'm gonna have to like restrain myself from doing this, you know?

28:10 · That's fair. I mean, I feel like uh it's awesome that we can build them so quickly and be able to deploy them. I mean, sometimes it only needs to exist for a period of time. I think that's actually one of those things with agents is like, do you build it for scale or do you build it for the task? And sometimes I'm like, this thing will still save me time even if I'm only using it for a week. Like it's like it's going to do everything I need. I mean, my process might change everything else, but like in this moment, it has the stuff it needs in the context. Yeah.

28:38 · Yeah.

28:38 · Well, it's it's crazy. Like the the other day, Arthur was asking me for some like stats to be pulled and I was like, I know I I know I can write this myself.

28:47 · Yeah.

28:47 · Let me just hand this off to anti-gravity and anti-gravity just built like this oneoff tool for me. Yeah.

28:52 · Well, what's what's crazy though is it's not even so much like I can do that myself. Sometimes it's like there are too many like smaller tasks that all depend on other tasks that sometimes it's just amount about like finding that data, filtering it down, doing a bunch of this boiler plate to where then you can come in and focus on it. One of the things I really love about anti-gravity is the uh agent manager. So you can literally be just kicking off that work, go on and do something else. Oh, we got a notification. It's done. Let me go do that report. Oh no, I need to change it.

29:20 · man. Well, I uh it's been awesome to be able to talk about uh uh ADK and agents and like kind of like where this space is heading and um anything you're going to be maybe researching in the next couple weeks.

29:33 · God, I don't know. I just get hit with so many things. I you know, there's a lot of things I'm researching that I'm not ready to like pull back the covers on.

29:41 · Yeah.

29:42 · Maybe I'll have to listen for a future episode.

29:44 · Yeah, that'd be great.

Sneak Peek: Offline-first syncing with Better Auth & PowerSync

29:46 · Yeah.

29:46 · I feel like I'm uh I do a lot of stuff in Dart and Go and C and SQLite and stuff like that. And uh lately I've been exploring how to uh build an offline first syncing solution that uses better off for authentication with an optional login for people that don't know is a self-hosted off that connects to your database. So you could use fire store, you could use SQLite, Postgress, doesn't really matter. And then uh it uses power sync.

30:12 · It allows you to like sync some type of data like in a really true deterministic way that uh lets you have offline. And the whole thing including the optional login, the optional sync was all built with anti-gravity. I built it over the course of probably 10 hours with Gemini 3 and I used some Gemini Deep Researches to be able to ground the context and I built this whole thing and it was so amazing how I could write the test coverage, I could create the plans, I could be very targeted.

30:43 · So, uh we'll have to listen for a future episode on a deep dive, but I have been really having a fun time with that. Awesome.

30:49 · This was fun.

30:50 · Yeah, absolutely. Yeah. Um, you can uh find all the links in the show description and please let us know if you have any other feedback on things you want to hear about. Uh, you can find us want to hear about maybe I'm talking too much.

31:01 · Never talk about that again.

31:03 · Yeah. Uh, get that weird guy off of there.

31:04 · Totally. You can find someone near you.

31:06 · Yeah.

31:08 · You can uh find us both on socials and of course here at Google.

31:11 · Cool. All right. See you.

31:12 · See you. Bye.

Building with Antigravity, Gemini CLI, and Stitch

Mon, 26 Jan 2026 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Building with Antigravity, Gemini CLI, and Stitch

Description

In this next episode of our "untitled" podcast, Nohe and Rody take a "tech walk" to discuss the evolving landscape of AI development tools. We dive deep into the differences between the linear workflows of Gemini CLI and the asynchronous, project-level capabilities of Anti-Gravity.

We also geek out on home lab setups—discussing the shift from Docker Compose to Kubernetes (K3s) on Raspberry Pi clusters—and share a game-changing workflow using NotebookLM to generate context files for your AI agents. Finally, we explore Stitch for generative UI, including how to instantly create shaders and animations from simple screenshots.

Key Topics Discussed:

Gemini CLI vs. Anti-Gravity: Comparing agentic loops and managing complex refactors.
Dev Environments: Configuring Neovim, Tmux, and using Git Worktrees to manage multiple AI tasks simultaneously.
Infrastructure & DevOps: Running local K3s clusters, SSH tunneling with Anti-Gravity, and using AI to bridge the gap between Docker Compose and Kubernetes.
Context Engineering: How to scrape documentation and use NotebookLM to write robust agent.md.
Generative UI: Using Stitch to redesign legacy apps and generate complex Flutter shaders automatically.

Chapters: 00:00 - Intro & Gemini CLI Configurations 01:05 - Gemini CLI vs. Anti-Gravity: Linear vs. Async Workflows 03:45 - Anti-Gravity’s Agent Manager & Project-Level Tasks 06:30 - Managing Multiple Contexts with Git Worktrees 08:30 - Neovim, Tmux, and AI Integration 12:30 - SSH Tunneling & Remote Development with Anti-Gravity 15:10 - Home Lab: Raspberry Pi Clusters & K3s vs. Docker Swarm 19:45 - Using AI to Convert Docker Compose to Kubernetes 22:55 - The NotebookLM Workflow: Generating Agent Rules from Docs 31:30 - Stitch: Generative UI, Shaders, and App Redesigns 35:20 - Outro & Teaser: Prompt Optimization

Hosts:

Nohe: Working on Firebase, Genkit, and ADK.
Rody: Working on Antigravity, Flutter, and Firebase Studio

#AI #GoogleCloud #GeminiCLI #Antigravity #SoftwareEngineering #NeoVim #Docker

Transcript

Intro & Gemini CLI Configurations

0:00 · Hey, how's it going? I'm Noey.

0:02 · And I'm Rodie.

0:03 · And we're here for our second Untitled podcast. We're thinking tech walks or something of that nature because we just happen to be walking outside when we record these. Uh, and today we wanted to talk about the Gemini CLI and the anti-gravity.

0:17 · Yeah, we are very excited about this episode. I can't wait to dive into the different ways we're using AI in our workflows and also Gemini 3.

0:26 · Yeah. So, actually, did you know in the Gemini CLI you can do like slash settings and you can go through and set a whole bunch of different configuration options?

0:35 · Oh, yeah, totally.

0:36 · So, one of the configurations options is to actually use the newer models. I don't know if that's just pinned to Gemini 3. I guess we'll find out when [clears throat] Gemini 4 or Gemini 5 or whatever comes out, right?

0:46 · Uh, but that's one way that you can quickly upgrade to a newer model to try it out in your workflow uh when it's whenever they introduce it, right?

0:55 · Absolutely. Yeah. And uh we can definitely leave links down in the comments on how to do that.

0:59 · Yeah. So Gemini CLI came out. I've been using it for the last few months and then anti-gravity came out like last month.

Gemini CLI vs. Anti-Gravity: Linear vs. Async Workflows

1:07 · Yeah.

1:07 · And I have not fully migrated to it yet.

1:09 · Oh, interesting. Yeah.

1:10 · You have?

1:11 · Yeah.

1:11 · I feel like I've I've completely done the opposite. I started with Gemini CLI uh the second it launched was really starting to use it heavily even inside of Firebase Studio when we included it.

1:24 · Um, I felt like Gemini CLI was way more of the agent dev loop that I was kind of used to where I could have access to tools. I was not afraid to write bash scripts or uh be able to read and write files. I felt like I had control over I want you to work in this directory.

1:43 · You know, it's funny because Gemini CLI, it will do one of those things where I'm [clears throat] looking for a very specific file and I know that there's a bash command like set or or grab or whatever, but I know it exists. I don't know the command. So, Gemini CLI is really good at like just being like, "Oh, I know what you want to do." And then sometimes it'll do like there's a said command to find and replace as well.

2:08 · Oh, yeah. Yeah. So I I used that for like some documentation pages where we change like I you know all of our docs had one name and then we had to change it to another name. Oh yes. Yeah. So that was a very cool way to use the Gemini CLI. And the thing I like about the Gemini CLI is it kind of works how my brain works where I just go and I work linearly through a task. Yeah. Right.

2:30 · And even there's a task feature now too.

2:32 · Is there?

2:33 · Yes.

2:34 · Built into Gemini CLI where basically it'll create like a task file. It'll show the list of things that it's working on and take it off.

2:41 · Yeah.

2:41 · So, the the task mode I I I haven't used that yet, but the way that I used tasks was uh I would have it write a plan first to say, "Hey, replace all my dependencies or upgrade this project or do something like that and then go through and give me a plan for how you would do it."

2:59 · Oh.

2:59 · And then I and then I would feed it back and be like, "That plan sounds good. I didn't read it, but it sounds good. Go ahead and do that." Right. Y because it usually kind of like prompts the model on the the expected steps in the workflow because by default it would kind of just like do the task and exit, you know, and and I found that I could get like more complicated prompts that way, right?

3:20 · Uh and then occasionally when I use the CLI, I'll clear and start over and do some other things just to get like the things I'm looking for and I continuously get commit, you know, after every test run, right? Yeah. Which it I think it even has checkpoints now, too. Does it? Oh, okay. That's great. So, uh you are a big fan of anti-gravity.

3:40 · Yes. Yeah.

3:41 · And I know that it works differently, right, with like the async loop and like you just kind of be like go do this thing. I'm going to go drink some coffee, right?

Anti-Gravity’s Agent Manager & Project-Level Tasks

3:51 · Yeah.

3:51 · So, I feel like with anti-gravity, um one of the big differences was uh Gemini CLI was kind of focused on I'm solving this like one-off workflow.

4:00 · Yeah, I'm doing this thing to fix whatever. But with anti-gravity, I can think at a project level. I'm like, I want to migrate the state management or I want to switch from this database to a completely different provider or my approach and like the the complex refactoring is super awesome because it comes up with an implementation plan. It comes up with verification steps. It comes up with automated testing, manual testing.

4:29 · It literally at the end of the loop it'll be okay now human you know go check this thing that you need to run through to verify that it's working and it's that that I just found like to be really really awesome.

4:42 · Yeah

4:42 · it sounds like it. So one other question I had for you is you say that you give it this task and then you're able to like walk away. Do you do that through the agent manager or do you do it through like another type of thing?

4:52 · So one of the cool UX pieces of it is it actually doesn't matter. You can do it from either side. So if you are in the normal editor and you have a chat and you ask it to kick off a task, you can hit commande or on Windows there's an equivalent and it will be both running in the agent manager and also inside of the editor.

5:15 · So I can close out the editor if I want to and come back to it. Yeah, you're killing me. Because what I've been doing is sometimes I I'll kick off a task in the chat like in the editor [laughter] and I'll be like, I don't want this to finish and I'll close the editor, but then I'll still get a popup and I'm like, what happened?

5:31 · Yeah, because it's totally running in the background. [laughter] Oh man, I feel I feel like a fool.

5:37 · So, uh uh pro tip, make sure [laughter] you not do that. Hit stop first.

5:43 · Yeah.

5:44 · Yeah. And then there was another interesting thing and I wanted to understand how you did this because I don't fully understand how this works.

5:52 · Okay.

5:52 · So how do you approach multiple tasks in the same project? Because what I like to do which I know is wrong 100% know it's wrong is I will start a task in the agent manager.

6:03 · Okay.

6:04 · Then switch to a different branch in my terminal.

6:08 · Yep.

6:08 · I I know the commands to do that. I don't have to ask Gemini CLI. I know how to do that. Uh, and then I go back to the agent manager and ask it to do a new task in the same project and it seems to have a hard time. Yeah.

6:21 · Yeah. I I was just miserable with it. So, like what what do you do to get that working? Because you were telling me about this yesterday.

6:28 · Okay. Yeah.

6:28 · Right.

6:29 · So, one of the things that I like to do is use a feature that's called git work trees. Uh, and you can do this by opening up the folder that contains your project and having it create a new git work tree for every piece of work that you're wanting to do. And for people that don't know, git work trees allow you to create a branch, check it out locally. And when you're working on the files, it will be doing it in isolation.

Managing Multiple Contexts with Git Worktrees

6:56 · So once it's done with it, it can just create a a merge commit back into the main. But you can use agent manager to open up each of the subfolders as subtasks and they can all be working together.

7:08 · So when you open up the agent manager, do you open up each project as a sub project?

7:13 · I've done it both ways and both work.

7:15 · Okay.

7:16 · So you can say like here is my orchestrator agent essentially. you're in charge of creating the git work trees and managing them and you know this is like the the high level like um you're in charge of merging and getting done with tasks and checking and then you can have sub agents that basically are opening up the specific folders and doing the tasks there as well.

7:39 · Okay, that's interesting because I I've never I've never used GitWord trees but totally. Yeah.

7:44 · Yeah.

7:45 · Yeah, they're super awesome. I definitely suggest people give them a try.

7:48 · Yeah. And then how do you think you could do something similar with Gemini CLI?

7:53 · Yeah, totally. I don't think this is like a workflow that's specific to Gravity in any way. Um, in fact, I was starting to experiment with uh using this in Gemini CLI. I will say the one thing that's really nice about anti-gravity is the agent manager where you can just clearly map them one to one.

8:13 · Okay.

8:13 · Yeah. cuz I I feel like in with the Gemini CLI, it still runs on your in your terminal. So maybe you just got to be comfortable with like a bunch of terminals open.

8:21 · Yes.

8:22 · Which you could totally do with like T-Ux or something.

8:24 · Yeah.

8:24 · Well, I So I use T-Max with Gemini CLI and I used uh I have one terminal that's Gemini CLI and then another that's uh Neoim. Yeah, I was about to ask so like um anti-gravity like how does it compare to something like Neoim which like um I feel like Gemini CLI was kind of striking a nerve with you because it was closer to the terminal and also you know you kind of preferred some of those a different type of editor.

Neovim, Tmux, and AI Integration

8:47 · Yeah. So I I like Neoim a lot because I SSH to my workstation. Right.

8:53 · Totally. So, it's I'm usually traveling or out and about and uh I have like a very nice Linux workstation in my like home man cave office type of thing, right?

9:03 · Yeah.

9:04 · Uh you've seen it on the live streams. And um one [clears throat] thing that I have down there Oh, so I use like uh tail scale, I think.

9:12 · Yep.

9:12 · Yeah.

9:12 · Tail scale to connect to it. But it it's funny. I went to my mother-in-law's for Thanksgiving and I was like, I'm going to save power and shut down this machine. And then I'm like up at 3 a.m. Ak I wound up and then just registering my sec my uh my public key in cloud, right?

9:35 · Yeah.

9:36 · So I got that working. I was like programming away. But it's it's one of those things where I use the Gemini CLI in one tab in my terminal or T-Mox setup and then I use Neo of them in the other. And the thing I like about anti-gravity specifically is the sidebar for like agent interactions because it shows you the diffs, right?

9:56 · Whereas a lot of the time what I do actually I have three tabs open but the the first tab is uh Gemini CLI, the second's neoim and then the third is lazy git.

10:05 · Oh, nice.

10:06 · So I use lazy git to see the diffs.

10:08 · Nice. Yeah, I didn't try that.

10:09 · [laughter] And and then I accept the chunks. Yeah. Right. Because if I use lazy git or or if I use anti-gravity, excuse me, what I notice is that I can't actually accept any uh or I you get the chunks in the screen, right? You get the disc, but then as as soon as you switch to like a neoim Gemini CLI setup.

10:31 · Yep.

10:31 · Mhm.

10:32 · It's you're just like, "Hey, do this thing." And then Gemini CLI will be like, "Oh, these are all the changes I want to make." And they're generally too big to fit. And I haven't figured out how to set up scrolling in T-Mox because I'm not like a very good like environment setup. Like I have to use Astro Vim because I don't want to write my own config files.

10:49 · Well, I even got Gemini CLI to set up my Neovent config for me. Like that was like one of Yeah. And it worked really really well. I was like, what were the decisions that it made?

10:59 · Like I was like I in natural language said I want a Neoim setup that has a file tree already configured. I want line numbers and like blah blah blah. And like it totally downloaded the plugins and installed everything.

11:11 · Did you set the leader? Cuz isn't the leader normally like control.

11:16 · Yeah. I'm I'm not sure. Yeah. But I got it working and I was able to make a bunch of edits and Yeah.

11:22 · Yeah.

11:22 · I So I like Astroin because it the leader is space. They have docs and then uh if I move to a machine and I can't access my git profile or whatever, I could just go download it from there. Right. uh having like set up all these dot files. I did set up an Anible thing.

11:40 · Oh, I love Ansible.

11:41 · So, so I will I will actually uh gosh I think it's called SCP to the machine.

11:47 · Yeah. transfer the files over, run the Ansible playbook, which I have like a SH file for, and then I always just grab like the most basic OS that everybody has, Auntu or DBN or whatever, where it's not like I don't have to configure like a million things and then it just runs and I considered Nyx, but the problem with Nyx that I have is a lot of the times they don't have the packages that I want and I have to start building the packages.

12:16 · But I don't want to spend a lot of time building packages that you're not going to use. Yeah.

12:22 · Or that I have to maintain or and it's one of those things where I don't spin up a machine like every day. It's like once a month or so. Okay. Two things. One, have you tried SSH and anti-gravity? because I feel like what you're you're doing right now is using Neovm inside of the installed machine, but I've been starting to just like SSH into my home lab directly, run all the things, and I can have my agent with an async manager with all the different nodes doing things like running my Antible playbooks, running scripts on a K3S cluster, stuff like that.

SSH Tunneling & Remote Development with Anti-Gravity

12:55 · Uh, this is where you're probably going to think I'm like criminally insane, [laughter] but uh I will I I'll plug a keyboard into my phone.

13:04 · [laughter] Yes. And you did show me a demo with that.

13:07 · Yeah. Or like I'll plug it into the monitor and run in like desktop mode and I have like an app that I can use to SSH.

13:12 · Oh yes.

13:13 · It has like keys and all that.

13:15 · Totally. Yeah.

13:16 · And you can like Bluetooth your mouse into it. So like you still have a setup and then if I have a monitor, great. If I don't, I'm just like Yeah. Exactly.

13:24 · Granted, the screen's really tiny, so I don't do it all that often.

13:27 · Sometimes I do it on like a like an iPad, right?

13:30 · Okay.

13:30 · And then uh very rarely do I have like my personal laptop that I'm comfortable sshing into okay my own my own machine. Right. So but so with anti-gravity you can SSH to another machine.

13:46 · Yeah.

13:46 · In fact you uh you know when you talked about setting up a temporary VM inside of Google Cloud you can just set that up and as long as you set up the SSH keys you can from anti-gravity connect to it. And in fact, anti-gravity was built for a lot of enterprise use cases in mine. So you can just totally have that workflow bin client.

14:06 · Not only that, it will tunnel the ports from the VM into your local host.

14:12 · So I can be running a web server and using my local browser to to view it. And it's like the coolest thing. So you don't actually have to set up like so I believe the the SSH tunnel is usually like hyphen L and then you do like that port binding thing. You don't have to do any of that.

14:28 · No, you literally just give it the host. You log in as the SSH user or with your SSH keys and it it'll do a one-time setup on the uh server side.

14:36 · Oh, that is cool.

14:37 · Yes, it is super awesome.

14:40 · I might have to go home and try it.

14:41 · Yeah, it is like right now. And it it changes how I approach like oh I want to do this thing and I know how to write this in docker compose maybe I can have anti-gravity write the kubernetes file and then deploy it to the cluster or I want to do this type of maintenance and so write the anible playbook go and apply it and it's like just approaching those kind of like devops types of things is so much more you have your own kubernetes cluster too don't you?

15:06 · Yes. And that is a Pi cluster if I'm not mistaken.

Home Lab: Raspberry Pi Clusters & K3s vs. Docker Swarm

15:10 · It's a five node Raspberry Pi cluster.

15:12 · Almost all of them have the 16 gig RAM variant. So, uh I use it for my local hosted GitHub action runners. I host my parents websites, you know. It's it's really on that is it rough?

15:25 · It's very solid. Like I I usually Are they armed?

15:29 · Yeah, they're all armed. Okay.

15:30 · Yeah.

15:30 · Yeah, that's interesting. Yeah.

15:32 · How long did it take you to set that up?

15:33 · Um, honestly having the nodes in the rack did not take a long time. It was trying to land on what I wanted to do for deploying stuff on it. Um, originally I was using Docker with just like Docker Compose and then I switched to Docker Swarm. Yeah.

15:51 · But one of the things that's nice about K3S and the reason I migrated to it is um when you have things like a NAS or like uh a Synology or things like that, you can do persistent volume claims where it will manage the connecting to the storage and doing it for the cluster. Whereas in Docker Compose and Docker, it really is meant to be run on like a mini PC.

16:15 · They're not meant to be running clusters. like it can work but storage is kind of like an afterthought in networking like I had to like do this weird ingress with uh inject proxy manager and stuff like that. So see I I think I'm the opposite of you where I just use Cloud Run.

16:34 · Cloud Run's amazing.

16:35 · It's cheap enough.

16:37 · Yes. Yeah.

16:38 · Right.

16:38 · And it like there's I very rarely do I ever get a bill from Cloud Run and I've run some like Agreed. I've run like big style transfer models and all this other stuff on there.

16:49 · A pie cluster. Maybe we should set one up one weekend. Just come down.

16:53 · Absolutely.

16:53 · We'll just buy some used Raspberry Pies cuz they're like what? $30 new. That's yours for my blood.

16:59 · Uh except for the RAM prices now. They're all going up. But Oh, are they?

17:02 · Yeah.

17:03 · Oh, no.

17:04 · Yeah.

17:04 · I I think um being able to um approach a PI cluster has made me build with Cloud Run in a completely different way. Like I have many cloudr run instances, but sometimes it's hard to like prototype what you're wanting to build outside of running it. And so I can run something that I know is only going to last for a month a lot easier in the cluster. Whereas when I'm going to do something for production, um like cloud run even supports like dock compose files now.

17:31 · So like I can have a multi-node thing all working together and I don't even have to change anything. I can just deploy and it's super awesome. The reason why I want a Kubernetes cluster is solely so that way I can run like Reddus.

17:45 · Oh yes.

17:46 · Right. Like one of those things that don't work well in like the ephemeral cloud run like this is your machine.

17:51 · Goodbye.

17:52 · Yeah, that's fair.

17:52 · Right. And uh I thought about like trying to hack together this weird like Reddis server setup.

18:01 · Yeah.

18:02 · But then it seems like what am I doing with my life if I'm sitting there like okay I'll get like a mint micro instance and I'll do this.

18:08 · Yes.

18:08 · and set all this up. But yeah, I also think if you can prove and validate the idea in a local environment, then it'll shine really well in a cloudr run environment.

18:22 · Okay.

18:22 · So like uh you've already like made a really good choice about what language you're using, the type of uh scaling around how you're compiling. Yeah. And I feel like when you're deploying a cloud run, you're you're committed to the idea, but it's like, you know, you want to have um some type of trajectory going into production where, you know, yes, there's many things that we deploy to Cloud Run that, you know, almost never get used, right?

18:48 · But if you're like, how do I actually build an app that runs on Cloud Run and actually can handle traffic and do all these different things, you have to like really start to play with how am I what am I going to do about storage and caching like you said, Reddus and and all these other things all working together. Um, and so that's where like having a hybrid approach can be really good.

19:09 · Yeah.

19:09 · plus just like you know Google does a lot with Kubernetes and so I feel like I just been wanting to learn that forever and so it's just been I've been chipping away at the different layers of it and I feel like it's starting to click a little bit and uh hopefully future episodes we can know more too but uh like once you get into that world you're able to like start to think declaratively instead of imperatively so so does Kubernet do you use anti-gravity to set up your Kubernetes deployments and all Yes, because I I understand docker compose really well.

19:43 · Okay.

19:44 · And I can say this is how I would deploy this with docker compose.

Using AI to Convert Docker Compose to Kubernetes

19:48 · Yeah.

19:49 · Write the kubernetes file for me from this docker compose file.

19:53 · And so from there it allows me to bridge what I am doing to where I want to be. And that's where I think AI is a great companion in that transformation of content and bridging that gap.

20:07 · Okay. So eventually I'll be able to write Kubernetes files directly. Yes.

20:12 · Yeah. So you're you're using it as I have this Docker Compose setup. I want to migrate it to Kubernetes.

20:19 · Yes.

20:20 · Here's like what my Do you tell it like your cluster information or anything or you just let Exactly. Or at least give it like a tool to find out the node status and other things like that.

20:28 · Oh, okay.

20:28 · So yeah. So, are you building your own tools that then you consume an anti-gravity through MCP or some other It's more like I give it a AI rules on like um here's my home lab setup with the things I installed and configured like you can run these commands on these servers to get health statuses and things like that and it can go and it it will totally SSH into the the the nodes run docker logs and it'll get out the status and it'll be uh giving you like a really cool way to work with the cluster. Like I can I can say things like um this service is down.

21:00 · Can you figure out why? And it'll be it'll go and say, "Oh, it's in an unhealthy state. Let me go try this thing. Oh, it's not connecting to this, you know, service and stuff like that." Yeah.

21:13 · Does anti-gravity automatically find your AI rules file or does it look for like a Gemini MD file?

21:21 · Because Gemini CLI, I believe, yeah, has a preference towards Gemini.md files. Yes, I believe uh by default anti-gravity uses Gemini MD at the root of your project.

21:32 · Okay.

21:32 · Um but it's super easy to just tag it as context inside of um anti-gravity chat.

21:39 · Yeah.

21:39 · You can just like at whatever the name is and you can usually when I start a task I I will tag the readmes that I want it to do. Oh, if you have multiple rules files and then you just say like, hey, use AI rules for Kubernetes.

21:57 · Y okay, gotcha. Y and then how complicated are those rules files? Do you write them yourself?

22:03 · So I usually what I like to do with AI too is I'll write the worst version and have AI write the better version. So, uh, I think I think we've talked about this before outside of the podcast, but, um, I feel like now I will write an extremely ugly class. I'll get everything working. I'll write all the methods. I will write all of the the features. I know it technically works.

22:30 · Yeah.

22:30 · But then what I do is I have it create the formatted class with the nicely documented. And uh by doing an approach like that, I can write my intent in this like short paragraph of like it needs to talk about this blah blah blah blah blah and uh it will use search grounding. It will use research to be able to expand that and then I save that as context in the file.

22:53 · So let me blow your mind.

The NotebookLM Workflow: Generating Agent Rules from Docs

22:56 · Let's hear it.

22:57 · There's this tool that I use to write my gemini.md files.

23:00 · Let's hear it.

23:01 · It's called notebook ln.

23:03 · Yeah, that's a good one. It's so good at writing the rules files cuz So tell me about that workflow. Yeah.

23:09 · Yeah. So what I do is I literally just import every piece of documentation I can find on the internet into a a a notebook, right?

23:18 · Okay.

23:19 · Individual notebooks or do you like to like scope it like just this is my AR rules?

23:25 · No, I I I have individual notebooks. So I had one for like firebased security rules. I had one for uh AI logic. I had one for like a bunch of different things that I was like, "Ah, let me just see like with no context, can it get me to the next level, right?"

23:40 · Okay.

23:40 · So, I imported like every piece of documentation I could find. I went to the reference docs. I imported that and then I went to notebook LM and you can get custom reports.

23:51 · Oh, I said write a agents.md file for me that goes indepth about how and when to implement this set of knowledge. Right.

24:00 · Oh, cool. And when I tested out the one for Firebase security rules, but it gave me a very long report and I skimmed it.

24:08 · I was like, "This seems good enough, right?"

24:09 · Okay.

24:10 · And then I asked it to implement security rules in a project that didn't have them.

24:16 · It went through it and it was actually a sample project that I used, right? So the sample projects have like pretty good security rules. They say check for this, check for this, check for this. It wrote a set of security rules that had validation in it. Oh wow. Which is something I don't normally do when I write security rules. I'm like, "Yeah, if like uh they can only insert like these fields and this, right?" But it was like it can only insert a integer in the star field between one and five.

24:43 · Oh, yeah. Like literally almost like arc type or like um some type of structured validation. So, and I think that's like one of the things that is sometimes overlooked with security rules is that people will write a set of security rules, but if you know the schema and you know how to write to it, you could hypothetically inject any data you want.

25:04 · As long as it fits the type. Yeah. Yeah.

25:06 · But as long as you have that that validation Yeah.

25:09 · of like it has to be a string, it has to be a number, it can only be this long, blah blah blah blah blah blah blah, it will get to the point where it it really tightens it down. And then on top of that, you know what it did?

25:20 · It added tests.

25:22 · Yeah.

25:22 · And then it rules to the rules. And then it loaded the emulator.

25:26 · Wow.

25:26 · To then run the test for me, which probably you knew how to do in isolation, but never like an entire file on how to like describe this.

25:34 · When I was building the notebook LM Yeah.

25:37 · bits, I went and I was just grabbing everything everything that I could find.

25:42 · And one of the things I found was this like security rules testing framework, right?

25:47 · Yeah. I was like, I've never seen this.

25:49 · That's awesome.

25:50 · And I it's like I feel like I should know about it.

25:52 · Yeah.

25:52 · So, when I discovered it, I was like, this is incredible. Why don't we talk about this more? And uh and then I just loaded it into my agent and it compiled and built and nearly worked first try.

26:04 · So, when you're using Notebook LM to kind of find these resources, are you um trying to go out and paste a bunch of links in?

26:13 · Are you uploading files that you have directly for the context? like what are you doing there?

26:17 · I very rarely have a file on my laptop. It's mostly like, you know, photos I've taken or things like that.

26:23 · Uh I try and keep all my files online.

26:26 · So I will go and I will grab links from different websites, okay, via Google search and insert them into the notebook or I'll crawl manually. There's probably an automated way to do this, fair, but I will crawl a page and grab the resource links that I want, which I have done that. Yeah, what I usually do is just write a script in Chrome DevTools and copy out all the A tags.

26:50 · Rudy, what do [clears throat] you do?

26:51 · [laughter] How do How do you just make your life so easy like that? [laughter] I'm like, well, I'm not going to manually copy all these, so I so I just Yeah. Right.

27:03 · Well, the thing is I always like want to look at the page and be like, is this relevant? And then like pull it in. I see what you're saying. Like, oh, it's much easier to just write like a script tag, pull out the thing, drop the like do what is it? beautiful soup to like clean it out.

27:15 · Yeah.

27:15 · Or like uh so there's two ways that I found that to be really useful. One is uh if I go to Firebase or Flutter or some type of doc site, they're going to have a sidenav with a bunch of links to every link on that site. I believe we support [snorts] um LM's text now. Yeah.

27:33 · And so we should have make that a lot easier. But before I could just write a simple script that went to the nav, grabbed all the address and then from there I could literally paste it as a block in.

27:43 · That sounds so much smarter than what I was doing.

27:46 · And like sometimes like I don't know what it is, but like the internet provider will just be like, "You seem to be navigating a lot. How about just slow down and read the content for once, bud?"

27:55 · Yeah.

27:55 · You know, and then like maybe it's just my my internet service provider. Who knows? But I I Yeah, I I go to each page, look it over.

28:05 · Nice.

28:06 · I do it the wrong way.

28:07 · Yeah, [laughter] you're the human in the loop on the finding the context.

28:11 · Oh, I'm always a human in the loop.

28:12 · That's awesome. Well, that's that's a really cool use case with using it for writing the agent uh MD files. I have not been doing that and I might actually add that to my workflow.

28:22 · Yeah, it's well worth it.

28:24 · Yeah, totally. And plus it keeps the content up to date and a bunch of other reasons why that's important. Do you leave the like a bunch of different agent MD files in in your projects when you work with anti-gravity?

28:36 · I do you selectively add and pull them in?

28:39 · Yeah, I feel like I selectively bring them down. I try to think about context as a an artifact, but that it's not, you know, persistent, you know, like you can have this for the moment in time that you're needing it. So I I usually create like a research folder or a docs folder and I add in markdown files that are specific to you know deep researches that I've run or um like like I could have one on

29:03 · here's how to deploy with cloud run on all the configs on like a specific advanced kind of like storage and whatever and then I have a different one that's here's how to work with SQLite and set it up for the environment and that kind of allows me to tag the agent on those files when I'm like okay we're working on the database base adapter like here go look at this thing and this is like the setup I want and then also here's a deep research on the schema that I'm planning on.

29:27 · My my issue with like gemini.md files in the Google CLI Gemini CLI is that you you can nest them in different folders but then I feel like the context just gets clobbered over time. It just gets overwhelmed.

29:43 · Oh, 100%. That's why you have to be so specific on um either if you can try to paste it as content directly even if it's a subp part so I can like select it all and just paste it as markdown and the model will be able to read it.

29:57 · Yeah.

29:57 · Um but otherwise yeah having multiple broken up files makes that a lot better cuz inside Gemini CLI for instance you can at other files with the at syntax and if you open up a file it'll basically just concatenate them together. So you can basically tag the lowest possible file that contains the context you need or you know contain you do an at file and then put in line numbers like does that work where it only extracts those line numbers or does it not that I found it might be supported but that would be cool.

30:29 · I do know in anti-gravity you can select a range of part of a file and it will show as the context.

30:35 · I've seen that.

30:36 · Yeah, which is super cool. Yeah.

30:37 · Yeah.

30:37 · because then you're not like just sending over this huge file. And sometimes sometimes I like Gemini CLI will do smart things for me, right? So like one time I asked it like in this very large file like, "Hey, can you like do this thing?"

30:49 · And it found another method that already exists that did the thing I was looking for.

30:53 · Nice.

30:54 · It's what happens when you work in unfamiliar code bases, right? Or like you write code for like long enough and you're like, "Oh, I needed to like do this. Can you like help me just like stub out this method real quick?" And it's like, "Yeah, sure." And then it'll like you write the stub and then it injects like the other method name like right in there and like I should take a nap, right? Yeah.

31:13 · Yeah.

31:14 · One thing that we talked about this morning in the live stream.

31:18 · Yeah.

31:18 · That I know that you've been doing a lot of Yeah.

31:20 · is you've been pairing Stitch and anti-gravity.

31:23 · Oh, yeah. Totally.

31:24 · Yeah. Do you want to tell me how that's been working for you and like what you've been doing with that?

Stitch: Generative UI, Shaders, and App Redesigns

31:30 · Totally. Um, one of the cool things about Stitch is it will generate both web apps and mobile apps and you know, you can make them responsive and get all the different um, HTML and images for it. But one of the nice things Stitch does is with Gemini 3, in addition to creating way better designs and I feel like uh, a lot closer to what I'm wanting, it can also even redesign existing apps. So using Nano Banana Pro, you can say, "Here's my really terrible UI that I don't know how to write. Can you make it look better?"

32:03 · And uh one of the cool things about that flow is you take that, copy it into Gemini, and say, "Okay, for this image and possibly the HTML, generate me a Flutter app, generate me React or Angular, whatever." It can like really effectively generate uh some really cool things.

32:21 · So, one of the apps that I've been working on is a generative UI type of demo that includes some really cool features with ADK, which we talked about last week, and and some other exciting things with Gemini, but it's a very visually impressive demo, which requires a lot of gradients, a lot of design choices around uh animations and stuff like that. All of which usually take the majority of my time.

32:51 · Yeah. Yeah.

32:51 · And so what I've been doing is having Gemini take those screenshots and it's been writing the gradients and the shaders in every part of the application including the animations like so effectively.

33:03 · Now when it writes the gradients does it write it as CSS or does it write it as here's an image that has a gradient set it as your background that I generated with Nano Banana.

33:11 · What's even crazier is it's actually taking the screenshot that's inside the Gemini app and creating the gradients in Flutter. like it will write the flutter linear gradient from the colors in the image. Oh, and yeah, and it can use Nana Banana to

33:28 · generate some uh image assets and I have done that, but I was like, wait, what if we just made this a shader like instead of a gradient, let's make this an animated mesh background and like anti-gravity is able to to take that context, write the shader code, set up the animation controllers, and you're able to all of a sudden unlock a workflow where whereas before, you know, I'm not the strongest at writing shaders.

33:54 · I I could get a basic version working, but now I could even just like prototype like, does it even work? Like, will this look good? And then, you know, it it was done in faster than it usually takes for me to even get started on getting the first version running. So, uh, I I feel like that workflow has just been so awesome to experiment with design choices that usually I'm afraid of implementing because I know how much it's going to cost to keep those up to date or like reason about the code.

34:22 · Usually have kind of geared towards simpler UIs or at least UIs that are more focused on UX. But now it's like, cool. Yeah, I'll do a really crazy design that involves multiple section headers and and different types of text elements and animations cuz I can just reiterate on it really quickly.

34:43 · Yeah. So, you're able to iterate over a bunch of different shaders.

34:47 · Yes.

34:47 · Right. And and you you're saying you don't have to write a single line of code there? N it just does it, injects it, you're good to go.

34:55 · Yep.

34:55 · and it will not only write and update the shader code, it will also write the logic that calls the shader, animates the uniforms, and connects it to the UI as well. So, it's just been super awesome. In this app that I'm working on, I'm up to three shaders in the app already. And I feel like that's already three more than I've added in previous apps. So, uh I've been super happy about it.

35:17 · Yeah, that sounds incredible.

Outro & Teaser: Prompt Optimization

35:20 · All right, no. So, is there anything else that you want to kind of share that you've been working on or excited about that you want to kind of close us out with?

35:26 · Uh, there is something I've been working on. It's uh surrounding prompting.

35:32 · Okay, cool.

35:32 · And prompt optimization, but I think I want to pull the covers back on that next week.

35:37 · Sounds good. All right, cool. You have to stay tuned for that. Um, I feel like there has been so much to explore just in the last few weeks. Um, there anti-gravity and Gemini CLI and Stitch and so many other things we talked about are just like some amazing tools that I feel like just unlock these workflows that I I have been just waiting for. You know, I have been trying to to do a lot of these things and you get really far but then sometimes you just like hit the ceiling that you're just like I can't I can't break through like this.

36:07 · I'm running into too much context or you know it's just a little bit too soon. But now I feel like a lot of those projects are I can pick up and like um I'm able to get those done in like an afternoon whereas before it was like a week or so.

36:23 · I mean even just going back and reviving old projects, right?

36:26 · Totally. Yeah. Yeah.

36:27 · Yeah. Things have been dead for months, you just hand it off to Jules and you're like, "Hey."

36:30 · Yep.

36:30 · Make sure I can run this in today, you know?

36:32 · Totally. And which I would suggest as a fun exercise for people, uh, go to your your old apps on GitHub, upload screenshots of them running into Stitch, have it generate a nice fresh new UI, open that up in anti-gravity, and just give it a nice redesign. Yeah. And you'll be surprised at how well that works.

36:52 · Cool.

36:53 · Awesome.

36:54 · Well, thanks for uh listening to us yabber on.

36:57 · Sounds good. All right, see you next time.

36:59 · Ciao.

Talking about Skills, Optimizing Prompts and building MCP servers in apps

Wed, 04 Feb 2026 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Talking about Skills, Optimizing Prompts and building MCP servers in apps

Description

We’re diving deep into the latest paradigms in AI development, starting with the difference between traditional context files (Gemini.md) and the new "Agent Skills" dynamic.

We also share a story about using the Vertex AI Prompt Optimizer to automate our YouTube descriptions. It took 5 hours and nearly 100 million tokens, but the results were surprisingly consistent. Finally, we geek out on the Model Context Protocol (MCP), experimenting with exposing Flutter application state as local tools using Unix sockets.

In this episode:

0:00 - Intro: Why we are sitting today. 0:30 - What are Agent Skills? (Anthropic & Antigravity support) . 1:49 - Skills vs. Context: The difference between lazy loading and concatenating context files. 4:59 - How the API discovers and uses Skills. 7:25 - The open ecosystem for sharing and installing Skills. 10:30 - Deep Dive: Using Vertex AI Prompt Optimizer for YouTube descriptions. 13:28 - Converting CSVs to JSONL for data-driven optimization. 15:25 - The 100 Million Token experiment. 19:20 - Exploring MCP (Model Context Protocol) with Flutter. 22:03 - Using Unix Sockets vs. HTTP for local app control. 24:25 - Implementing the MCP spec in Antigravity.

Resources mentioned:

Open Skills Domain: https://agentskills.io/

Vertex AI Prompt Optimizer (Colab Notebooks): https://cloud.google.com/blog/products/ai-machine-learning/announcing-vertex-ai-prompt-optimizer

Boost accuracy with the prompt optimizer blog: https://firebase.blog/posts/2026/01/boost-accuracy-with-the-prompt-optimizer

Connect with us: Let us know what you want us to talk about next!

#AI #Gemini #AgentSkills #MCP #Flutter #VertexAI #PromptEngineering #TechPodcast

Transcript

Intro: Why we are sitting today.

0:00 · Hey, welcome to today's uh techw walk episode, our podcast where we go on a walk and we talk about tech. And today we decided we're gonna mix it up and do a sit.

0:08 · Yeah, exactly.

0:10 · Yeah. So, I got Rodie.

0:11 · Yeah. And I'm with Noey.

0:13 · If you don't know, Rodie does not normally sit next to me, but he comes down on Wednesday nights. Not Wednesday nights, he comes down Wednesdays, and he decides to sit down next to me and tell me a bunch of things I didn't know. And today, you brought up something called uh skills.

0:27 · Yeah. And I want to talk about that because not knowing skills I think is my own skill issue. How how new how new is this?

What are Agent Skills? (Anthropic & Antigravity support) .

0:36 · Yeah.

0:36 · So agent skills if uh people aren't familiar with are kind of this new paradigm that um has been popping out in the different tools. Uh Anthropic I believe launched it about a month ago if not a little bit more. Uh anti-gravity just launched support yesterday. And you're saying I'm a little slow. It just Yeah, we're we're a little bit out of the loop but to be fair on holiday breaks. So that's true. Yeah.

0:58 · Um but one of the cool things about uh skills is uh I don't know about you but when we were entering the phase last year of trying to make our models and agents smarter.

1:08 · Yes.

1:08 · Um AI rules were the big thing. You know it's u the agents MD or the Gemini files.

1:14 · Yeah.

1:14 · So uh basically ground your project on some type of corpus of information that is very specific and oftentimes including multiple things in one. So, the Gemini CLI has this thing called extensions, which you can install a Gemini.m MD file. Now, you brought up making your agent smarter by having that Gemini.md or that agents.md file.

1:39 · How, this is where I think I might be a little confused. How often is that file used when you make requests to the Gemini CLI or anti-gravity? Is it used every time or is it only used select times? So with uh when you're loading your default agents MD or Gemini MD file when you say default uh the one that's the root level of the project oh the project not not the system okay um at the root level of the project and any recursive Gemini MD files in the

Skills vs. Context: The difference between lazy loading and concatenating context files.

2:07 · current project scope it will concatenate all of them and put them into the context of the model when you first launch the AD. If I have a gemini.md file at the root of the project and then I have a source folder and inside the source folder is like a pizza folder where I have all my pizza recipes. I have a Gemini MD file in there, it will it will read both only if it's working on the pizza recipes, right?

2:26 · Yeah, exactly.

2:27 · But if I'm working in say the ramen recipes, which is a different folder.

2:32 · Uh this is a terrible analogy.

2:35 · Uh but let's say I'm I'm in like a separate folder then it will not read the pizza recipes. Is that the correct understanding? Uh, I think a different way to think about it is um it will get all of the Gemini MDs for um the tree directory recursively for whatever folder you're in. So you have my current project and my sub projects and my sub sub projects that it'll concatenate all of them and you'll see it when you first launch Gemini CLI or whatever.

2:59 · Every request the first time you launch the agent.

3:02 · Oh, okay.

3:03 · So when you click new chat, it'll that's what it will load all the way down to the pizza recipes.

3:08 · Oh, okay.

3:09 · Yeah.

3:09 · And of course, uh there's different harnesses that may tweak this behavior and it's evolved over time. Um but the downside of this is you had to pay the cost of um being explicit about I want to have these Gemini CLI extensions installed. I want to have these rules files enabled so when I load it into the agent, it's consistent and at least loading the context every time.

3:32 · Yeah. Actually, you know, it's it's funny that you say enabling and disabling the the certain extension. So, I installed the Firebase extension obviously. Yeah.

3:41 · Uh, and I use that all the time because it just keeps loading. I never disable it. Otherwise, I'll forget to reenable it when I want to use it and I'll ask it to do things and Right.

3:50 · So, um, that's interesting. So, I didn't necessarily know that every time you started a new chat, it will read all the Gemini Gemini MD files, right?

4:01 · Yeah.

4:02 · Yeah. Okay. So, and then skills builds off of this. Yes. in a unique way.

4:08 · Yeah.

4:08 · So one important distinction is that skills are progressive on how it finds out about them. So whereas on the Gemini MD files and the other types of agent files where it's concatenating the resources ahead of time, this is a way for you to say, I have 500 different individual markdown files. I only want you to read the name and descriptions of each of the files so that you know that you have these capabilities and only when you think that that one's going to be relevant should you read in the rest of the the file.

4:39 · Oh, okay.

4:39 · And so it can be very dynamic per chat.

4:41 · It so it loads it when it needs it rather than Yeah.

4:44 · loads it right at the beginning. You get the whole soup salad and and everything but the kitchen sink. Exactly. Right.

4:49 · Okay.

4:50 · So when you load these, how does it go about finding which one it it needs? Is it like a tool call? Do you know what the API looks like when it goes to Gemini?

How the API discovers and uses Skills.

4:59 · So, how it's supposed to how it's supposed to work is uh you have both a global scope for your skills folder and your project scope. And it's supposed to concatenate them together to say uh when I'm in this project, here are the global tools that I have available and the local tools that I have available. And skills are tools. uh tools as in like they could be available in the skills because a skill could be anything from running a script to um just enabling how to do something.

5:27 · So it's you kind of think of them like tools but they're really not. It's more like just in time pieces of context if that makes sense.

5:34 · That does make sense. So um like for example like you could say I have a very opinionated way to deploy to cloud run and so you could say um every time you do this make sure you set up a docker compose file and a docker file check for the relevant container and then you know run these commands to build and deploy it to Google cloud and that skill you can install it once and any project you're in on your your file system will be able to have that ability when you say okay now let's deploy to cloud run and it says Okay, found a relevant skill. Let me go run the commands.

6:06 · And so it's like repeatable behavior across your project.

6:11 · Okay, I see.

6:12 · But scope to that very specific thing.

6:14 · Gotcha. Gotcha. Okay. Do you know what the skills look like for when it makes that determinist like so so when I say uh what they look like is when you make a request to Gemini, how does how do the skills transpose? Are they just It's just content.

6:31 · Oh, it's just content.

6:32 · Yeah.

6:32 · Yeah. So it'll be a markdown file that it it loads. But the the really amazing part is you're not having to bloat the context for all the tools you're not using.

6:41 · Oh, okay.

6:42 · Right.

6:42 · Because the model is going to have this discovery phase. It's not going to have to do all these competing like so for example the Firebase tool, it may have a lot of tools that um are very similar. But this way it's it only will ever know when to call that MCP tool if there is a use case where you're dealing with something with Firebase.

7:02 · Oh, and then if I'm doing something that's with Flutter, it's going to have the Flutter skills that are very specific.

7:07 · So, Gotcha. Very cool. Have you used or built any skills yet?

7:12 · I've been uh working on testing them out and uh working with them. Obviously, this is uh still like an emerging standard, but I I'm really excited by the fact that there is um kind of an openness to these. Um there's already like a a domain you can go to and see all of the uh open skills that are part of the spec. And in fact, we'll link it in the description.

The open ecosystem for sharing and installing Skills.

7:31 · But uh this kind of idea is like how can we across the ecosystem find these reusable bits that uh someone's learned how to do like through trial and error or pain and be able to make it so anybody can just like add the skill and be able to like have that benefit of doing that task.

7:50 · Yeah.

7:50 · And if I recall correctly because I I was trying to read the documentation before we met, but obviously I skill issue. I I I got to a spot where I was looking at how you install the skills and it's all through git, right?

8:07 · So it takes like that go model where where you push to a github repo and then that's like the package and where the package lives, right? So is it the same thing with skills where you push to get and then when you update the skills does it update automatically every time you load or is it is there some sort of So this is kind of one of the differences between this and MCP and some of the other context is one they live in your project. So as opposed to a Gemini CLI extension which it gets installed and updated by a provider.

8:37 · This is saying like most of the skills I've seen are a handful of files and maybe a 300 line markdown file if that you know so it's very very scoped.

8:48 · Sometimes they're like 100 150 and so you're going to be putting skills in your project folder that make sense for that project and so other team members as they check out your project would just get the benefit of it. Yeah. But then you may have some global system ones that yes, you probably do want to back those up to get, but it's totally not required. You could just like throw them up there and every time you interact with them, it's when it discovers the phase, it'll have the latest tool because it's reading it lazily as opposed to eagerly.

9:17 · Uh so if I I if I did want to distribute skills, I'd do that through the extensions then, right?

9:23 · There a lot of people are even distributing them through Google Drive, like through zipping them up. Yeah. It's just it's kind of this really wild format.

9:31 · Yeah. Yeah. Yeah.

9:32 · Yeah. I mean uh files work.

9:34 · Yeah. It's true. Like before I did uh you know before I came to work at Google, I worked as a GIS person.

9:41 · Oh, cool.

9:42 · And we would mail each other like we would zip up files and mail them to each other, right? And sometimes it'd be uh reference files. So it would say, "Oh, find uh this shape file at cdocumentariacount.com." Right. and and and it always got very confusing to ship it, but yeah. Okay. So, just zip it zip it and ship.

10:02 · Maybe we can uh FTP our skills together, you know, over an NAS.

10:06 · Yeah. Yeah. Yeah. And then, you know, have it get hacked. Yeah. Yeah. We had that conversation earlier today.

10:12 · Yeah.

10:12 · Uh what's interesting is you brought up how it doesn't overfill the context. And recently, one thing that I've been working on, uh it's coming out next week. All right. which it'll probably be live by the time this is live, right? The magic of editing. Uh is is uh I don't know if you met Elena, but me and Elena worked on a blog post together.

Deep Dive: Using Vertex AI Prompt Optimizer for YouTube descriptions.

10:33 · Oh, cool.

10:33 · For the Vertex AI prompt optimizer. I don't remember if we had already talked about this, but I'm going to talk about it.

10:39 · So, so what is the prompt optimizer? So uh the prompt optimizer it is a way to take your prompt right your singleshot prompt and optimize it into a very uh good prompt right so for instance uh you know this we we are working on YouTube descriptions right and we had a marketing person write our descriptions for years and they would get our scripts they'd watch the video they'd go through they would type out everybody's name and give us a draft that we then still edit on obviously, right?

11:11 · We'd still edit it, we'd add chapters, we would do these things, right?

11:16 · Just meaning it wasn't hands-off like we were still very much involved. Yes. Yes. Yes. So, one thing that I found is like could we save this marketing person all this time to go work on like more impactful things by optimizing a prompt for Gemini, right? So, I tried writing my first prompt for the prompt optimizer and it came out uh it came out so weird and bad.

11:41 · Oh, no.

11:41 · Like, right. So, like I gave it my script and it gave me a result back and I was like, well, all right. I guess this is all right. And like my prompt wasn't like complicated, right? It was just like write me a YouTube description that is SEO optimized for fire the Firebase channel, the big tech company, right? And uh it was it was bad. And it was it wasn't only just bad the first time I did it. It was bad. It was it would like vary every single time.

12:10 · Continue to be bad. Yeah.

12:11 · So it was it was bad in a unique and different way, right? Every time I ran it. Yeah.

12:15 · Which is like the beauty of non-determinism. So uh I I I I was I was lamenting about this to to Dan and Elena.

12:24 · And uh Dan, I believe suggested I look into the Vert.ex AI prompt optimizer.

12:29 · Okay.

12:29 · So now what you do is it's uh they have two. They have a zero shot which is what I did and or what I started with, right, is I just say like help me write a good YouTube description and it'll take that and it'll give it to Gemini and Gemini will like power up your prompt to make it better to use for Gemini.

12:46 · So then you get like a better which model like does it does it pick one or do you like decide that you know it's been so long since I did this right before break and then I wrote the I wrote the blog before break and then I just put like the final touches on it. I don't remember. I think you can pick between flash and pro and all that, right?

13:02 · But generally like a family of models like just five or three.

13:04 · Yeah.

13:04 · Yeah. Exactly. So, uh the zero shot one it it gave me a really good result, but I we have years of of scripts and the script, right? And everything is documented. Yep.

13:16 · It's not just like I go in front of a camera and talk for 40 minutes and we have the we have the script and the metadata attached and like the video itself and the transcript.

13:24 · We have it all right there. Right. So what I did was uh I put all that into a Google sheet.

Converting CSVs to JSONL for data-driven optimization.

13:29 · Okay.

13:29 · I exported it to a CSV. I as Gemini CLI to convert it to a JSON L file because I think it's required. It might be it might work with CSV.

13:38 · And what is JSONL?

13:39 · Yeah.

13:39 · Uh JSONL is uh JSON where everything is on one line per record.

13:46 · And then uh so if you have like an array of like 15 different records, it just puts everything on one line.

13:52 · Okay, that's cool.

13:52 · Yeah, probably easier to parse. Yeah.

13:54 · Yeah, exactly. Uh so I I collected uh I think it was like 50 45 to 50 scripts and 45 to 50 descriptions.

14:03 · Okay.

14:04 · Got it all formatted all that and then I let it run. And what I learned is uh after about 20 minutes you're convinced that it's broken, right? Because you don't get any like feedback. Like you go through, you set the settings and then you click like go.

14:19 · It's a collab uh notebook, right? and you and you hit go and you sit there and you're like, I'm sure it'll be fine, right?

14:25 · I feel like uh that was me with like early iOS development when you're waiting for Xcode to build or Android Studio and you're just like, I guess I'll go get coffee.

14:33 · Yeah, I guess I'll I'll do this, right?

14:35 · Well, it was like after about 20 minutes, uh I was convinced that it was broken, but I was like, you know what?

14:39 · It still says it's doing something. I'm going to let it churn. I'm going to go get coffee. I'm going to go get lunch. And about five hours later, four to five hours later, uh, I had this really optimized prompt.

14:52 · Okay.

14:52 · Right. And it was much longer than I had originally written. Right.

14:56 · So, you think it'd be shorter.

14:58 · My first prompt was like maybe two lines, right? Three lines. This this had details on chapters and how to recognize the chapters. It had It will say, "Oh, hi. I'm Peter." Right? It'll say the speaker, if they say their name is Peter, it's actually Peter Freeze. If it's Frank Pufflin, it gave a list of, you know, how you put tags in YouTube videos. It gave a list of tags and uh just talking about token consumption. Do you want to take a guess at how many tokens I used?

The 100 Million Token experiment.

15:26 · So, this is like tokens used in training.

15:30 · Yes.

15:30 · Because it what it does is it it does this continuous improvement loop where it will run the prompt, take the output, and then run an eval against the uh the ground truth.

15:41 · Okay, got it. So, I would say for a It's hard to know how much concurrent it was doing, but maybe a couple million tokens.

15:50 · What What's a couple million to you?

15:52 · Uh, yeah. Give me like a hard number because you're a couple million 7 million tokens.

15:58 · That's it?

15:59 · Yeah.

15:59 · That's your guess.

16:00 · Oh, I guess it Okay. Upper end maybe 30 million.

16:06 · Okay. It took about 100 million tokens.

16:08 · Oh, wow.

16:08 · Yeah, it was it was like uh it was a very large Yeah. numbered tokens, but like the prompt works really well.

16:17 · And I mean, does it do something similar to like ML where it has like some kind of a fit model and it's like kind of doing some kind of a training and working its way back?

16:26 · So, I'm not entirely sure on that because you you run this in in a notebook that was designed by Elena's team and fair.

16:33 · It runs in kind of like a little bit of a black box, but the black box, you know, does some Okay. it like this training and and and there's some sort of uh execution that verifies the results because I know that in Google Cloud we do have an option to train ML models on tabular data and I'm curious if it might be like a similar technique probably.

16:53 · That's awesome though. I mean, it's really cool that like one, it was able to be consistent and from there, that's really where system instructions can help you really fine-tune the final experience because like a lot of people don't realize, but you know, that's why the prompt engineering and context engineering really is so important because it's it's not just that you're wanting to get a better result. It's you're you're activating the specific weights that you want to have, guiding it to the things you don't want, and to be at least consistent on something that you can parse out.

17:26 · Yeah. Yeah. And it it it was I'm I'm just actually like so happy with the results. And you know, it it's 100 million tokens is a lot.

17:36 · That is a lot.

17:37 · It's a lot for like a single operation.

17:39 · Yeah.

17:40 · But here's the flip side of it. We just saved at least that much money of that person's time.

17:46 · That's fair. Yeah.

17:47 · Right.

17:47 · And and it's not that they cost, you know, even if it didn't cost them that much to do those types of things, they get to go use their time on more expensive, harder, more complex tasks than reviewing my scripts. And and maybe also saving time from a just try to get Gemini to generate a response or like a like a result and then trying to work it to something that's usable.

18:10 · Oh yeah. like, you know, this is like getting them closer to that final result a lot faster. So, even if they do have to do some passes, it's still much more minimal.

18:18 · Yeah. Yeah.

18:19 · Exactly.

18:20 · That is really cool. Yeah. So, I mean I mean people should try it out if they they have a prompt that you know is really uh specific.

18:28 · I wouldn't encourage people to just go try it out, right? I think you gota if you have a a task that is highly repeatable cool that uh you want to minimize the human interference or human in the loop where you want to get to a more deterministic output.

18:43 · So what about something like ADK? Would that be something that would be a good use case for the prompt optimizer?

18:48 · It yeah I mean it really depends if you're running uh the prompts a lot right and and and I mean like a lot like multiple times a day or multiple times a week.

18:58 · Minimal intervention. Yeah. minimal intervention, right? This would be a good prompt to optimize for ADK in these workflow agents.

19:05 · So, where would someone go to get started with it?

19:07 · Google search for Vert.ex AI uh prompt optimizer.

19:10 · Okay.

19:11 · And uh I use the data driven one. They also have a zero shot one. They're both in collab notebooks. Um we'll make sure to link them in the description.

19:18 · Rodie will make sure to link them in the description.

Exploring MCP (Model Context Protocol) with Flutter.

19:21 · Yeah.

19:21 · Brody, what happens is uh when I'm at work, I'm working and then you'll come in and you'll sit down next to me and you'll tell me things that I'm half listening to and I'm trying to do both. And today you brought up something about MCPs in the Flutters.

19:38 · Yes. So, uh, one of the projects I've been experimenting with is, um, building with MCP. You know, we both have exploring MCP tools in a variety of capacities forever.

19:48 · Yeah, I know. And I feel like sometimes they get a bad rap because we're using them maybe excessively or maybe in the wrong context. Like you load it up into your coding agent, you have like 150 tools and the model's having a hard time.

20:02 · But you know, I think that there's this awesome opportunity to be able to support using MCP for maybe applications like in the client side. So uh one of the things I wanted to try out is um take a Flutter app for example like a desktop or mobile. I could expose the functionality that I want to to other applications as an MCP server.

20:23 · Okay.

20:23 · And so, um, mobile apps are kind of unique and desktop apps in that sometimes you have bought a license key or you're on an inapp purchase or you have a subscription. So, you might have more or less tools available depending on that authenticated state or the capabilities of the device for example.

20:42 · Yeah.

20:42 · Um, and MCP is really cool for that because you have to pull the tools that are available at any given time and then to be able to call back with the exact schema. Um, and so what I did is I took the counter app that everybody loves and I MCPified it. So I uh I exposed all the counter state like set value, get value, increment and decrement and I could just copy the

21:05 · config and paste it into anti-gravity as a local HTTP server and I could say set the count to a million and it would talk to the running app, set the state and then be able to return back to the So you had an MCP server written in Dart.

21:18 · Yep.

21:19 · That then exposed tools over HTTP or or JSON RPC or whatever they Yeah. Yeah.

21:26 · Okay. and not through the IO me.

21:29 · Correct. It wasn't using the Flutter MCP server. It was actually like the Dart application itself.

21:34 · Okay. Yeah.

21:34 · So like and and the application had to be running.

21:37 · The application had to be running. And so one of the cool things that that unlocks is one, you have this ability to have a running app and say maybe if you have your favorite editor that you want to use or maybe another application that can also do tools, you can combine them together and then now this this coding agent can control all your applications, you know, so like you can expose like really cool functionality. But then I had a day to sleep on it and I was like, I bet I can get this working over uh standard Unix sockets and I and I got it working and it was so cool.

Using Unix Sockets vs. HTTP for local app control.

22:10 · That was my next question was cuz there's like the IO's.

22:13 · Yeah. Yeah. Yeah. Yeah.

22:14 · And so then I could query like the get the documents directory. I could get a path on the file system, open up a a Unix socket and it would work the same on Windows with pipes. But it just worked like it worked so well and I was so excited because one it didn't need any dependencies and I was using anti-gravity to build it but it's like I started getting excited about this world where like what if apps like have IPC

22:38 · between themselves but it's all dynamic right cuz like I mean when I was doing a lot of iOS and Android development um sometimes you get like callback schemes or the ability to like push data out but it was very rigid you know like your app might be installed, they may forget to update this app. It's always like which version are you have and it's like always uh let's just add a new API as opposed to like change it.

23:00 · And so I feel like this allows you to say no like it is dynamic like it can change at any time like I could deprecate functionality and that's why you have to pull for whatever tools are available.

23:12 · Gotcha. Okay, that's cool. Yeah. You know I So is your next step to run it as like a Damon service on device?

23:20 · So it already is like it works. Yeah. Yeah. Yeah. So, like basically when you start up, you can say if you want the HTTP server or standard IO and it'll just start the socket and be listening and then you can like shut down the app.

23:30 · Yep.

23:31 · Oh, that's very cool.

23:32 · Yeah. So, you could run it headless. Um, but the app does need to be running in some capacity.

23:36 · Gotcha. Okay.

23:37 · Yeah. And and that's that's interesting.

23:39 · You know, at Ash and I earlier this year, we we tried building uh an MCP client that hooked into Firebase AI logic.

23:48 · Okay.

23:49 · On Android.

23:50 · Okay. On device. Yeah. one device, right? But just a client, not a server.

23:53 · Okay. Right. Yeah.

23:54 · And uh that was I I find that the MCP spec has so many different variables to it.

24:01 · There's multiple ways to interpret this the spec, right?

24:06 · Yes. Yes. And it's pretty exhaustive.

24:08 · And I was only touching the JSON RCP part.

24:10 · Yeah.

24:11 · Yeah. Yeah.

24:11 · Yeah.

24:11 · Because I I I was using the Astro spec I tested on and then Ash went to go test it as well and she's like, "It doesn't work." I was like, "What do you mean? Did you try it with Astro?" like, "Yeah, but it doesn't work with this other MCP server that somebody else built and they conflict." Yeah.

24:24 · Yeah. Yeah.

Implementing the MCP spec in Antigravity.

24:25 · Uh, have you tried building a server and like matching to a spec or anything?

24:29 · Um, basically a limited spec. I just wanted to support tool calling and um, I was able to like fully implement the spec um, pretty easily with anti-gravity. And what I did is I basically created like an abstract class that had all the methods and the handlers for dealing with the JSON bytes. And then it was super easy to extend it to be a HTTP server or a Unix socket.

24:51 · Nice. Cool. Yeah.

24:53 · Well, I hope we can hear like more next time.

24:56 · Yeah. We'll see if it evolves some more.

24:57 · Yeah.

24:57 · Yeah. Cool. Well, uh, thanks for having me on your podcast.

25:03 · Yeah.

25:03 · No, it's it's cool to like, you know, change it up and and sit. But, uh, yeah, there's a lot of cool things that I feel like we're both working on.

25:10 · Anything that you're excited about, uh, this week?

25:13 · Uh, this week? No. No. Uh I'm I'm just trying to get like my blogs out the door, right? And and I'm sure we'll link them below. Yeah.

25:20 · Uh whenever this drops probably everything will probably be I'll probably have something new by the time this drops.

25:25 · Fair.

25:25 · So uh nothing to tease yet.

25:28 · Nice. Nice. Nice.

25:29 · What about you?

25:30 · Yeah, for me I uh kind of exploring some different um AI things that cloud has to offer right now. Seeing how they have too many. I know. It's so hard to enumerate all of them.

25:39 · I feel like today I was testing out a Python notebook and doing all the things. So, it's out of my comfort zone, but I'm pretty excited. So, yeah. Yeah. We'll have a lot of fun for our next podcast.

25:48 · Absolutely. Yeah. Cool.

25:49 · All right. Um, we'll uh link everything in the description in case you missed it. Um, definitely make sure to let us know what you want us to talk about next. And we'll see you next time.

25:57 · At next or next time.

25:59 · We'll see. Oh.

26:00 · Oh, that'd be fun. A Vegas show.

26:02 · That would be fun.

26:03 · Yeah. Cool.

26:04 · All right.

26:04 · Yeah. Peace. Toodles.

Building the Flutter Widget Maker and Storyboard

Tue, 14 Nov 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Building the Flutter Widget Maker and Storyboard

Description

Norbert Kozsir - @norbertkozsir

https://twitter.com/norbertkozsir

https://github.com/norbert515

Rody Davis - @rodydavis

https://twitter.com/rodydavis

https://github.com/rodydavis

https://youtube.com/rodydavis

https://rodydavis.com

Our podcast player:

https://rodydavis.github.io/creative_engineering/

Follow on Twitter:

https://twitter.com/CreativeEngShow

Transcript

0:00 · welcome to creative engineering today we're going to be talking about widget Builders flutter editors idees analyzer plugins storyboarding and much more with me I have my co-host Norbert how are you doing doing pretty well um it's been a week where I finally um got back into

0:18 · publishing something um actually two things which we'll talk about in a minute how have you been doing doing pretty good yeah uh just been pretty crazy uh have been releasing a lot of plugins to um speaking of some announcements that's come out GitHub announced code spaces pretty crazy have you heard of it yes I've seen it of course they they own vs code and now

0:42 · they all they also own GitHub and now they combine those two pretty cool things into one and like I'm just thinking about the possibilities of not having to clone a repository go in there do some changes to a PR just just being able to open it online changing something and just having it all in one place looks like a big thing yeah what's cool about it too is they're offering you know a Docker based um environment

1:11 · so you can have flutter installed they have their examples they have node.js rust and typescript and just the the ability to open up something that doesn't require UI like there's many times I may fix like a bug that's just in Dart and it's just a logic bug and you basically want to able to just write something and then run your test and this is something that you can do right from GitHub now which I think is super super cool I mean think about how many times we want to just like release a plug-in update and you know we have to

1:42 · either do it from our local machine just to submit it to Pub or you know just these other crazy hacks we come up with but what's cool now is like you could actually log in to Pub from the terminal from the shell here and then actually publish your plugin uh without actually needing to download it which I don't know I don't know about you but like for me I have started to run out of space because of all the repositories on my machine I recently had to like go and clean up a bunch cuz I mean it starts to add up like when you start forking a bunch and doing all that yes I I literally sat down I think was yesterday

2:15 · when uh my disc space was running very low like low as zero bytes on C uh which Isn't that cool and I went into my workspace floor and there were so many projects which with each being over 1 gigabyte and in the end it turned out I had all the old Desktop Windows ands in there which were all taking up like 600 Megs each so I was just able to delete the old ones because you'd have to recreate them if you run this with the new version so that saved me like 10 GB

2:46 · uh which was pretty nice yeah I actually rained the same thing it was all the runner builds for Mac OS that are taking up so much space and I guess it counts a new build every time yeah because it would be a a new archive build but yeah that was really annoying because I think I cleared up like 75 gigs of all the the code that taken off yeah it was a bunch

3:09 · cuz like you know each repo maybe be over a couple gigs because of the changes and the content inside of them because I'm like storing images too and yeah it was a lot now I feel my 10 gigs is nothing compared to your 75 yeah also have this like weird bug I hope other people aren't having this too but basically the dart analyzer will start picking up like 100 plus gigs of memory and then yeah it's weird like I

3:35 · can restart I I don't know I've had this happen on a couple different computers of mine but like Mac OS will like the system will start taking up like 300 gigs 200 gigs and then I'll restart my computer and then it goes away and it's like super annoying I don't have that much memory but so I've been so my

3:53 · normal day-to-day storage space like 10 gigs or five gigs on C which uh my laptop's a bit old um but yeah I've noticed the same thing like I'm not sure where it's because of the door analyzer but over the day it fills up at some point Windows just notifies me okay you have no more space left and at this point I restart my computer and it's all

4:17 · back like do you think it's because of D analyzer yeah I think maybe it could be like it's not garbage collecting correctly or maybe it's uh it's something to do with like the pub cach cuz I can rebuild the pub cash and it like fixes most of the issues like I have a couple projects right now that just won't analyze like it'll it'll get stuck on you know processing and then I'll have to restart and then usually that'll fix it even yeah it's there's

4:41 · just some weird issues I mean every now and then I feel like I've had these analyzer issues and then there'll be a fix and then it'll break again in a couple weeks so I don't know I don't know if hopefully it's just my machine and not actually something everybody else is facing too nice weird indeed yep

4:58 · so uh today like we said we're going to be talking about you know UI Builders and editors and um just trying to have a discussion about you know like what the current state is so um based on my knowledge I feel like there's you know a couple players out there there's Adobe XD which has some Community plugins that

5:15 · export to flutter um I know that they're officially releasing their plug-in that's going to go to flutter projects but that's not out yet there's been Supernova which is really cool and flutter interact they announced some really cool updates with it um that one actually allows you to open up a wxd and sketch and Export flutter projects which is super cool um and just as a side note that one of my favorite editors that I had found which never actually got to use which was the dart editor um but I thought that was really cool cuz that was a whole editor that um the dart team

5:47 · released about the same time as darum allowing you to edit Dart code um without actually having to have Dart installed and of course we have dartpad um and code pin for that matter of online editors that you can build individual screens with code in a declarative way um am I missing any we

6:05 · both don't know what the status is but on FL interact Google itself uh um mentioned a UI edor Builder uh which they were working on they have been very secretive about it like I have I've looked online and there's no trace of this ever being like there is the video of it being uh announced and spoken about but nothing else it's like

6:30 · ghost like yeah you can search it on Google and you won't find it they even provided more information about Fusia than this yes I know yeah I I had the same concept you know I was like I was searching everywhere I was like maybe I just missed it maybe I'm typing the wrong name it's like nope it's just like not there so either one they backed out

6:50 · on it or two they're just not ready uh we'll see but um yeah I mean and then also too I just wanted to talk about you know cuz you you've had your widget maker for a while and um just uh wanted to talk about some of the things that you faced when building it and um the fact it's open source now which uh we'll definitely link in the description but uh so what um what made you want to build the widget maker so um I think the story started I was just bored and I thought okay how cool would it be if you could open the Flor project in itself

7:23 · like imagine just running an app on your phone and just opening the source code of that app inside that app and reload itself so I start with this uh weird and crazy experiment of building this little so-called phone IDE project which had the most terrible UI you probably have ever seen uh but it was a pretty neat proof concept uh basically what was happening uh on the phone it uh got the

7:51 · files via an HTTP server on the computer which it was connected to and when it wanted to hot reload itself it basically sent a request the computer and it was connected to the computer via ADB Wireless uh and so the computer was able to just hot reload it over the the Wi-Fi and just have this magic effect of having your complete app on the phone modifying the app itself on the phone which was so interesting that I just uh kept exploring the idea of trying to to

8:24 · make widgets and make the building of UI um more approachable and more efficient and like the current version which is online is actually I think the third iteration like I've Rewritten the code at least one or two times because the ideas I had and all these stuff that was

8:46 · floating around in my head constantly kept changing and I tried to uh figure out what I actually wanted to build yeah so like um what approaches did you take when first building the the UI part of it because I feel like when you're working with flutter widgets you know there's so many different types of widgets that flutter provides like could pretty pretty hard to like you know have that um strongly typed because there's no like receive a list of all the widgets and all the properties you have to do that kind of manually um like I

9:17 · tried um a couple of things like as you said there's no way to get all the widgets easily um you what you can actually do is just using Dart analyzer uh analyze all of FL itself and just see which object extends for example play stateless state for widget or something like this but uh I actively decided

9:40 · against using this because when you scan all those widgets it doesn't make sense to handle a scaffold the same way you would handle list view you need special UI to to allow the user who's building the app to interact with the list view differently than the scaffold like you as a developer who's building uh using this uib don't want one generic widget which doesn't work very very well for

10:08 · all the widgets you want those widgets to work well with the individual components so what I ended up doing is mostly handmade like rep each widget at some point a lot of widgets were pretty basic like a center and a line it's just

10:24 · a widget which has a child and takes it for properties um I actually buil a code generator uh where I was able to just specify a few properties and generate all this code which I think struck a pretty good balance between uh generating stuff but in other hand also having the control to then actually go in there and say okay for the Align I maybe want to allow the user to actually drag the widget inside the editor like instead of uh typing a line uh bottom

10:52 · left you just drag the widget which is in the line to the bottom left corner and it changes that like with with this approach you can't have these special UI features in there without having to deeply modify the code which you've been doing did you face any issues when you

11:08 · know having it all you know combined together cuz I feel like um when I first um started building this like you don't think about you know well how do I show a column that has no children or a row that has no children like you have to like you know make guesses about what the user is trying to do and then like you said in a list view for example like if you just add a list View like by default it's going to throw an error so you have to like basically add a default kind of state and then allow it to be edited yes like as I said there's a lot

11:38 · of components which need this uh this special attention for list views uh for or for columns and rows in particular um so what I'm doing right now but which isn't perfect like you have to think about what what you want to do is for example if it's empty it tries to be as

11:55 · big as possible and hint to a user that this container can put something in if it has some kind of childel it tries to be as small as possible and just show the spaces like before the first widget or after that one where you can drop in the next widget um but like as you said

12:12 · you have to make guesses and try to think about what what would I want or what would I expect um but yeah like that's definitely a thing you have to you have to talk to people you have to try out you have to um see what works and what doesn't um but yeah like there's a lot of different uh widgets which need special care and that's also one of the reasons I uh finally decided to open source it like those widgets could be uh like people could make one

12:41 · separate widget and make a good ux and UI for that uh without having to touch most of the the other parts of the code and with that the ability to collaborate and this is uh pretty big because you say okay I made this very nice component for examp for the Align I implemented dragging the Alli which is in there um so yeah that's one thing you have to to

13:08 · watch out because you want to provide a good user experience for each of the components like it doesn't make sense to just throw it out there and well supporting multiple widgets um doesn't work that way um have fun it's more like have less components to support maybe have a uh smaller use case smaller uh uh feature list but then have

13:34 · those features which are in there work very well because then you can say okay maybe don't use this for a full-blown production app but if you want to have this little screen sure go ahead try it out build it should work pretty well yeah for me I'm I'm trying to support all the material design and not touching slivers ortino cuz those are two other

13:54 · huge crazy things and also you know I was going to say you know one thing thing you may not think about when building something like this is the code that you write normally is not necessarily the code that you would expect to have written from these these generators because you know to get something to look correct it may look way different than you would have you know written out in a declarative way you just may take a couple lines to write something that you know is just it's way different like so like when you start adding stacks and um you know just

14:25 · all these various things when you want free floating widgets and stuff like that it just you got to think about how it all fits together and um yeah it's just when you have a UI Builder it's necessarily going to be different for sure yeah and it's like also super hard to like um compared to Android for example or the web where you have this um static representation of UI um the Android XML stuff uh the web HTML and CSS things in in Flor you have code and

14:55 · code itself is it's breathing it's a like you can do all sorts of weird cool practical and smart things and first off uh building something like this and then reading it back in and just processing it uh that's like a big challenge which um yeah yeah which I I've tried uh I

15:20 · played around with a lot of ideas uh even as far as building an own programming language which targets the format uh which which I have done it works uh it's been a fun project maybe it's going to see the light of the day at some point um yeah maybe but um in the end this is this is

15:42 · something super hard and you have to to have compromises like you can say okay the code which is generated has this uh um style uh which is good code like you can use it maybe it's a bit different from what you've been would have been writing but it's also not Cod which you don't want to touch ever yourself like

16:02 · just generate it forget about it that also um doesn't sound like a good way to to approach this because what if you want to use it for a widget but then you want to add stuff on top which isn't support right now you would have to rewrite it if the

16:19 · code is bad yeah totally and like you know people have asked me like why why can't you just like support my existing widgets and it's like I can compile your widgets but the problem is you know like you can have build methods that um or return methods that actually return widgets and then you those can depend on other files those can depend on logic that doesn't exist in the runtime you a widget can be presented in a way that is different from the runtime like so you have like a a UI building mode and then an editor building mode and so yeah

16:50 · that's been quite challenging and then also the fact is like I made the um you know a distinction when I started building mine that any widget created is immutable so like you know you can use the widget at runtime but once you use it like you can't really modify it which

17:06 · is on purpose because once you start modifying it then you got to figure out like what they changed and how they changed it versus like um using a generated widget approach just like you wouldn't touch generated code and dart I'm trying to do the same thing with a generated UI code so then you can just you take advantage of the widget but um that way I can always parse it so are you talking about the code which is generated as text or the widget which is running in an editor where you press buttons where you navigate where you

17:37 · yeah both they're both stateless so they're all stateless So like um when you when you actually click export it'll generate the files and a generated Dart file and then the editor also saves the state of where all the widgets are and the locations to them and stuff like that um that way when you go back and open the editor you can have your project again instead of having to lose all your work m i see you yeah that's one thing um which I currently don't

18:03 · support like going the other way around exporting it and importing back in um it's been a thing I've been taking a look at and that's that's the thing like what's the the safe format the most natural thing would be and is to save it as code but then you have this problem that reimporting it is not that easy if

18:22 · you modify it in some unexpected behav uh unexpected way I mean you don't want to save it as some sort of Json and XML because then it loses the the power of what widget actually is like it's code right so for me I I save it in two different ways I I'm using the freeze package to create my mutable data structures with all the code generated um stuff and I have a top level.

18:47 · Json or I can also use binary but I'm using Json right now to store the project settings the widget configurations like the abstract configurations and then from there that's used to generate the darkart code so you have real dark code in the locations that where you're using it but then you also have the ability to customize it and reimport the editor but

19:10 · so if you then want to customize the actual dark code which is generated you can go back into that right like I mean I mean it's good and it it serves its purpose but like I'm thinking about a way or a word where this would be possible where you could do all the modification you wanted but like you need some sort of like if you're just trying to patch edge cases like okay maybe don't Define setic functions it's not going to work because there's an endless amount of edge cases um like

19:41 · literally endless uh the grammar for this is uh I don't know how it was called but there's just endless ways to do something yeah um exactly so so I'm not sure what the best way would be to approach something in a very Universal way um but yeah in the meantime I just

20:02 · said okay you built the widget you exported it's yours um being able to then repport it using these this basically what it is it's a safe file for the project right yeah well I've also been um working on building my own dart parser like a very crude parser so

20:19 · like for the chances that you're only and I only support if you're only importing material or Dart libraries so if you're importing anything that's not Dart or like a third party package this doesn't work or even another file but basically what I'm able to do is I'm able to parse down find all the classes

20:36 · find where the build method is and then I'm working on actually creating my own like analyzer to like in a very quick efficient way parse a dart file and get the outline of like the widgets so I can say scaffold with a child of this with a child of this with Children of this and um that way I can easily import stuff because like once you have that you can you know build a crude import but I'm also working on there's a really cool package called reflectable which if you run it at runtime it will give you

21:10 · somewhat um similar Behavior as Dart mirrors allowing you to kind of like introspect all the things that you're using I actually use this to get all the properties for the widgets that I support so um I can like import from Material scaffold and get all the list of the Constructor items and then um I

21:29 · think I showed you a demo but basically you could use the same approach for existing widgets too um but the problem is this needs to run ahead before you actually import so yeah it's just it's interesting problems it's using Code generation right do you ref reflect yeah yeah like um that's also the thing uh I looked at with my custom language um so

21:53 · basically I've been following this book by um don't want to mispronounce his name Bob neist he works on the uh dart team with uh the dart SDK and he's been writing this book called crafting interpret predators and it's like one of

22:10 · the best technical books I've ever read like it's so well uh written like I remember I was sitting at the airport um uh I don't know where I was flying and just reading the book and hacking my my language but yeah basically so um regarding language I thought okay if you can Target the dark kernel file you can

22:33 · um build a language which uh works the same way cotland does to Java like they both Target the same underlying system so they can have a very deep compatibility and using this uh custom language um you could have restrictions in in in the code and because you write the compil yourself you can inject as much meta information you want into the build build step um and then actually

23:01 · save the widget as code and modify it because you're controlling all of it you're controlling the compiler you're controlling the right the transportation um so that's one thing I've looked at it uh looked at for a bit

23:18 · um but I mean it was mostly a fun project and actually building a custom language to then support some other language to convert some visual way that like if that isn't m I don't know yeah that's I've also been exploring instead of doing my own language I've actually been exploring like a node based um logic Creator so like instead of you

23:40 · know yeah writing code you're just like connecting nodes so you can say like when this happens do this or you know when I tap on this button I want to trigger this event and it'd be kind of an interesting way because I feel like there's a lot of applications with flutter that you could build with just a node base like something that doesn't need a lot lot of crazy logic something just like when a network request comes in either stream or do a future do this

24:04 · on a repeating on an interval you know just like you can do so much with just that um you could build a counter application easily with it um but CU then your state is just like amorphous and can be stored in locations you could choose like think of how easy it would be to once you have a node base Editor to say like when I'm storing this value save it to SQL light save it to Firebase save it to here like and then just

24:28 · I I liter I literally when back in the day when I was actively developing widget maker I had this phase where I was just thinking about exactly this like just imagine okay yeah you have an application where you want to get the user data if you have something in your

24:43 · uh cached uh storage you want to get it from there show it then do you tap something with a note based workflow what you could do is you could have a note which is your network user you could connect that to some other uh block which which first tries to go to the cachee block and in the end all you

25:02 · do is you plug that note into the actual widget like just imagine a visual canvas where you have your widgets laid out like you do with the storyboard and if you enable the code overlayer you see all the code connections on top of the widgets so you could actually connect the text which is on the page with a

25:23 · note which supplies some sort of text and the cool thing is you could run this application in the editor and see all the data flowing from one point to another and just debug it because okay you have this bug what what is one thing

25:38 · which helps you with debugging just gaing as much information about the current state of the system so what you do is you set break points you do print statements you go for your application think okay I should be in this so the user should be logged in is he logged in and in this case you could actually see okay I see all of the data which is currently being held State I see how the data is connected and mhm like that that

26:03 · could be pretty cool yeah and the cool thing is you could do it in an imperative way with flutter 2 where you could have individual screens that are covered by nodes you could have the entire application that could be running on nodes because what's so powerful about that is then you could share those template so you could have that logic that you could share around because it just be a file at that point um yeah and I just I think about you know there's other language that have this and you know there's so many like I just I call

26:31 · them like clickable applications that you could just you know you click here it goes to this screen you click here it goes to this screen you just you go to this screen it gets a list from this URL and it's I don't know you can build some really cool static applications this way yes and I mean even more complex ones like even those complex applications have a big uh part of them are static

26:51 · like okay they may have some sort of fancy Al algorithm in there they may have some machine learning in there but but those are mostly modules like you can wrap that module in some sort of visual node and just just using a system and if you're this far and you have all those presets assets made like what

27:11 · stops you from building an application a couple of days like okay you want to login totally just use the login module you want to have a user profile use user profile you may want to customize it sure go ahead yeah and yes like the abilities are there uh just has to be developed and I mean you never know where it's an actually good idea like this this could even be like it could be bad we don't know we haven't done it yet um but I think there's a lot

27:44 · of movement going into the uh direction of uh the no Code and low code environment where the uh next layer of abstraction to like the very beginning was like people drilling holes and cards which magically told the computer what to do some point somebody thought okay let's not do holes let's just try to write texts like moving registers and

28:12 · additions and at some point okay why are we doing this we could write some language we can actually read and write uh which is easy for a human for a computer program language is super weird what what what should a computer do with a class statement and but because the compiler is there which converts that into the lower language which then goes even lower and using this next layer of abstraction like going from visual to language to

28:41 · instructions and to machine code you have so much more abstraction could be way more efficient if it's done correctly I think at some point we're not going to program programs using a language forever like

28:57 · at some point it will change like even if it's AI which is just going to take over and build something on its own but something's going to change at some point yeah I mean and also what's crazy too about the node base editor is you can actually support plugins because a pluging can just Define what its inputs and outputs are in a simple file so that's pretty cool already but also

29:20 · think about once you have a node base system you could actually then use machine learning to generate the most optimal solution of data flow you know like you could literally have all the inputs and yeah it's crazy like you could find logic bugs and I don't know there's just there's so many possibilities when you're in a node-based editor because all of a sudden now you have like basically these Legos that you can connect everything to each other of course you can run into some crazy problems like an in plus one problem but um yeah there's some pretty

29:46 · interesting things you could do I think the most important thing with a note based editor is and which a lot of uh those not based Solutions which are there like is the integration with actual code like how easy it is to drop down a layer because a lot of times you have to write boiler plate code which is really not fun to write you have to go through some sort of calization deserialization you have to go through maybe a type versus un type thing and if

30:15 · you have this barrier where it is more work to actually write the code in in code than um to just write all of it in code like just imagine most of the notes work but you have to write two notes which you have to write in code and if you have to maintain those two notes as much as you would have maintained your whole code base uh then you lose the

30:40 · power it's not worth it but if you have some way like one click connected and it's all whatever it's typed it's it's working and you you don't have the friction between going between those two words and you can just separate those um I think that would be an important thing right and for me what I'm thinking of when I if if I'm building this solution is maybe actually using the node-based editor to write all the code generation for you so like you could so there's two

31:09 · multiple approaches obviously you can take but basically you know as you connect stuff it's actually generating the dart code and then that way you have you know the all the aot performance kind of stuff and then the cool part is what I'm thinking about is you could actually support custom scripts written in Dart but you could even do it one step further where you know obviously that would work out of the Hood um or out of the gate you could just connect it but what if you supported like these like I don't know if you've ever used Swift playgrounds but like magic variables so then you could say like you

31:37 · know you have like the name of the class and like as you're editing in the node editor you could actually have this like Dart environment which you can have these special variables that are passed in that then when you generate the code it generates the correct names and does everything for you I feel like all of this uh for it to really work it would have to be deeply integrated in into your environment like uh like one one

32:01 · thing that's super annoying if you have these variables and you're trying to debug and in the end it turns out you misspell the the uh yeah the and the regx didn't catch it or something like that so uh if you have something like this and you pair it with a very nice

32:19 · integration into into your ID it just feels flawlessly connected then that's that's where a place where it really shines Ian I mean just think back where mod modern idees like what do they do for you I couldn't imagine myself programming nowadays without an ID which has autocomplete syntax checks go to definition like that's a big thing and if you lose this for these note based

32:48 · things because it just cannot comprehend and connect those then that's a big stepb back but if you have those like I think that that has the big potential right I mean even you know like when we have complete ml right now which can use machine learning to do autocomplete suggestions and vs code but think about taking that one step further where you can have a node and it has suggested nodes which is kind of nuts so like you

33:11 · could say yeah exactly like oh you want to do persistence you want to you know syn it to Firebase you want to do whatever and you know at first glance you think well maybe that's going to generate a whole bunch of code but because of the abstraction you're actually able to optimize it so you can have like just like how Dart has two different modes you have the debugging and the profile and release phase you could actually have separate modes for you know all these different parts yes and as we talked before in debug uh

33:38 · debug mode you could have all sorts of different debug information there the current states the transitions data flowing you like there's a lot of possibilities yeah it's it's pretty insane So speaking of um that have you worked with um the dart analyzer at all I've been taking a look at it for a bit um it's like it's super interesting to have a package which is implemented in Dart to analyze dark code and get

34:08 · information about itself um have you yeah I've I've worked a little bit I've been starting to build my own like kind of Dart parser but yeah it's it's pretty insane um the analyzer is so powerful but the applications I'm working on have to run on the web which the analyzer doesn't exist on the web which is kind of unfortunate but um so uh have you I I

34:28 · think weren't you working on like a plugin for Dart or the dart analyzer um so basically I got pretty um Fed Up by the fact I had to localize the strings manually and just go in there extracted go into our files so I thought okay when I did an intell plugin before for fun let's try and see what I can build in an evening um so I built this little plugin which uh helps you localize Keys basically with a quick action which you INX with the old Enter

35:01 · key um it copies the value into a Json file and replace the code with the correct call um and then I thought okay this was pretty tedious to write like Java with intelligent apis and all that stuff like like most of the stuff was undocumented I had to search through so many things I thought um it would be way better and cooler to actually write this code in Dart like write a d plugin for that wow so uh I stumbled across this

35:32 · project or this thing called um analyzer plugins which basically is exactly this um it allows you to write a plugin which is written in Dart uh which runs inside the analyzer which um in modern ID for

35:48 · example intellig and vs code um allows you to inject or add for example suggestions go to definitions uh refactorings and all that stuff and with this like during this podcast I just thought when we were talking about the program language with this with my custom program language I could even Implement a goto definition cross boundary like in D I could run my my

36:15 · compiler and analyzer on my custom program language and allow the user to go from the dark code inside that custom language because all the code which is there is written D you don't have to do some weird plugins and super easy so so that's one thing um I'm exploring right now like I've been trying to set it up uh it's I should be able to to have a

36:42 · few experiments running in a couple of days um but that's super interesting have you heard about this yeah yeah I um yeah just been seeing the kind of stuff that you've been doing I mean the the analyzer plugin is just like incredibly powerful and like you said earlier like I couldn't imagine developing without an IDE now like there's so much work that the analyzer does for you as a developer and I feel like um the ways that we can

37:07 · solve our own pain points to create solutions to things that we're facing every day only makes us better developers um yeah and I I love the fact that you did it with the internationalization plugin because that's for me a huge um thing already cuz like how many strings do you probably have in an application you probably have like hundreds maybe maybe even a thousand on a big application and you have to go into to each one of them store them in a Json file and yeah it's

37:33 · a it's a tedious process that's for sure yeah actually after I published the plugin um uh Dominic pointed out that uh something very similar exists for vs code and sure enough it also exists for intellig J uh which is the Intel plug-in by localy um which does pretty much exactly the same thing um only drawback is that it only work works with their format and way they do the code and um I had a like

38:04 · it was working okay um my case it's more flexible like you can specify what the code is which is going to be replaced and stuff like this like for example if you're doing your own localization system where you're using a custom package or maybe sometimes you're just using a playo Json file which you load in with with um as a file and in this

38:26 · case you can use this plugin to write to loc with your own system um but yeah like things like these like it went from okay I really don't want to do this task this is so annoying to Oh I'll just do a few strings here and there I mean it isn't any extra work and

38:47 · I mean it is a small thing like you could sit down and do this but just the feeling of being productive and actually not sitting down to do the tedious work but to actually express yourself and work on actual problems which you're solving instead of just coding right

39:05 · exactly well one thing you could do though is because it's an analyzer plugin wouldn't you be able to write a plugin that could just automatically extract all strings to a Json map for you on existing code so so that plugin um I was doing it in pure intellig and that's where uh this idea um to make it in dark came from so I haven't actually looked at all the apis yet um but it

39:29 · could definitely be possible like um it's could be hard to figure out which strings to actually localize like sometimes you have strings which are which should be localized and some shouldn't for example strings in

39:44 · variables where you just save something you don't want to localize but then again you may have variables which you do want to localize which just holds the current user output or something like that this yeah um so I think just manually going in there and selecting those one by one is a fair compromise

40:03 · because it's little work when you see something you just tap two keys and it's done and on the other hand you don't have to rely on the system to magically figure out which strings to extract and which which leave in place well you can always you know use start decorators to decorate any variables you don't want to have extracted of course it's it's a valid approach um yeah it was just fascinated by the uh ability to write these plug-in extensions for an analyzer

40:33 · because that's the thing you're using daily like your um IDE which does so much stuff and you're if you're able to to customize it even further for packages or systems you are using that that's in my opinion is a

40:51 · pretty big uh productivity boost yep and not only that but you just learning about how the analyzer Works under the hood only makes you use Dart better too because um you start to really understand how powerful everything is and how you can optimize things for

41:08 · sure so next I want to talk about um storyboarding and I know that your widget maker already does some of this like what kind of approaches did you take when you know having to lay out multiple canvases you know and be able to pan around and um you know what what kind of inspired you to do that so you're talking about the widget maker correct yes so um well basically um most

41:33 · of the graphics application do this and the idea was from the beginning to be um somewhat similar to what sketch figma and all those applications are um and implementing it was pretty interesting I think I answered to a stick overflow question so I was using a stack with a transform and basic basically when you scroll you're just transforming and making them more and bigger and using

42:02 · the stack I was able to position all the widgets but there was one problem is when you transform the stack and make it smaller the area where it can um get user inputs um is also smaller so what happened is you when you tried I think when you try to to drag outside of the Middle where it was actually at it didn't work so what I ended up doing is actually copying the whole stack code and just removing one line in the test render or hit hit test where it was

42:35 · checking if the position is actually in the bounds and I was okay don't check where it's in the bounds you are hit uh that was a pretty interesting thing um how did you do this in the in Your Story Board uh hearing you say that makes me realize all the incredible amount of effort that went into my solution that I probably should have thought about doing that um so for what I did for my storyboard is I

43:00 · I faced the same problem as you like my first approach was I wanted to be able to support zooming in and out of the canvas and um all this and this was my my third iteration on trying to figure this out um I came up with a solution I don't know if it's the correct solution but I'm using a stack just like you using the offset to uh pan around but

43:19 · the only difference is I'm transforming each child that's on the stack and aligning it so then um I have the widgets that you know can expand and contract and then I transform those to where it actually works pretty well and pretty performant but yeah cuz I was facing that issue where if you once the the stack started shrinking then yeah you couldn't tap on anything else I feel like this approach is just different but yeah um it was definitely a lot more work to try to figure out um everything and in fact before I did this last um

43:50 · one that I just published I was actually transforming each child on the canvas So in theory I was wanting to be able to support dragging each screen around to wherever you want which I may still in the future but this approach is so much simpler I can you know put a grid view on the canvas I can put a stack or a uh

44:10 · a wrap or even columns and rows and then I transform those down to scale and have them you know in a column that all go together so kind of different but uh yeah it was definitely interesting to try to solve that cuz it's not exactly obvious there's no like you know flutter widget out there that are doing this it's you know a canvas approach is definitely something new kind of concept

44:31 · but like once you do it it's like wow that was really simple you know like you you expect it to be so much more complicated and it works so well with performance cuz it's clipping out the bounds and um only rendering what's on the screen yeah I think like um there are very few cases where you'd actually

44:48 · want to do a custom render object but I think if you would be having this inside the framework which would have to support a huge variety of use cases making this a render object would probably make sense because then you could also Implement stuff like lazy loading like a canvas. builder where you may have millions of widgets but only actually build those which are in the viewport lazily destroy maintain State

45:13 · destroy State and do all those things yeah um but yeah I mean if you don't need those wi bar and go this road because that that's something which gets complicated then you have to think about the life cycle of children how they laid out how to efficiently do all that stuff and I mean it's always best to stay on the topmost layer the widgets layer and try to use what's on there and only drop down if you really have to um but I mean

45:41 · if it works it's a good solution right yep I've tested it with about maybe 150 200 screens on the canvas at the same time and it seems to work pretty well um yeah you taking this new approach helped a lot because before it was having to render everything off screen too and overflowing which that was causing huge performance reason so or performance cost so now because I'm clipping the stack on the viewport and doing that and

46:10 · then clipping each child too it really reduced the amount of overhead I was facing I see you yeah but it it's pretty cool though I built it because I wanted to um be able to create my flutter application with all my screens at the same time and just like you know change the theme pile and watch everything update or you know

46:31 · add a new screen or widget customize because the thing is it supports hot reload and it keeps the state of all the screens you can I even recently added a restart button so you could even restart the entire applications pretty easily which is crazy but I just found out how simple it is to do that um I was looking at device preview on how it works if you

46:50 · just give your widget a new key and call set state it will restart the state of the widget I don't know I thought it was going to be so much more complicated but all you have to do is just give a new key to your material app and then it does basically it restarts so that's kind of interesting um I could have used that for other applications too like maybe like if the user logs out and you want to guarantee that it's a fresh app you could even do the same kind of concept where you could just give a new key every time a user logs out yes kind interesting so um one thing I wonder and

47:20 · ask myself um I don't know where you're dealing with this right now but what what would be your uh opinions on this for example if you have an application which relies on scopes for example you have a few screens which only work if the user's logged in because there's no nothing to show on the user profile if there's no user how can you ensure that

47:42 · all these screens are in a somewhat valid configuration for example if you have two screens which are mutually exclusive for example a user logged in screen which expects a user to be logged in and a user logged out screen which expect the user to be locked out how can you visualize both of the screens at the same time maybe have in the worst case

48:03 · wrong data which is marked as that um but still not crash yeah for me what I did is I introduced this concept of Uh custom screens which allow you to add any number set of screens with whatever kind of Constructors you want so outside of your routes and everything else you can pass in the data explicitly so you can say like you know you can say this is is this configuration for this widget this is this configuration you could even have the same widget with different sizes even um and the purpose of this is

48:33 · exactly like what you said um sometimes you want to pass in dummy data like for example um if you wanted to preview a detail screen you like with the storyboard you don't have to wait for the um Json request to load because yes in the storyboard you can still tap and go to the details you can also view the details with dummy data and just modify all the you know hot reload all the changes without having to run your application which I think is pretty cool because there's many times that you're doing a detail screen and maybe you're

49:04 · trying to find like that perfect Json item that has all the data or like it uh you know there's so many edge cases and then so with this approach you can actually edit not only the list view the details and the sub details all at the same time so you're taking the approach of having these screens uh very modular without any exent dependencies like no stream ERS no block Builders none of those but passing the data instead yep so so the thing is how could

49:34 · you go ahead and make this with the least B paid code possible so what I could think about is for example have the screen take all the data and have a screen which wraps the screen which then actually provides data with a stream B but then again you have two widgets which essentially could be one widget how would you be dealing with this you could mock it for sure you could even do like uh you could wrap the widget with a a presenter widget or something and then all it does is just mock the the logged in state of the the scope of what it's

50:03 · looking for since it' be looking up for the block with the logged in state you could literally provide that so I see that's interesting so you could have a package which just contains a bunch of marks which rep all of these that's interesting yeah that makes sense you wouldn't have to modify your actual app and you would still have the benefits of being able to and I mean you could show uh mock data in your preview like you want want to see what user it is you don't care who's locked in but you want to see the data and for me too like I'm

50:34 · on at least where it is now like 0.1.1 I'm trying to support um you know pure widgets at first like you know those those work best second thing is just regular widgets that then you can you know log in or do whatever but the reason why is you know there's many times that like you may write a widget

50:54 · that has way too much much logic and I'm trying to encourage you know basically creating like a view model so like you have just a widget that's just presenting the data because if you do that then it's super easy to customize it and add a bunch of stuff and test everything because then you can use the view model to then present that data based on the data that comes in um yeah

51:16 · it's just yeah it's really depending on how you write flutter code too because there's like a ton of different ways how you can create applications and how you create screens but yeah I'm trying to create the abstraction that's above the block layer so literally just showing the widgets themselves going back to to the mocking and stuff like um if you then go the the additional step to work on the smoking I can really see it the block Library work um pretty well with this because it's very um like view

51:46 · modly you have the states which are very encapsulated so you could actually have um some sort of I don't know annotation or even just a helper method which where you all you do is you provide the state object which you want this screen to to access and internally you could hook it up with your um block providers and do all of that stuff and just load in this one state because if you are following the block package way and you have all your blocks in there you could have a fully functional app mocked with like

52:18 · literally a few lines of code and you could have all your apps visible so so that's also one thing if you're talking about just pure widgets a lot of times in my codebase I'm thinking okay have I done this widget before is it somewhere in my code base uh where I don't know or I have do I have to redo it uh so what I usually do is just open the app navigate around and try to see where I have a similar widget but using this you could just have a pallet of widgets like um

52:48 · yep widgets which you've been using everywhere and just see yourself okay where is this widget and you could even do something like navigate to the widget in your ID like tap the widget and show in code and then okay I know this widget exist and just using it this way that would be super powerful what I typically do with blocks though is for me I like to have most of my logic in the blocks like I almost use them as like a repository for triggering actions and my

53:18 · widgets are literally um well I guess because I'm doing a lot of web applications now all of them have to be able to support like deep linking so if they're not logged in like it's the widget can log itself in like you can actually log in from that screen I don't necessarily have to go to the login screen to do it so like I just show a popup or a dialogue so that yeah that's the only different approach that I guess in my applications I haven't faced that too much because my blocks are kind of separate like my widgets can live outside of my blocks I see yeah for me most of my um scoping is very very um

53:50 · implicit in the widget she like I have widgets where I expect this widget can only ever be seen if the user logged in so I'm actually just casting to a logged in user State just being sure okay you you have no way of navigating into here

54:07 · without being locked in because if you would be locked out the widget tree above would be rebuilding and destroying this widget immediately so you would never have the chance to be in here without being logged in so for me um I have a very scoped architecture I actually even use uh mostly one nested Navigator where I include for example a use authenticated scope like um this way even though I'm in the

54:32 · sub tree I can push to that route without re like pushing on top of that scope like I'm always pushing under it so anything which is inside this app has access to that block but there's also widgets which are outside of that scope which don't have access to that so for me it's very implicit so it would be very very um helpful to have this way of mocking that because most of the widget depend on some kind of block to get data from gotcha that's very powerful yeah um

55:01 · and I I'll definitely be looking into that more maybe we can talk about that more next episode because yeah that's something I'm definitely wanting to support is be able to support all different kinds of State Management Solutions you know like Redux like be able to pass in your store and to see you know a mock state of everything um yeah that's super powerful so uh what do you have uh going on this week so this week what have I um I will be doing a

55:24 · bit of work on widget maker um mostly just doing a bit of cleanup um documenting stuff so if anybody's interested in contributing talking uh just just talking about the ideas and potential Solutions um be sure to to hit me up uh open an issue send me an email what uh whatever you want um also

55:46 · probably be exploring the analyzer plugin and see where I can um build something useful like we just talked uh quite a bit about blog and we talked about this problem before that when you dispatch an action and you want to see what the actual code is which is executed um you control tab on the

56:05 · action and where does it lead you to the Constructor of the action there's not much information uh one from there because there's there isn't actually any logic so I thought it would be pretty interesting to write an analyzer plug which actually takes you to the code where the action is processed um so that's one thing I'll be taking a look to um how about you uh yeah going to

56:27 · have a pretty busy week I'll be talking at flutter Europe this week so make sure to um look out for that we'll have links to everything we talked about in this episode as well in the description um I'm going to be working on the flutter editor and kind of more going down the

56:42 · rabbit hole of uh for me I've just discovered Proto Buffs and grpc and the amazing world of everything that is binary and http2 so I'm going to be you know going hardcore into that uh Rabbit Hole so we'll see what comes out of that um and and also just you know continue to make updates to the storyboard as well as the golden layout package that I made so uh thanks so much for listening today if you have any questions like always you can reach out to us on Twitter um GitHub or just um you know

57:11 · find us uh our emails are out there um if you want to uh support this podcast please uh you know give it a rating on iTunes that's always really helpful and uh make sure you you know comment on our repositories on GitHub you know we like to see the feedback we want to see what you guys are thinking um feel free to make issues or PRS or whatever thank you so much for listening we'll see you um in the next episode thanks

Flutter Adaptive UI and Web Assembly

Tue, 31 Oct 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Flutter Adaptive UI and Web Assembly

Description

BigScreen: https://www.oculus.com/experiences/quest/2497738113633933/ Github free for teams: https://github.blog/2020-04-14-github-is-now-free-for-teams/ Codepen for Flutter: https://codepen.io/flutter Flutter internals talk: https://www.youtube.com/watch?v=PnWxW21vDak The Rust book: https://doc.rust-lang.org/book/

Norbert Kozsir - @norbertkozsir

https://twitter.com/norbertkozsir

https://github.com/norbert515

Rody Davis - @rodydavis

https://twitter.com/rodydavis

https://github.com/rodydavis

https://youtube.com/rodydavis

https://rodydavis.com

Our podcast player:

https://rodydavis.github.io/creative_engineering/

Follow on Twitter:

https://twitter.com/CreativeEngShow

Transcript

0:00 · welcome to creative engineering this is our second podcast with me I have my co-host Norbert how have you been during the quarantine great actually it's been a uh pretty productive week um have been doing good progress on all my projects how's it been for you doing pretty good you know just putting out that quarantine content making videos and it's uh pretty crazy I'm excited to go outside again whenever that will be so sometime yeah all right so we have some

0:27 · uh followup items um first of all uh did you know that a GitHub is free for teams yes um I heard about it what exactly does it mean well as far as I can tell the all of the core GitHub features are now free for everyone which is super cool because um I know that at least for me I have some private repos that you you have in the past only been limited I believe like maybe three people or two people as collaborators so now no matter

0:55 · what you can you know have as many people join which is super cool um as as well as you know creating organizations and have as many unlimited uh private repositories question is uh if everybody starts on this will it be free afterwards and I'm guessing not but we'll see oh yeah it's super interesting like what happened since Microsoft quiet GitHub everybody thought it's going to go down and everybody was ready to switch to GitHub and now GitHub is like the thing yeah it's uh but it's also

1:26 · been really good too I I mean I was paying for GitHub Pro subscription too and even cancelled it when they made it free but then I went back to paying for it because you know not only do I get to support things but I realize that if you're on the Pro Plan you get like the beta features which is super cool so that's what I've been using it for so we have another thing on our followup um some just quick VR updates uh I watched last night the Top Gun movie in 3D in

1:55 · big screen and I got to say that was one of the coolest things that I've watched a while I don't know how they did it but they they were able to take like an 80s movie and remaster it for 3D and it was super cool and what was neat about the big screen uh Cinema experience is the movie was like $5 here in the US and it was in a retro theater it was so cool so

2:19 · you were sitting in a VR Fredy Cinema watching an actual Fredy movie yeah yeah it was it was pretty incredible and then uh yesterday they also it's going on today as well but um they are doing some live a live music festival which is super cool hosted by live X live and that was really neat um of course you know it just depends on like taste and music and they didn't really pick a theme it's like they went from a rapper to a really R&B and kind of like jazz

2:50 · band to then a DJ like all just back to back to back and so there's like it's just all these different artists but it's super cool new artists that I haven't even heard before but but now follow them on Spotify which is cool it's nice how many people were there yeah there was uh when I first joined there was over50 people just in the one room I was in in one place like in one virtual wow that's crazy yeah and it was

3:15 · pretty cool it was funny one of the hosts uh you could you they were both in quarantine but one of the hosts on her webcam you could tell she had bad internet cuz like the guy on the right is like crystal clear and then she is like all broken up it's so funny it was awesome yeah and then last I just wanted to talk about the new fit bait song that came out and um have you seen any videos about it yet yes like I've actually seen your video about it yeah it is it is incredible I I'm

3:44 · still sore from playing it it is I I hope they make a whole music pack on it because this is the kind of stuff that I use VR for is to work out and to to really get your heart rate up and man it is it'll wipe you out oh yeah I'm super jealous I um not yet able to try it out because I don't have my V VR headset with me right now yes but yeah definitely first thing when I have access to it uh I'll try that so Cod pin supports flutter that's that was a surprise um super interesting

4:18 · um like as far as I um understood we already have Dart Pad but codepad adds this social layer onto all of that being able to Fork our people's uh Flor creations and just sharing all that stuff mhm have you used codepen before I feel like I've seen it in blog post but personally I haven't really used it um I've used it for like experimenting with it for a bit one thing which uh code pen

4:47 · or Dart pad um could actually be pretty useful in the near future is when you're doing a workshop or something like that and people don't have Flor installed or don't have all that stuff there um just being able to open up a website and doing all of this would be great but the problem right now is it doesn't support packages as far as I know um it only has the built in ones um which is Prett limiting if you want to use something like provider or or things you might be

5:13 · using well you mean you can always just copy the entirety of provider and put it in the single file that sounds crazy I like it yeah speaking of which I um so in my flutter editor last week I have built a kind of a lexer like a parser for Dart files um and it has triggered

5:36 · this crazy idea of well what if I take an existing flutter project and have if you just have pure widgets meaning you don't have any packages um what if you just have a one-click export to dartpad where it takes all of your classes and exports them to a single file and then then you just have and it you know organizes all your Imports at the top and then you have your main file so it's something I've been experimenting with and so far um making good progress so we'll see um so we can also talk about

6:03 · why code pin doesn't support packages and that is because the dart Services API is what dartpad and cod pin are built on top of are you familiar with that um I haven't can you uh tell a bit more about it yeah so um even my flutter editor uses this uh Dart Services API what it is is a rest API to um your code

6:27 · so when you don't have the flutter or Dart s K installed you can still use a rest API to pass in your code and then you get like a list of you know fix options or an um analyzer options you can even do um pass in an office offset

6:42 · and be like okay what are the autoc completion results for this one area or what are the fixes that I can apply and you can format your code and one thing I love it for is you can use the DDC compiler so you can actually compile for flutter web or you can compile the release version but that one takes a lot longer CU it uses the dart to JS um and

7:03 · I even created like a simple example that you can now in my flutter editor one click button it compiles your code and opens up a new window with your actual compile code that you can edit and do whatever with so I just I've been super fascinated with this API and the

7:20 · just the flexibility that it gives you for you know introducing these kind of dynamic widgets and having if you wanted to not saying you should but you could have a web view that you pass in a serers side rendered Dart file compile that and then show the rendered file in your app interesting interesting yeah okay

7:42 · wow yeah talking about uh Door pad for and web and all those things um do you have some sort of best practices for building apps uis for all those different platforms because just building a mobile app is one thing but having code which works on all platforms without having a big mess is isn't that easy yeah uh for sure um so I wanted to talk about

8:07 · you know this thing that I'm calling adaptive UI um what that means really is that we build these applications like you said that have to run on different platforms where you know in one mode they're running on mobile another mode they're running on tablet and another desktop and if we're not careful we're building this UI in such a way where you

8:28 · know it'll you know it'll look fine on mobile and then we go to desktop and it just looks like an iPad version or if you go to the desktop and you come down to a website then it's like oh now it just looks like a desktop app it doesn't look like a web app um so we have to be

8:43 · you know very cognizant of when we're building these applications to make sure that it's not just the screen size we're targeting you know it's not just okay if we're past 720 we're on a tablet if we're on 480 we're on a mobile because breakpoints are not everything um what what have you done in the past to make sure that you your apps are responsive you know on different layouts like have you built an app yet that goes to mobile and desktop yes definitely like most of

9:12 · um my apps nowadays um are built in some sort of responsive way because I use desktop heavily and mobile um so different things like first off sometimes you just have two very different layouts like for desktop you might have some sort of sidebar or something on mobile you might have that on the on the view um there I just have

9:33 · two build methods or two different functions widgets which just have uh different um layouts but still use the same components like all they do is instead of using a column maybe they might be using a row also for me um just using constraint box a lot like setting the max width and stuff like that so one

9:52 · thing that's uh looks very um weird in my opinion is when the button stretches um across all the surface like on mobile it's fine if the button is uh um the full width because it's not that big but on desktop or web it looks rather weird if you have a button which is bigger than whatever yeah exactly or or for

10:13 · example like when you show a snack bar and you're on desktop and it shows the entire bottom width of the the bottom yeah it's um you know but it's one of those things that you know it's amazing how many components that footer gives you but if we're not careful you know just because using the stock components doesn't mean you get an Adaptive UI out of the box so you definitely have to be aware of how to build it what are you usually using or what are you usually doing to uh solve this problem so for me

10:41 · I I have a builder pattern uh similar to you but I use a layout builder at my top uh of my build method wherever it's like you know the the parent that then defines the child size so I I looked in the constraint box but that that's more like on the individual screen and widget level this is more like kind of on the layout level yes what I do usually is so

11:03 · there's the two approaches you can take you can do the naive approach of just like returning the tablet version and then the mobile version which is pretty bad in my opinion because then you get like a lot of duplicate UI code but the thing that I do is I create an Adaptive list for example like a master detailed um if you're coming from IOS is like the master detail controller and then what

11:24 · you're doing is you're just passing that selection up the tree to when you click on an item in the list you're just not doing an action immediately you then send it up to where the widget's being used and then you take an action so on a tablet it'll just update a selection and on mobile it'll navigate to the new screen what's cool about this is you don't have to have two separate list views you don't have to have your tablet list View and your desktop list View and your mobile list view interes but then it also um gives you the flexibility that you can use this widget wherever you want so if I wanted to embed it in a

11:54 · search screen I could then use the same screen as a selection context so I could then push to the screen and then based on a selection I could pop back and you know do whatever I want with it yes and that also makes a sharing code much easier like I could uh imagine a package which implen a couple of uh adaptive UI components for example scaffold which has a sitebar or something else mobile I

12:19 · think you've been doing something like that on your you YouTube channel haven't you yep sure have yeah I built a adaptive scaffold for flutter that uses the new navigation room um as well as when you're on a mobile device it'll use the bottom tabs so it's it's really nice to be able like layout with navigation is one of the first thing people start to duplicate because

12:40 · when you have these different modes you have bottom navigation bar you have navigation rail you have a drawer you have top tabs you you have so many different ways to do navigation on all these different sizes and it's like if you're not careful you're going to just like duplicate all this stuff and you know if you keep it in a one context and

12:59 · you share it you know you don't have these weird States like so think about in the previous example if you return a tablet version and a mobile version if you do something on the tablet version and then resize down to mobile you're actually in a new state you don't have the same state as the tablet screen so then you go back to the tablet size you're back on your tablet State you go to your mobile size you have your mobile State you could be 300 items down on the mobile version and then 500 items down on the tablet version and they're two separate lists interesting you also feel

13:27 · like your approach is very Flur like because it uh encourages encapsulation you don't want to do all these different components all you want to do you actually want to have this one component which just takes care of the thing it's supposed to take care of yep exactly um

13:44 · so speaking of that I also want to talk about platform UI because um when building for devices um I know I'm building on Mac OS but you're building on Windows and so what kind of things do you do to make sure that the user feels at home on a Windows device uh whereas I would do something that fills at home for Apple devices first off I try to separate or not make the app look like a

14:08 · upscale mobile app like um app bars are great um but try to avoid them um in Windows versions because um most most apps don't have the app bar with the back button and stuff um so that's one thing I usually do and just just the

14:26 · little things like not having comp components which um benefit uh which people benefit from on the mobile version because they have limited space but instead use something which actually uses the space that is available on desktop um but yeah I still feel like there's a lot to lot lot of work to be done um on all those components to make a web version or a desktop version truly

14:53 · feel like a desktop application do you use any fluent design that's the windows design language do you that actually I I don't like I don't like that design language too much and there there aren't too many apps on Windows who actually use that design apart from Windows itself and even Windows is not using that every application um so basically

15:17 · just just um building like I feel like the trend um from adapting to each platform to having a unique brand which works on all platforms is is becoming stronger and stronger I feel like nowadays you don't actually want to adapt too much to each platform and have your app look completely different on each device but instead have your own language and adapt to the small nuances you have on the devices like the overscroll on iOS the um top or status

15:49 · bar mecho is how it's how it's called and just doing those is I feel like a better way to approach this yeah I agree the nuances is what make the difference um especially when you think about you know on iOS you want to build switches

16:05 · and Sliders and loading indicators that are this Cupertino style but then you don't necessarily want you know list tiles or scaffold to be you don't have to have a Cupertino scaffold uh by doing it in this way it allows you to make it feel at home but not obtrusive and you still get to stick to your brand also one thing that's another easy win when you're building this in an adep of way is well what about when you show an alert this is like a perfect example of um using an iOS alert style because a

16:36 · user expects a certain alert to look some a certain way or when they're picking a date you want to show the Cupertino date picker or when they are picking a time you want to show like the timer in the bottom sheet but then on Mac OS you do Mac OS way of doing it and

16:53 · and almost always I think the first thing that you can do is don't develop a touch in mind on desktop because there's so many things that you do on desktop that you can't really do on mobile and vice versa so you know you don't want to show a bottom sheet that you can drag things around in on the bottom you don't want to have things that you have to move around and slide on desktop but on

17:17 · mobile you do and that's just all about building widgets that kind of adapt depending on which version they're on and show different input methods based on that um next I want to talk about you know well how do you approach dark mode because this is something that recently has become really popular in an official way because mainly because apple and so many other platforms now give you a dark mode option on your computer or phone now where it'll change everything um are

17:44 · you talking about actually adapting it for the platform or just the theming itself the theming um well first off just setting the brightness to dark um goes a big way um like most of the time the app actually looks pretty good and most components um at least try to um adhere to the dark

18:02 · versus bright mode specs but yeah I'm not sure like most of the time just setting it to dark goes a long way what what are you doing well I remember the first time that I had an app that I've been working on for a while and then wanted to support dark mode and then half my app was invisible because all my text was black so I had to had to go

18:21 · through and make my text adaptive to where you know it can adjust its color based on the theme but beyond that I have been you know there's C like subtleties that you have to do you know where a color may be a slightly different color on the dark mode versus the light mode um you know you want to have like darker colors that aren't as bright you don't want to just blind the user when you go to dark mode as well as

18:45 · you know there's there's just other nuances but like you know elevation is different shadows appear differently but flutter for example does a really good job of providing that all for you and even now on the latest we have a theme mode option inside a material app so you can actually switch between light dark and system setting which is super cool where as before you used to have this weird logic to do it interesting I didn't know about that like one thing um which I had um been problems with just

19:15 · today was um buttons like do you know about a way to change the text color of a button button according to the color which it is on like I I more often than not I'm actually Fighting the theme data and trying to figure out in which slot to put it stuff and embarrassingly often I just end up hard coding or not hard coding but putting the color into the actual text because I just can't find out how to configure my app Theme

19:46 · accordingly um do you also have some issues or problems with the theming in the top level component well speaking of a solution for your problem there is a really cool helper method that the theme data uses under the hood which is called estimate color for brightness and you can pass in this option and it'll give you whether it's or is maybe estimate brightness for color and so then you can

20:11 · pass in a color and it'll check to see if it needs to be a ligh or dark brightness to show the text I think this is what they use under the hood in a lot of different places but interesting yeah that that for me has been pretty helpful um so some other things that I run into when designing for theming is the first thing that I did was you know shaping

20:33 · sometimes like things look fine like a card for example looks great on light theme and then Dark theme it just looks kind of awkward like like the shadow is a little bit better like with the latest stuff they've added it's so much better whereas before like it it was weird having the Dark Shadow and then it

20:50 · almost it just didn't look out of Play It just looked out really out of place so what I usually did was on the Dark theme I would create a card theme that would just have a border outline that was like a light gray and that usually looked a lot better for me personally interesting approach yeah yep um so another thing too is our devices and our

21:11 · screens are and specifically applications are getting used in places that we don't even realize speaking of which is you know we have passive modes now it's crazy that our application can exist in a voice only context where we're not even touching our device and

21:28 · um building experiences for that as well as well you you may think well I'm building a mobile application I never have to worry about that but what about when someone is disabled and they can't see your application you still have a mobile app and you still need to support accessibility um to allow them to be able to communicate with your app in a semantic tree style to say you know with a screen reader so what what are your thoughts on that so I haven't been doing

21:53 · digging too deep into the semantics and all that stuff but as far as I know for is actually doing a pretty good job out of the box um providing um most of the semantics tree like annotating text and doing all the layout things the lists um so as far as I know Flor out of the box does a pretty good job at um providing all of this and it should be pretty easy to enhance that like there are a few properties for example on the image

22:21 · think which uh I'm not sure what it's called but where you describe the content and if you just pass the string describing the image the screen reader can automatically um read out the the image and say what is on there um what

22:37 · have you been doing with accessibility yeah for me I I have a Tesla app that I built and one of the ways that I wanted to give an input for users that have a hard time seeing it is I built a chat bot so working with dialog flow I was able to take all the actions that I was doing on my car and put them in a conversation setting so then you could say you know set my car AC to 30° or you

23:02 · know turn unlock the doors you know and then also turn on sensor mode and unlock the frun or whatever and what's cool is it will take each of those commands and Trigger them in a way and feedback and you know talk back to the user uh which I think is really cool because even if you can't like press the buttons you can still just open up a the voice button

23:25 · and just be able to communicate with the car so um other than that yeah I think flutter does a really good job with the semantic tree and um just taking advantage of that like so a simple thing that you can do to optimize for that is if your widget is like really weird then wrap it with like a tool tip or some kind of um message label for that as

23:46 · well as whenever you're using a button or anything that takes the option tool tip or um I can't remember what the other option is but it allows you to you know Define what that is this would be like the equivalent like on the web when you have an ALT text for someone who can't see an image um which is really cool because you know your button instead of just being like oh this is my info button because they were using the info icon you can say exactly what that button's doing under the hood and as a

24:15 · bonus when you're on desktop if you hover over that button it'll tell you what that button does um on the hover effect yes I've seen that before yeah um and then finally you know there's also just uh so many wearables that we have now I know flutter doesn't uh support Apple watch or anything yet but I think it does support Android Wear am I correct on that I think my brother actually tried to compile for um theat

24:41 · which was supposed to be possible but I'm not sure whether he was successfully able to do so but in theory it should be possible but I haven't actually seen a FL app on the watch myself um but I'm still pretty sure it's possible so we'll have have to have to look at this in some future episodes definitely at least when it comes to Apple watch I'm super excited because it's just it's one of those things that you know you think you're have responsive design like try

25:10 · making it go down to a 2in size or smaller and it's like there's so many things you have to do differently and um I'm excited for when that becomes you know a whole lot more popular so we've been talking about you know this this adaptive way to build your UI but how does flutter work like under the hood so Flor um does a very good job at um

25:33 · abstracting all this away like you could have a widget which we talked about before about this adaptive thing which just works on all on watches on desktops or mobiles um but internally FL is actually doing a lot of work to abstract

25:50 · um things like State Management not having to keep mutable references to objects not having to deal with stuff like you have to do on um Android where you have to actually mutate views um in order to change them just providing this uh reactive interface for a programmer to program um objects in I actually did

26:12 · a talk couple of months ago on Flor Europe about uh render objects talk was uh called Flor War widgets elements and render objects um basically um showcasing exploring how the internal um framework works um what what render objects are what elements are and how all of those work

26:34 · together yeah so I would definitely love to hear more about that maybe we can have a full episode on that but um yeah so have you have you found that you needed to go down to the render object layer to build stuff or have you been mostly able to stay at the widget level

26:49 · cuz I know sometimes I have to go down to custom painter and do something on the canvas but um how often do you actually have to go down and do it if someone's starting with flutter do they even need to know how it works well most of the times you don't actually have to go down like for a beginner to intermediate or like even an expert

27:08 · wouldn't have to need uh the knowledge for render objects most of the times but sometimes I um still find myself going down there for example when um looking at weird behaviors like I remember I had this um thing um where I had a stack um

27:24 · and I painted things outside of the stack B sound um which was because I was doing some sort of weird scrolling and zooming um but the thing was those widgets which were drawn outside of the stack balance didn't receive pointer events and that was because in the render stack it had a check if the pointer was outside its own bounds um without that check it worked perfectly so because I knew render objects I was able to go in there basically what what I did is I copied over all of the stack

27:56 · class and call it my stack and removed that if check um and I had a stack which received pointer outside and yes sometimes you you just uh have to go down there and and for for very custom or very weird behaviors it's super interesting but also just understanding that there's more than just widgets um that there's render objects that you can do contacts. off find render objects and

28:22 · most of the time cast it to a render box and using that render box you can access the size and position which is super helpful if you for example want to do um um in a call back show some sort of information um which is sitting on top

28:38 · of a widget using the context and the render object you can actually locate that widget on the screen and display information accordingly there's so much I mean we could talk about this for multiple episodes going into a different direction how is this podcast actually hosted so that's a funny story uh when we first started started with this we were thinking you know we wanted to do this podcast give it out to the community but we wanted to see if we could build it in a way that um first of all it's cheap because we're first starting out but also uh in a way that

29:10 · is really engaging so right after we released the first episode I created a podcast player in flutter to host our own podcast which is pretty crazy so basically yeah basically the whole concept is we're using a GitHub repo which then um host our podcast which is a compile flutter application to GitHub Pages which is free and we have an RSS feed which is inside of there as well as

29:37 · each of the episodes are small enough um since they're you know rendered MP3 can be stored inside of the web folder and then when you're doing this and you compile it out you can actually static link to each page and each podcast episode and it works great our episode

29:52 · is now on you know iTunes Google Play and Spotify and we're not paying anything we you can always pay for custom domain later but if you want to we'll have the links in the show notes but you can actually open up the podcast player and listen to each of our episodes this is actually running on flutter web using the latest audio players plugin to be able to allow you to play audio on the web which is super cool and you know just implements a bunch of um you know RSS parsing and

30:16 · stuff like that which we are actually open sourcing so if it's not out by the time that you see this episode it will be in the future but we will open source the podcast player so that you guys can build your own podcast or just see how audio and flutter web works together yes and we're also probably um work on improving the podcast player and eventually have a full-blown thing which um is super cool to see and it's all for our web like it's all FL this podcast app could also work on mobile on desktop

30:48 · and in this case on the web yeah I so speaking of this I I have actually been doing flutter and audio for quite a while now I built this flutter midi plugin a while back and I think I think flutter is really cool for you know having this

31:05 · interaction model where you can build this awesome UI but have the audio extracted out I don't know when I first started with flutter the first thought was like how cool would it be if you could build like a VST in flutter or build like an audio Daw in flutter because um are you familiar with those at all I haven't heard both those terms before so basically what a Daw is is a digital Workstation and uh VST is just an instrument that um runs um in a

31:31 · desktop form it's usually built on top of um C++ or something else and it's just a synthesizer basically but what's cool about that is they a lot of those have really bad UI and they're usually really old what's cool about flutter is we can write our UI in a way that doesn't depend on whatever platform it's running on and have the audio context be the backing for that plug-in um for example you can actually use flutter and

31:57 · audio with rust and there's a really cool package out there for rust it's like the best one and you can just call into it with ffi you can play any kind of sound object you can control the length and it's really neat there's the audio players package and you know of course it's you know evolving and growing all the time but I I've just been really fascinated with how powerful flutter is when it comes to you know not

32:23 · because the framework and the UI is not the same and because you don't have to be on iOS and have to map to iOS widgets because it's that case you could build UI that runs on Raspberry Pi for example and I think that's really cool because you can just focus on building the UI first and then add in the functionality as you need depending on where it's running yes wow that sounds super interesting and Powerful yeah are you planning to work

32:51 · on something like this in the future I'm working on flushing out this midi plugin for flutter I want to have it as a full scale um you know in terms of feature par with other midi plugins for example like right now I use it for the the flutter piano that I created but uh when it comes to MIDI and flutter there's so many things that you have to do like not only do you parse the midi or play individual notes you then also have to

33:18 · control like the sound of the synthesizer which synthesizer it's using all the different channels you can have a polyphonic synth a regular synth um as well as sometimes you just want to sample and it's like it's a NeverEnding project but one thing I'm looking into is building the core part of it and rust because there's a lot of really cool midi and audio plugins compile that down to um I guess it would be WM for web and

33:44 · then we would probably just use a regular uh shared Dynamic library for ffi and then my plugin would just wrap around that what's interesting is um it's not really you know in the the dart land it's all in the Audio I mean it's all in the native land but what's what's

34:04 · neat is especially with dart you can actually generate ffi bindings and do all this different layer to where the user may not even know or care where the library is written um but for me it allows me to only have to write the plugin once and rust and of course I've

34:20 · been also having to learn rust as part of this process so I've been going through the Rust book and that's been uh kind of crazy because it's such a low-level language and you know having to learn about what pointers are and how it all works together and it's pretty insane but I got to say like the book for rust is one of the best books that I've seen for documentation it is really really good um have you ever looked at it yes I've actually looked at rust a

34:49 · couple of months ago and read the book the first chapters and yeah it was a super super fun experience I I remember like like yeah like rust is such an interesting language it it combines this lowlevel um thing with a very uh Dynamic

35:06 · and high level language like you have all these things that um a modern a new language uh would have but you also have those pointers and all that stuff but yeah it's also super like the concept is quite different with borrow pointers and the compilers just wrecking your program every time you do something but once program is running it is running yes yeah it's uh it takes a while to get the first thing to compile but once you're there it's like yay and uh but it's it's a cool approach

35:38 · to programming but it's also can be frustrating when you just want to get something up on the screen and it's not working yes it feels like uh back in the days when I first started programming and it just didn't compile was like oh my God what is happening and I'm like of course it doesn't compile the syntax isn't wrong uh the dynamic type or the the generic type isn't working but with Russ it's like what does that mean yeah

36:03 · let me go pop out my textbook yeah yes yeah it's it's insane have you um used ffi with flutter yet like have what's your experience with been with that yes I've used it and pretty great actually like um it took me a bit to figure out how to use rust and compile to the C ABI and do all those things

36:26 · that they don't mangle the file names and don't remove stuff but once I figured it out and it actually wasn't that hard it worked pretty well um what I'm still um struggling with when I use this and I still have to learn and look into is all those type conversions like just going from Dart types to rust types

36:45 · like just going from a string from dartland to rustland isn't that uh easy because well how is the string encoded how where's the pointer stored who's freeing it who's who's taking care of it it's like all those things you've never thought about in a language like Dart you now have to think about yeah especially like the first time I worked with C++ I was like wait you mean string is just not like a standard lib and it's just an array of characters you know

37:13 · like it's crazy and then you start to think about like think about all the times in your code which like for me I naively just concatenated a string instead of using a string Builder and if you're not careful under the hood you know that's just like a really bad use case for you know having to reallocate an array size which can in binary can be

37:34 · really bad because it's a you know oin operation but then if you use a string Builder it's a whole lot easier to then and memory efficient to be able to concatenate strings and that's why it's always recommended but yeah I think there was a dart summer of code project that was out for specifically targeting you know generating this um conversion so you can take a header in and it'll generate all the ffi bindings for um converting to Dart objects if I'm correct yeah yes I've seen it I'm looking forward to whoever's doing that

38:05 · so yeah if you're listening we have you have our support so yes yeah I I am pretty excited to see all the stuff happening with it cuz I mean when you do the performance comparisons between ffi and a platform Channel even the binary platform Channel it is incredible how fast it is just to call right into ffi to just call right into into the lib and I don't know I'm pretty excited about that and even I don't know if you've worked with this yet but like you can actually compile your R code for WM and you know since

38:35 · flutter web supports anything that can run on the web including HTML and JJs web assembly is officially supporting the browser you can just call right into that WM library and um I built an example which will link in the description but you can actually I built the counter application but the counting computation is actually done in Rust which is compiled into WM and it's incredibly fast so I'm excited to see what kind of stuff you can do there because you could build all kind of stuff you could build like a 3D program you could have a compiler you

39:05 · could do whatever you want because web assembly is uh pretty incredible possibilities are endless yeah absolutely so uh what do you working on at the moment um right now like last week in the episode I talked about how I wanted to get back into things online again blog post and all that stuff I don't want to have something concrete just yet but uh let's say like this I'm working on stuff and there's going to be stuff from me in the near future um what

39:31 · about you yeah for me I'm continuing to make progress on the flutter editor I have had such a hard time getting my sidecar for Tesla app released to iOS I have tried so many times Apple keeps rejecting it because my name they're trying to say is uh intellectural property so they're trying to say that I don't have the rights to make a Tesla app so that's been fun I've been trying to change the name and remove anything I possibly can so we'll see it's working great on Android though um but yeah I

40:02 · actually have been thinking about releasing it for Mac OS first and then seeing if they if they accept that and then if they reject on iOS be like well you you approved it on Mac OS so we'll see um yeah and then also you know just uh getting all this podcast stuff set up

40:20 · and as well as just working on a ton of other various projects um continue to make videos like you said and um yeah it's been really fun I enjoy doing this podcast cuz we are able to take these ideas and stuff that we talk about and go in depth in a way that we can't really do in other forms like it's it's hard to go in- depth on a render objects in a 10-minute video so yeah it's it's cool to be able to talk about things here um so if you want to find us our

40:48 · link to the podcast is down below we have links to iTunes Google Play and Spotify so make sure to follow us on all those make sure to give us a you and look forward to the next episode thank you thank you

Flutter Desktop/Web and VR

Wed, 25 Oct 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Flutter Desktop/Web and VR

Description

Looking into the future of Flutter development, our experiments with VR, our thoughts on Code Generation and passion about new tech.

Norbert Kozsir - @norbertkozsir

https://twitter.com/norbertkozsir

https://github.com/norbert515

Rody Davis - @rodydavis

https://twitter.com/rodydavis

https://github.com/rodydavis

https://youtube.com/rodydavis

https://rodydavis.com

Our podcast player:

https://rodydavis.github.io/creative_engineering/ Follow on Twitter:

https://twitter.com/CreativeEngShow

Transcript

0:00 · welcome to creative engineering this is our first podcast on all things creative and open source projects what we're working on and what we're excited about with me today I have my co-host sbert how about you tell us a little bit about yourself thanks Ro um my name is sbert um I'm studying computer science in Germany been doing FL for about 2 years now and always been interested in pushing the technology thinking about our ways to do it and just trying things out right now unfortunately um having a lot of work so I'll right now in a phase

0:33 · of trying to get back into making stuff happen and doing cool stuff how about you roie yeah so I have uh been working with f for quite a while now um before this I had a non-traditional background I was a musician worked as a audio engineer for a number of years system administrator and just one day decided I wanted to explore creative passion again and that led me to software development specifically development uh where I built my first app that got me my first

1:04 · job and it was um really challenging but at the same time I had this unrelenting passion for creating things because I realized that app development was just this blank canvas um and was super excited about it so what uh Got You Started With flutter um it's quite a fun

1:22 · story well it's not that fun to be honest but basic was a sheer accident like I was sitting in my computer one day and we just scrolling YouTube as you do and I saw this video I think was from the dark con um and they talked about something called Flor and never heard about it um I actually haven't watched the video but like the next day I came

1:45 · back and was like oh that sounded interesting let's let's just take a look uh I watched and was like super interested back at that point I was working or just as a hobby project on an app in Android um like I've been doing Android before Flor and basically the

2:03 · app was a book collection app like at that time I was reading a lot I thought how cool would it be if you could um some somehow gamify reading books collect those books and just have your virtual um bookshelf and so I thought to myself okay flourish sounds pretty interesting um could I try this out and

2:25 · see how it goes in Flor um so I downloaded the SDK um I installed it I never heard about Dart before um but was actually very easy to get into like Dart is very similar to Java in cotland which I've been doing before and I've literally coded the app from from first

2:45 · hearing about Flur to having a very basic MVP like it was very basic they had a search bar and you could Quarry an API um but I had to done in about one or two days and it felt great um and soon

3:00 · after I actually like back when I was doing Android I always thought about making a Blog and I was like what should I talk about so with Flor I decided okay I made this little La why not um make a Blog about it and that was my very first blog post and from there on it just more blog post most more stuff um yeah wow

3:22 · that's awesome yeah I feel like a lot of people um have a similar experience with flutter where Dart was not really the limiting factor and also I feel like a lot of people give Dart a bad name because they think of Dart one and it's by far not the same Dart um for me I had

3:38 · a pretty similar experience because I was doing a lot of c.net development um as well as I also did Android but before Android my experience was actually in Swift and um Objective C building iOS apps but then I came across uh this platform called flutter when I was doing looking for a crossplatform solution I had looked into I actually created examples in Native script zamarin react

4:04 · native and then this was just when flutter beta 2 launched and I was like sure I'll give it a try and then I was blown away with how stable quote unquote uh the Beta release was of this framework and how it was so much more mature than um a lot of these other Frameworks out there that had been out for so much longer and I love the fact that you could use this SDK and update

4:28 · to you know version and not have to break everything yes there are going to be things that didn't work but it was like you know changing usually a variable here and there and um I was just really happy with the developer experience side of flutter yes also you briefly mentioned Dart not being a limited factor um to be honest the more

4:49 · I work with dart and the more I look at our languages I feel like Dart right now to be honest for mobile development is one of of the best languages in my opinion because it combines so many powerful things like okay just in time completion ahead of time compilation which is like one of the big things but even small language features like always

5:13 · adding the the spread operator the there's so many other things which just make Dart a very expressive and a very fast to write in language like I rarely have times where I sit down have a problem I think okay Dart is actually holding me back in doing this which I had in Java like if I remember back just having to Define new classes to have a callback having all those things before the L lambdas came in uh I think it was Java 8 wasn't it yeah like d yeah yeah Dart feels like a

5:48 · good language and it somehow combines the power of having those untyped JavaScript things and just being fast but also having the the Java and the strongly typed things to make things productive and bug free and also um yeah

6:06 · you touched on the the hot reload that to me was just something I was so excited about you know like when I was working with Firebase on iOS I mean you know you're talking about like eight minute build time sometimes and it's like you know like oh I'm gonna go adjust something in my storyboard oh let me move it by half a pixel oh still wrong let me go compile again eight minutes you know and just this like weird infinite Loop that you get in um and for me I don't know if it was the same for you but I was always afraid of UI development before flutter I had done

6:38 · a lot of UI development but I just thought it was like a bad UI designer but what I realized is I didn't have a platform in which I was able to create um and express myself while experimenting and not being afraid to try something with flutter like I could prototype four or five different screen uis in the course of like 15 minutes that would take me me you know easily a couple days to do an iOS um they're just

7:03 · and also at least with storyboards and declarative UI you put so much into the UI that there's almost like this um you know this sunk cost fallacy where you feel like you've put so much work into it and you just don't want to break it you just want to make sure it stays working or or you do the inverse where you just find components and be like oh this is the stock components they look good so might as well use them I was guilty of that because it's just like well I can use the table view here I can use the navig component here I can use you know um

7:34 · these you know just all the default stuff and I felt like that really limited my UI because you know it was only ever as good as the OS was going to make it yes and also like just not being afraid of doing something on your own like an Android and stuff if you see a designer try out something new and just

7:53 · pushing the boundar is was like oh my God that's so hard like I have to read so much documentation and figure out how to operating systems handling this and flor's like okay so we could use a hero widget we could also look into how the hero widget works and just build something from there like you have all the expressivity like you can build so many custom things um without much of a hassle like like most of the things that are done are super easy to build the only

8:23 · thing I'm a bit afraid of in Flor are slivers because slivers are always super complex um and they're they're sometimes weird but even like they they also have a lot of components which you can just use out of the box and at the end you can make something work but other than that like all the things are just so easy to use if you want to make some custom painting or have some sort of graphic it's like super easy to do that with flutter well what's nice about flutter to is you can

8:53 · take you know an existing you know render box for example you could write your own layout strategy if you want wanted to um you could completely um you know follow CSS grid um just with pure You' have to implement all the the layout Behavior but you know flutter was the first framework that allows you to truly you know set your own behavior you

9:14 · can have it as abstract or as down to low level as you want you could go straight to the canvas and just paint everything custom or you could just rely on pre-built widgets like containers and all this other stuff and you can still get a really cool performant UI um yeah there's some things you got to watch out for um that you need to be careful of but overall I mean I feel like you just really can make expressive UI fast yes and I mean combining that with hot Tre like it sounds dumb but just having that hot reload makes it so much more fun and

9:46 · like you're more happy to develop with hot tro like I feel like that it's the most frustrating thing ever if you have a um bug which might not be that big of a bug but you have to try a few things out like maybe you have a wrong path and you have to see where it's a relative one or whatever and build times are high

10:05 · like it's so frustrating to change something little and then wait for literally 5 minutes until you can see okay it didn't work let's try something different and it just eats up so much time but also energy like you're not actually working but it feels like hard work compared to just making UI hot reloading and just going through that blazingly fast yeah and also you know

10:31 · you you have this hot reload cycle but it also keeps the state of the app so you can be you know 20 screens deep and you're just updating that change which is awesome um and speaking of hot reload being fast uh what your experience been like with working with floter on the desktop um as a prototyping tool yes so

10:51 · that's actually one thing if somebody ask for my secret tip and fur is if you have an app which doesn't use too many many plugins which are maybe not implemented desktop go give FL desktop a try and see how it may improve development like it has so many benefits like for example if you have an application which doesn't use any plugins so everything works for a desktop first off resources like my

11:17 · Hardware isn't the best 8 GB of RAM isn't that fun to use intell J with an Android emulator um so instead of using a real device just booting up Flor deskt top uh running it in there is such an improvement also like just being able to resize the window and see different configurations is so great um how's your

11:41 · experiences yeah I I have the same um you know I love being able to prototype UI I find layout bugs in just a matter of seconds on desktop where that takes me you know months to figure out oh I built my app but let me test it on the iPhone 5 oh everything's broken so it's like you know it's like uh with desktop um I don't know if a lot of people know this but you know you can you can test web UI on desktop because you can test

12:09 · all your responsiveness and it'll be the same UI when you launch it on the web so um I don't think web supports hot reload at the time of the recording this episode but um yeah it's been super nice to be able to do that and also you'll be surprised at how many plugins do work I mean Firebase authentication Cloud functions and a bunch of other Google signning even I believe just recently got support so all these things you can actually do on the desktop already um and yeah and it's not too bad to do API calls anyway so it it works on Mac most

12:41 · like I think all those cool things that work work on Mac so um which doesn't help me too much to be honest for me it helps yeah it's true like the biggest thing right now with our desktop is that it doesn't support Firebase like that's pretty annoying because I had and have a few projects with Firebase which I'd love to use for a desktop to develop and prototype with but I just can't because most of the app relies on on Firebase and I mean I could

13:11 · Implement some sort of mock of Firebase on desktop but that wouldn't like that would be too much work for um yeah that yeah yeah I mean there are some there's a cool package out there which we can always link to in the description which is called fire Dart which is a dart native uh compatible implementation of Firebase it's all in pure Dart and it basically wraps the grpc kind of SDK um what's nice about this is like I

13:39 · have built a couple admin utilities so I can like create Crown jobs that like update fir store documents things that aren't necessarily a good fit for functions but are great fit for like you know these onetime content updating um operations so what's neat about that is that actually already does work on desktop and doesn't depend on anything else you just have to pass in you know the the uh you know the the secrets to make it work yep um so what um you know one of

14:11 · one part of this podcast is we we love to explore all kind of things that are you know flutter is one thing that we are both incredibly excited about but we also are really involved in a lot of other projects and excited about General Technologies and um other projects and apis that we're familiar with so um what are some experimental projects that you're working on that uh have gotten you excited over the you know past couple months yes so as of right now I'm

14:42 · prepacked with work so my free time for experimental projects have has sunk quite a lot which I hope uh will come back soon um but what I'm always very interested in like one thing that stands out to me and I think um I I'm not the only one who likes um building de developer tools like we as developers use stuff and see what's what's slow

15:08 · what what could be better and just building stuff which makes your own workflow better is so fun and I was always thinking about um how could you make for instance in this case FL development faster and um yeah just just

15:25 · fast like I was always thought like if you have an app idea and you know what it's going to be like you know you you will have to log in you have account settings all that stuff why does it still take you a couple of weeks or even months to build that app why can't you just sit down um maybe take some designs which you bought maybe you have a designer and just finish the app in a weekend um so one big project which I've been working a lot on last year mostly

15:54 · um is the widget maker which gun has gone through so many iterations and things um project as of right now is on hold for just a bit um working on something else um which is pretty similar but um yeah just just making um

16:14 · developer tools is very interesting right now how about you roie so real quick what what is the widget maker for those that are curious oh that's that's a very good point I didn't mention that um so the widget maker the original idea was um a lot of languages have or a lot of UI Frameworks have those uh dragon drop Builders which basically allows you to drag uh in your elements composite them and then have a finished running app um the in the difference about the

16:46 · widget maker and the original concept is um those R um UI bus rely on a very static representation of UI think of XML in Android or HTM L and CSS on web but Flur is different thur has this code which is very in a sense organic is very chaotic and it can be very very hard to

17:12 · put into a structural form like yeah in in some language like HTML you have like one or two or three ways to do something in Dart and Flur you have infinite ways like you don't have to return a widget you can return a function invocation which returns a widget which is totally the same yeah but it's still different

17:34 · and people might be doing that because they have some sort of clever ideas how to abstract something away and the problem is you don't want to limit people in their creativeness like okay you cannot do this because you're using this but um it's also very hard to work

17:51 · with such code and that's one thing I've always been trying to work around with um but yeah that's the widget maker nutshell wow that's awesome yeah I have I know I remember first seeing it on Twitter and then being able to use it and I thought it was just so cool to be able to like prototype a screen or even just a widget um because for me I have

18:16 · this dream that I I hopefully will realize someday is um you know be able to build a flutter project on my iPad you know be able to Proto prototype it and do everything because I feel like when you're in the prototyping phase the design phase that should you don't need a compiler for that you don't need that yet uh but once you get to that point you want to have a you know robust ready too project so I don't know I'm still exploring it with um my flutter editor that I've been building but you know it's um it's it's a cool concept because

18:50 · flutter I love that it doesn't limit you in that way like you it's not like on Android where you just have XML like you said or you know you can you can really it's a declarative way but it's also it's whatever you decide is the best way to generate now that means that there's some best practices like for example if you're using a function to return a widget sometimes it's not always recommended but um one of the member in

19:17 · the community named Remy he's made a awesome package called functional widget which you can actually annotate those functions and it generates the actual implementation under the hood um speaking of which that brings me to one of my kind of um things that I'm exploring pretty heavily is um code generation and flutter because uh flutter has been the first tool that I've really used to do code generation hardcore and the fact that you can just like you know with a couple lines of code generate you know thousands of lines of everything you possibly need um

19:50 · is super cool um one thing one use case for this that people are unaware is like you can very easily take a data class and and and dart for example annotate a couple fields and then have Json serialization um just out of the box you can uh there's a package called more m o r um which is super cool where you can

20:12 · annotate tables and uh generate a whole SQL light database just with code generation and not have to write SQL statements themselves so um there's a lot of places in which you know flutter and dart in general allows you to to

20:28 · write code that writes more code and and I think that's pretty cool um some experimental projects I'm working on are um I've been exploring rust uh with flutter uh I think rust is an awesome language been going through the Rust book and I think it's incredible just uh

20:46 · how well it you know the first of all how well the book reads but how cool it is to be able to write like an audio library and then have it compile to wherever you need um so I've been exploring creating like WM R Wy wrappers really um using wer and then calling into that with ffi ffi is a really cool

21:06 · technology in Dart which allows you to call into any existing C and C++ code or library and yeah I think I think it's awesome have you have you worked with ffi yet yes I actually have I've also explored using rust on um FL especially for the desktop um one thing that's super interesting about this fi rust

21:26 · thing is that those libraries you build if you use uh a library which is implemented on all operating systems or just has some functionality which works every there it can work on every platform like you can compile to all desktop platforms but also mobile so as you said you can have a an audio plugin

21:46 · which just works in all platforms and you don't have to implement the other side like the native side multiple times you can just have one implementation have one repper for that and just have it work on all platforms which is super powerful the biggest thing I've seen with that though is um a lot of the ones that work on all the desktop platforms usually don't work on web and the ones that work on web don't usually work on desktop at least for the audio stuff has that been the same for you haven't been exploring web with uh ffi too much to be honest I mean uh rust and web okay so I

22:17 · haven't uh done anything with Rus and web yet um can you sh a bit about your experiences because that's still very new to me the whole um web assembly and rust on the web so the cool thing about web assembly if people aren't aware it's a it's a nice binary interchange format that allows you to easily load these modules um and run and execute code in

22:40 · the browser not in JavaScript but directly in the binary format so um one cool thing about that is Russ can compile to web assembly as a Target um on on mobile and desktop you can use ffi ffi doesn't exist on flutter web so to

22:57 · get around that you can actually use the web assembly Hooks and flutter um which are part of the built-in Dom um you know just part of the regular HTML Library you can call into web assembly and it'll call a code I have some examples on GitHub that that kind of dive into this but it's really cool because you can use the same rust code um if it's a generic

23:19 · enough code like a you know like kind of um like a math library or something like that the cool part is Russ will compile to all the targets pretty easily um if you're dealing with things that deal with like file AO and stuff like that then it's only going to support a limited number of targets but what's cool about that is um you know you can like for the counter example in flutter I was able to write the counter logic in Rust compile that

23:47 · to web assembly and then use wer to run web assembly in flutter on all the platforms so since W wzy if you're unaware is the wrapper around web assembly that allows you to run web assembly on desktop mobile and web on

24:04 · web you don't have to have it wrapped since you can just call directly into it um but that's really cool I think that's a an exciting feature for um sharable code because what's neat about that is like think about like all the packages we create and what if we wanted to create a native plugin and instead of doing it in Dart or if Dart supports web assembly we could write the the native code have it compiled to web assembly and then the plugin would just be the wrapper around that web assembly module so instead of having to write you know

24:34 · C++ and Linux or sorry C++ and Swift and Objective C and C or we could also just write a plug-in that calls the ffi handles and stuff like that so I think that's a a nice interesting wave of the future of plug-in development too yes definitely one thing I also wanted to talk about quickly you mention a few things uh before we switch to the native topic um

25:03 · first of code generation like one thing that I'm always um curious um what people think is so for me code generation is this weird thing it's super powerful and it can do so many amazing things but I don't really like having to generate code to write valid code like for example um Jason parsing

25:25 · like I first have to write code which doesn't compile on its own because it depends on part files and some things that's are going to be generated later and you have to actively run the generator or start the Watcher which does it all for yourself um and you have the state where

25:42 · the code is broken until you run this command and it somehow adds more mental complexity for me like you have this things you you cannot touch and I I don't like it too much what is your opinion so so I've taken a different

25:59 · approach which is like I've been a super huge fan of freezed um because I like anything that's I'm generating with code is almost always an immutable data structure something that's not going to be modified or changed um in fact it won't be changing at runtime and it'll always be whatever I release it with um

26:20 · so from that standpoint yeah it it is kind of weird sometimes when you're like in this Loop of like make you a change and then you run the generator and see what broke because it may update a lot of different things that don't exist anymore I had that big problem with more for example like I'd update a SQL statement or you know whatever and then all of a sudden you know three different screens have to return a different object so that was kind of interesting

26:47 · um to deal with but I would say for the most part the benefits of outweigh the cons for me yeah like I still hope like I love coach generation and um it's great because it just adds this new layer of metup programming which exponentially increases the power you have um but yeah I as somehow hope there's going to be some sort of solution which is more which feels more natural and is easier to to use like I I

27:18 · haven't used code generation just recently but I remember using those Json sterilizers and each time I wanted to use them I had to go for a tutorial because I realiz okay now I have to add this serializer and I have to import this part file andg files and was always a bit complex and I I really hope it's

27:40 · going to be uh easier at some point well I do know that there there is some work being done on flutter like there is a flutter generate command which does kind of it takes that abstraction instead of generating the code you know right along with part files it generates the code inside the build folder so as a build Target so I don't know if that would be helpful because I mean it is helpful but

28:05 · I don't know if that's maybe would be easier for you because then it's more of a you have everything you need because you're declaring it um and then it basically generates it the implementation like you're working with an abstract class and it generates the hardcoded class if that makes sense that's interesting yeah because yeah also as you mentioned like where the generative files are like it's always super not confus using um but it's like

28:29 · all those fils which you don't want to look into and don't want to touch um and you're thinking should I commit this to repository should I have other people generate them themselves and it's always like this a bit of a hassle you know the uh the latest recommendation on the flutter team and the dart laying is that you do check in generated files now when I first started with flutter it was not the case but um they have since changed it to where it is recommended which is

28:54 · kind of cool so like you know if you're working collaborating on Project like uh have a project called amp store we you know I'll out of you know Simplicity I will go ahead and generate all the files and then if someone needs a change then I can update it but yeah for the most part uh only usually one or two people are generating the new files because in theory you're wanting to generate as little as possible um like you don't you

29:22 · don't want to just be like you know generate application and then all of your application is gener because it's like uh while they would be great and we wouldn't have jobs that would be uh you know it's it's you know you want to there's this flexibility that you or um this dance that you have to make you know where you know you have this tradeoff of generating code to save you time and generating and writing code to

29:48 · be flexible and there's this balance that you have to strike and it just really depends on the project for sure yes definitely so um another thing that we both have really gotten excited about is using the Oculus Quest and at flutter interact we were both able to try this I

30:06 · was able to bring my headset to flutter interact and I just was curious about what was your thoughts about you know trying VR for the first time and what's got you excited about you know just the general scope of VR in general um actually that was my first time trying VR like before that I used to um go to a

30:26 · So-Cal VR space my city a couple of times um they have those HDC vies um basically for stations you pay for 30 minutes and you can have up to four players and play some games um but the thing that was so that stood out so much to me when you brought a VR headset is how accurate that was compared to the HTC which HTC is perfect and the ocus is

30:51 · also perfect but at a significantly lower price point and without cables and setup like I remember we were at the Airbnb we had a couple of hours left and we just took the Oculus Quest I I drew

31:08 · the whole Airbnb on the ground and was able to navigate through that without colliding with any objects and just feeling confident because it didn't lag it didn't have some sort of weird artifacts it just worked and at that point I got so excited because just being free like instead instead of being bound to a computer with cables and stuff you can have this headset take it on wherever you are and have all those

31:35 · um very interesting immersive experiences yeah um I feel like for me it was I tried it in a Best Buy it was the first time I ever tried VR and it was an Oculus Quest yeah I believe the time and I just remember taking off the demo and being like I cannot leave the store without this because it was just like it had completely changed my mind I had used Google Daydream I had been using Google cardboard since it came out I had been using pretty much any um access

32:06 · besides using like the rift and you know Oculus uh Oculus Rift and ht5 yeah I um you know I was just I was so fascinated with mobile VR but then the Oculus Quest was the perfect balance I was looking for which was the flexibility of desktop

32:22 · VR with the mob ability of you know mobile VR and the fact for me was the hand controllers you know being able to like just reach out and I remember playing the SP P space pirates demo and just being like looking at my hand which had a gun in it and being like how is it so detailed I could just look around and I was like it looks like it's right there and your brain is like freaking out and be like and then also there's

32:47 · this app called you know the plank experience and you could just walk out and I just everything in your mind is like trying to convince you that this thing is reality and it's uh it's incredible the technology and how far it's come I haven't actually tried that one yet like the pl experience a lot of people told me about it um I'll definitely have to try it at some point I remember when I very first tried VR I think it was actually on Gamescom like

33:13 · quite a couple of years ago when the how was the first headset called uh which was by Facebook uh oh go I think you talking about the same I think it was it was one of the very first ones I think it was

33:29 · was their main one I'm not quite sure how it was called what but basically it was a sitting experience like uh being at Gamescom just waiting all day to get in and I remember playing this game where you were were in this uh space suit or whatever and you could jump around onto high buildings and jump down and jumping down from that building actually felt like falling even though I was sitting have you got the update for hand tracking yet um yes um I do like I I think there were

34:02 · a few R features um I'm not sure if I have the big new update I think that also has a few UI changes but I definitely feel like the hand tracking got way better and yeah talking about hand trkking like that's the next step like those controllers are pretty cool like but it's still like you have to use the controllers you have to get into into those straps um you have to have your hands it depends on game but just having your fingers and having all this control that's I mean it opens so many

34:34 · more possibilities uh what have you tried with hand tring like what is your experience so my favorite uh latest Point update was the fact that it can automatically switch between hands and controllers based on interaction which is so awesome like so for example like a normal day in VR I may pop on my headset

34:52 · open big screen maybe watch a movie and it's just that's an interaction where I just need my hands but then like I want to pop out beats saber that wouldn't be kind of awkward with hands but it works great with the controllers and then I go over to Robo recall and I bring out the controllers but then I want to go back to like um you know YouTube for example or Netflix and it's like hand controllers or just using your hands is nice yeah but do those apps work with fans like when uh I tried uh the hand

35:18 · tring a couple of times and most apps didn't support hand tring even though they didn't actually need controllers that much do it doesn't nflix and all those apps support hand treking the only one I've used so far that supports it really well is the Oculus TV app so yeah um yeah because a lot of the developers need to update their apps to support this new feature um but in what I suspect is maybe we'll see a um I think

35:46 · we're going to see a compatibility mode that can be turned on in settings allows you to use hand tracking in any app so we'll see So speaking of VR how do you feel about developing for VR because I feel like once I started using it I got really excited about VR but

36:05 · there was just something in me I was like I have to create something on this platform because it was just like app development's really fun desktop's really fun but like there's something about being immersed in a 360 environment putting anything where you want and just I don't know like what's your thoughts on that because I I just think that's like the next wave of application yes like actually the main reason why I

36:31 · bought that Oculus class like I tried out with you I think I literally bought the quest like a few hours after um yeah it was yeah was basically what you can create with it like I I know VR I used VR before um I know the feeling it's great and having buying something like this for that price I think was like 300 bucks which compared to the other uh the

36:57 · r VR headsets is like super cheap because for those you need the headset you need all the equipment and you need a good gaming PC but with the quest like just being able to um move around free like I thought about so many ideas you could Implement like just think about it you're not bound to a PC so you can even

37:17 · though it would look very awkward you could take on and use the headset anywhere like I thought about how cool would it be if you'd be in a car obviously not driving yourself but sitting in there as a passenger getting that headset on having some sort of location data and maybe acceleration data and just replacing the stuff you

37:39 · see outside with VR stuff maybe you're in a race maybe you're just looking at beautiful landscapes yeah exactly yeah just just having the ability to move around freely and just not being restricted was like mindblowing to me for you yeah for me um

37:58 · I have been experimenting with um you know uh there's this technology called Web XR um which has come out web VR has been out for a little bit now and web VR is the ability to do virtual y experiences on the web um web XR is that

38:15 · um with a proper implementation and a proper web standard the difference is web XR can also Target augmented reality experiences so I've been creating a bunch of demos recently and particularly I love this framework called A-frame which is built on top of 3js it allows you to declaratively build these scenes

38:34 · um with HTML which is super cool or at least web components um and what I like about that is uh there's even a project called react 360 which is cool too where you can build you know websites in UI and you know VR kind of formats but I think it's so cool because you know when you're when you're developing in this you know experience you don't have to be Bound by just like a A 4x3 or 16x9 aspect ratio box you

39:02 · know you can have all your important content in front of you you can have look around for you know other details you could literally build you know like a mission control room and have everything you need and what's cool about the the quest is you can literally walk over to anywhere you want and have

39:22 · everything change like you know versus and interactive too versus you know in a 360 video it's all just passive and in a mobile application it's all about what's just on the screen at the same time but like it really and especially interactive movies and stuff like that allows you to like let the user choose what they want to do and you know how they want to see it yes also just just mixing that with

39:48 · the topic we had before FL like um Chris Sals actually had um a very interesting uh device build which you called the FL octopus um basically it's like this thing which consists of eight arms um with each of those arms being connected to some sort of mobile device or desktop

40:11 · and just hot reloading and developing Flur on all devices at the same time and like with the Oculus Quest you could take this FLIR octopus to the next level instead of just having eight devices you can develop with like you could literally have 1,000 devices like just imagine having a big big house a flat having a wall putting on the VR

40:34 · headset and having all sorts of device configurations on that wall just walking around and interacting with the app and seeing how it works well I'll tell you what if I'm uh developing with the flut octopus and um VR I'm going to be doing it like X-Men and have like a sphere development room yeah it's um it's pretty crazy how

40:57 · how you're not limited anymore by just like this 2D space it's like it's literally mobile development going 3D and it's um because you know you still have menus and all these other stuff but you just you adapt it for virtual reality so you don't have a lot of flat panels you have curved panels and you don't have so much your depth is

41:18 · literally depth so material design is really big on you know elevation so cool thing is that translates to VR because because you know a floating action button will actually be physically closer to you than it will be um and whatever and I think another cool thing you know octopus is one awesome thing to do in VR but another thing for mobile development and web design I think would be a cool way to explore it would be like what if you wanted to explore your

41:44 · view hierarchy or your list of dependencies and node graph or like just like visualizing a data table schema you know it's just like you see things from that perspective you cannot see in in other ways it's interesting yeah like a lot of errors and a lot of um time you spend as a software engineer is just um coming up with Solutions fixing stuff and just visualizing stuff is so important in the whole process and just having this as you said this this another layer which helps you put things

42:17 · into context and just iterate and move around like you could even combine this with some sort of collaboration like think about having some sort of room with a lot of devices um and you have your buddy with you who sits in her table in real life maybe on her side of the word and you're just both coding if he wants to ask you a question you just come over and look over his shoulder and

42:42 · just point out okay look at this line maybe change this and you could go to his virtual keyboard and mouse and and fix it for him and then walk around then point on the device on the screen and just uh compile the app for that device like the possibilities

43:02 · are quite literally endless yeah and I feel like in a time like this I mean at the time of this recording we're going through the Corona virus and so it's like having to do everything from home and having you you

43:17 · kind of really start to love the idea of virtual reality because I don't know about you but I I miss hanging out with people and it's like uh being able to you know connect with people in this virtual way not bound by anything like you know I don't have to fly to another country just to be able to collaborate with someone on a project yes you can do it over GitHub and poqu and screen sharing but what's cool about VR is you also have your avatar and it's just I

43:44 · don't know about you but it's just like having a conversation VR is so much different than a FaceTime call or whatever because you just you have this non-verbal communication too that just you don't get in other platforms yeah I mean that's a big thing like that's I think why still not all work workers remote because that physical in-person um connection sometimes can help like I

44:08 · mean remote works uh in a lot of cases but sometimes just having some way of actually working together um can make a difference the interesting thing I I thought about VR2 is right now with the Oculus quest in my opinion we're at a point technology wise where everything

44:28 · is is there what you need to build something like we have hand tracking you can send voice over over the internet you can move objects you can synchronize pixels like that's what it is devices you can send over keystrokes you can do whatever you want all you have to do right now is combine all those Technologies and build something new it kind of feels like the early days of the web like everything's possible it's all super experimental um but nothing from like from core

45:00 · technology is missing right now to build something cool yeah we're just limited by what we can create it's an interesting yeah it's it's no longer well we need more Hardware like the only thing that Hardware is helping with right now is machine learning yeah you know you want to have as crazi as powerful computer possible but all it does is just shave off time um until we

45:24 · get to like you know a full like Quantum Computing state where you can um really start to do these mathematical problems that can exist in multiple States I I just feel like right now we're in a new wave of just like we're only limited by the things that we can create and how fast we can create them um which is pretty exciting time to be a

45:49 · developer so uh this next section I want to have devoted to just any new packages that you have found in the last week or so um is there anything you'd like to share that you've come across that just you know super glad you found Yes actually it is not a package and it is not directly related FL um but I found this um GitHub project uh which is called screen copy like it's um Sr

46:19 · cpy um which basically allows to copy your phone screen onto your desktop um which is super cool if you have um less powerful Hardware like I do uh for desktop isn't working yet because I'm using Firebase and windows um and the cool thing is I'm using ADB over WiFi so what I can literally do is have my phone somewhere in the house compile to the phone and have the screen on my computer and just have an Android emulator which

46:50 · is not an emulator without the performance impact so does it remote debug too yes like every everything like you can hot reload you can have break points like it's literally um it's the same as if you have connected your phone with a cable um but it's over Wi-Fi and

47:07 · you have your screen on your computer and the cool thing too is you can interact with the phone like you can use your keyboard you can um you can even drop an AP case into the window and have it installed in the device like I I just came across it like a couple of hours ago and I was like that is cool um yeah

47:26 · so does it allow um like tapping on dragging around on the screen it all works it all works like you can use your you it's like I played around with it for about 10 minutes um but I'm definitely going to use this for those times where FL desktop isn't working or my computer um would burn down if I started another emulator um but yeah like we'll have the

47:51 · links to those in the description um so yeah absolutely check those out um but yeah how about you um for me the packages I've been most excited about recently is the new freeze package um and the new state Notifier and flutter State Notifier these all work together in a really cool way um it allows me to have this form of State Management which is a a One Direction data flow um but

48:17 · also allowing me to have take advantage of you know value Notifier um as well as you know just having this provider based um object model you know you can look up and down the widget tree to grab your model and to call your actions but the data is like you never have to worry about updating the data in the wrong place because everything's like get only and immutable um I think this is a

48:41 · really cool way because you you can run into a lot of issues like oh well I updated this data on this screen but I forgot to update it on this other screen but you know for example am store uh one of the package or applications I built in order to do undo redo uh you don't want to have to like you know call this um undo stack you know from everywhere

49:03 · you just have a single place where the data changes and you just you know you can listen to those events and just you know it's kind of more of a stream based U which I think RX is pretty similar too but um yeah it's it's really nice one-way data flow I mean I think Redux got it right for that that's pretty cool um sounds very interesting I'll have to definitely check that out too yep and then um what about any uh projects that you've been working on uh at least recently projects right now um yes but

49:35 · um very little time and I think I should be able to share more details in a future episode um but how how about you yeah I always have a you know a ton of projects but at least at the moment um flutter editor has been one I've been pushing a lot um yes you you talked about the briefly before do you want to uh give us a bit more info about that um

50:01 · so I first of all if you guys are curious you can always um subscribe to my YouTube channel I've been doing some live streams of me coding it um but so basically the whole concept of the flutter editor is I'm building a template generator for flutter that is a no code way to prototype and design flutter applications um you know without having

50:21 · to need the compiler the cool part is if you run it on desktop and you do have the compiler installed it can do a lot of other stuff for you um so it can actually do hot reload it can debug your application it can do all this other stuff but it's not meant to replace vs code it's more meant to replace the design side um what's cool that I got

50:41 · working uh last night is you can you know for example I you can create themes for your flutter application you can add custom colors you can use the Color Picker and do all that and it actually updates the theme file inside of your flutter application so you you can literally have this open next to vs code um update the theme file and then all of a sudden your app will be running and will show the new changes of the new theme colors um you can change the theme modes and all this kind of stuff you can do linear gradients radio gradients so

51:11 · um the goal is just to really empower the user to do all the stuff that are hard to do programmatically like it's really hard to go look up like the CSS color codes and all this different stuff it's a lot easier just to have a Color Picker and just be like use the eye drop tool and be like okay I want it like this color in the app but I want it slightly different shade or opacity um as well as you can edit existing files um it has a cool pwa manifest generator in there so you can like you know customize all your settings for you know

51:42 · Progressive web apps and then also one other tool that I built in there which I'm excited about is you can resize your icons so you can upload an icon image and it'll automatically update your project with the uh the new icons in the correct folder so Mac OS Windows Linux wherever um that one's pretty cool because it's sometimes a pain to have to go to update your icon every time um

52:06 · because you have to update it in so many different places and now including the web you know and the the favon and everything it's just there's there's so many things that you have to do and so easy to miss stuff yeah it sounds pretty cool like I'm super excited for uh future updates and your progress on that so um where should people will follow you if you if they want to see what cool things you're building so you could pretty much follow me on every platform as Ro Davis r o y dvis um that includes Twitter GitHub YouTube and um we'll have

52:38 · links to all this in the description below uh what about you um yeah mostly the same like Twitter GitHub um medium it's Norbert um k o Zs i r um Kier um awesome basically um again trying to get

52:55 · get more um back into posting online stuff and building cool things which I've unfortunately been missing out on a bit in the last couple of weeks and months but I'm super excited to um participate um more again yeah absolutely and um if you guys are curious we are both pretty um approachable so um if you have questions

53:19 · about the podcast or have things that you want us to talk about make sure to follow us on Twitter and give us a shout um by the time we're posting this we probably should have a Twitter Channel or something for this but um yeah we this is all about the community and what you guys are creating so we are excited about projects that we find and we love to bring up new stuff all the time so um thank you so much for listening if you have feedback um you can also email us um send to us on Twitter and then um and

53:51 · most importantly if you love this please give us a raid on iTunes and a Stitcher wherever you listen to podcast because that really helps this podcast grow thank you so much thank you

Flutter State Management and Dart Nullability feat. Simon Lightfoot

Tue, 28 Nov 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Flutter State Management and Dart Nullability feat. Simon Lightfoot

Description

Simon Lightfoot

https://twitter.com/devangelslondon

https://devangels.london/

Norbert Kozsir - @norbertkozsir

https://twitter.com/norbertkozsir

https://github.com/norbert515

Rody Davis - @rodydavis

https://twitter.com/rodydavis

https://github.com/rodydavis

https://youtube.com/rodydavis

https://rodydavis.com

Our podcast player:

https://rodydavis.github.io/creative_engineering/

Follow on Twitter:

https://twitter.com/CreativeEngShow

Transcript

0:00 · welcome to creative engineering we have another exciting episode today today we have Simon Lightfoot how are you doing Simon hey good thanks and we also have my co-host Norbert how you doing I'm doing great too so Simon how about you tell a little bit about yourself uh we're I know you've been using flutter for quite a bit now actually there's always the hardest bit of introducing me because i' I've just been around for for a long time yeah uh so I guess in general like you know I've been programming for like good good part of 20 years I think I've lost track and um

0:28 · and then 10 years PR Android development and then finally last few years I normally said two but I think it's three years now time flies but I've been doing flutter so we started flutter um Mid Alpha nice and uh yeah so going into the community and um from my perspective we needed it so so I'm also CTO Dev Angels uh Dev Angels London uh small small development agency doing apps and

0:57 · um we had a problem the fact that we had have Android expertise but not much iOS expertise in the company and uh flutter s we at uh was it Google developer agency day Europe what name but um and uh there was an introduction done

1:15 · um I forget his name I'm terrible in names but um there was an introduction done about flutter and I was like all through the slides it's talking about the JavaScript bridge and how it's different from the other ones and I'm like oh my God I heard about flut like six months previous and I completely disregarded it I was like this is going to be terrible it's another crossplatform piece of garbage you know like this is not what I want as an Android developer and then when he

1:37 · start explain what it does and how it works I'm like actually this is what I've wanted for years this is really what I want and um and I just immediately tried to out that same day and before I knew it we transition the company up to using flutter um I think literally within the quarter afterwards so very fast transition and all our apps since have been flutter apps wow that's awesome and I think you've been doing a lot of the web stuff as well uh what do you feel like has uh have you noticed a big improvement over the past year or so oh definitely so um I actually um I was uh

2:11 · invited to try out flutter web before it was released and give some feedback which I did um and back then it was very well it was separate project right it was a separate um Library it was completely separate from the framework and they've integrated that into the framework now performance is way better

2:32 · you know they they they've they've all those sort of edge cases they've kind of sort of wed down to to very few now however when I was I recently required to use it for an actual project of Dev angels and um in doing so I found there's some other things that weren't covered so I put some PRS back into the framework so dealing with things like um get rid of that annoy Annoying hash in the RL I it makes sense don't get me wrong however yeah I don't like it

3:00 · yeah I I'm kind of both ways on it like I feel like uh it's nice because most static websites you know single page applications use this but at the same time you know it's bad for linking I can I can give you exactly one problem that you can actually have okay Apple's I think I'm going to quot this might be a misquote but if I remember rightly I was implementing Apple signing recently and it strips off the location from the URL wow so you can't have the hash and the path in as part of the URL when you direct back after o 2

3:32 · great and that which is actually not part of the standard I don't believe but uh I might be muddling up there with that with another provider I'll be honest with you it's been a while but um it's just that kind of nature of those little things where the hash is meant to be a local thing not a remote things so if you do need to like deep link or link into your app you do need that kind of direct path manipulation rather than um

3:54 · uh what's it called location right so before like you know you can remove the hash from the framework I was actually getting around it by creating you know when you deploy a Firebase I would have a redirect so take the redirect and then redirect to another page so then externally I would have my redirect link that would then without a hash that would go then to the the page with a hash so about number nums of requests at that point and latency and other things so um so we have a little bit of followup actually uh Dart just announced

4:23 · null safety I know we've been all been waiting for that so what do you guys think about that um so I mean it's a pretty big deal they've been working on this for quite some time I think this is like the feature which pushes The Language by by quite a bit like um a lot

4:43 · of modern languages for example cotland I'm not sure Swift swift yeah they all have uh the sense of non-ability they noce null pointer exceptions aren't that fun and that Dar is also um implementing

5:02 · this is like a huge step in becoming a asset to flor like a lot of people were complaining okay Flor is cool but D but with this feature and wait wait for what's that why can't use C right yes some point people were like will be like okay cool we have Dart that's a great thing that's like the language you want to use I I I mean this one of the

5:27 · one of the conversation I had with earli adopters when we were doing a joy con London a few years ago was people were saying that why can't we use cotland I'm like well Google run the entire stack right essentially I run but you know what I mean like they they essentially own the entire stack meaning that they can make changes to the language that suits flutter and vice versa so we as we've seen we saw the um oh I can't remember his name manificent Bob whatever his name is he did the the language changes for the oh

5:57 · I forget what they're called collection Expressions I can't remember I think was that that's what where you can put your if statements and your for Loops inside of um AR declarations spread operators spread operators as well yeah and uh that is perfectly what we needed for flutter however it was language design change right these are the things that we get with with being able to have the entire stack right and again non-nil ability

6:21 · right like having this non-nil by default they can Implement that language and and really like do this overhaul because it is essentially a big over whole of the entire framework just to support that um actually I I I submitt a PR on date time um so when you're passing a this is a bit off topic but when you pass a date time back from I think it was aure back end it formats the date time with like 10 decimal places uh for the micr seconds and um uh

6:53 · Dart only accept six right and just because the prision from 80 bit to 64bit or something like that however the difference is it would fail passing the date time not just ignore the lower bit right which is kind of

7:08 · what you want you don't want it to fail pass and you have to trim the string and then reattach like the time zone and do other weird things just to get to pass the date time is ridiculous so w i put a PR in there and it got proved it got fixed but I had to the key here is I had to implement it in the non-n default as well as the normal uh tree there was two different trees active um I'm not sure if that's the case now or not but but yeah again like I tried out if anyone doesn't know there's um I think it's nulls safety. dpad dodev yes I

7:37 · think yeah I think it's just PARTA of the regular Dart pad now right because I think no there's a separ well I don't know I know they they advertising a separate okay I'm going to check it now just null safety. pad. cool cool and you can try all the null null safety changes but um I mean as I saying I think um we

7:59 · saying that that that flutter itself is not null safe by default at the moment like the flutter the framework isn't but dark and its core Sate is that's what the that's what the tech preview brings right so you still can't build your flutter apps as nonn by default at the moment that's going to come in this hopefully in the Sim future right but there's still migration work to be done like so I mean null has been used and

8:24 · and has been used in programming if I don't know how many years I've used null and had null pointer exceptions trust me you don't want to even think about null problems in in C and C++ code because then you're talking about especially you're talking about like triple D references and somewhere there's a null pointer somewhere you're having to deal with this is Nightmare um but uh yeah so

8:44 · so like in flutter like um raise button the Callback so you do on press if you pass null you'll disable the button right explicit use of null should be frowned upon it's not it's perfectly possible right so I think the first version of the flutter framework we probably see is where they just say that can be null right I think it's the exclamation mark or question mark you put after the type this optional yeah

9:09 · basically saying this can be null if you want which we'll probably see but then I feel like there's a there's a reason for us to then start porting our code to these things like rather than having give you use I can think of you when you log into an app right you have might have in your app code where you're logged in and you say oh if I have a user object object in my user stream or something then I'm logged in if I have null I'm not logged in right the the

9:35 · point here is we want to frown away from doing that and instead have a constant value of like user do none so have a static constant inside the your user model called none which is a blank implementation of user which has blank strings for names and so on you can then do a direct comparison because it's a static con and say is this object identical to this other object it is so it's not logged in right now so there's never a case you see null on that stream

9:59 · mhm and that's kind of the thing that we need to think about when doing n null at default and trying to you can always start moving towards that but that's just a good program practice you can already do that right now right that doesn't involve the new operators new operators have brought about null management allowing you to use null when you want to but to be honest if you can avoid using all together why not and so does this remove the need for using asserts or reduces the amount that we

10:23 · would use them because I feel like the flutter uses that almost always just to check so this is actually this is kind of my Curious point because parameters right when you you don't speci parameters default to n therefore allain parameters are what default to null i' I've not had enough um yeah playing around with with the the the null safety stuff to really look into that in high detail like for me personally when it gets released and when I have to deal with it I'll do with it then I know I

10:50 · just don't have the time to really look that far down the rabbit hole right now cuz like do you need to use required at that point oh they have the the new isn't there there's a new operator late which solves some issues I mean uh for specifically for constru a Constructor oper like do you need a required because like if you if it's non-n knowable yeah but the required is just an annotation right yeah but it we were using it right now to make sure that it's like you were signifying that it has well no it's just done um at compile time right but at run

11:18 · time you can still pass null that's why you have the asserts right yeah you're right you're right so so The annotation is just there for as a compiler U flag right as a as a hint to comp to say that this should never be null right but there's times that's that can done be done um analyzed during static analysis right not at uh Dynamic runtime but I

11:40 · think with required you can still explicitly pass a null and one complaint right yeah yeah you're right yeah so that's where the assert catch can you or can of it's just when you have a variable that's null I think I think required only make sure that you actually pass they specify the parameter you have to yeah that's it sorry so required says you have have to specify the named parameter but it can be null

12:03 · still right but again like these are the things that you know that the framework team are going to the f team itself are going to have to deal with and say these are the rules that we're now going to run it by but to be honest asserts aren't in runtime they're only debug so

12:18 · you know oh yeah right it's not going to have any performance impact it shouldn't do so yeah I was curious actually the stats on the the blog post that was pushed out recently was like 19% uh performance performance increase not speed increase performance increase so that performance can obviously I'm not not trying to subm words here but but performance means generally like lots of things like memory speed CPU usage you

12:45 · know frame rates all sorts of other things right it's not just specifically how fast your code is run by the CPU right but in truthfulness like if you don't have to check null or or if there's no sort of put it this way in in in you end up doing preconditions all the time in in C++ code but you're just saying oh it can't be null it can't be null essentially the same as the way we're using asserts right now where you

13:07 · you you you're basically telling it throw an exception if it's null that's basically what the um compiler is inserting for us so that if it does find null at some point sorry you do try de reference a null it will throw an exception um and that's it's all handled during the processing of the of the D code itself well the compile D code so also yeah I mean when I first came from uh Swift actually I I was very much used to the null safety and optional chaining and all that kind of stuff got into cotlin and then I came to Dart so I've

13:37 · still been using question mark optional chaining for all the stuff except for I just have to explicitly make sure I know which ones I expect to be n which ones that do we I mean do we want to talk about some of the other D features right here CU I mean I mean there is there is that kind of like there is some of those nice things like like having almost a data class where you just have your fields and then you can do a Constructor with this Dot this not this and just have all your you justed here my parameters with this and

14:04 · they're public final you know you've got like your static immutable data class very nice however as soon as you want to say I want this to be private now you can't do that so right right so now you end up doing that weird thing where you have a f in your in your uh finalizer

14:20 · after the colon of your Constructor you end up doing the private equals the parameter passed in you have to pull the types and the parameters again like these are little things that feel like these adjusted it would make it that bit nicer to program with but not critical right yeah you're right um but one of the things I'm going to say this now because you got me in this it just reminding me um fact so you can't reference Constructors right yeah ex you cannot

14:44 · like there's no way of saying I want to pass a Constructor as a method which I really feel like like you end up having to do a a a static method right that then calls the structure or something pass it in it ends up just you end up bulking out a coder so a good example of this is what I do all the time especially for my service level as get we'll get to architecture but um a a

15:08 · static init method right so I have a p i have a private Constructor and a static uh AIT method that returns a future of that class right so the idea here is that I can now initialize stuff asynchronously and then return my instance right I have to use the static

15:26 · method because you cannot have an asynchronous Constructor in right like it's just not a thing even you think that that's a factory method right I mean essentially there's a difference though between a static method and a factory method a factory method is treated as a Constructor but it's a method of code right and it's run before the Constructor so you can get away with doing logic in there right and still have final um final class members right

15:51 · but then your uh static method is is treated as a method not as a Constructor so so the two things don't align and you kind of it' be nice to see uh asynchronous Factory methods right so that you can have asynchronous construction then really be helpful to I think to a lot of the way that we do stuff in dark right imagine that you can do a uh construct things in a chain and then return some sort of logic on them and do that all in like a future stream right sort of a pipeline yeah I like the way

16:21 · Cartland does data classes specifically you can just type Data before and it does uh you know does your equal operators your hash code your you know um your private Getters and all that kind of stuff and I think it's awesome you can do it now with dart but you have to use code generation or well these are some I think the there's a language Bard right on the D SDK which sort of goes through something things but there are following up on that one as well as um s

16:43 · classes Sil unions all those kind of good things type A lising which I can't wait for to be honest because there's several times I use type A Ling I'm just like why don't have this oh versus type def what what what do you mean by type well no so so type Def and

17:00 · there's a good example of this um I'm not I'm I'm goingon to mince his last name Luke petti is that his name I can't remember he's how he pronounced his last name he did this on his Twitter feed recently and it was um having a mixing so you can

17:16 · like Define a new class with different mixins and you're defining you can essentially Define an aliis with his different traits right but then you try and do that with just with a normal class you use the equals operator in between it doesn't work right there's just some inconsistencies in the way it works right and typ lising do does that thing where you can say I give an example of this actually had this recently uh well one of the things we're missing right which I really like this is terrible what I like from java um was uh that that enum class enum

17:48 · was a class right it was a it's a base type it's also a class I mean I could add private member variables to an En them right so I have things very common case for me in terms of of rment is that you have a set of defined States or things that you return to and from a server for instance now during the serialization Der serialization process you're treating that as a as a string right but then you want to

18:13 · when you receive that string put back into your typed object so you can look at the type look at other other related variables to that type so they might be your private for example you might get back a state that says pending right lowercase simple string right but then you want to say the user currently waiting for Server feedback right so you want to put that string or or a reference to your localizations for that string in with that IM in that enum so

18:39 · they're tightly coupled so that when you display it to the user and you get back that enum you can detect oh we're in the pending State and then I want to display string display the one from the enum or look up the localization from from the one that the enum's given me so I'm kind of tightly coupling these things together this is essentially like a union right uh s classes as well can be used for that so speaking of cotland data classes I I think it'd be cool to see something in Dart where you know we we have kind of this more um flexibility

19:09 · but a lot of the stuff we're having to do by boiler plate and code generation kind of be cool if like kind of Dart took it on itself because like you said enum with a class another cool thing about that is you can Rite actually extension methods onto a class you can't do that with an enom right now um yeah because I've I've wanted to do stuff like that as well well I mean that's where the so that's where type comes in right so in tying you can say U give a

19:32 · good example is if you want to bind some things tightly couple some things together you can create a new class which is a string right so good example you can't put an extension on a string right right now but if you create a new type called uh server state right which is a

19:50 · string and then you could then extend it with other things during run time there's a lots of ways to C things together but also it's about not miss using extensions cuz that's one of the other things right like it's too easy to misuse extensions and I've seen it already set in several bits of code I've seen like just throwing extensions around like all over the place and then like like where these things could have been methods these things are not do

20:14 · not you're using extension as a hack rather than actually yeah architecting your software correct well not correctly is the wrong word but you know like like like put this way you don't look at a class and going oh this is the class and then figuring out oh run time no it has these other properties that are extension methods I have no idea how these where these things were coming from right yeah I tightly coup them together they should be I feel like that's where mixing coming right so I feel like there's a use case for all these different ways of doing things but the right thing for the right job and extensions are there for me personally

20:46 · is to actually extend things out of your control right gotcha so so for instance if you got a package coming in from externally or you've got something in the framework that you're trying to extend right for instance one thing I did recently which actually is part of architecture is just to um extend put extension on stateful widget and stateless widget that has a simple thing like um database repository or database

21:11 · service that is a a getter right that goes and uses provider of context or whatever to go fetch it right so instead of having the pro now here's the key so my I'm still using the provider package as essentially an inherited widget but I'm using it in one file

21:28 · I'm not sprucing that that provider input all over my application my application has no clue what provider is because it's only using the one place I'm using it where I have a widget that provides things down the tree and then my my extension that goes and uses provider to fetch them from the current context yeah also I um I'm not sure

21:48 · where I'm doing something wrong but um when using extensions I cannot Auto Import them like I have an extension on something and I know the extension the extension is defined somewhere in my project but I have to manual import a file they did add that recently I believe however it only works on named extensions oh got you because that's

22:09 · that was always a big thing because I knew I had that extension but I had to manually go in and search for the file where it was in yeah but to be honest I mean here's a good the good example of that is using export right you should be exporting those extensions right so that your inut when you import like uh

22:26 · certain certain something from your app you want to bring the extensions along with it well then export them from that import does that kind of make sense so that way your the extensions come along with anything that uses that that that's that type of system sometimes you have stuff on external libraries for example if you want to have an extension on datetime for example you cannot export

22:46 · datetime with your thing one one thing so but what you can do what you can do is create one file which exports date time and exports your your no seriously you can export date time and Export your EXT exension but you have to keep in mind to import that file instead of yeah but when you do your Auto Import it'll give you the options of both yes that's true right and then you get to choose the other one right but I mean yeah sure nothing's perfect right I'm not going to go there I mean these are all there's so many improvements that can be made but this is all about I mean it all takes time and what

23:16 · is worth the changes and these aren't worth any changes right this is all about using the language effectively right this should be a new book effective do yeah so I mean this this kind of brings to what we wanted to talk about today which is you know like State Management for flutter and um specifically we want to talk about you

23:35 · know like what do the why do we want to choose a state management solution and how can it help us because I feel like you know especially you know feels like you know I first started with flutter was like beta 2 it's like you know we had all these things thrown around it's like oh scope model and streams and block and it's like oh well block is crazy big and there all this boiler plate and there's Redux and you know you have to do all this and they all have their tradeoffs and it's like all of a sudden we went from like crazy uh just

24:02 · you write a bunch of code to the all the packages are writing all the code for you but like you don't you can't quite predict what's going on some you can so yeah just a a lot of different things going on right now I mean to be honest someone asked me the day what one do I think is better what what um what state management solution would I recommend and it's like chose your poison right cuz the the term is actually incorrect right I mean we've talked about this for a while State Management is because you in

24:30 · in in flutter specifically talking about UI state right and managing your state of of your application and its UI because mainly the UI is reactive and that's what builds and then that sort of affects your logic in some fashion but what you want to do is I found I mean I have to remember early on in the very flat early days even myself was guilty of this of just inlining every function as part of my you know my uh widget widget tree and just yeah mish mash of

24:57 · of code and it's more about sort of separation of concerns right so uh I think separation of concerns is actually one of the solid principles of design from Uncle Bob but um it's one I go to as well dry and keep it simple and all those sort of standard things but there just just sort of things to mem to kind

25:16 · of just to keep you sort of directed at how you should be doing stuff right so it's when you do anything OB Ted it's always about separating off naming things appropriately structuring things to communicate with so that when you come in and modify them you're not having to trace down and refactor and just rewrite huge swaths of your code you can just keep it in one location yeah that's really sort of like that sort of En class en sort of encompassing

25:40 · your logic in one place or your your your your code in one place I think that's really what is which is architecture right that's how you architect your the classes of your application to interact with each other to produce your desired result of your app right so to produ produce that business logic so when we talk about these patterns like orig originally the patterns that we were seeing were talking about inherited widget right which is just reaching up to get state from other widgets right because the widgets would be driving the logic right yeah all of here anytime you

26:12 · interact from the widget tree you're always using inherited widget doesn't matter if you're using provider scope model any of these they're all based on inherited model I this this is actually okay okay most of them okay yeah however okay mobx right now things but um the the point here is why does inherit a widget exist in the first place right what why is it trying to solve do you know Ro do you know know

26:38 · it's a it's just a tree data structure you want to have your logic you know where you can grab from one instance of a node to another side of like it's just a just a shorten traversal yeah right so in terms of it's a Time Saver and a performance game that's that's it's it's so so basically what happens is you you

26:58 · it will go up the the first time right your your access they they have changed this logic recently and it does work slightly differ so I'm not going to get this perfectly right correct but the initial the idea is like whenever you need to look up the tree right you use your current context right your build context and you've got your they've renamed them so they're now all find by fine widget by this and F state by that and find inherited widget by this and um depends on that widget so I won't go into this a whole list of them however they're all

27:30 · about tree traversal right so they go up the tree now if you look at those functions so if you go into um the flutter framework and look at the element class element is what implements build context right so every build context you see is actually your element for your widget right and what you'll do is it literally traverses up to its parent and says is parent um this type

27:54 · or let's say you're looking at widget so it looks at is parent element widgets this type no then go up to next parent and next parent and next parent so you go this ancestor path right now the key is going up the tree is always less expensive than going down the tree because you do a non-exhaustive search up the tree you're going to your direct descent ancestor right if you go down

28:14 · the tree then you have a depth pass or breath pass search in terms of going down to every Edge Leaf node of the tree yeah so so up as logarithmic so or even less actually yeah but the key being here is if you go up the tree right you're still looping over you're still doing those if checks so if you every single time you needed to get that parent state or class you have to do that traversal that's a waste of time right waste of waste of performance especially during build or other things that you need to get things done in your frame limit right so then you kind of go

28:45 · down and go well okay how do I solve this well if you're trying to solve yourself you can solve this yourself and that is oh I will create a hashmap right and I will will key my type right and then I will store the value as being whatever I get from up the tree now the

29:00 · first time I get it I store in that hashmap and now each time I want to get a different type of store in that hash map that's literally how most of these sort of state things work right however they do the the next thing which is that hash map is red further up the tree so if if that type changes it updates the hashmap and notifies the children to rebuild so really truthfully there's two things to this is one is to Performance are going up the tree and also to notify the children that they need to be rebuilt further down the tree without building the entire chain of widgets

29:30 · right so it's a performance win right and it's just a different way of doing it's the reactive model so so that's inheritor widget right scope model is just so so inheritor widget was was inherently untyped safe should we say there's a and there's some few sort of uh problems around using and it wasn't it's not easy to get your head around it even now right so so scope model came out scope model by um the barosaurus

29:56 · himself Bri yeah I I love calling him that it's just every time I see him in that nice beard of his it's like how how did he do that that's amazing um the up keep on that thing BL me anyway the scope model uh it's sort of

30:14 · like just giving you that nice interface on top and then giving you sort of like this idea of a model that you can then notify when it field changes and it updates the wi is essentially the same thing and then uh there's a few I'm trying to remember there were a few other things that came out in fact I think the firsted was out sorry I said

30:31 · Redux came out right right around yeah Redux now I'm I'm I really love the notion of a unidirectional data flow of a mutable objects I mean that is like like you have a direct idea of the flow of your application and one of the killers of most apps in fact I know back in the day when oh my goodness like 10 years ago when I was first doing Android apps was that State uh like having mutable State and and changing the

31:01 · properties was leads to literally every single bug you can imagine and by just changing things to having immutable models solved so many issues because it meant you didn't have the possibility of um not knowing that something had changed that you have a direct notion that the truthfully inside the um it's

31:21 · about Java engine it happens in D most of the object oriented systems is each object has your ID it's it's it's uh literally it's Unique identify in the in in the system when it's been allocated and that by default is the hash code right so that's so if you compare two hash codes of two objects that don't have an equals method you're essentially saying are these two things identical right by reference right by well uh yeah

31:48 · I mean as an object it's by it's passed by reference but still you talking about the value the they have the same reference yeah yeah because they both exist in the same location yeah yeah yeah so so the anyway anyway I digress but the the point here is that uh scope model sort of even off the playing field

32:06 · Redux comes in and we get this unal data flow we get the Redux behaviors which work well with react that kind of brings another lot of people into flutter in terms of react developers and so on like they they used to using Redux and a lot of people have been using Redux in their apps then you still talking about RX right using RX with Redux and that kind of sort of brings in a new way of people and a new way of do things because there's several things that are difficult to do not impossible but difficult to do with streams in dark then RX came in using it with

32:37 · observables and then finally I believe as of I'm not going to quote the right version of I think 023 of of rx. it now uses streams directly so you can now use nonobservable base patterns so now stream because of extension methods it now has all the standard sort of flat map on a stream mhm so you can just flat map the direct data typee and not have to worry about like wrapping every one of your data types with an observable patent right and having the next done and all that kind of jazz the anyway

33:07 · back back to back to Redux yeah yeah so so we had Redux and then what was the other history we had Redux umex came out sorry about M was after provider right so provider I think is the next big leap I mean for sure sorry it was block for sure block no sorry yeah no you're right block and relux are around the same I think they came around the same time because I remember lots of conversations were about which one should I choose right yeah but again block I personally

33:34 · have never followed block to the letter of the specification right yeah same in terms of I don't use syns a lot of the time like to send data to the blocks right I don't let it reveal a sync and then push stff into a stream great for when you want to link blocks together and have stuff streaming through the pipeline Right Where You reveal a sync and you can attach things together right but when you're talking about UI actions I've never gone that route of yeah

33:59 · depends on what I'm doing right but I never really go that route of having a a value or an event or something that I'm passing over a stream to the to the block and then having the block churn that change it state I'm listening to the state on the front end and then that returns back the uh the new date or the update state with which contains whatever so so yeah so one thing which

34:19 · is also uh interesting to talk about in this context is um apps have a very specific way of handling data and that's a reason why we need those things like streams Redux um and that's because apps are very reactive like every uh possible configuration all the data um is based off of events a user Taps a button something comes from a server some sort of response something is loading so most

34:47 · parts of an app are asynchronous and very data driven if they wouldn't be the case like for example in servers where you have one request which is coming in it is being process it's being piped through a lot of systems you wouldn't need all this uh reactive uh Behavior

35:04 · but for apps um everything is interconnected and reactive and that's also mainly the reason like um why we actually need these kinds of streams why we need some sort of pattern which observes data instead of um setting it I'm I'm going to have to disagree just slightly not that that's not what it is

35:23 · right now for flut but more about apps in general right so we're talking about about flut apps because the reactive UI it makes sense to have no no I'm talking about apps in general like I've been doing Android before too and I know having mutable data which you have to keep track of yourself like when is it changing I have to know you but one trying to say is you still have a mutable data you but but you don't have to have streams necessarily like like simple patterns of like a holder pattern where you're hold you have one object that is constant that holds on to a value as a reference and then that has a

35:54 · notification when the value changes these are other patterns that can be used used yes but those are I dig I digress sorry definitely Yeah so basically the idea is instead of having to manually keep track of when do I have to rebuild when do I have to show something new to user we lay off the responsibility of uh knowing when we

36:13 · have to rebuild to the actual part which is causing the rebuild I think there's also an interesting point that's was going to take me back but when doing Android a long time ago when RX Java came out on Android mhm and we we started going with uh Java 7 lambdas right it suddenly became a pattern that you could then use uh RX effectively

36:37 · inside of inside of your Android app because you didn't have to do these Anonymous uh class instances all over the place you just use Lambda expressions and um the power really comes from set up a pipeline right so so essentially set up your stream notes having your flat maps and your your different manipulations of the data it flows through the the pipeline and having essentially you

36:59 · could express the entire back end of your app as an interconnection of all of the pipes of the stream right I mean it would be nuts right and trust me I've seen people do it and try it and all sorts right but and you go through a phase when you're trying RX you're trying to do these kind of nice little cool things right yes I feel like there

37:16 · there's like using anything effectively is don't like like they say taking anything up too much is bad thing right like having too much coffee is going to be a bad thing right the point here is like doing any one of these things over the top is always a bad thing so I saw someone talking about this was a while ago when RX actually when RX first came out in in flut they were trying to make all of their widgets stateless yeah having like all the state

37:38 · pushed over to into the Redux data stores and having all this kind of like it was like in general the the principle sounds nice right but then you're you end up doing things like there might be state that only has to exist for that widget is is part of the UI State at that point it depends and Depends the play should be located as inside the state for widget if that kind of makes sense it's not something that you should be putting it outside the I mean where else is it going to you could back a class to every widget right so every widget can have a backing class with its logic but then it's just a base

38:10 · class with functions in it and state right with variables but you're just moving the problem right it's nice for organization don't get me wrong but that's again that's architecture that's not really the solution anyway like bottom navigation I've seen people create a block just for the bottom navigation bar and I'm like you know it's like a self responsible widget there it's like only UI navigation if

38:30 · you want to change the index do it with the Constructor and a did update widget you know it's so much EAS that way I think there's yeah there's a point here where you're working against the Frameworks I mean the framework comes with tools so you don't have to use any of these patterns right essentially right the Bas things are all there like was just said with inherited widget but I mean go back so so we I mean I have these different patters right so we said Redux provider is one we haven't spoken about so provider is

38:55 · the to me the the facto standard now in terms of instead of using heritor widget I go for provider right yes mainly because it does all that hard work for me and it's been heavily tested it's got L stuff and I don't have to deal with some of the manua around setting up an inherit widget so you have to set up another class since you got scope class and some other things and also the fact that provider is really it's scoped model on steroids in terms

39:22 · of that you have all those other providers that take things so you can have a change notified provider so the change Notifier is it listens to that so that when the when the change Notifier is notified it will rebuild the widget so again all these other uh patterns of yeah that all these other libraries your the way you structure your cocon all depend on that sort provider system right well there's also another type too which I I use this data or State Management solution for up until probably about six months ago and that was using um more or sqlite on the

39:55 · back end having a unidirectional flow where all my I'm reading the data directly on the widgets so that you have the stream listing on individual stuff and then just using like a block or something to update the database um in a single layer but because that that management was also pretty popular but um yeah I I just curious your thoughts on that too because like you know that's it also you know obviously depends on the data but you know if you have a structured data kind of approach it uh

40:23 · it you know kind of can be nice to have like that unidirectional flow that way too oh for sure I mean it really depends on what you're doing because I to be honest I would keep it's about laying your application architecture then right for me so I might have my front end UI deal with streams of my own data types in my application I'm never going to pass a document snapshot right from fir

40:46 · store to my front end of my application right because now suddenly my entire application is now dependent on Fir store right so if I need to refactor F out I want to switch to my own API I switch I want to put a caching layer in with SQ light for instance then I I just kicked myself right you know it's not it's not going to be an easy change to make right so you want to control each layer and keep each layer of your application independent so that kind of goes into

41:17 · like I mean for for what I was doing back in it's quite funny what I was doing back in the Android days was using uh what we call repository service model um I'm trying to remember there's some other better names for this but this is the way I remember it right and it's that notion of having uh units of responsibility called repositories right they they are responsible for some unique fact think of it like a block if you will but some some uh either some data type or some manipulation of of something within your app so let's say you had um let's say you were a music

41:48 · plan you had albums right so you'd have an albums repository right now all your front end whenever you need an album you need get like an album cover or ID whatever it might be you're going to go to the repository to to deal with that um data type right or or manipulate

42:04 · albums in some fashion right but then the albums might have to go off to fir store the albums repository might have to go to fir store to actually go retrieve it from the database or go then go off to Google Cloud Storage to retrieve the the cover URL so I can pass back in memory one and cash it in memory and whatever I want to do but that's all business Logic on the back end of your application it never touches the UI right the IDE on the UI I do I get an album model and it has all the fields I need to display my on my screen right so

42:31 · essentially almost think of it like a view model in that sense right but that's the pattern I feel like is is just the most flexible rather than having suddenly like you obviously essentially it's a bit abstract but you can also then go one level deep and have something between repository and your UI and have controllers right that sort of notion of I have a top level controller

42:52 · for my application which kind of wires some stuff up or essentially block or so it's another model I've done where you have blocks repositories and services and the blocks just provide that bit bit business logic in between your widget layer do the reactivity part and then go off to the to the repository layer of the surface layer to do things right but the idea is that you have a repository layer which is like as said like albums and then above that if you had firea that would be a service layer right your choice as to whether if

43:21 · you're doing this model that I use is if you want the service layer to return back data models from your class or if you want the repos or if you want the repository layer to also have access to fire store in that fashion right so it gets the document snapshots and then you deal with the mapping from from essentially from U serialized data type or transmission data type to your local model data type if that's going to happen at the repository layer or the service layer that depends on your application um I personally try and keep

43:52 · two sets of models right so you have your model that you're using uh within your data within fir store within your database that might be IDs for other objects right but then when it comes to your object on the front end you want to link those two objects together so you might do two fetches or or maybe have it in cash so you want to do two SQL queries and bind those things together and then you're passing off to the front end so the front end has what it needs uh for to display that data for what it needs to manipulate that data and that's what your application does right so so really the tradeoff and the

44:22 · other trade-off here is that your uh repository and service layer must not you need to keep it completely flutter free right so you never have providers in those you don't deal with any of the if you're dealing with um the flutter um any of the

44:40 · flutter sort of framework in your back end then I feel like that's probably not where it's supposed to be because flutter is like your UI your front end right right right I try and keep them off however saying that there is one dependency which you can't do at the moment that is change Notifier or value listenable those things in flutter foundation so you know you're not going to import just those so do that kind of

45:02 · import show you know show value listenable you're just importing that one thing you're not going to be right chanced into using those classes from flutter which you shouldn't be using like a good example of this right this is just silly but it's a good example of when these these practices are important color color as a class is a UI do

45:23 · specific attribute right if you want to now take this model object or this other piece of code and put it on your back end and use it in your server side or do some other stuff with this backend piece of business logic or move stuff around suddenly you've got dependency on flut right so instead what you should be doing is storing the integer representation right which is your which is actually what color is in in in computer terms color object just literally hides an INT value inside it right with methods right there's a good

45:51 · example of an alias type right if you could do an alas type and color would be a good example of doing it right you can have color B and aist of integer with the with the methods on top so you're exing essentially extending it's not really what it's for but digress anyway I know what you mean yeah anyway anyway

46:07 · back to the point here is that that a good use of that is putting color in your front end models but not in your backend models right so what you're sending to and from the server is either a string or an integer or some other representation of your color and then you transition then you convert between your your your meta type or or or

46:24 · wherever you're trans transmitting serializing back and forth from your services into your model that you use for the front end and then you convert it to a color then right this gives you that layer of control and complexity that you can get around right and then you can prepare your front end models however you want in your apost layer any I digress sorry yeah I think by the way uh and just a quick note on the models and repositories and Services I think uh arcs command was a state management solution that came out that was um kind of all built around that specifically on top of streams yeah yeah so Thomas is uh RX

46:56 · command with uh to use RX D and also use along with get it and kind of that kind of stuff so package he came out with RX VMS as well which is the RX command as well um personally I've not i' I've I've actually worked with uh on a few projects with Thomas actually and uh we've used those patterns personally I feel there's use for these things where sort of for me Rx VMS is more like a node

47:22 · right so you so it's it's kind of a node from block is it like a front INF for Block which gives you a stream for when it's loading for when State changes and you kind of like you have these streams now it means that you can connect multiple blocks multiple of these RS vmx blocks almost together so you can have loading go from one as an input to another so one one's finished another one starts and you can have RX commands being sent and transmitted between these things so any any um it's it's a nice system but I find it like for me personally I find most of

47:52 · these things overly complicated right like keep it simple right right like for me block is overly complicated for most of my most of my use cases I don't want to have to go I feel like I'm put an extra boiler plate in the same as Redux I end up putting way more boiler plate into my applications for for for not

48:09 · that much gain right I feel like don't get me wrong use a pattern and use it throughout your application but it doesn't mean you can't use multiple things together like you can use provider with Redux right like the two things are not like don't have to be separated you don't have to you can't I mean in the end architecture all it is is to make code for you easier if you

48:33 · write good code which you can edit fast which you um can modify um understand and build on top of which doesn't use any kind of architecture but just mutable variables that's fine if it works but most often not it doesn't work people get confus buckon and just keeping as much as simple um is in my

48:57 · opinion key like if you have a stateful widget which has some logic which is very encapsulated which doesn't have to be connected to our blogs to streams put it in a widget in a state for widget use that state you don't have to use streams and all that stuff but once it gets interconnected with your other system it fetches data from that uh it combines it

49:19 · with some data from there suddenly this simple widget which should have just taken one second to skim over understand requires a lot of uh mental capacity to understand you have to go through your project and look there okay make sure you don't break something there um so in regards to boiler plate

49:39 · if the boiler plate helps you to reduce the mental strain understanding this component it's great but if you have something simple which boil plate code adds on top two and like it makes you feel uncomfortable looking at the code I know this feeling if you have this code code which you really don't want to touch bad smell code right this Cod got bad smell to it sometimes I mean sometimes it could be good architectur code but just over engineered like it's

50:06 · solid good written code but it's like this simple feature which you just want to edit and you have to look at these two different places the other thing to mention here is is testing right like like these architectures and patterns all afford you to be a to test them

50:23 · right so so the case in point there is if you need to be able to test that piece of logic make sure you have it doesn't matter if that you're that you're not using block right you just test it a different way but my point here is just just make sure that that testing is part of that whole whatever architect you come up with you know you need to make sure that you're you're covering all those edge cases that you that you might not possibly think of at runtime yeah yeah especially and also I

50:48 · think um not just testing but be able to debug like if uh like a user has an issue I think that's a really cool feature of blocking in Redux for example you can actually replay the state of the error of what they had you can see all the events leading up to that and everything at the whatever was happening at the time in fact I did something similar in um it wasn't Redux but I did something similar and that is um a nice tool that you can do is to keep a log of the last X transactions if you will or

51:17 · whatever uh events that occurred within your application and these can just be any event you like right just just imagine there things that have occurred like oh the the the app when fetched like the list of albums right from from a repository now that's an event you log that event so you have a local log within your application and it's a series of log entry items right and then what happens when the crash occurs you can now collect that up serialize it into a um Json array or into into into a

51:44 · text block and that gets dumped over to your your exception capture crash capture error reporting system and that gives you that kind of event log of what happened this is not just Redux is what I'm trying to get right like like yeah you know and and the same goes for yeah there's lots of these things right like like like nothing you're you're not limited what why one of the reasons why I really like flutter and D is the limitations are gone yes you have

52:10 · no idea I don't think any anyone that hasn't used Android as long as I have for that 10y year period and knows it's kind of funny someone asked me like why I can't remember it was it was like why something happens in Android the way it does I'm like oh that's because in version one it did this you know and it's still there to this day and it's like there's this so it's almost archaic

52:30 · right in terms of again it's an operat system you has to be it's one of the reasons why they didn't put their move to using the support library right and and and yeah Android X and all this is because they don't have to put the the widgets in the framework anymore where they would you wouldn't get those functions and it was such a pain to having to backwards compatibility and having to say oh if you don't have this function you should use this other function I'll I'll I'll put my own um polyfill in its place to to perform

52:56 · those necessary features to do something that the platform now contains as pointless I might as well just do it in my own application at that point right yeah so that's where there s compact libraries came from and all this kind of support stuff but the entire system is still limited like like just trying to deal with like resources and resource

53:12 · qualifiers and The Ordering of resource qualifiers and how it's going to select the right resource on Android is just just mindboggling a lot of the time right and you end up I remember a lot of the time in some big applications I worked on I ended up doing type a uh resource a lising which is when you basically add a fake XML tag which is a

53:29 · resource tag which basically just directs to another resource so you can get around the limitations of the of the resource selection so on the specific use case with a specific language in this local and then I want you to use this very specific layout and not the default one or something right like crazy stuff we in when sun and and doing

53:49 · flter I'm like oh wow just assets I can put them in any foldo I want I can struct them however I want I'm free and it's like like this the same goes with code like people it's kind of interesting because it's kind of two fundamental patterns right people come to and um people come to flutter and D like localization how do I do it what what what patter Master use what what however you want yeah whereas the answer is is as long as you get string load it

54:14 · from a Json file on your assets You Know download it from a server you have the freedom to perform those things however you want right and to do them however you want can parttime runtime you name it you can do it the freedom is there whereas on Android it's like no you must do it with the the XML language options you must do it like this and if you don't want to do it like that you have to implement the entire framework yourself and override a load of w widgets and and you know views and how you do all this it's like yeah sorry digress but you get my point it's that freedom but even like having the freedom

54:44 · is great but sometimes having too much Freedom could be a curse too like you know when there's so many options like especially if you're new you're coming there and everybody's just telling you okay do whatever works for you and you're like I have no idea what works for me um there's a name for that information overload or that kind of like it's kind of like there's so many options I'm I don't know where to turn

55:08 · MH yes right that is the problem right that we have in fluttering D A lot of the time is like like we talk about like people this really where that question comes from what what state management solution should I use is like there's so many to choose from there's so much stuff to do not understanding it right as a as a as a princip bers and AR like the fact that it's more or less architecture right it's not about the term State manager is really the wrong name for it's architecture a lot of the time right for us it's more about the state management is just a tiny little bit of uh traversing this the tree the

55:39 · widget tree to get to the to your your widget state righten state management came from is that kind of manipulation of your UI state but truthfully like it's like block isn't that right block isn't State man block block isn't architecture pattern right like like it's a way dealing with UI right same goes for providers is inherit widget

56:00 · it's like they're kind of just traversing the Tre tree providing some of that sort of extra stuff that we kind of want but anyway I digress right so sorry well also you know uh with that too people you know have all these things when they come to flutter and they they see these options but you know one thing that I've been doing recently is I I just ask them straight up like what's the data doing like how is the data flowing because nine times out of

56:23 · 10 the data decides the State Management solution if you're building a graphics application like I did with a widget Studio I'm not going to be using SQL light and all this kind of stuff to store all these individual things most of it's going to be in memory most of it's going to be some sort of serialization and uh I mean I use value

56:40 · notifiers to update individual things but then if I'm building you know a business application I'm going to be using some sort of sqlite or you know using something like that so one thing I just thought about inherit we cannot forget inherited model which was added later on in the game y um also used I think by scope model in the end for its model stuff and there's a few other places it's used um I'm not sure if Remy's using it but I know the

57:04 · new select does essentially the same thing where you can essentially uh look at when a specific field or value has changed rather than have to rebuild on whenever an object changes so you get that kind of fine finer level of of control um but yeah but most of this is

57:19 · it's just about the question I always ask people like trying to ask they ask a question like I'm trying to think of how do I position a widget like how can I position a widget a specific XY coordinate you're like but what are you trying to do and they kind no I'm trying to position a widget no no no no no no that's your solution but what is your problem you're trying to solve and when they explain the problem that they're trying to solve it's like no no no no do it like this this is the reactive way of doing you should put this widget in there you should put a line in there you can animate your line and that will give you your best smoothest way of doing it

57:46 · and no matter what size of the device is it's going to like Traverse the entire screen you're no longer dealing with pixel coordinates right like yeah the these just it's just ways of thinking about this the key that one of the reasons why flutter is just to me a good thing right but it's also it's a good and bad thing right fact of it's so different that it solves a lot

58:06 · of the problems that we've been having so it's like if I was to do if I was to be on the team that wrote Android again and we had a chance like just that's it that's it we're just going to kill Android right now and we're going to rewrite Android no no the point is like like Android 10 or whatever version right is going to be a ground up rewrite of the entire Android system how we're going to do it some of the principles at least of flutter are the ones I'm going to be choosing for for doing some of this stuff because of those of the way

58:31 · it really brings the the the developer experience of making apps forward right where it needs to be and that kind of sort of goes back to that point of um now I've lost my train of thought well I would just say real quick you know it's nice that you know people all people that are kind of on the fence of flutter don't realize that in 3 years flutter can still be whatever it wants because it's not tied to Android or iOS

58:58 · and I think that's really cool because because the State Management solution is you build it how you need it like you know we don't depend on the update cycle and in fact that's one of the reasons why I love and chose flutter was because I can have my same application on iOS 8 I can have it on KitKat and like the lowest Android and not have to use the libraries or depend on any interesting point right one of my setting points that I I had at one of these Android conferences because I think I am an Android developer I I look at the crowd of people and these Android comp go I was you you know what I mean I

59:30 · feel like I'm not trying to like there's no sort of realization that if you want to use it use it if you don't want to use it don't use it right I don't care but I want you to try because once you try then you might realize what the benefits are right like hot read and H sty I mean oh my God like I was waiting

59:45 · like I spend so much of my day waiting for GR Bild to have no idea right that a pcture over like a a programmer at his computer desk with a skele it's a skeleton you know like with a cup of coffee it's c for like me most of the days I'm just sitting there just just just waiting for a progress bar right it's waste of time like you're not learning or doing anything exactly exactly for though too it was really bad

1:00:06 · and then suddenly like you get this hot reload and hot restart thing and whoa do you mean I just hit save yeah and I click on the button again and it performs different code I'm like mind blow without nating to the screen and it's like you get to stay you don't have to like refill out the form you can just update the field yeah I mean like the this kind of like process I mean I have to say one of the things that's so underutilized and I want to tell this to people because a lot of people don't know re reassemble reassemble is a

1:00:35 · function on state for widget that gets called when you hot reload only during development right meaning that you can make your widgets react during development that how they would not react during so you can have it reload a widget or or an object from your backend database right so you don't have to do

1:00:53 · hot restart so most instances where you oh we didn't get the right state or it's got this old thing oh I have to hot restart right reassemble fixes those issues right so so that's what that people need to think about when when you get those issues reassemble is your first thing to go to and say what can I do during reassemble that's going to make my development life exper you know my development experience of building this form or building this sort of frontend system easier that's that's

1:01:16 · that's what it comes own I haven't used it before I mean this is it right like like like one of these underutilized features I tell you can potentially save a lot of time yeah cuz at least at the very minimum you could just start with like just calling the init method over again CU that fix a lot so so all you need to do is a lot of time is cancel whatever streams and restart your streams whatever you're doing in a knit so cancel them and then call a nit State again disposing it yeah yeah disposing

1:01:42 · in it essentially right but obviously there's there's um side effects to doing that in terms of you're calling the super classes and you don't know if your mixings and whatever else is going on right but my point here being that it's a method right and you get to do whatever you want in that method method and it happens gets cold during hot reload on every widget and every state for widget speaking of which I think it's a good time to mention that yes there is K debug mode now constants that

1:02:05 · people don't realize and you can check to see if you're in profile mode or release mode so also in your code a lot of people don't know about that and just like you can do if you're on web and stuff like that so so it's K debug right it's lowercase k capital D debug right one word yeah and that's the that's saying no if you're in debug oh my god do you know how how I was doing it before for years before that I can't when did that come out like a year ago now I know it's a while ago the no yeah

1:02:30 · yeah you do theer you set booing flag and you return that booing flag so because asserts are only kept for debugs you know if it returned true you're in debug now that was the way of doing it I was so frustrating and then suddenly to to have a all it is is an environment variable right it's a dark Define essentially right they get sent across and it's detected but yes is the code

1:02:50 · which you WP in that if statement being uh cut out like optimiz because I think with assert the actual code which you have in there is being thrown away now that is a good point um I believe you know what you just you have just brought up a point there so so during compilation um the string from

1:03:09 · environment I believe is a constant expression it should be but I'm not sure now you mention it you know so so one of interesting points to make which is something that actually summed to me the day was if I build my flutter web app with skier right you do the extra dark defined Flags whenever

1:03:28 · build in release mode how I'm not specifying that flag when I run it right so how does it know I usually specify it when I do release mode no but the key Point here is is no no no what I'm trying to say is once it's been built oh once it's been built gotcha so so this is my point so so the dark code when it runs if you know if you look at like the way that works right in the in the flat web framework it does a it literally

1:03:51 · does one of these like string from environment variable is this environment variable for the do defined set yes then choose this code path else choose this other code path right yeah now the key here is that those things are done as overwrites to the normal process environment variables yeah right I I

1:04:10 · might be wrong but that's from what I remember on IOS and Android when you and especially Mac OS when you run a uh a defined variable it actually up updates the generated config with that new variable set to whatever value so then at release mode it just reads from the envirment yeah yeah but my point here is it's part part of the compilation process is compil into your application right so so so during deel it's one of

1:04:33 · those interesting things during development mode it's Dynamic but during release it's it's baked in right that process but my my interesting point here is because it's baked in does it get the tree shaking side of the compiler right does it does it strip out those copath that's not no longer ever going to travel down because those are baked in I'm not sure and I think that's what no was getting I'm not sure about that kind interesting yeah it would be nice if they could also throw in uh like you know the version that your app is on from the inside the compilation progress

1:05:02 · um compilation process for you know your variable I know they do that for the release mode but yeah so you know there's build uncore version I think is the widget sorry is the is the package and what it does no no no I mean yeah yeah I've done packages for it but what I mean is like I think it'd be cool if uh just like you can read from environment it'd be cool if you could do uh get the version from environment like cuz they have that at the at the bill time um sure I mean I mean but you can I

1:05:30 · mean you can set that yourself during your sort of any c environment that you're doing right I mean like you're not this for the application to read itself like so you can like show like what your change log and stuff like that without having to use a package for it that's what I was meing yeah I mean it's

1:05:47 · the thing right like like the point here is not about that right I think the point here is what do you want the framework team to man manage and own because they can't do it all right so it's nice to say oh we want all these features but then they have to be owned by someone at Google right and and that takes Staffing and other things right away from potential other things that we need doing like bug fixing and other things right and desktop and all these other things that we want from from flatter right like we it's like we're like a bunch of kids and KN and FK going I want I want I want I want my food I want you know and it's like it's like so

1:06:18 · that's where that that kind of community and packages come from right being able to do these things ourselves and that's one of the nice things was going back to that like that freedom that flat gives like these are all things like you want to you want to put something in the build process make a package do something during the build process you can do that no problem and and a good example of this is um I'm just looked it up now it's it's build uncore version um

1:06:40 · yep that's the one and what it does is it takes the package version from your yaml during the build process and puts a constant value in your app as in a file then you just read that constant right so every time you build your app you get the right version inside your um inside your apps without having to Cross Key difference right is if you were to do this with um package

1:07:03 · info package info gets it from the Android package information or the iOS bundle information right which means it has to cross the bridge and it has to go away and it has to do all this other stuff again it's to be honest the Zero Performance impact on your application be so NE well it's not zero but it's negligible because you're doing it once

1:07:23 · right yeah you're doing it once you display your about screen or your info screen or your menu or whatever it might be where you display that version you're doing it then right what you're not doing it is 60 times a second so you not want to use this platform Bridge as you know serialization distalization process you want to be using that thousands of

1:07:40 · times a second hundreds of times a second because of course you're going to get lack because now you're trying to squeeze something in one frame of 16 milliseconds and suddenly like you easily going over that limit now of course asyn in away isolates won't go into there right um yeah we'll be here for for days yeah I think um wrapping up the architecture part correct me if I'm wrong um for

1:08:03 · people deciding and thinking about architecture and State Management a few things to take away from this episode is keep it simple if there's something uh which sounds complicated requires a lot of Bop Cod and just doesn't feel right don't do it use something which works for you which is simple and most importantly you understand if you write code which that you don't understand who else going to understand it um also Flor

1:08:31 · is very data driven very reactive so maybe Shifting the Viewpoint from UI to the data when um architecting applications might make sense because instead of looking at okay what is happening where look at the data how is it flowing where is it coming from where is it going um did I miss something uh

1:08:53 · just yeah definitely be uh yeah just like choose it based on the data flow and not because of you know because it's popular at the time for sure I mean I mean again like don't start doing like second or third order the functions and like functions return functions every return functions because you're going to you're going to get into a problem somewhere don't don't over complicate things right yeah just real quick I wanted to check and see you know what the general Vibe was I know right now A lot of people are trying to decide between layers and features or folders by feature or folders by layers uh what

1:09:23 · guys do uh for me personally I love having a UI folder a source folder in each one of those like in the UI folder I have a folder per screen and inside each screen folder I have an entry point and probably a common folder and then a main common folder for all widgets in the backend has classes models utilities and stuff like that so what about you guys well um I think I think I've kind of sort of

1:09:49 · I've done it both ways right and I think you can even mix the two so you can have like um sort of feature level stuff if you want to but I kind of feel like if I'm going to separate all my let's say I was doing uh NVC right I have all my models in one place all my views in one place all my controllers in another place maybe that makes sense right right doing it that way however if I'm G to do

1:10:10 · things with the way I feel is normally where I have like a screens folder or right that has like then a sub subfolder for each one of my main sections of my app C screens maybe top level things and they can have any of the the widgets and things related to that in them right includes if I might have blocks there might be in there as well right they they related to those screens right then I would have a widgets folder at the top level which is like generic widgets so if I have a toolbar for instance that used across the entire every screen then I want that above that the specific

1:10:41 · screen layer then I'm putting that in that widget s essentially common area um I also normally make a backend folder which is the back end of the application and anything this is my layering right so I'll put then inside there my services I have a Services sub folder repeat repost subfolder and I have my service and repositories so I can keep if I wanted to I can literally

1:11:02 · lift out that backend folder into a into a separate package and now I've got a backend package that's completely separate to my front end UI if I wanted to right but it's mainly about just knowing when you cross that barrier right like you have imports from a completely different top level of your app you've crossed the layer right so you can kind of you can visually see that a lot of the time so you can it's just more of a hint than anything else I mean um yeah of course you have so for

1:11:29 · me um I used to be with different layers before but over time I shifted more and more into um grouping features together because for me most often not when work on an application instead of working on a layer I usually work on a feature and

1:11:48 · instead of just staying in the layer I usually cross the boundaries between okay I have to adjust this model I have to also adjust the UI and maybe some backend calls so usually when being in this work context I'm usually in the context of one feature and I have to access most of the parts so also as an example when using fir store um you don't have that much um backend you want

1:12:12 · to separate maybe having all that in one folder for example um for me having a feature folder in the feature folder having a UI folder a network folder maybe a store folder which may extend some Base Class which is in a top level layer separated um folder makes sense

1:12:32 · because when touching that specific feature I can touch every class and stay in the same subd directory I did I did just think when you were just saying that I did actually think one thing I do do that is make an app folder and that contains my top level like theme or also I have an app.

1:12:49 · dot which is normally my top level entry point which is like contains the material app and any of that Associated materials because main I feel like main should just be your entry point Main is just your main method that's it right I feel like like it if it needs in your main method you need to go off to the back end and initialize stuff and then and then bring up your UI so then you're calling the app but I feel like don't just pile lots of stuff into your main do dot you know it actually

1:13:14 · comes from um I don't believe it's a problem anymore but is be a problem with Imports when you had an import from two different a local as well as a package part used to conflict and used to have same type problems uh I'm not sure if that bug was solved now but yeah it's solved I don't have that anymore but but I kind of learn myself into not doing that main problem because it would always happen when you had stuff in Main and you try and use it elsewhere and you'd get that issue because locally because Main's the

1:13:39 · entry point it would always have everything local right and then if you try and import with the package path later it' be two different type instances but but either way like like you normally I he flavors right I mean like you talk about flavors in architecture right like youd have I normally do this main de maincore Dev maincore prod maincore whatever each one of my different flavors right testing whatever it might be and then I can then spin up the main method can spin up

1:14:04 · different uh constant values based on that so I can now tell my application oh it's in in the dev mode or in the production mode or in this so I can have different behaviors so I can have more logging perhaps when I'm in the dev mode or I'm using the dev back end rather than the production back end and you can make those sort of differences it's also very important part of architecture

1:14:25 · yep well Simon thank you so much for being on our podcast today uh we definitely want to chat in the future more about this we could go on probably for a week on all the different topics on this but uh yeah I just want to thank you so much uh for you know taking the time here talking about the subjects and uh is there anything that you would like to promote while you're on oh now you dropped me in it all right let me you can cut this bit out but yeah yeah um yeah of course like so we've got the upcoming hack 20 uh

1:14:57 · soon to be released uh we'll be releasing more information on the website soon where lots of people heavy heavily s working around the back end here at the moment trying to get things ready for the day so um yeah if you're if anyone's interested in the flutter hackaton we did it last year good success uh obviously it's all in person 70 locations worldwide 24 24-hour live stream which we will not be repeating this year but we will be doing some streaming some live streams um

1:15:24 · yeah so if you're interested and you want to be involved or you want to sign up to hackathon go to the website flutter hackathon docomo ified when when we get more information going out the door awesome yeah and then also flutter Community make sure to reach out there too I know you're one of the heads of it too yeah I guess uh Norbert what about

1:15:46 · you oh um actually real quick I'll cut this out but and where can they find you Simon online uh best place to uh I guess get hold of me is on Twitter uh Twitter uh my Twitter handle is Dev Angels London uh kind of regret doing my

1:16:01 · company name because I was using my company name to begin with but now it should be personal but you know that's what it is and um I think that's probably I think that's probably the best best sort of communication through that you've also got um I mean I've get people adding me on LinkedIn I just don't accept anyone on LinkedIn unless I know them yeah it's I got to draw the line somewhere because I'm not joking i' like again following people back because I'm not joking I get like 10 follows down I don't know these people I don't like people it's kind of interesting that people think that um they see that I'm

1:16:32 · following someone and they oh he he he must know this person right like like like that's G I'm giving someone else um like Authority I know I'm I'm sort of up in them so I feel like I can't to start I got stop doing that right and it's not out of M or anything like that just I can't the plus I've turned off the that I can't I can't there's too much yeah what about you Nobert where can they find you um as usual on Twitter

1:17:03 · um yes mainly Twitter I'd say I'm always on the podcast so you'll hear me next week or the week after I don't know when it's next going to be um yes what about you Ro yeah you can always find me on Twitter Ro Davis and GitHub and um yeah we'll have links to everything that you've seen in the description and the show so uh make sure to you know rate US

1:17:26 · on iTunes it really helps and Stitcher Spotify wherever you listen to us and want to thank you so much for listening today uh we look forward to seeing you in a future episode coming soon thanks thanks thank [Music] you

Pro Putt by Top Golf feat. Jason Clevering

Tue, 21 Nov 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Pro Putt by Top Golf feat. Jason Clevering

Description

Pro Putt by Top Golf

https://www.proputt.com/

Norbert Kozsir - @norbertkozsir

https://twitter.com/norbertkozsir

https://github.com/norbert515

Rody Davis - @rodydavis

https://twitter.com/rodydavis

https://github.com/rodydavis

https://youtube.com/rodydavis

https://rodydavis.com

Our podcast player:

https://rodydavis.github.io/creative_engineering/

Follow on Twitter:

https://twitter.com/CreativeEngShow

Transcript

0:00 · welcome to creative engineering we have a special episode today with Jason clevering how you doing Jason doing great thanks for having me on the show and we also have my co-host Norbert how you doing Norbert hey I'm doing pretty well too so today we're going to be talking about prop put for uh by top golf for Oculus Quest that is coming out soon and uh Jason you are um what part of the team are you on so I'm I'm the president of the company and and essentially what I um work with the team is how however I can help dreams happen

0:34 · and bring them to reality through uh through different aspects of the business um and then just general Partnerships um such as the one with top golf uh and other you know kind of General um business to-do lists in terms

0:52 · of development so whether that comes from financing to you know something strategic um or looking down the road at at what we can do um in current climates as well

1:08 · that uh that might be viable not only for us as a company but also for VR in general as it grows oh wow um so what what is your background with uh VR or just development in general um in terms of development well VR is is so new there's not a lot of of people out there that have been around long long time even though there's there's been different things that have dabbled in it you know from Nintendo on in in VR to

1:39 · where we are today with something like the quest um my background is primarily in entertainment um in traditional specifically film and music um when it comes to development of games uh I did

1:56 · study from a production standpoint uh at USC in California did uh worked on some beta teams through uh through my University years and stuff like that but at heart I am an Enthusiast um I'm somebody that started off with pong on a

2:17 · black and white TV and I couldn't find any of my friends that were good enough so I actually it's the only thing I can do ambidextrously is play Pong so I'd play against myself for many many hours and then my dad would be like here take this tennis rack and play a real sport kid kick me outside so uh but no I I I went

2:39 · through through the entire evolution of of video games that kind of says a lot about my age and I'm I'm definitely the the senior one at uh at prop put at Golf Scope or the parent company so uh so yeah I've seen it all and and just always always have approached Tech technology and gaming from some you know this these very childlike um amazement eyes and then this very keen Sense on how can you

3:12 · involve the masses and then at the end of the day turn it into a business so uh Golf Scope like I said our our our parent company has really been that platform since late 2019 for for me to really work closely

3:30 · with our founder Ryan Engle and uh and and develop into what we'll release here in a couple of days on the Oculus Quest wow that's amazing pretty cool where are you guys located so we're in Austin Texas um and it's you know an interesting mix of us that go from all level of golfer um all level of ability

3:57 · in the tech world um in the design world in the business world all of that that we are this this Band of Brothers that somehow or another showed up you know in the same location at the same time to do some rather spectacular things and lend all of our talents to uh to a vision that uh our

4:22 · our founder Ryan has really committed to since the first app that he created for the company called gol scope did a lot of your team like how much of your team do you think um was like their first experience with VR or was it other people had just game experience or was this all um professionals so it's other

4:42 · than Ryan it's all our first um experience developing something for VR and uh definitely some interesting challenges I think the biggest rule of developing for VR is get it in the headset you know it's with with VR it's such an emerging um realm and I say that in in a

5:05 · number of different senses it's it's emerging and reemerging at the same time in the sense that there are a lot of people in this world that have never experienced VR and it's not something you can describe you know I can't I can't put it into pros and you understand what it is like to stand on the beach course and watch birds fly overhead and I can't put it in a a video

5:30 · and have you have your senses kind of start playing in VR meaning that it fills in the blanks where it almost feels like the sun is shining on you or the wind is blowing and things like that so VR truly requires somebody to be in the headset and then it's reemerging at the same time because you have technology like the quest that is getting rid of those firsttime ill

5:55 · experiences that people have had in VR in terms of I give you a perfect example I'm I'm the best example of reemerging into VR my first experience in VR was with the psvr and Grand Turismo I'm a huge racing fan so I was like oh the first thing I'm goingon to do is strap myself into a car and like race through

6:17 · these European streets at like you know 260 kilometers an hour okay well that worked for about four minutes and then I tore the headset off I ran in the bathroom I vomited for 15 minutes and then laid on my back for 3 hours and

6:32 · swore I would never do VR again it's like your first tequila experience it's like no I'm never drinking that like you smell it and you start to get sick and I'd like see a VR headset in somebody's room and I'd be like oh God where's your bathroom so I think there's that reemergence so when it comes to development a lot of us are in that same

6:54 · realm where we're trying to cast off anything that was bad in terms terms of VR at the same time we're trying to put our headset headsets on as often as possible so that we understand what we

7:10 · we all have experience in 2D and 3D doing now when you put it in VR now you understand what what you truly have the power of doing I think more so than any other entertainment platform and that's truly surrounding somebody being able to commit to their emotional space as much as their physical space and so we're all

7:37 · just you know kids trying to figure out how to make the cool stuff one thing the Oculus Quest got right is the six off tracking you know having the ability to move around a room versus just like the Oculus go where you're just doing like basically what cardboard did um like that was my first experience was the just the head tracking and it was great but I got so sick there's just something about like when you want to turn your head left and right that spatial awareness in VR that takes it to the next level and I remember getting so sick or just like you know for me the

8:08 · Oculus Quest was one of the first devices that I almost did notice the pixels like you can if you start to pay attention but they really disappear when you're not paying attention versus like the cardboard where they're just it so obvious when you had a lower resolution phone or you know things that weren't made for it as well as just you know experiences like like you said like the psvr where it's just like you know this is it's cool but it's like Oculus Oculus

8:33 · shows that can be so much better yeah and I think being able to cut the cord is so important it it doesn't matter how immersed you are the second you turn and you feel something kind of yank you back it Yanks you out it's not just like oh you know like okay I'm I'm at the my limit or you know or you feel it on your shoulder or something like that there's always going to be something that's breaking the VR wall and pulling you out of the experience so with the quest not having that you truly feel immersed at

9:02 · that point in time it's like there's the the you've lost the world around you because there's nothing literally tethering you to the world around you so yeah now I'm literally breaking physical walls exactly with the quest you gain so much flexibility because I mean in golf you don't have to play in your room you could go outside in your garden and actually stand in the the grass and play golf there just open so many doors you

9:31 · do which you couldn't just bring your computer to like you wouldn't want your to bring your big beefing machine and find some sort of a power just to just to play some VR yeah no I think that's in in prop put one of the days during development that I really kind of like got me is I was you know the great thing about prop put is and how we've developed it is that you Orient yourself

9:59 · in your guardian basically in the center of it and once you Orient yourself you never have to move really I mean if you need to turn you can use the joystick to turn but it's not like you need to walk anywhere or like do anything so you can really just stay fixed and you can putt

10:17 · anywhere um so I kind of went through a bunch of things like oh you know what I'm going to putt in the bedroom and then I'm going to put on the bed and then I'm going to put in the shower without the water running but one day I was putting in the kitchen and I had a window open there was a pretty significant Breeze and I was standing on the course I was putting and the breeze hit me and it was one of those things that it was just it just added something

10:42 · to it that made it even more real and even though you knew it was the real Breeze there was this great moment where VR owned the physical space it's like I'm now going to use this to my advantage you know to this person even

11:00 · deeper so yeah having things like feeling this actual heat of the sun on you while you're putting or feeling the wind and things like that it's just it's kind of fun to experiment the and the quest lets you do that the quest truly lets you put yourself into environments that'll that'll expand it even further without having to buy additional Hardware like you can use nature to add to the experience so that's that's been fun so When developing this game um I

11:27 · know you guys um some of you guys have golf experience were you inspired by any other golf games when you started building this or was this mostly just like you know we have this Vision with top goof and just want to you know carry it out I mean again you know not to you know show my AARP card or anything like that but I mean I go back to golf on Atari 2600 you know and it's it's always been one of those games in a digital sense that you feel a little bit like my

12:02 · knowledge of the real sport is going to translate fairly well here even though I'm hitting a button you know whether it's just decisions on okay I should go for this shot or I should lay up or things like that that that that do that um but I mean the the Pinnacle for for me and I think you know few guys on the team here would definitely be any of the Tiger Woods games that happen on on Xbox

12:27 · or Playstation they just they had one feature in there that was just it like it hooked you I mean that's you watch a movie like Tin Cup you know and he talks about he's trying to explain what golf is you know and he's like you know that you know that tuning fork in your loins goes off just one time you know that one perfectly struck shot no matter how many horrible ones you've hit before you're coming back the next day because you you're like oh I want to feel that again so in Tiger Woods games it was like that

12:59 · heartbeat like you'd hit a shot and all of a sudden it'd like go into like this weird like graphics and then like the controller started pulsating and you were like oh yeah and then if you were playing against somebody and they'd hear it they're like oh come on not again you know it was just like it it was immersive as golf so that was the first time that you really felt the emotions

13:23 · of golf start to trickle into the digital realm you know with that that that heartbeat p in that controller it's just like oh I just want to feel this over and over again yes it's addicting yeah so um

13:38 · building a golf game itself is pretty hard I can imagine but building a golf game in VR is even harder what were some major challenges you faced and how did you solve them well again it's it's all about getting in the headset so a lot of it was you know on paper that that seems

14:00 · like that would translate into golf emotions but until we did it in the headset sometimes it works sometimes it didn't I think one of the the biggest was to get you immersive in an environment take you somewhere take you on a journey that uh that I think is very important in golf if you think about golf as a sport in you know in an

14:26 · urban setting I lived in m Angeles for many years in La first off everybody drives everywhere like literally I knew people that would drive a block away and to go to a friend's house you're like really you can't walk a block so you know there's a there's an old song in the 80s called Walking in LA and it was basically nobody walks in La um and so

14:50 · the only time that you your feet ever really touched grass in La was when you go to play golf so it's truly like one of the only times you get to like play a sport where your feet are on Turf so it was really important that we

15:08 · were able to replicate that Sensation that okay I feel like I'm on a golf course when you're on one of our putting courses but I think the the biggest challenge that we've gotten right where most games have not gotten this right is the sense that when you hit a putt and the ball rolls it looks like a

15:32 · that's what I intended to do and B the ball really is rolling the physics are so precise and so real that it was that was the biggest thing that we we decided we needed to do is like if this ball doesn't feel like a real golf ball and a real golf ball rolling and if it hits the hole on the Edge at a speed if it doesn't start to go down and kind of come back out out like a real golf ball would then all we've created is a video

16:03 · game and I think uh that's exactly what we haven't done we've created a golf experience and it just happens to be that you're only using your putter but that doesn't mean that those emotions and those frustrations and the Elations

16:20 · and all of that all the shuns don't come into to play and I think that was that was our our biggest challenge and our biggest achievement through it all what was the thing that you were probably most proud of like was it because I know we talked about you know porting that uh pretty complex engine was uh like cuz for me when I first played prop put

16:40 · that's the thing that got me was it did feel like a golf ball because you know it's something like you like when you play like a pool game online if the ball doesn't roll like a pole ball it's like it just feels so silly like it doesn't it just feels like a toy doesn't feel real yeah it feels like a cat toy sliding across the ground you know like it's like it's just not going to work you're like uh no I don't want to hit that thing again cuz I don't know if it really is doing what I intended it to do so yeah no I know it coming from how

17:11 · did you you know combat like the differences between because I know the the pro version you know has way higher physics and then the regular mode is a little bit easier how do you make those trade-offs between you know the you know the really hard simulation kind of style and then the kind of relaxed having fun yeah I you a lot of it is you just

17:32 · thinking about it from a golf perspective you know if you took a guy that never or you know 30 handicapper that you know has played golf three times you'd never take him out to the black horse at Beth Page you know it's like one of the hardest golf courses in North America and you're like that person's just GNA have a miserable miserable time and probably never play golf again like that's the worst sport ever so I think with amateur mode where

18:00 · the physics are all the same we give you the the putt line so that you can see where you're supposed to putt so we give you you know a few things to to help you out through this but um in no way are we

18:17 · making putts for you type of thing we haven't gamified it to that so we wanted people to be able to get in there and and feel what it's like to make a 30 foot putt you know whether there's there's a satisfaction whether you make a two-footer or you make a 100f footer there's a satisfaction there but seeing

18:36 · that ball drop that goes from Satisfaction to I use this word often Elation because that's just like the ultimate satisfaction and seeing a ball like dive over the edge of the hole into the bottom of the cup that's just Elation what we then wanted to do is we didn't want anybody to sit there and go well that's just a video game and especially golfers and so in PR mode I mean there's there's no assistance in any way shape or form I mean it it's a

19:04 · game of millimeters like it is on a real golf course if you don't hit that putt exactly right if you haven't chosen your line and hit the right speed and all of those things it's not going in you know just like real golf so we wanted you

19:20 · know to give that experience as well where you know okay I can take this to the the Pinnacle of you know where goes into true simulation of of of what the ball's going to do when you when you strike it with a putter so the trade-offs were were were pretty easy um you know that

19:41 · you know we wanted people to come back and enjoy it and feel all those great things and then we also wanted to treat it like putting you know most people in this world have struck a putt in real life with a Putter and a golf ball you know and it's whether it's on a miniature golf course or on a PGA t tour course you you probably have have struck a putt even with a plastic putter as a 2-year-old so people know what that movement is um the learning curve for

20:09 · how to hit a putt successfully is pretty shallow just about anybody can do it you can take a two-year-old you can take an 80-year-old and they can strike putts and not have to have some crazy physical prowess to do so but to master it is impossible and so it was important in PR mode that it was that same level of impossibility to master it you can get really good but

20:34 · you're never going to master it I mean any golfer out there is this I mean you look at somebody like Jordan spe number one putter in the world like I mean the guy couldn't miss from six zip codes away in any tournament and a year later he's like out of the top 100 I he couldn't he couldn't Kick It In from an inch away you know and that's what putting is and it's going to reward you

20:57 · many days and then it is going to haunt you many nights so that was what was important in in Pro mode in Pro put for sure that you got that that that same kind of spectrum of um reward and hatred

21:13 · out of it I guess in the first part of the development did you kind of face like when you're like gaslighting it to people like um oh well is this going to be like a putt putt game like stuff like that yeah I think a lot of people immediately when you just say putting game that's our thought is windmills and colored lights you know and to you know to their defense that's all that's been out there ever really you know nobody's really approached it like we have from trying to mix that that golf with game

21:44 · um aspect with putting but leaning hard into the golfy motions and the challenges and the you know the social aspect where you feel like you're playing golf and you're not playing putt putt those are big big differences but you're still using the same Club all the time um but no it was it was always or

22:12 · we get the request of you know are you guys going to do miniature golf courses and you know never say never you know but I think we've found something very unique in prop put that speaks to everybody that also feels like a new experience like I'm doing something I haven't done before with a putter when you get on the putting courses and you go okay now I need to if I am a golfer I have to really approach it as a golfer and if I'm a gamer I can really try some

22:41 · outlandish things to to dial this in like I like it or just to be able to brag to my buddies that you know I hit a 130 foot putt off a rock you know so yes it's uh yeah I mean like for me it's kind of nice though in a way that people do have that experience with put but that it's so accessible that you can have that conversation to be like you know it's an easy sell to be like yeah well if you like putt putt you're going to really love this because there's you know like when you're playing the game you get to like you know putt under a

23:11 · waterfall and in the desert and there's it's so much more immersive than a a pup course could ever be yeah absolutely so what was your um experience working with Top Golf on the game so far I mean it's been it's been really great we uh we began talking to them um a little over a year ago and uh

23:35 · you know we were the easy thing about it is we have the same mission in this all and that's to grow the game of golf um to do that through entertaining ways to do it with technology and all of that so we shared the same vision at the end of the day so that that always makes it easier for for um two Pary to come

23:58 · together and and and work on something for for a common goal so that was great um you know it's it's been challenging um the last couple of months as most businesses have you know is just trying to understand where we can go you know

24:16 · we had a lot of hopes and dreams that are going to you know either be put on hold or have to be reinvented and I know that everything that we've done together so far that we'll be able to overcome that um so it's it's a new

24:35 · relationship um everybody is excited there everybody is excited on our side and you know when you share the same same vision and mission statement it it it allows you to do a lot of things um together very successfully so we're looking forward to that that opportunity over time did the virus kind of accelerate the growth or the development of this game um in terms of accelerate the

25:04 · development no we you know it's working in the digital realm and uh with a smaller team it was one of those things that we we had the vision it was pretty much just execution and in development certain things no matter if you work 24 hours a day just take time you know and then uh then you break things and then you got to build them back up and you know things like that so typical development timeline so the the pandemic

25:33 · didn't affect us in that way I think if it affected Us in any way it's it's how are we going to get this message out to the masses about VR um again like I've said you you in order to get somebody excited about VR that's never been in VR they have to experience having a headset on them and it's the the one thing I think that Oculus has has found in the in the positive you know is that the quest is

26:06 · incredibly popular so it's still very difficult to buy one of these I I've always got a like retail tracker going like I get like hit by Walmart at 2:30 in the morning it's like oh it's available and I'm like you know if if you're not online and in 10 seconds it's gone basically so so even trying to

26:27 · communicate out for somebody to get a headset even if they were going to just take this blind leap of faith is is difficult so the best way is to is to do it through events and and and things like that that's just going to be challenging now you know um somebody putting on a public headset they're going to be scared you know and uh and

26:49 · we all have to be cautious there so I think uh I think that's probably the biggest way that this has affected us but uh again it's uh we've got a lot of things that we're going to do in the coming months that I think will really get people inspired to kind of like I said take that blind leap of faith and go okay maybe I need to buy one of these

27:11 · quests it's I think it's a the closest thing that you can compare it to in recent times would be the Wii you know it was like the Wii came out and it was like every was like what is this Nintendo thing like what I don't know what it is you know and then you saw like Grandma B and like jumping around and going like that you're like okay maybe I should try this thing

27:34 · you know and then you tried it and you're like okay now I'm breaking a sweat four times a day trying to like play bowling or whatever you know and it's like it's it's going to be that type of thing I think with just a number of different experiences and hopefully prop put is one of those where somebody goes that looks like it's a lot of fun that looks like something I can do so

27:57 · maybe I should make the investment and go down that road so I know you know you've got Facebook behind Oculus which is the greatest marketing engine in the world so if there was ever a chance for it to be uh hugely successful I think it's definitely there and I think prop put is definitely in the position to uh

28:18 · to be that first experience for people as well you know we'll all look back 20 years from now and go what was your first experience in in VR and hopefully a lot of people can say prop but talking about Oculus um as I know the game's going to be released pretty soon how has been and how is the uh cooperation with oculus like um yeah tell us about I mean

28:41 · it's awesome like it really is I think one of the biggest things that I've been impressed with with oculus is their attention to detail um I think it would have been very easy for a company like them with an engine like Facebook behind them to just go let's just put everything out

29:07 · there I think it's it's kind of the Netflix effect right now you know Netflix has got you know like who knows how many shows on there and how many movies and it's like it it basically is like well we don't want Amazon to get it so we'll buy it we'll put it on there we're just going to like you know put a thousand shows on there because then can say we have a thousand shows well guess what 994 of them are horrible you know

29:33 · and you're like you're sitting there I like go through Netflix and I'm like okay I'll give that a shot and five minutes and you're like that's horrible and you know next one 10 minutes I can't watch that you know and by that time it's like okay I don't even want to watch Netflix anymore because my my rolling the dice luck is horrible and I

29:53 · think with oculus they could have done that they could have taken every game in the world world out there just put it on there we've got this G you know and G well we've got a library of you know a thousand games and and they didn't they got selective and they made the process rigorous and they made it so that you had to prove along the way that you deserve the right to develop for Oculus and especially the quest um but at the

30:21 · same time they could it could have been one of those things where it's like well you know the Oculus is speaking and this is it and it's not they're always like pumping you up and like patting you on the back and helping you through and all of those things you know and when you have an an an engineer like our founder Ryan you know that is is so spectacular

30:45 · at what he does to be able to merge into an environment like Oculus and and provide them with with things that they weren't expecting that were going to be as good as they were when they showed up on their desk um I think really helped the process with us as well so it was

31:04 · you know very seamless very very enthusiastic on all sides and uh I hope that everybody recognizes that in the final product I think um Oculus has kind of taken a similar thing that the iPhone did which honestly I think is one of the biggest reasons why I had such a big success is with the App Store like the App Store is just the same as um you know like the Oculus store where you have to have a review process not everybody can make apps for it and I

31:33 · think the trade-off is that you get a bunch of curated apps on there that make it you know so much of a better experience when you lower the chances of you getting a bad egg a bad app of course that means there's still going to be ones that slip through but when you lower those chances you make the overall experience for especially firsttime people it's going to be a good one uh versus like the contrast on Android when

31:55 · almost anybody can submit even duplicates of apps and you know it's just you then start to associate the App Store with the product itself which is so sad cuz like the product and the software are two different things yeah absolutely yeah and there's there's a

32:10 · lot of bad apples that can that can ruin the tree really quick you know and it's uh that's definitely not the case at Oculus for sure and I I really have to applaud them they they took that stance and and decided that everything that comes out of there really is as a level of quality that's surpasses everything else so I can imagine when um working

32:33 · with OAS and billing app is pretty important to have an MVP uh which resembles the game and shows off what it's going to be at the end pretty quickly how long did it take you to build something which is actually the MVP of proot that's a really good question because there were a few of those moments along develop M that were just

32:59 · aha moments where we were really thinking and you know getting the whiteboards out and you know Monday meetings that were supposed to be an hour turned into five hours and it's like you know okay and then you know something came along an idea or something that just kind of you went wow that is where we want to go um I

33:26 · think the idea of the putting course you know and really trying to translate um a golf hole into putting was really that moment that we knew okay this is going to be something special I mean beyond the physics aspect of it you know getting the physics right was was so key but it's then like you know you've got

33:52 · you've got this Ferrari and the last thing you want to do is drive it all day long on a gravel Road you know it's like we've got to find the Great Road that this goes on I think once that first first even hole was created in uh in a

34:09 · putting course and it was kind of cool because you know we were like okay here's a putting course and then Ryan would go in and and create a hole and we'd play it and we play it and we play it so many times and then all of a sudden it was like okay there's a new You Know download the new version and like there's three holes and you're like wow I get to go from the first hole to the second hole and then when you got to like a full course and it was time to put up a score it was like okay now all

34:43 · I want to do is beat everybody else and I think then the next one was kind of like the leaderboard and it was multiple leaderboards like we have a leaderboard for um like feet of putts so so I'll never forget the leaderboard came up the first time on the first hole on the beach course and the putt is I don't know probably 40 some odd feet something like that fairly straight and so I hit

35:08 · it and it goes in the hole and I'm like oh yeah top of the leaderboard and I turn around look at the leaderboard and it's like 79 feet and I'm like how is that possible I'm like on slack there's a problem there's a bug somebody got a 70 foot Putt and then I was like wait a second I don't need to go the most direct route to the hole now I got to get creative and go how can I send it down the left side up the bank around let it come around and go in the right side of the hole and I was like Wow 82

35:39 · feet like top of the leaderboard and that sense was like okay now that creativity engulf that comes into play that you hear so many Pros talk about that they're so good they just get creative with their shots that came into play and that that kind of like poking

35:56 · the the bear like you know okay I'm at the top of the leaderboard and then you're like oh man I was in there for like three hours the other night trying to get the top of the leaderboard and Jason just took it from me like oh I'm back in now you know so I think the leaderboards was that kind of next moment where it was like oh yeah I just

36:15 · I need to own that thing you know so you're going back and back and back and back so there's there's been a number of those those moments that have been really really great throughout this that uh I I I think we'll we people will definitely pick up on those um and see how much how much fun we had developing them and how much fun they'll have actually being able to play them yeah for me I currently hold the high score for the waterfall on nonpr version but that was the one I was telling you about that I got it in in two so I was I'm

36:48 · still number one so yeah great thanks so now I got to spend three hours tonight knocking you off that leader board I appreciate that yeah so fun though because it's like like you said it's uh it's not just like you know you could play the the same hole multiple times it doesn't get boring because you can find new creative ways to get there and I think that's that was the killer feature for me which was the dynamic way of playing the game yeah yeah and it it really comes into play too when you you start getting into multiplayer because

37:17 · you can be sitting there going okay just like real golf it's like okay I'm two holes down that impossible shot I need to pull that off right now and when you do the reward is so big you're like oh my gosh I'm back in it now you know I did I I that that little tiny thread of

37:38 · a needle that I needed to just get it onto that certain section and I did it and now I'm like only one down or I'm one up now it's just it's the best feeling but knowing that there's so many options and when to play those options you know especially when you're playing multiplayer player it's like when to hit the gas when not to hit the gas and that's golf essentially you know that's that's that's what's going to give one

38:04 · person you know making early plane flights out of the tournament and the other one raising the trophy at the end you know is making those risk reward decisions and there's tons of them in prop put that's for sure so are you working with like the built-in physics from the game engine or are you kind of rolling your own or maybe a little bit of hybrid um no this is this is ours you know we really kind of developed this over the course of our first two iOS apps um uh Golf Scope and simply putting

38:33 · you know and it really was we looked at everything that had kind of preceded Us in terms of digital golf balls and kind of came up to that conclusion that nobody had gotten it right nobody had gotten it where you feel like you're hitting a ball and it's rolling like a real ball and all of that and you with

38:54 · that kind of you know hurdled to climb because nobody else had really done it right we kind of just set off and said no we're going to do it ourselves and it was really important that we used everything we learned through our iOS apps and translated that into VR because especially in VR when it comes to putting it's so important you

39:16 · know when if you think of it this way when you get up and I think this is why golf simulators work for everything except putting I mean when you get up on a t box on a golf course and you're on a hole that's 450 yard long you don't sit there and have to understand every five feet between you and where you hit your driver at 280 yards okay you know okay

39:42 · there's the Fairway I need to hit it straight and it needs to go 280 yards but I don't need to understand you know how it you know how much wind resistance it's going to have because it goes past those four trees on the left I mean Bryson D Sho might want to know that but most people aren't that way and so a TWD

40:05 · representation of that works perfectly so that's why a simulator works for playing from T up to the green but in order to truly understand what you need to do to put a ball 20 ft

40:22 · into a hole you need to get something that is close to feeling all of the elements between you and the hole meaning what that what speed that surface rolls at the undulation for

40:37 · every inch along the way and the only way you can do that is truly in VR you know we do a couple of different things in a prop put one of them being teleport to be able to move you around so literally you can go to the other side of the hole and look at a putt from the other side of the hole before you hit it like you would on a real Golf Course or go halfway down the putt line and go okay this is where it's going to break this is the feeling I get at this point in time you can't do that in a 2d realm truly where you get a sensation of what

41:08 · the ball's going to do when it rolls past that point so that was uh that was very keen in the physics that that it became that reality and and and in VR we think that we really you know were able to nail that or it you can treat it as

41:24 · you need to treat a putt with that feel um Incorporated in putting and giant mode too of course oh of course giant mode yeah so I can imagine building such a physics engine and just getting the feeling right is already a huge challenge but besides just a physics um VR in general is a relatively new field hasn't been around for that long um have there been any pain points or things you'd say um um were major

41:57 · pain points When developing for we are specifically the shorter answer of that is no um other than just having to kind of unleash your mind in a different way um especially when you're you're in in ux and UI you're sitting there and so used to dealing with 2D space um that

42:22 · you now have that great opportunity to do things that aren't possible um you can't reach into the screen of your computer you know but in VR literally you can reach forward and touch something so I think one of the biggest challenges was just sitting there and and reiterating on that

42:44 · ability and always learning that we have all this space that you can put things you know it's you're not like think of an iPhone you know you've only got so much screen space that you can you know put UI on there so in VR you have to

43:03 · kind of like relearn yourself and go hold on a second I don't have what's just in my field of vision it can be off to the side and back here or up high or on a mountain side or anything like that like you can put something you know 150 yards away that's up there that will come into people's view at interesting times or they can turn to it you know so

43:31 · I think that's one of the the things that that we learned very quickly that you know hey we don't have to operate in a in a rectangular or square space we can just kind of operate anywhere I think you also get the um benefit of using sound and also haptics which you

43:49 · don't get on mobile phones or anything like that just like where you can like trigger a noise and just subtle enough to where like the user does doesn't even have to see it they can just understand what's going on just by feel like you know I can be putting and just you know hit the trigger the ball can come in I know when my club touches the ground like there's so many like non visual things that just make the experience that you just you just can't do with even a controller yeah and I I think especially with the quest with the spatial audio as well you just you even

44:20 · though you're looking One Direction there's so many things happening that just fill in the the the blind spots that just immerses you in it all you know I mean VR is is so immersive onto itself and so 3D but that audio as well

44:38 · that just kind of fills in the blanks behind you that you know that two seconds ago I turned around and there was a bird flying overhead and I the waves were lapping against the beach there I saw that but when you hear the audio behind you it fills in the blank that it's still there even though visually it's not and I think that that's really really key for for VR and another thing that we we dealt with as well is really you know developing the audio in it that that that made it so

45:10 · engaging even even sounds that you never would have used usually in a in a in a video game on a on a console or something like that that needed to be done so that they really affected you emotionally like the the sound of when the ball goes in the cup is is quite a jolting sound and it it emanates out and

45:35 · it just adds to the satisfaction that that ball went in the hole because it's such a grand big like just final like you did it sound um so that was really key that things like that had to get right so are you guys developing for multiple headsets too or just targeting a quest at the moment um you know what it's it's it's been all about the quest

45:56 · right now but uh you know who knows what what happens in the future you know it's uh we want to reach the biggest audience you know to grow the game of golf like we want to grow the game of golf um you need to reach as many people as possible you know and so if there's other platforms that uh that make sense for us

46:17 · yeah absolutely if that gets us to a bigger audience 100% so cuz I guess it wouldn't be too hard to add devices cuz once you have game in VR I don't think it would be that hard to add other ones but that's was kind of more curious if like if you would run into challenges of like okay now we're doing psvr and you have different types of controllers if everything changes or if a lot of it stays the same yeah I I I mean the physics engine obviously will will stay the same I think the the biggest thing developing for another platform um you

46:49 · know say even PS5 looking down the road you know type of thing is that expectation by a user that you're using all of the Power of that you know platform so obviously with the quest um

47:07 · the processing power isn't you know as significant as some of the other devices just because you don't have supercomputers connected to it or you know yeah consoles or things like that so there there are limitations when it comes comes to developing on the quest in terms of you know processing power and Graphics so I think going to another platform you know the expectation would be that okay you know there might need to be start being some thought about hyper realism um again what we've we've

47:40 · developed and I think this was good for us developing on the quest first is if you're given all the bells and whistles and all the toys that there are out there to develop something I think you a lot of developers tend to lean on on the eye candy rather than thinking about the emotional aspect of it um and that's not

48:03 · what we wanted to do we definitely wanted to provide something that had an emotion so the graphics while we're very proud of them um aren't the the the main um Gathering point of why we feel somebody will really adopt and hold true

48:23 · to Heart prop put it's because the social the emotions the the feelings that you get that that replicate something that you've done in the real world in VR yeah and you know I think people may not really realize that when you're developing VR you have to like

48:42 · think about how you design the environments because you're not going to just like use like photo realism grab images of golf courses and grass because then all of a sudden it like feels weird and it's like but somehow low poly feels right and it's just it's it's funny how like it doesn't seem obvious you're like well obviously the best thing would be to look at an actual golf course but actually no like in VR it kind of feels weird yeah it's yeah I think a lot of people have tried um in VR platforms or or devices that

49:14 · aren't connected to a supercomputer to try to go really realistic in the graphics and it just comes off as incredibly unrealistic and then it just in evades that VR experience because you're like I'm trying to get something that I think your your brain in VR a lot of times tricks you you know it fills in the blanks and things will happen that your mind will kind of unlock Sensations that aren't there I'll never forget one of my

49:46 · after I had my horrible Gran Turismo experience the next thing I did was in psvr again called London Heist and there's this pointed in London heist where you're in this Lorry and you're going down like you know whatever one of those highways are M6 or whatever it is in London and uh like I are coming by on

50:06 · motorcycles and shooting at you and the guy's like grab the gun out of the console and like start shooting and one of the things you could do was you could open the door and stick your head out of this moving truck and look back and start shooting at guys I'll never forget

50:23 · opening that door say my head out and I swore I felt the rush of wind coming across my face and I had to catch myself I was like what and I was talking to some other people and they were like oh yeah I felt the same thing so it's like you don't need ultra realistic Graphics

50:42 · to fill in those blanks of Sensations and I think that's the mistake a lot of people tend to make in vrs they're trying to make it so real and it just doesn't get there yet I think eventually it will but uh no for us it was it was

50:59 · more about filling in the the sensation blanks And the emotions you know and the you know owning a style too you know yeah I also think The Uncanny valy plays a big role in this because um if you try to go too realistic but it's not completely There Yet the brain will just spot the mistakes and just going to feel weird but with low poly it obviously

51:23 · doesn't look like the real world but the brain is able to understand it and therefore translate it and attach all the feelings you would have with a real object to it yeah yeah almost like the feeling like you know your avatar in VR becomes your avatar in virtual reality and it's just there's that feeling that like I still catch myself like months

51:43 · and months and months like almost a year after I've had my headset like every time I'm on a cliff like I still catch myself like feeling like I'm about to fall even though like I know for a fact like the ground is right there like happened in you prop put and a couple other games like it just your brain just can just slip out of reality so easily um but like you said if the game is not built correctly like it'll break you out of that immersion pretty quickly you folks obviously have a built up quite a

52:11 · bit of expertise and experience building VR games comes to sound physics graphics and just the overall development what advice would you give to somebody who's totally new to VR and like to start to build something is there something you could say that's the one advice I'd give to somebody new I think to to pick one of two paths and that would be a to try to replicate

52:42 · it's this is this is going to be a a funny thing funny exercise to do but to build into VR is whatever you're wanting to build okay and let's say that's a sale saing app okay so I want to build the best sailing app out there and I would to do that in VR my first thing that I would suggest you do is close your eyes and start recognizing everything that you

53:13 · feel in sailing rather than what you see in sailing like that's where you start so if you're trying to replicate something real close your eyes and then start developing from that sense of taking away the visual aspect so the sounds the smells you know even though you're not going to smell something there your your nose your old factory will fill itself in in VR so develop for all the senses minus visual first and

53:46 · then start adding the visual on top of that so that would be from from my advice in a real sense the second one would be do not limit your mind as to where you could take somebody truly so I mean you can take anybody anywhere take them

54:09 · inside your mind and develop from there you know we all can have dreams and we all see things when we close our eyes or we Vision things that that aren't reality you can make them reality and you can let people's as as much as you

54:27 · think about them and your skin tingles or the hairs on the back of your neck rise when you think of them you can do that to other people you know you can make them see what's inside your mind so never limit it and bring people in so I think there's two paths that you could take in VR that that definitely are going to bring a lot of enjoyment and entertainment to people that's for sure seems counterintuitive to not develop for vision but yeah that totally makes sense um so how is it developing for

54:57 · people that haven't used VR before like you know I know you talked about maybe having like a a go top golf Lounge where they can try it out but you know some of these people are going to be the first time ever touching a VR headset but then you have other people that you're targeting Gamers who do know how to use VR so what's the experience with that where you're trying to create controls and experiences that are unique like that I think that's one of the the the

55:23 · difficult things when you know it's it's like the let me take you back to the Wii okay is the beauty of the Wii is if you were bowling you looked at somebody you said that never that doesn't play video games they go well what button do I push and you went you don't swing it like you would a bowling ball and then somebody would go oh okay and then they could play like

55:49 · you you put something like a fortnite or something into somebody's hands and it's just a bunch of of buttons and somebody goes I have no idea what to do and it becomes so daunting and it becomes such a learning curve and such an effort to

56:05 · even play let alone compete online you know and I mean that's I'm not a big multiplayer online person when it comes to things like fortnite or Call of Duty or stuff like that because I'm just tired of getting like head shot by some like 8-year-old like the second I respawn it's like okay I'm laying on the ground the whole time this isn't Fun you know and I recognize that I need to put so much in so that I can last even 4

56:32 · seconds longer than I did for the last month you know and then that's going to take me a month to get to the next eight seconds and you just go it's too daunting um so I think one of the the difficult things with with the quest A lot of times can be and you know just

56:50 · seeing people for the first time holding it because first off you're in are so your face is covered so when you say to somebody pull the grip trigger you know which is this trigger on the side of the controller you almost have to grab their hand and go this finger this button and push it in for them and they go oh and it starts taking a bit of muscle memory to understand it now the majority of the

57:15 · the demographic of a quest user right now is a gamer so they know what a controller is and they know how to learn button positions and things like that quite quickly but if you're going to get to a mass audience you need to limit the amount of buttons now the quest has done it quite well and it becomes quite intuitive and their onboarding when you first put on the quest is is quite good but Translating that from different game to different game is tough the beauty of prop put is

57:45 · once you kind of activate yourself it's basically the trigger is going to activate the ball or you Orient yourself is the trigger is going to activate the ball you putt you pull the trigger to follow it or go to your next putt or anything so there's not a lot of buttons that are there it becomes very much like the Wii in the sense of like do you know how to hit a putt yeah do that motion

58:11 · and they hit it and the ball goes like oh I hit it and you're like yeah and that's it so I think that's that's one very special thing about prop put that'll allow um new people into VR to Gras grasp a game that they can you know pick up very quickly and go okay I don't need to learn you know all these button Combos and stuff like that in order to play this thing you know so taking this even one step further have you um to uh

58:42 · have you looked at hand tracking Oculus is now starting to support like not having any buttons in the game so uh yeah it's it's something we've kind of played with I think um um more from a side of like

59:03 · novelty um type of thing rather than than anything else um it's it's new for them as well so I think if it came down to us doing anything with it I think one important thing even though the quest controller doesn't weigh a lot The Sensation that there's some bit of weight in your hand when you putt is important so I don't ever see us like getting rid of the controller completely and like just putting with your hands together um I I think for super golf

59:36 · enthusiasts you'll see them doing that in the middle of an aisle at Home Depot but it probably doesn't translate too well into into a VR game so the any bit of weight is good I think where would come into is being able to do any sort of um you know menu you um you know

59:56 · access or option selections or things like that um that we would you know possibly look at it there but who knows you know our our minds are Unleashed so it could be something that we we discover that that people enjoy doing that you know I mean eventually maybe it's one of those things to get ultra realistic you know most Pros when they go to hit a putt they read the Putt and

1:00:22 · the last thing they do is they have a whether it's a line or it's the Titleist logo or something like that on the ball they take that and they line that logo up exactly on the line that they're going to put so when they get over the ball and they look down they don't have to rethink it it's like okay I'm lined up I need to like align my feet my shoulders and I need to stroke it exactly on that line so I could see us where you know maybe in the future you actually took the golf ball in your hand

1:00:52 · with the hand tracking and kind of like put it down and like manipulated so the line the logo was exactly where it needed to be and then you could get over the ball and hit it so things like that I think could be interesting in the future where hand tracking would come into play yeah I actually do that one quite a lot when I'm playing physical Putt and you know like you also kind of like sit on your Club so you kind of look down the line and yeah there's a lot of things that you don't realize you do the great things about releasing um your your game Into the Wild is uh is

1:01:25 · people are going to start finding out what they like they're going to start telling others about what they like they're going to start doing it a lot more and we can we can look at look at all those things and listen to all those comments and start developing it even further um I think a perfect example of that need is what's happened um currently in Sim racing um you know before before

1:01:52 · everything that that hit us as a Society hit us I mean you very few people in this world that are di hard NASCAR fans or especially Formula 1 fans would ever sit there and go yeah I'm going to spend a Saturday afternoon watching Sim racing and you know what now hundreds of millions of people do that each week and

1:02:18 · religiously and what they' they've seen is that the reason why they're watching it and believing in the realism is because you get a a driver like Charles ler Orlando Norris or George Russell or these guys that are on their simulators and that wheel is about as realistic as

1:02:41 · it gets and it's physical and if you hit a a burm the wrong way it's going to twist your wrists off and then you realize that that takes all of that talent to to manipulate that wheel and go through the gears and all of that rather than just using a joystick and the realism comes into play for everybody so I think there are going to be that opportunities going forward in any sports game in the digital sense that that link into something in reality

1:03:15 · that even UPS the Precision that you need to have to compete at a level then I think that'll be important you know and uh we'll definitely be in position for making that move at the right

1:03:31 · time how has the beta program been so far when you know I think you guys have Discord and some other ones like how's that been working with people that like you said maybe golfers maybe Gamers maybe yeah I mean I have to give a major shout out to to our beter testers they were just truly an incredible impressive bunch of people people from everywhere all over the world I mean they they really gave us

1:04:02 · insight into um things that we weren't looking at um they really praised us on ideas that we maybe jumped a little far ahead and were wondering how those would come out um I mean they they played it senseless I we've got this this one guy down in Naples for I it is truly amazing

1:04:26 · the amount of prop put he played through beta it was and the feedback that he gave us and just stuff that we really like took to heart and and you know Incorporated in the final product but it was a they they were really really special to to give us that amount of time to to shape this and and they are

1:04:49 · they are definitely the the 12th man on the team um for sure when it comes to what you'll see in the in the Oculus store in a couple days so um prop also supports a multiplayer mode where you can get paired up with our players uh which are a similar skill level um how are you dealing with the well-known chicken and act problem where nobody can get paired up with somebody if there's no players but nobody is trying if there's uh nobody who can get pair up with yeah it's well right now when

1:05:22 · you've got a small beta group it's a it definitely is challenging so it's it's kind of you know a range of time which has been awesome because we're like okay we're going to try this at this hour and you know people show up and they're ready to go and they're ready to go like past what my stamina is so it's like wow

1:05:40 · like they played for that long like that's awesome um you know when it's when it's live in the store you know it's G to it's going to come down to how fast people are downloading and getting to that point of of wanting to play multi player I mean one thing I want to stress is it's it's a social experience unlike anything out there for sure I mean it's just it is really it's so

1:06:06 · personal it's so social it's so emotional that it's like man i' I've played a lot of multiplayer experiences both in VR and in you know other digital Realms and it's I'm not you know patting us on the back that much or really trying to promote our product on beyond the truth and it really is something special when it comes to um playing you

1:06:30 · know multiplayer and prop put but uh if there's not somebody else to play with there's always the bot um so you have multiple levels that you you know he'll difficulty that he'll play at or she'll play at um and uh I'll tell you what

1:06:46 · there's some times where you're like and what's I think really good about our bot as well it never feels like there's programmed responses like if I choose easy it's not like okay on that hole he always plays that hole the same no it's

1:07:03 · not I mean I've seen on easy on some holes where you're like oh there's no like I can't make this on easy he's not gonna make it and somehow another he makes it you're like whoa and it also doesn't feel you know FIFA went through I think FIFA and Madden both went through a phase before AI really was you know what we know AI is and they would affect some things that would change the

1:07:31 · kind of flow of the game so if all of a sudden I was up by a ton in Madden or FIFA all of a sudden it was like like in FIFA I couldn't tackle somebody or they were running faster than me or they was like where do they get this superpower like 78 minutes into the match it's like come on this is so unrealistic it was just to keep it close and and interesting um with the bot and prop putt you never feel that you never feel like okay well now he's got superpowers

1:07:59 · and he's coming back it's it feels you know many people will say this about a bot but it feels like it has personality and it feels like it can make decisions um and that anything is possible with it so uh you know I've seen it take some routes that you're like really like yeah that one you know and I've seen other things where it's like okay I've got this guy all of a sudden it's like and it's I think what it is is not so much the bot is playing

1:08:30 · better at that point in time but you're starting to beat yourself just like in a real golf you know you're you get your confidence is high you're like a I can hit every shot and you know your buddy is like um you can't make that 220 yard green with a nine nineiron oh I could do

1:08:48 · anything today you know what it's in the water every time you know so I think what happens more often is that your confidence gets high or your nerves get to you and you start making the mistakes it's not that the bot is actually getting better so uh so yeah it's uh We've solved that if you if you want to get out there and play with somebody that that that dude's always ready for for for a match and you put him on a hard or Pro and you could really be in

1:09:17 · for some misery you got to be on your on your game every shot and so it's it's fun well I think like you said I think something you guys nailed was the multiplayer aspect and for me I I had such a good time playing the game because there's something about like you know a lot of these rooms like big screen and VR chat and ALT space where

1:09:42 · you're just sitting around talking but there's something about like talking while you're doing an activity that I feel like really lowers the threshold for a lot of people that maybe are socially awkward or have a hard time um talking with people whereas when you're doing an activity you really start to open up because you're having to focus on other things and um I think that part

1:10:02 · is super cool and then so with that you know it's a double-edged sword how do you guys deal with you know spam and abuse like so let's say you do have a a person that is a bad egg that is you know harassing other people yeah I think uh it's it's one of those things that I mean obviously we haven't had it yet um

1:10:22 · so I think it'll be a little bit that we we'll have to deal with it as it comes I think I think those people exist in the community kind of ostracizes them pretty quickly and they realize they're not getting to anybody and then they'll go find another game that they can do it in um there's nothing really in prop put that that really promotes somebody being

1:10:51 · that way you know where it's like you know it just you get in there and you feel like okay we're all here to have a good time and compete and stuff like that now if we start doing tournaments people are going to get serious you know um you can always mute somebody you know so you don't have to hear them if they're they're talking a certain way I mean we've all played with a golfer that just has a horrible temper you know and it's it's kind of funny how expressive the putter can be in uh in prop putt so

1:11:21 · you can get a sense of that what a bad day somebody's Happ by the way that they're waving the putter or smashing it into the ground when they miss a two-footer um but as as far as the abuse side of it you know if if if somebody's obviously getting out of control then there's there are different ways that we can deal with that so um I think VR is a

1:11:43 · pretty good place to uh place a few Easter eggs here and there uh does prop put have uh some hidden Easter eggs to explore and to find well Norbert I'm going to answer that question quite easily and quite complexly at the same time yes nice they are there um there's some yeah there's some great things always if I can give you this one word of advice is

1:12:12 · giant mode is very keen not only for seeing where you need to go on a hole um something you know it comes in very early on a hole three on the beach course you know it's your third hole into your campaign where uh it's a par four and you need to get up in the air and really see where you want to leave your t- shot um but going into giant mode can also put you in places where there might be Easter eggs um and then you know just tap your

1:12:45 · putter on a lot of things you know everything is is engaging you know and interactive in it so just go around just beating things with your Putter and uh ni that's good advice some some point in time something might you know pop out at you nice nice well Jason we' just like to thank you so much for being on our podcast today so where can people find

1:13:09 · um information about prop put and follow you on social media yeah so we're on you know all the social media platforms on Discord um you can go to prop.com um that'll show you the trailer and a bunch of the features and you know take you all the special places at the same time and then uh you know it uh you've

1:13:33 · got an A Quest head into the store uh today you can see some screenshots and read some descriptions and watch the trailer and things like that in a couple of days you know either jump into your Oculus app or jump in your headset and click on Prop put and download it and and meet us out on the course you know if you're looking for a real challenge you know go on YouTube um I'll kind of

1:13:59 · reveal to everybody um there's this character on YouTube doing prop putt videos his name's smooth ketchup you'll see him at the top of the leaderboard a lot of times as well that's me so bring it on yeah I'm ready for a challenge just uh

1:14:16 · smooth catch up in in in in in friends and invite me and uh we'll go head to head you know but uh nice but smooth smooth will R you when you're down I'm Gonna Knock You down even further so uh be prepared for the banter that's all I got to say so really you're saying that uh by building the game you're just finding a way to compete with everyone in the world so absolutely that's that's it you know

1:14:48 · that's well uh make sure to you know look in the description and show notes for for all the links that we link well we've been talking about um thank you so much again Jason for being on and um we hope to see you in the next episode yeah thanks a lot guys really had good time [Music] today

Flutter Testing and AppStore Rejection

Tue, 07 Nov 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Flutter Testing and AppStore Rejection

Description

Follow Up

Rody experiences with apple approval
Rejections
Recourse
Options
2 million people using flutter

Testing

State management and testing trade offs
UI logic and replaying capabilities
Logging
Mocking
Smoke Tests
MVVM
Firebase
Filesystem
Folder Structure / Layers
Packages that can be tested
Code Coverage "flutter test --coverage"

https://codemagic.io/start/ https://sentry.io/welcome/
https://pub.dev/packages/mock_cloud_firestore To visually run widget tests: flutter run test/widget_test.dart Suggested finders: Just tap anywhere when running a widget test using flutter run
https://pub.dev/packages/device_preview

Logging

Sentry
Crashlytics
Flutter Testing
Best Practices
Flutter Driver
Unit Tests
Flutter Octopus
Flutter Interact
Flutter VR Testing
Xcode testing, Android testing
Flutter i18n Localization

Norbert Kozsir - @norbertkozsir

https://twitter.com/norbertkozsir

https://github.com/norbert515

Rody Davis - @rodydavis

https://twitter.com/rodydavis

https://github.com/rodydavis

https://youtube.com/rodydavis

https://rodydavis.com

Our podcast player:

https://rodydavis.github.io/creative_engineering/

Follow on Twitter:

https://twitter.com/CreativeEngShow

Transcript

0:00 · welcome to creative engineering with me I have my co-host sbert today we're going to be talking all about testing so how have you been recently I've been great I don't know how it's um for you but quarantine time flies like I don't know like since the last episode it just failed like was a few hours ago um how's

0:18 · it been for you yeah I uh I definitely have the same experience it feels like you know every day is a Saturday so it's like you Monday starts and then oh it's Saturday again and then it feels like uh I feel like I'm getting a lot done but at the same time it just you know if you're not careful it just you uh you really start to yeah time really flies that is true um in one of your recent tweets I've seen you had some problems with apple and one of your test Labs um do you want to share your story yeah so

0:48 · this has been um something that's been pretty difficult like over the course of like more than a year I created this uh flutter application that allows you to to control real Tesla vehicles and it was super cool I uh I've been using it every day for over a year been constantly improving it um even worked with my sister to be able to do the animations for it she created it all in RVE and you know hooked up all the um different nodes to be able to like animate any part of the car so yeah we

1:22 · we've sunk a lot of time into this but yeah so I got the result from Apple saying yeah we're not going to move forward with it we're going to reject all these updates because we feel that it is in violation of our policies and so by appealing multiple times um I keep

1:42 · getting the same person and multiple times they keep saying um that they have changed their guidelines to where they're not allowing people to release applications that control Hardware that is not made for the manufacturer which was crazy and I was like well maybe they're just meaning cars but when I asked them they gave me the example of well a developer cannot create an app that can control a Samsung TV and them not being Samsung and I said that was

2:10 · kind of crazy and there's a ton of apps that are doing this like are existing applications going to be able to get updates and they said uh they weren't able to comment about it and so that was really frustrating um as well as you know there's many other third party Tesla apps on the App Store um and my goal with mine was to make one that um was focused on UI and user experience because I felt like a lot of them had some stuff I could improve um but yeah

2:37 · uh they have said you know we're not accepting any new applications that will control hardware and the only way that I can get my app approved is if uh Tesla explicitly gives me a letter saying that I can exist on the app store which of course this is a owner API meaning that you have to own a Tesla car to be able to use this API anybody with a Tesla app

3:01 · um has to have access and log in with credentials so yeah um one thing that could help is if Tesla has an official ooth you know guidelines but based on the post I made on Reddit I feel like there may be something bigger going on especially since you use your phone app as a phone key Tesla may be working with apple directly to uh take down some third party applications or at least prevent new ones so that's uh something

3:28 · pretty interesting um people have definitely been bringing up some areas that I wasn't considering for uh before but you know it's uh also just part of this process has just kind of taught me about like how to deal with rejections on the App Store because for me I'm am thankful that I have a ton of users on Android even though I don't personally use it on Android and then I also have a lot of people on the test flight um but it really things like this really pushed me towards U pwas all the time I

4:01 · absolutely love the App Store be able to do a lot of things on there um you get to do a lot of you know offline access and of course you can do this with PDA pwas but there's areas in which Native applications can just kind of get more raw performance out but at the same time

4:18 · one nice thing about the web is that it's open and then that anybody can release an application you know there's no gatekeeper um yeah and it just has really started to pushed me towards you know making apps for the web first and then for the App Store second um one

4:37 · caveat with this is you know desktop you can release outside the app stores which is really cool and I think that's an awesome feature of it but yeah I just curious your thoughts on you know gatekeeping and if you've had similar experience with Google Play yeah like it really sucks that um you can't do too

4:56 · much because the App Store is the thing people are using like are there are options to distribute apps on iOS or is it exclusively App Store yeah so when it comes to you know releasing other applications the only real thing that you can do is um you know have like a

5:15 · Enterprise profile which they've been really um you know cutting that down recently because if you release an app uh with a provision profile for example on the App Store the only way that they can install it is if they go and install the profile directly and then they get access to the app via a link or whatever but um I know there was like a class action lawsuit against them recently about the fact that you couldn't install third party apps Sid loaded so yeah it's

5:44 · it's pretty interesting um one of the reasons why the app store is so protecting of this is because you know they want their their cut of all the sales so if you're on the app store for example you have to abide by the guidelines which means that you give like 30% of your inapp purchases you give 30% of your subscription cost and

6:06 · yeah you're not allowed I don't know people know this but when you when you have an inet purchase you're not allowed to use stripe or PayPal you have to use the app store um purchase for this same for Google Play but because of this it means that um they get a cut of everything which is fine you know they're hosting the App Store and all this other stuff but it still kind of stinks that there's no third party option because sometimes there's just applic that exist in the world that you know I

6:33 · get it there's going to be malicious apps out there always apps can be abused but there's always going to be apps out there that don't really fit the mold and you know are community-driven apps like for example like what if you're your favorite or I had a Honda Civic at one time so one thing that was crazy is like after you know it was like a 2014 or something and then when I got the car

6:57 · you know the next version supported carplay that same model could have supported carplay it has the same Hardware but they chose not to update it it's not like a Tesla I can't just get in over the a update and in those situations I feel like after a certain amount of time they should allow like open it up to let you do anything um you know like a

7:17 · developer should be able to just install stuff on it U when it's unsupported for example like on Mac OS and iOS I think it would be really cool is like when Apple UNS supports an iPad or an iPhone I think be cool if then they they remove the Restriction of only installing app store apps because think about how many apps you download on the App Store like on iOS on an unsupported device wouldn't work almost all of them require the latest so being able to like extend the

7:44 · life to be you know okay well we can just install any application and of course you know you can always install stuff directly from xcode but I just think that there's a bigger market for this kind of area of applications that live out outside the life um of the device yes yeah talking about the um not

8:05 · being allowed to use stripe nor payment platform wasn't there a big thing with Spotify I think where they were using some sort of third party um payment service and apple really didn't like it or yeah so well Spotify yeah they had a

8:22 · really big problem with that it's um specifically their guidelines are about offering a subscription that goes outside the App Store you're not allowed to link to that subscription website you have to offer that subscription um via a link uh via the

8:37 · appstore purchases inside the application which really sucks but what's interesting is for on demand video services like Amazon they recently changed the rules that lets you if you have a subscription like Amazon Prime they're allowing people to sign up for that subscription um inside the application which is kind of crazy that's never been done before this is also the same reason why Amazon Kindle you can't buy books on the

9:03 · IOS app you have to go to Amazon website which it doesn't link you to and you just have to kind of like figure it out that if I buy it on the website then it'll work on the mobile which this is interesting this doesn't apply to PW so I can have a pwa do whatever I want on the App Store and install it to my home screen but the second that it's inside the App Store um I have to abide by all these rules so I'm very unsure about this but wasn't there some problems with pwa on iOS too like that iOS doesn't

9:33 · support or will not support pwa as much as they should or am I Am I Wrong well it's kind of funny because at the beginning of the App Store Steve said that all you need is pwa um you know all he said that everyone would just need websites and that'd be enough this is before the App Store existed so to

9:53 · they've always had this approach but then when the App Store launched they kind of started changing their mind but I would say that I has pretty good pwa support you can do all your offline stuff your service workers and um I've had pretty good experiences with it um there are you know obviously edge cases but um it may not have the latest features as Chrome but I know that they they do support a ton of pwa features in fact I filed a radar once and about a pwa not launching correctly with ooth

10:23 · and they had that bug fixed within you know a day or two so I definitely know there's a lot of to development on PW and Safari interesting good to know so um have you heard Flur just passed 2 million people developing with Flur which is big news is that is crazy that

10:44 · is so many people that is bigger than most countries which is nuts yeah I uh and also I think did you see there was like 50,000 flutter applications on Google Play yes like 50,000 like that that's a ton yeah that

11:01 · would be cool to have some sort of section in the Google Play Store made with Flor or something like that that would be cool that would be really cool um yeah and also I think it' just be cool to have a a conference with 2 million people that'd be awesome as well I wonder how much of that is China

11:19 · though I don't heard too much about uh FL in China but I think the community there is actually pretty big well you have people like alib Baba and I'm if I'm not mistaken they have like over 150,000 employees and stuff like that but I know that they use flutter for their applications and yeah I think I

11:36 · think China is at least maybe a third of that I don't know I could be wrong could be could be yeah and then also an interesting fact about um the survey was that 80% of the people are using Windows that was a shock to me yes like I was of course people are using Windows yeah yeah yeah it's um it's pretty

11:58 · interesting though um crazy to see how flutter is evolving too I mean these were definitely not the same surveys that I remember uh when they came out I think when flutter was first starting Mac OS definitely had a a bigger share of those people using it oh didn't know about that by yeah maybe but yeah I think like the mass of the people is using Windows because Windows is just working on so many different device like for for a Mac you have to have the one

12:26 · from Apple well the only thing that reason why I thought it was more mac users would be because um Mac OS and iOS both require a Mac and that's two of their six platforms so I thought that maybe there would be a lot more um but yeah I guess uh the thing to counteract that is there's a lot more people using Code magic now to be able to release their applications and a lot of people don't need a Mac when they're using flutter that's true that's true talking

12:54 · about code magic let's get to our next topic which is testing um okay so first off um testing State Management and the tradeoffs uh regarding the stability you what are your opinions yeah so I think when people are first starting with flutter applications they may not re think about

13:16 · testing in mind when they're creating these applications um one of the things I always like to do is you know it's not always about choosing the quickest solution it's about choosing the solution that can be tested scalable and that other people can come in after me and be able to work on this code um there's a thing called test driven development where we develop code you know testing and then kind of iterate upon it but um yeah I think there are

13:43 · many State Management Solutions out there and they all have their tradeoffs and their advantages for testing for example um not many people know this but if you use Redux you can time travel so when you're testing you can actually replay all the events that the the user is made up to that point which I think is really cool uh block has its own testing Library which is really nice so you can mock different um data as well

14:08 · as you know you have um provider which can if you you can you know mock out all the the the trees and stuff like that but you know when it comes down to writing your actual code I think the biggest thing is you know for me it's folder structure so if I have my you

14:25 · know my data layer and my different layers on this side of thec I'm have my UI folder I know that I'm going to be writing widget tests for the UI folder and then unit tests and everything else for the other folders and layers because you know if if you're not careful you can kind of start to put a lot of your your logic inside of your widgets and

14:47 · while that's fine and easy to do it can be really hard to kind of break that out and start testing individual core functions to make sure that these functions are working correctly and as expected yes talking about full structure so I see like mostly two camps of people the one Camp who's um um

15:05 · separating code by whether it's UI where it's logic where it's models and there's the people who separate code by the feature like if the code belongs to the same feature it's in the same folder what do you do yeah I I do I have a UI

15:22 · folder which with different screens and then subfolders I mean and then I have a a source or a folder which in each one of those I have a classes models I have blocks and I try to separate it out by um feature for sure because like I have like an authentication block I have an editor block I have a settings block and each one of them are scoped to a specific thing but at the same time they're not so specific to a specific screen um I have some seen people use um

15:55 · blocks or different things to have one per screen which is also pretty cool um I guess it just really depends on yeah how you structure it but as long as you have a standard and you just stick to it um consistency is really important yeah I'm doing something um similar so basically if something is one feature which is really scope to the feature I put everything in um one4 like the block

16:16 · the the services the UI the screens um having a consistent structure between those features too but if something's like uh globally available for example configuration off or something I also to put them some sort of a more globally placed folder yes and also when it comes to these tradeoffs too I think you know

16:39 · it's not just about testing too it's all about logging and analytics um as well as mocking so what kind of stuff do you use to like set up your loging because I know there's a bunch of different packages out there but I was curious what your approach has been um okay that's pretty interesting because I'm still trying to figure out um what the best way of approaching this is like what I've seen and what I've done myself um in the past two is um with the blog package you have all those events and you can register a block delegate which

17:10 · um listens to all of those events so basically all the event switches which the user is producing which is floting for your application you can just have a delegate which listens to all of them and does logging with that my main problem with this approach is you end up with mostly one huge class which there's a lot of logging lot of if else's and

17:32 · also um sometimes you have events which you just use for internal purposes and you don't actually want to flow through your whole login Pipeline and I think right now I'm more I'm going back to having the analytics in live in the block like of course not in the UI but just having it in the um block whenever some sort of

17:57 · event is coming in or a method is called what are you doing yeah for me I like to use a couple different tools so there's Lumberjack I believe it's called Uh logger and um this other uh package but the biggest thing for me is scoping out different type of log events so I have a warning an error an exception uh info um

18:20 · just a regular debug level and that way I can filter out my logs based on each one of those things um in the past I've even gone as far as to create you know a sqlite database that then stores these logs for the user so then I can even filter it based on the user ID so every time I do a new log event I just add it to a row in a table and then that way

18:44 · when a user clicks on a button like send logs like if they're sending feedback I can actually just grab those that data set from a query and then send it up interesting but what's interesting is um yeah you can also use use tools out there like Sentry to where if you wrap it you can then um run a Zone appap have you ever run a Zone appap in flutter yes I'm using Sentry all the time it's uh

19:09 · but Zone app is really cool because it's just part of Dart itself and it allows you to like anytime there's an exception you can actually you know intercept that as well as there's a flutter on airor so you can even customize your own error screens for flutter that's true yeah using it in most of my apps right now um

19:26 · just takes off all the exception handling which like you you would be losing those exception you would be having no idea what happens in your app and it's a great way to find out um weird things that are happening and you may not see in development yes uh for me before we had

19:45 · desktop my biggest you know bane of my existence was every time I ran my application on iPhone 5 it was like my application would just come to a halt because it was like the UI was so small that or is I think it was the iPhone 4 the iPhone 5 had worked but the iPhone 4 in landscape with the keyboard up was the worst that I ever had to deal with I think it was less than an inch from the top of the keyboard to the top of the screen wow yeah and I mean and then you

20:15 · have like you know when you have an app bar there like there's no room for Content so it's like you know uh I had many uh people complain like project managers and stuff like oh well the boss is using the iPhone before so we have to make it work and it's like man it's just like so my solution in those were usually to disable um orientation so it

20:36 · almost always be just a portrait app so that's what I see a lot of people are doing yeah it's it's pretty insane and then I don't know um if you've had the same similar experience on Android but for me I this is why I always wondered why you know on games and stuff and Landscape on the iPod Touch they would always show just an alert dialogue with a text field and it's because they're it's the smallest thing that you could use to that could be moved around on the screen which is funny interesting yeah

21:05 · um so so we talked about logging but what about when it comes to mocking um because I know that there's some cool packages I've used like you can mock the HTTP package so then you can you know as long as you uh follow the example you can then like you know intercept and say when I do a post request at this point I want to return this response and then so what kind of stuff have you done around mocking so most mostly for my blocks and

21:29 · for all service components which have some sort of dependency like a network dependency or something uh I follow the dependency injection principle and instead of creating a network class class or something um by myself I just um have a dependency on it like have an argument in the Constructor when it comes to testing you can use moito to

21:51 · have a mo class of that for example if we're doing HTTP requests I wouldn't even have to mock the actual http request because I'd be mocking the network class which has methods like get user ID and instead of then going through the HTP call I just uh return some mock value which is super cool because uh with moito you can also do of assertions for example that the method which um you think should be called once is actually called once um which is

22:22 · super cool if you have all these mock classes because you can just test your logic component by itself um and just just focus on the thing that matters what what are you doing yeah I was using that package too but the more you talk about the more I realize I'm not using it correctly so yeah it uh that's that's a really powerful one um for me I also

22:46 · try to mock out you know my Firebase stuff I know there's a couple different like mock fire store and um just different various ones for that but by using those yeah um and we we have links in the description but yeah what's cool about that is like I can mock out my test cuz you know sometimes you have parts of your application that maybe you don't have test for because it's code that lives in other packages and stuff like that and I think this is also another point which I wanted to bring up which is making sure that we're using packages that have tests so that those

23:16 · are individually testable because you may spend you know hours debugging your application just to realize it's a bug in a package uh I know the pain yes and I know I need to be you know we always need to add more tests for our packages so yeah yeah it's tests are hard because if you're writing code for the package itself you're seeing the progress you're seeing cool lights showing up on your phone you're making stuff but when you're writing tests you're not doing any real progress like you're being a good citizen like you're doing your tests but nobody's like a lot

23:50 · of people don't actually care that much about test and it's it's like in an interesting State like everybody is talking about how you should write tests but in reality a lot of people or maybe even most people are not really writing tests and it's always fun to see yeah well it's like um it's instant gratification versus delayed gratification I I when I finish writing

24:15 · a test Suite I do feel pretty awesome but not until I get them all running and debug all the issues leading up to that point because when you can't get a test working it's so easy to just be like yeah well I just want have a test for this but you know uh it that that to me

24:30 · uh it's you know with yeah you like you said when you're writing UI it's super fun and you can write fast you can break things but when you write test you you have responsibility because then now if I refactor the application the test will break and you got to make sure that all those things uh work out which is another reason why I wanted to bring up the um the layers because if you're

24:51 · writing your tests to where you're testing having unit tests you should be able to change your UI without your unit test failing um because all your logic should not be in the UI layer um which is a huge advantage of separating your application logic out um which I think a lot of people don't realize yes that's true like just having the um confidence that the layers you're building your app on top of are working um helps helps a lot

25:18 · like you know the network layer is always going to work the whatever refresh token is doing its thing the caching works and all you have to really worry about when it comes to refactoring is that looks pretty and and you can be sure that it is correct yes yeah and then also recently I've started to te mock like mock the file system and doing tests around that have you worked with that at all I haven't can you um tell us about about your experiences yeah so uh

25:47 · I found it first when I was using the local storage package and what's cool about it is it lets you test like mock like file systems directories files folders and anytime that you're using D.O you can actually use this and it creates a virtual file system that you can read and write files to and make sure that you can test to see if the

26:08 · data exists if it's updated and then that way you're not actually in a test actually updating any physical files that is super interesting I have some code right now which is doing some file system manipulation and changing moving around file so should probably take a look at this and write some tests for it yeah and it's super easy too and pretty much like it's a drop in solution to where you're just changing the directory I believe so yeah it's it's super cool so next what about let's talk about code coverage have you what do you do for

26:37 · your applications when it comes to that to be honest uh regarding code coverage in Flur I haven't done too much with that haven't tried too much um what about you what have you uh used it for and how yeah so uh for me I was really

26:54 · interested when I saw the graphs on GitHub and I just could not figure figure out like how people could even generate the code coverage so for me it was a lot of like just wow that's really interesting how can they explore the code and um discover this so I really wanted to figure out how code coverage worked but um through that I found out

27:12 · that flutter actually supports it directly um so we'll have this in the show notes but did you know you can just run flutter test-- coverage and it'll give you a complete coverage graph of all your flutter code and shows how much you have test for interesting how does it behave um with UI like does it also

27:30 · show the coverage of how UI have you have tested with all your widget tests or not sure I'm still exploring it but basically I it reads all your widget tests your unit tests and uh your integration tests and try and gives you a a a map that you can then use I think it's called lvoc to then generate a graph from but yeah it's it's super cool um I mean I think a lot of it's like fuzzy logic so U but for me yeah it um

27:57 · it's really really cool how in depth it it went super interesting I'll definitely have to try this command at some point yes and we will we will include in um in our open source repo of the podcast player we're going to have this uh code coverage that we're talking about as well one thing I also wanted to talk about is widget tests um regarding your experiences um for me widget tests are great like um you can run your

28:22 · widget in a simulated environment without having to use an actual device which is very fun but I always had this problem of when the widget test fails it's super hard to debug because there's no easy way to actually run the application all of its things like using HTTP and all that stuff and just debugging the widget test

28:43 · is super hard what are you doing what are you using it for how is your experiences yeah well to be honest I I always write my unit test first so widget test is like a nice to have in my applications mainly because my UI is changing so much much but I do write widget tests and what yeah I have a similar experience it is very hard to debug something that I'll say that makes it a lot easier is if you use keys with your widgets it makes it a lot easier to find those widgets when you're testing but yeah it is really hard to debug you

29:14 · have to really know the code inside it out to be able to write the test in the first place which I guess kind of makes sense but if you don't really know what you're doing it can kind of be confusing when you're like okay well I have this screen not really sure what state this the app is in at this point but I'm just going to go ahead and keep trying trying and failing to see what I get um doesn't isn't the flutter driver allow you to see your test running on a real device yes so there's two different uh kinds of

29:41 · UI test for FL you have the widget test which are simulate which run on your computer and they very fast and you have all sorts of different finers you can use because all the code is running in the same process on the other hand you have the driver test driver test run on an actual device and the test itself

30:00 · communicates with that device using a Json protocol basically sends commands to it uh finders and gets back the results um which is way slower it runs on a real device but it is the actual app like your whole app is deployed on the device and you can tap around um so

30:20 · for the problem with integration test for me is it's not as powerful as widget tests like there's a lot finders missing um you cannot uh get get to the data that easily and that's actually a bit of a problem for me because you have this place you want to have your integration test but also do a real test and with

30:43 · the integration test with the driver test you are very limited in some sorts have you used the integration test before um maybe once like uh and it was probably because it already existed I don't think I've written one personally oh okay the cool thing what you can do with the widget test actually is um you can visualize the UI by um running a command which I will look up and we'll post them in new show notes um but the problem with that is um normal in the widget test um calls to http I think

31:16 · also toor own and stuff are forbidden so you have to do some hacking to enable those and when I tried to run those tests there were more errors and failed assertions and stuff then it actually helped so it would be super cool if there was a way to um have widget tests which are actually visually visible and

31:38 · you can debug like writing test for UI without seeing UI is pretty mad if you ask me well isn't this where I could be wrong but isn't this where we could take a snapshot isn't can't you also take a snapshot of a render object and write that out to a file to see what the current state is at any time you definitely you can um I think it's always a matter of convenience and how easy it is because to take a snapshot

32:03 · you have to use the repaint boundary you have to have a widget in there you have to look at the file and try to figure out what's wrong and sometimes it's just some sort of finder just doesn't find stuff and you're like why why doesn't it find it it's there and sometimes it's just super weird to work on UI tests

32:23 · without the actual UI uh first in mind like uh it would be super cool if you'd have some sort of application which you could drop in a widget or your whole application tap around and it would generate the finer code and when running the test it would actually run the test or if you're running test in some sort of visual mode it would run the test in normal speed on that program and you'd see what is happening what is uh what is failing well this is actually where I

32:53 · had experience with when it came to you know when I first started with iOS this is something I really loved about xcode unit testing so one really cool thing is like you know when you have a swift file you can just create your know your your normal test uh widget UI layer and then you just at the very top you click record and then you open your application you tap around and then it will record all those and write all the code for you in the unit test so it'll write you know tap on this field wait a couple seconds fill in the data scroll

33:23 · up go to this widget tap this and it does all this for you um based on screen events and tapping around I even have done this with flutter applications too to where I'm in xcode it'll just tap on the screen it won't actually you know tap on like it won't give you like tap on UI label it'll just say tap on this offset but what's cool about that is I think this should exist we should either make this or this should exist in Dart because I

33:49 · was not afraid to write UI integration test cuz then I could just like you know just click record and then do log into the app log into the app with this account go to log in and then do this page and do this and then do this and the cool thing is then once you have the test done then you could encapsulate it into a method and then call those methods so I could say you know log in with this username and password and then I could use that function to change accounts um as well as you know you can

34:14 · just build these building blocks and I was able to you know flush out my entire application in just a day whereas you know it I don't even know how long it would take me in the flutter widget test to be able to to get the same level of um you know coverage um when it comes to testing for that I feel right now writing these integration tests and widget tests is actually more work than just manually testing your app that it's working uh yeah I feel like if we would have something like this and for a a lot more people would be actually testing

34:45 · and just doing this because just tapping around in your app and just uh like you're doing this on on the in the time when you're manually testing like if you have the same um the same process but write code for it and instead of repeating it by hand repeating by code without any additional effort um we we

35:06 · really need this in FL at some point and it should be possible like I don't see some technical side which would make this impossible like I think I had this idea a couple months ago and sat down for an hour and tried to hack something together um and I think uh in theory it

35:23 · was all going well and it should totally be possible to just load in your application tap around and then generate the code I think there is um a method in the testing suit I can't remember right now but it can suggest you finders like you tap somewhere on the screen and prints uh suggested finders in the console which you can use to find that element you're tapping on you could even use that you could even use that IPI we'll link this in the show notes um you

35:53 · use that and just generate the code when you're tapping around and just ass searching stuff that it's there and you have all the apis with the widget test and the cool thing with this is you could have the full visual mode when recording test but when executing test you could have it all headless and fast like you can be sure it's working um

36:14 · because you tap around yourself and when it's uh time to run it it's super fast yeah maybe we could um if we were to build this we could even piggy back off of the device preview package which then you could run your like basically wrap your material app with this this widget and then you kind of enter a testing mode when you're running it um speaking of which have you use the device preview package actually I just used it for the first time a couple of days ago and I am amazed like I was always hesitant because I saw the device preview um on

36:47 · the iPad I think on the um official GitHub page it shows it an iPad I always thought okay I don't have an iPad um and uh this application I'm using um doesn't have desktop support because I'm not on the master channel so I only have my phone and I was it surely must look weird on the phone but actually looks pretty good in the phone like it's all skate down but you have all the proportions all the layouts um done correctly and it's super useful for detecting um bugs on smaller screens are

37:17 · you using it yeah I've been using it um for a while now even um am store used it for a little bit but what's cool about it is um I guess I was able to get it run on Mac OS like months ago because um we had desktop support and what's cool about that is I was able to resize and

37:34 · free form any type of screen I was trying to test which is super cool um as well as you know being able to change the theme dark mode um you can change the you know the the local so you can even switch languages and it was really good to kind of do all those at runtime

37:51 · um with his latest update it even um made that a whole lot simpler because then you can kind of just specify key for your application and it um it will kind of inject a lot of that um in a better way but yeah it's um it's really nice for testing because something that we don't always think about is you know you know widget testing is great making sure things appear unit tests are great to make sure functions and methods uh work correctly but then also responsive testing we need to make sure that our UI lays out correctly on all these devices

38:18 · I mean like just like we talked about earlier like if you have an iPhone 4 and then it doesn't look good I mean your UI has failed at that point um as well as you know I think it should also be considered a fail when your application is a mobile device you go up to an iPad and you have an app bar and a floating action button in a list View and that's your entire application like uh you know when we we're not taking advantage of the the greater space the user is going to hate that yes I also feel like a lot of designs nowadays um only have this

38:49 · perfect world where you have the latest iPhone with the nicest sizes but what happens to the design if you rotate it what happens if you have a bigger or smaller screen and I feel like a lot of the design mindset isn't there with the responsive design most most of things

39:06 · look good on one screen but you as a a programmer it's sometimes your job to figure out what happens if it's on a big or small screen and there's uh mostly little to no guid guidance on what actually should happen and what the design is intended to to do um which I hope is going to change in the future like there a lot of different device and um FL itself calls

39:30 · this ambient Computing where you have your application and it runs on all different settings and forms and you don't fixate on the phone which is I don't know how big but instead on the design and how data flows and how is it uh how it's proportional to to one another yeah so speaking of that awesome flutter interact talk they also announc flutter octopus so when it comes to testing all these devices uh what are your thoughts thoughts on the the octopus it's it's it's a great idea like

39:59 · it's it's a fun idea um I feel like you can do a lot of this with the software side uh like we just talked about device preview but let's be honest having this for octopus in your work room just seeing all the devices that must be pretty cool yes it's a it's a reason to buy all the devices cuz it's for testing purposes yes we we need those Chef yeah yeah yes

40:23 · you know but after seeing that it it made me want to write an application that does the same thing but I think there's some different applications on the web that allow you to do this so you can basically you know enter a URL and you can test it on all these devices at once so then you can just like scroll and you can see iPhone 4 iPhone 5 like iPad you know um Android devices you

40:45 · know General web size layouts and then they're all in the same state so then you can change the url and then they all update yes I've seen it on Twitter I think it's called Sizzle or something it's a browser web browser for developers which does all does all of this yeah cuz uh really I mean we don't

41:02 · have to have the actual emulators running we just need the correct uh device size and aspect ratio so I think that would be a cool um easy win for testing different stuff because then you can kind of look at it side by side and just see how it kind of all flows together cuz I feel like for a long time like I said before we had desktop I had a hard time when I was developing for iOS because I knew all the dimensions but then you know the Samsung

41:27 · you know note for example it had the same display resolution as the iPad mini but it looked awful because it was like I had it was like the desktop playout on the Samsung Galaxy Note and then it was like I would tweak it a little bit but then the iPad one would look weird because then it's like you know so it's like um uh display density is not

41:47 · everything and then it was also you know there's so much more than just checking your break points and so for me it's it's it it was pretty big eye opener because because you know you can't always trust the resolution on what you're on that is true yeah talking about all of this just makes it more clear to me that we need some sort of application some sort of test suit and something integrated which lets you record test test on different devic and has everything which is related to making it uh responsive testable we need

42:18 · something like this yes and uh I think we can do better too I feel like it' be cool if we built a a VR sphere where we can test all we build a virtual flutter octopus basically in VR that would be pretty awesome cuz once you get it in there then you can just you know have like the X-Men style you know room that you can look at all your devices and see it all running at the same time yeah I'm just thinking about all the possibilities that sounds sounds super fun yes would be super interesting to try it out and see how it uh it is in

42:50 · production and how people could be using it yeah and I mean a lot of people may think well you know that's that's great and all but like who really cares about this well you know the thing is you may not realize you need this until you need it and then when you need it you really need it um for example I feel like

43:07 · another thing that's missing is and some other um I think Frameworks have this but uh at least with material design it'd be cool if we had like a an inspector kind of view where you could view the elevations in a 3D perspective so you could say okay uh let me turn it on the side and see like how my layout is positioned so I have my app bar my floating action button make sure everything's hierarch looks correct and

43:29 · um there's different ways that we can debug our layouts from different perspectives where you realize like oh that's why I have that bug is because this this column is overflowing right here which I feel like uh hot UI is really supposed to help us with um since I use VSS code it's not really inside there every now and then I can see it in Android Studio have you used it at all uh I took a look at it once um and it

43:54 · looks PR interesting but just backtracking for one sec with the thing you talked about elevation how cool would it be if you could see your routes being pushed onto each other and just having the whole history in 3D and just taking a look at your screen and seeing all the different routes which are behind that that could be pretty fun

44:13 · that would be cool then you could basically have your navigation Stacks yeah I didn't even think about it that way yeah that would be so cuz then you're like oh well this is when I pop and when I show a dialogue and it's like oh this yeah that would be really cool instead of having to always call like you know push replacement or different kind of um things that we do to get around or shortcomings but yeah it's uh

44:33 · that's a really cool example um so when it comes to um testing have you worked at all with Android testing I've done Android in the past and I've done a bit of testing I know there were a few Frameworks like um testing Android was always hard regarding UI because um in comparison to flor it wasn't uh code which you can run it was this XML and you had your old your application with it there were a couple of par uh Services I think Robo electric and Fs which um did uh help a lot with testing

45:07 · but it it's been a while and I don't know what the current state of testing on Android is and um yes well I actually do have experience with cotlin testing and I think that because cotland now has official support or I know Java it has too but like they they made it a whole lot easier to do testing um I have actually really enjoyed the cotlin testing and the way you kind of go about it cuz you can have a class and annotate a function that you know at

45:35 · test with The Decorator and then you can write your stuff and then when you run the test on the file it'll run all the tests for the the test for the logic in which the class exists so you can kind of keep it in one place which is super cool yeah testing like testing non UI stuff was always it's like it was using Java and cotlin just doing UI test and

45:54 · stuff was always uh great and if you had the right architecture like most of the time I was using mvvm um you could have your view models and all that stuff fully tested um just going to the UI test was always a bit tricky yeah so I had the thought the other day is like what if we worked on like a vs code extension where you could you know how we can extract as a widget or method what if we could do extract a test where you could right click on a a widget or a method and it extracts it to a new test file uh with

46:23 · scope to that exact you know file and then you know that part of your application interesting like if the widget is very modular and doesn't uh depend on something from provider for example yeah um that should be super easy what's always a bit tricky for example if you want to test a screen in isolation and it has all those assumptions about your application like for example you're logged in you cannot be on the home screen without being logged in it's just not possible things

46:51 · you always have to watch out for so so you include the necessary dependencies in the widget Tre for example um but yeah like uh it could be extension for us code or it could also be a standalone application where you just load in your

47:07 · your application run it and just do it all visually because I still feel like youi testing testing UI shouldn't be done in code too much it should be oh I see the way you're actually testing that'd be kind of cool to where basically we could even do it to where you know when you're running your application you have this method that only runs in debug mode and and you know

47:26 · it'll before your application runs it it runs all these tests for example and then that way if it runs you know that your test have passed if you wanted it to click around on do different stuff is that kind of what you're saying well I'm not sure like I was uh talking about the thing we talked earlier about the Standalone third party application which loads your application into itself and does all these uh fancy testing things where it allows you to find stuff tap on stuff and produces the tested code maybe

47:58 · allows you to test scoped stuff like you tap on a widget you say I want to test this disables everything else you have full control over that widget and it uh builds uh the correct widget tree for you in the test so this widget can function user is logged in and all that stuff for example oh very cool yeah yeah I agree would be kind of cool yeah and also um maybe next week we'll talk more about localization but um when it comes to writing our tests I feel like you

48:28 · know one thing we often forget about is strings in our application because we you know we may provide it or I at least I build it with English in mind because that's what I can read and then you know maybe in Chinese or Hebrew for example everything's right to left and our applications have to switch and this is another thing that we don't think about when we're testing is have you you know

48:49 · switch the directionality of your application and run it because you will be shocked at how many things that you cuz if you do like custom widgets and layout a lot of the times you have to take it take into account so like if you ever do like a positioned at the bottom left when you're in a right to left layout you need to make sure it's on the other side so flutter does a really good job to do a lot of this for you like for example if you're using a row it'll switch the direction or um just various

49:15 · uh widgets it'll it'll take care of that but yeah that's something you definitely want to um make sure you're testing yeah also I think for stuff like alignment petting there's actually different Constructors and different uh things which allow you to instead of specifying petting left you can do something like petting start which does left on uh the non um inverted uh text text uh things

49:43 · and switches those for for the left to right uh right to left yep exactly and that that'll really help to um and that's just about being um more abstract when we're writing it out yes that's true um we just want to thank you guys for listening to this episode so what um what are you working on at the moment norber right now just usual work and doing a few um still work in progress

50:08 · projects which I hope will I'll be able to Showcase something next week but yeah as I said quarantine life is just going as fast as it as it could what about you yeah quarantine life is the new life but yeah U for me I'm working this week on building a 3D visualizer um in VR that

50:28 · allows you to send in MIDI and it controls um this VR kind of music so that's been kind of interesting it's something I'm not very familiar with so it's a lot of research and trying to get it working with unity and thankfully there's a lot of repos out there but um if you want to find us make sure you look down in the description for the show notes we have um we're both on Twitter and GitHub and you can find us pretty much everywhere we're going to be linking to that um and also we have a

50:55 · link to the podcast as well as our podcast player which we will link to which is now open source and we will let you kind of see how you can actually create a podcast and host it on GitHub pages and we have all the details about that so make sure to give us a rating on iTunes Google play Spotify and anywhere else we have our podcast and we just want to thank you so much for listening and see you next week see you next week

Talking about Riverpod with Remi Rousselet

Mon, 04 Dec 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Talking about Riverpod with Remi Rousselet

Description

Diving into the details about Riverpod!

Remi Rousselet

https://twitter.com/remi_rousselet

https://github.com/rrousselGit

Norbert Kozsir - @norbertkozsir

https://twitter.com/norbertkozsir

https://github.com/norbert515

Rody Davis - @rodydavis

https://twitter.com/rodydavis

https://github.com/rodydavis

https://youtube.com/rodydavis

https://rodydavis.com

Our podcast player

https://rodydavis.github.io/creative_engineering/

Follow on Twitter:

https://twitter.com/CreativeEngShow

Transcript

0:00 · welcome to creative engineering today I have a special guest with me you may know him from stof or one of his very popular flutter packages I'm of course talking about Remy Remy thanks for being on the show how are you yeah thank you for ring me uh I'm doing pretty good what about you I'm doing pry good too so

0:20 · today is going to be all about State Management and your newest package called River pod to start things off why did you call it River pod um yeah so provider but with the letters mixed up and there's also a second meaning um where you know in in Dart we have streams and so I I realized that by

0:42 · mixing the letters we could have River in the name so it's like in the same team so yeah there's that I like it very much it's a pretty pretty fun name so before River pod you create a provider um provider is used in pretty much all fler projects where is directly or indirectly via for example FL block what was the reason for you to start working on this new River pod um it started uh usually it started

1:11 · with slacker flow like at some point I answer a lot of question on sa flow and I realized that the same question was popping up all the time about inated widgets and or people misusing ined wies usually uh like they created some State dark inside the build but then when something changed their state was lost because they didn't use a state for widget or whatever um so what I did was um first I answered

1:44 · the questions but you can pretty fix the problem before uh people face the issue um so I searched for a different way of solving this problem before it happens um so that's how

2:01 · provider came up um at that time it has some some a provider named state for provider so it created like it's kind of this it's similar to the syntax with um the current state of Provider where you have this create function that creates an object only the first time it's created so the idea was behind it was that people only use this uh syntax this way their state is not last when something change uh and then you know

2:30 · time as um time passed uh more use case were added and um yeah that's basically how it started interesting so you touched upon this and it's a very interesting distinction what do you think about this what is River pod SL provider really is

2:52 · it dependency injection is it State Management is it architecture because I feel like um those three topics kind of bleed into each other and provider and River poot um can be used for multiple things or for same thing what is your opinion on this um I mean I know that many people uh consider provider R not State Management

3:18 · U but I quite disagree with that statement in the sense that even if we are talking about just injecting variables that's State Management itself right State Management is a very very broad topic and I would go as far as to say that widgets in FL are State Management and when you think about it that do nothing else but managing states that not painting anything are not uh under under links clicks they're just managing the state of the UI um so yeah

3:45 · in my opinion um provider is State Management is just a specific a very specific portion of State Management where uh it's initializing the objects and passing them around um and then we have R which does um which has a slightly broader scope where it's also like it's doing a lot of stuff for combining objects and um like caching results when you're combining things um filtering reveals um it also has some more opinion

4:15 · rated um things like State not State provider which is a very simple provider to create variables so it's it definitely has a broader scope and I would think I think that more people would consider about an actual State Management solution interesting the reason I was asking because a lot of um use cases are a common thing when using for example the third BL package was to use the block package as State Management and

4:46 · block internally uses provider to provide its to its descendant so the idea with rivert is to have um the idea of dependency injection and State Management more tight ly uh wouldn't say

5:02 · coupled but having a package which is more focused on this um my question in there would be I've used River pod myself for um my recent project and there is a provider which is explicitly used for the state um I think it was a state provider for your state how how's the package called yes the state Notifier so in this case if I understand correctly the state Notifier would be the core State Management thingy and provider would be

5:34 · H not provider River pod would be a way to combine that state to provide that state and to manage that state how would you um yes and no um like yes uh this state Notifier would be your core class to

5:53 · like add your typical increment method in counter for example uh so that's a way where you can can Center all your business logic inside uh but providers also um are a place where you can put business logic inside like you can start HTTP request or things like this inside providers like typically with feuture provider for example you can do a a complete um pagination uh system with just using

6:21 · feure provider with no state notif or whatever so you can get really far with uh with this um so I would argue that providers also are are um State Management it's not just specific to one class I see so it can be used I guess

6:40 · it's like a lot of topics in computer science and programming the answer is it depends um it can be used for certain State Management things for some it might be easier because it is doesn't require to overhead I would I would say that um the only reason currently when why we currently need this statement if your class is because we don't have um Anonymous classes in dark if we did have these Anonymous classes uh and maybe s

7:11 · dollar classes and S classes in dark uh we probably could remove St if you're completely and just use providers but wouldn't it be possible to have these kind of Anonymous classes with the with functions with Anonymous functions because you can actually declare functions inside functions and have we can definitely do that but then it looks very scary and few people use

7:37 · it like River already looks quite scary to to some people so I think that if we want to go a step further it would be too far for some people like I know for example that people complained about having too many providers and while I disagree with u River being complex I think it's just because it has a broad scope so um so uh people kind of think that it's

8:03 · complex just because there are uh many apis um but yeah um it's very difficult to have something that people uh would not fear like I I I think that functional programming for example is something very simple if you try it like

8:24 · especially like for example with Elm or other uh simplified version of functional programming like the tooling helps you so much that you can almost disable your brain and still do things very rapidly because the compiler uh tells you every mistakes you made so you just have to almost uh do right click and fix and it does the same thing for you um but people can of have this

8:50 · mentality where oh no it's functional programming so it must be super difficult I feel like functional programming um does all the things for you and in some way which might also be a good thing it makes um doing hecky things like something that has to be done quickly which just works it is bad

9:09 · but it works it makes it more difficult because you cannot just mutate something which in turn might be useful if you just want to try out a little thing you want to build a prototype you just want to get it out quickly without caring too much about architecture I think um functional programming makes things like this hard but on the other hand it Mak makes it easy at some point to scale to debug and to do all of this yeah yeah I

9:35 · definitely agree with this statement which is why I think that um the ideal scenario uh when building applications is nether using pure object oriented programming or pure functional programming but using kind of like an hbd architecture instead uh especially I think Dart is a good candidate or maybe cutl whatever is we have this trend recently with language set to Bow and

10:04 · where we can gain both the benefits of imitability and mutability when you want to and Flur use this quite a lot actually like where with widgets we have this uh IM imitability um layer but then if you go inter if you go one layer deeper with runer objects for example they use mutability quite a lot to have this um

10:29 · very performant API where instead of recreating everything every time you just mutate what needs to change so uh you use both sides of the both benefits like you have this immutability side for maintainability and this mutability side for performances and I think it's a good compromise and um that's kind of the thing that I that's a mentality that I try to add in River I think it tries to do

10:55 · the same thing where you could technically for example um Mak mutability and immutability if you want to you could um have this U declarative programming where uh things just like you know uh top down and kind of working

11:15 · by itself like you you write it and it re execute when when it needs to re execute by itself just because um you know kind of like with Widget you don't really listen to anything specifically it's just working by itself just by writing the stream Builders or whatever um mhm so at this on one side you have this aspect of declarative and kind of imitability too um and on the other side you can go with um I don't know change or state interfer and

11:47 · go um with a very fine gr control over your state um yeah yeah I really like the idea of being able to adapt these different paradigms like the function programming and the object oriented programming in each other to have like the best of both wordss like have as you said render objects being these objectoriented State machines which heavily rely on method calls to do stuff

12:15 · and on top of this we just have this functional layer um which harvests all the power of the objectoriented layer below it but ads on top of it that's a very powerful powerful idea yeah um coming back to the actual River pod we briefly talked about this before you said people felt intimidated by having all those different providers um I can somewhat understand it I've been reading through the docs and like okay State provider does this and the normal provider so what are the different

12:48 · providers there are in River pod what do they do and why do they exist um there are a few of them we likely I will have more in the future so I'm not sure that uh list is really helpful but um this short story is we have um provider uh just provider not

13:11 · State provider or whatever just provider um which is used to create um an object that never changed by itself so it's just like you know a repository or an HTTP client if you want to um or maybe a computed value if you want to because you could technically listen to other providers when creating a provider um so you could make like um a

13:37 · filtered list of toos so you take you have your provider that listens to the too list and and listen to the filter and combine both variables to have the filter to the list um which will then rebuild only one other of the dependency change so you get these benefits of not filtering your to list directly inside the bill method which is a lot more efficient um so that's for provider uh

14:03 · then State provider is typically for very very simple States uh that don't really have business Logics associated with them so like filters from the UI it's just an Nom and you're just changing the enom directly or switches if you want to um then by putting this logic inside

14:23 · providers uh it allows you to combine this state with other things so like I mentioned previously with the to list example if you have your um filter implemented in a state provider you can then combine it with the state of your to list to to this um very powerful filter mechanism um then you will have uh your typical business logic providers so St

14:52 · your provider change notif your provider um maybe if you using AER body packages I'm pretty sure uh maybe in the future we'll have block providers we don't know um which have this fine grain control over a piece of state where it has methods it has maybe it receives events um and it allows you to mutate the state using uh us this

15:18 · method and EV um it change over time and then you have um dump down versions of uh this business logic um objects with a stream provider and future provider which are like um simplified version of a stay a change of

15:36 · time but for very specific use case so here's just listening to the result of a future or stream and so whenever something change the stream it will update the value so you don't have to manually subscribe to the stream and then imit the new value you could do it with a stat or chent or whatever but it's just kind of like this Bor play that you don't really care about so making a provider makes things easier especially with Firebase for example so basically correct me if I'm wrong provider is the base class that

16:08 · can be used to achieve all of this for example if you want to have a stream which you listen to you could just provide the stream with provider and then manually listen to it and do all your stuff and stream provider adds this abstraction on top of it which says okay

16:24 · uh we don't provide you with a stream of items because obviously what you want to do is you want to listen to those we provide you with every single item and we will provide it every time the stream that internally emits so all the providers like stream provider future provider State Notifier provider could be implemented with more code with just using provider yeah um just using

16:49 · provider itself may not be the correct choice I think um the correct would instead be maybe State Notifier provider or CH Notifier provider uh because these are uh the most powerful providers uh provider is doesn't really have a built-in way of emitting update so you won't be able to implement stream Provider from provider for example but with stat if your provider or change if your provider you could do basically everything so one thing um that I faced

17:21 · when using provider for example I had a um State Notifier provider and I wanted to obviously listen to the state so so because I was using flare Hooks and a build method I said okay use State Notifier provider so I got the current state now I also wanted to access the actual State Notifier to call method on

17:42 · like update something delete something so this time I couldn't just use the state Notifier provider because it provided me with the state and not the actual object so what I ended up doing is just calling I think it was something like provider off and then calling the me the method manually um would there be a way to say Okay I want the state Notifier I want all the new States but I also want x to the objects to reduce B plate code um when you're using state if your

18:12 · provider in RB um you have a way to specify what you want to obtain so when you combine it with I don't know use provider or the watch method in Rod you can either do like watch my provider or you can do watch my provider. state so

18:32 · if you do the former you will obtain the statement instance without listening to the state so you can then call increment decrement whatever and if you do the later you will be you will obtain this state directly but not this state interfer instance so just talking all the

18:52 · different providers and the idea behind this it feels like it isn't too difficult like at the end it just BS down to when do you want to be updated for example a stream provider every time um an stream item is submitted or do you

19:07 · just want to have the raw State Notifier as an object without listening to the states so you were talking about adding more examples maybe it would be interesting to have a little tutorial doc showing how to do something which you could be doing with a stream provider without a stream provider just using as little amount of providers as possible and then saying okay we did this this is quite a bit of boiler plate code you could use this to make it easier yeah one of the thing I'm considering is um architecturing my

19:39 · tutorial such that we start without the provider and at the end of the tutorial we have this refactoring step to show how we can reduce the boiler plate to reach the same thing so like we could yeah we could maybe start with I don't know change Notifier that does the data fetching and that call notif find listeners when um the the query is finished and then at the end refactor to Future provider to remove almost all the C yeah I feel the thing that is most

20:09 · valuable with this approach is if you get a solution for a problem that you never had before you accept the solution but you may run into the problems that it the solution tried to solve to begin with if you never faed a problem before you cannot really understand why it is there so if you say okay we this problem

20:29 · how could we solve this solve it first so the user understands okay this is how I would do this this is something I understand and then reason okay we did this and this is my solution for this exact problem yeah I think that is very valuable and that would be very nice for docs um in the dark dock of Herod the

20:48 · documentation Associated to each um element of the API um if you go on the dark do of any provider each provider explains what the use case of the provider so like if you go on the documentation of future provider it will tell you that it's usually used for fetching a request um fing something for an API or yeah pagination whatever even

21:12 · if you go on the documentation of family it explains why what is the concept of family why you would need to to use this kind of thing uh I think one of the issue is that the current website um doesn't show the providers uh doesn't highlight the mation Associated to each provider in um so people don't necessarily find it and I think that would be one of the D sides of D dock it's like kind of hidden in a corner I'm pretty sure that few people use D

21:41 · dock yeah yeah coming back to the river pod and how it works um I had somebody on Twitter asked where does River pod actually St state so River pod works by

21:58 · defining Global providers um at first glance it looks like the state might be in some kind of Singleton some kind of global variable um because you are defining the provider AS Global State um how does all of this work where does the State live why is the state where it is there is actually no Global state in rot

22:18 · which is kind of the most imp impressive thing in my opinion with the architecture where even if your providers are Global the state is not Global it's since that stored inside this provider scope widget that we added inside our widget tree previously and if we want to go more specifically into how it works

22:39 · um provider scope what it does is that it creates an instance of the object called a provider container which doesn't depend on Dart and which doesn't depend on FL sorry uh which is a pure Dart object that contains um States for

22:56 · providers and it it Expos it to the widget tree using plain unated widgets and which what this means is that for example if you were to do testing um you would typically create this provider container object yourself inside a test and this Pro container object contains method like read so you can do container. read my provider to obtain the state of a provider and so the basic idea behind this is that uh

23:27 · you know one of the basic criteria for testing is that two tests should not share State because that would be a bad IDE like if you change the order of the test you could have a different Behavior so that's a very uh so then your test will not be uh reable and so uh using this architecture you could create your provider container uh individually for each state such that um

23:54 · two tests would not share State at all which would would not be the case with Singletons or Global states by the way I really love the approach of having this provider container that doesn't depend on fur um in my current project I'm actually just started writing a CLI version of the project and I was able to reuse all the dependency injection wiring which I had set up before for the repository for the hdp client and just reuse that in plain

24:24 · Dart because all the dependencies were wired up using the provider container I didn't have to do some manual Constructor injection so that's a big plus another thing I really like and I don't feel you emphasized enough is because um because you have these Global providers you get complete type safe access to the thing yeah so and all the

24:47 · IDE integration before with provider you had to add this generic type the compiler couldn't make sure that the um that the actual type is in the widget Tre that you have access to that is there the new provider all you do is I I think of the name okay of repository I just start typing repository and it auto fills to repository provider yeah which makes just so much more productive yeah I also make sure that

25:14 · you cannot try to read something that doesn't exist or like we provider so many people faced uh provider not phone exception because they use the wrong build context but with River pod you almost can have this issue um you can still face this issue if you're using like scoped provider which is a very very specific feature in rivot which you probably don't care about um if you if you want to the short story is that it's a reimplementation of the four uh fures

25:48 · of inher widgets with River pod so you can scope them to a wget tree um but then yeah otherwise uh outside of scope providers you can do Bic you you don't have these exceptions anymore and it also solves these problems about um like for um I don't really remember

26:12 · what I wanted to say sorry it may come back in the future that's perfectly fine yes so actually you you just talked about the um scope provider yeah and there was a thing I was wondering about I haven't tried using the scope provider yet but most of the state typically lives at the top of the tree because in Florida you have the routes and if you want some state to be available every page on every dialogue you have to put it on top of material app I had an issue open on

26:44 · GitHub that I would like to have some way to share some sort of skate between multiple pages but right now with the current mation that is not really possible so but sometimes a river pod and providers also just used to provide a value to the sub widget Tre for example you have a

27:01 · one page that doesn't navigate that doesn't move around it's just one page but it has a lot of sub widget and each each of those sub widgets has of widgets and you you would like to have value there without having to pass it down the widget tree to every single Constructor the scope provider as I assume allows us to add this dependency which uses the New River pod API to inject the dependency is it right um yes it is right but you probably

27:31 · don't need to use cope provider to do that you could technically have your typical provider but just use it inside your specific page and maybe even uh place the provider directly next to the uh implementation of your page and make and make it private you could technically do that especially considering now you have now you have the variables for your provider so you can make them private if you want to which is very powerful if if you think about it um the use case of scope

27:59 · provider would more be about making team for example so that you can override the team on a specific part of the application uh or maybe um translations or I don't know very specific use case and other common use case with SC provider is um lists so if you want to

28:17 · pass the ID of an item instead of passing it to the Constructor of the widget you could expose the ID using scope provider and then the items will obtain their ID using the r River API rather than their Constructor the the main benefit of that is that then your provider uh no then

28:38 · your widget doesn't receive any parameter at all which means you can make it constant so you can you can make it constant so that if you update wherever inside your list your widget will not rebuild unless what it used rebuilds so if you have like say a list of 100 items and then you add a new item

28:58 · that means that the item count changed uh but if your item count change um typically what this VI would do would be reexecute it and buer uh for everything that is everything uh that is present in the list until um reaching the end of the screen so

29:20 · that would uh rebuild a lot of things for no real reasons because uh nothing changed for them but if you use scup provider to pass the ID you can make your widget const your items constant and then they won't rebuild unnecessary

29:36 · because since they are constant FL is clever enough to not rebuild them so you can do this you can do this performance optimizations but that's a very Advanced use case I would say like if you're just getting started you don't really have to care about that and go back to it in the future but super interesting I hadn't thought about this uh potential issue and a potential solution about this that's very interesting um coming back to the um scope and the um scoped

30:04 · provider discussion we had before for example you have some sort of variable um which you only want to have uh be accessible on this one screen so you could make it private how would you deal with for example initialization and tear down for example you have some heavy object you have a connection to database or some sort of heavy calculation that you don't want to maintain pain after the screen is for example destroyed something else is pushed how would you deal with this if it is not actually scoped to the screen um one of the very

30:39 · powerful addition um of the inherited widget mechanism that is implemented in River pod is um the autod dispose flag on providers um basically what it does is that it's a slightly different implementation of uh when the widget is removed uh with dispos the resources instead what it does is that when a provider is no longer used it it it dispose the resources which means that technically if you remove the page that

31:11 · will automatically dispose the resources too but that that's slightly different in the sense that it's not scoped to the page uh so if you for example you have two screens that you're using the same data then if you close one screen but the other screen is still open that won't dispose the data immediately because it's still in use and then as soon as you remove the other screen that will automatically dispose everything uh

31:37 · correctly that is super interesting yeah that sounds like a pretty pretty solid approach yeah um and an interesting aspect of that is that we can also combine providers so we can also have this very big graph or different states and so um when you're using autod dispose um um

31:57 · the autod dispos flag um it will automatically force you to have all the children in the graph of providers to also use the autod disposed flag because you know if if a descendant is not using the autod dispos flag but a parent is using it that would kind of be weird because it would be always kept alive so um so then you have this graph of autod dispose objects and that certainly makes

32:24 · provider uh no River but a very clever like in the sense that uh all your graph of providers will still be in use um even if you're using only uh the leaf of your graph and as soon as you stop using the leaf of the graph everything will kind of destroy itself naturally without having to care about it mhm that sounds pretty pretty

32:47 · clever yeah so touching upon this we we talked about this before like the um scoping um not not the scoping where you declare providers one thing I also really like is for example I have a repository and if you if I want to provide this repository to the rest of the app I don't have to go into for example my main file create a new provider in my multi-provider and provide it in there but I can just do it above the actual class so if I for example say okay my repository now also

33:17 · needs a dependency on the network client I don't have to move to do different files to do this I can do it all in one place and I really like the approach of having code that is modify together be together for example if I modify the provider and one of its dependencies in the class I also want to modify the actual provider which provides this class M so that's I really like this yeah we can even go one step further and

33:44 · like now that providers are variables we can even extract them into packages so if you're spitting your application into multiple packages you can probably extract all the logic for the homepage inside a separate package share it with different thing and you can extract the provider too so that um you just have to

34:03 · insert the provider scope with it at the root of your application and it doesn't matter whether the homage is using providers or not um it will just work out of the box you don't have to worry about inserting something inside your main application and another benefit is also in testing like I one of the downsides

34:23 · with provider is that you have to uh when you want to do testing you have to reinsert all the providers if you want to set to to to test a very specific widget so that so that's quite a lot of Border PL to add all the providers needed by your wget tree whereas with uh River you can just add this provider scope wet and then you don't really have

34:45 · to care about reinserting all the different providers that you need to use and you can just override only the provider that you want to Mark the behavior yeah you don't have to re imp all the wiring which you are doing already yeah because the wiring is done implicitly yeah which which is very important because you likely want to test this wiring too so if you have to copy paste it that's not a good approach yeah there is um I think always

35:15 · a good indication that the code might have a few B smells if you have to copy paste stuff to get it to work so this approach now yes I do too so um I asked on Twitter uh what people would like to um hear in this podcast and the majority was

35:37 · examples a lot of people said of course basic counter application can be easily done in pretty much any State Management too where it be state for Widgets or block coun example is a good way to start but there is always uh a need for more so uh in this segment I'd like to

35:57 · walk through a few simple example scenarios simple in a way to simple to understand but from an architectural standpoint maybe not too simple um and I would like to hear your thoughts and how you do this um on those so let's start off with something actually very simple um just a bit more complex than the counter application the classical Todo um List application but with the little twist that we also want to have items filtered

36:28 · which I know we talked about is a very good example of Provider it's actually implemented on Z rivot documentation there is an open source implementation of it it's just not associated with a tutorial that explains step by step how to do it but if you go to to-dos do R.D

36:46 · you will see a to-do application with filter and everything implemented R but yes yeah do we still want to go over Concepts or would you that okay yeah so we have a simple application to-do list we want to be able to add a to-do item remove a to-do item and update a to-do item every to-do item is just the text and whether it's

37:10 · done or not done how would be the it doesn't have to go into the detail because obviously listening to code is a bit harder to read it but how would you architect this and what kind of providers and why would you use yeah um I thingss are two difference to there are two big steps there is the filter which is uh one thing on its own and then the um just managing the list of to do so first for managing the list that's

37:40 · a typical use case for um a state Notifier or a change Notifier depending on whether you want to use multip or not um so you make a custom statement if your class which expose uh you know add too remove too edit to-do methods and that just expose a list of um to-dos then you pug it into a statement provider or a CH provider uh which then expose uh which then allows your UI to

38:13 · listen to the list of to-dos and do something on click or whatever to update this list of to-dos um so that's for the list of toos without filter and then for the filter um using Riot is actually very easy to do uh to filter States um so you the only thing you need to add is create a separate um State for the filter um for

38:41 · your enm for example so you can use State provider like we mentioned previously which just stores the current state of the filter so likely none by default um then you plug it to your UI such that it change when you change the filter State and finally you can combine your um filter and your um to-dos your stat

39:07 · interfere to-do uh to- list using a provider and then inside your pro proor what you do is you use this R object pass to the provider uh and call r.

39:18 · watch uh to-do list and ref. watch um filter uh provider and then you just do um list. where and then filter accordingly and this will automatically um oh yeah I

39:35 · forgot once you've created this provider what you do is inside your UI instead of listening to the entire list you now listen to this new providers you just created and so with just this little change and now your UI will automatically filter things accordingly and it will filter the list only when as you added a to do or you um change the filter State mhm so the idea behind this is we

40:04 · could actually implement the filtering inside the state Notifier we could have a method called set filter level or set something like this and then do the actual filtering in there too but the behind the idea behind this is the separation of concerns like you have your state not the fire provider your state no fire that's not really State uh that's not really uh separation of concerns here it's more about making it declarative such that uh we have a single source of Truth for the list of to-do like this this business subject um

40:36 · manage the list of to-dos uh directly and we don't really want to mess around the um official um SF of toos we don't really want to changee the public API about it to avoid like having to I I

40:52 · think I saw many questions on sa flow where they did this mistakes where they updated the Leist stuff to-dos that they had when they change the filter but then when they when they go back to none they realize oh no I lost my toos where they are so um yes so it's so like by separating things uh and using ref.

41:14 · watch instead of having all this logic inside um State notif here you could technically do that and have a big stat if your objects that expose many different things like the filter list and the rooll list and whatever you could do that um but the issue is it's likely more complex because you will have to deal with listeners you will have to um make sure that you're caching

41:37 · the value when when you need to like listening to both the filter and and the change on the uh to the list could be quite complex whereas um by using um

41:52 · this by splitting it into um multiple provid than using r. watchat it's very linear you don't really have to bother about uh what happens when the state of the filter change what happen when the list uh change it's just done for you automatically and without having to care about it I think the thing or the um the

42:13 · idea that would better encapsulate this is the single responsibility pattern in this case because you would have this one component that it's only its only responsibility is to manage a list of to-dos update and do a lot stuff it doesn't really have to do the filtering because it's just has a single responsibility and then you add something else which has also a sing responsibility it gets a list of items and just filters it the interesting part about this it is very um pluggable like

42:41 · if you want to change it if you want to remove the filtering you don't have to go into your class and remove lines of code and do your stuff all you have to do you just don't listen to the filtered the filter provider anymore but instead the normal to-do list provider and another benefit is that it's also more performant in the sense that uh especially if you're using imitable data like if you're using imputable data you might if you want to have a single big

43:09 · uh statement if your object uh your model will likely be quite complex like you will need to have a zero um unfiltered list of to-dos and then you will have to have this filtered list of to-dos but then when you want to do any edit you will have to always is clone

43:27 · the object but that means that the larger your model is the bigger the Clone operation is whereas if you're separating it into multiple providers uh you have less things to clone when you're updating the list so it's technically slightly faster too interesting okay so I think that was

43:51 · a pretty good breakdown of the um first example of just a simple list of to do we've also the added uh feature of being able to filter um let's move on to something a bit more complex and the ideas or the app would be you have a list of items just like in the to-do list but in this case those items are not as trivial and simple as to-do items

44:14 · in this case we can have one class which man manages a list of to-do items because they're so simple it's just mutable data which can be copied and changed let's have a case where each item is super complex each item managing its own vast and big um state may do

44:32 · additional Network calls in there to lazily load even more data or just have a very complex interaction I think putting that all in one class might be too much how would you do this um I don't really understand what

44:47 · you're explaining so for example think we have a list of not to-dos but of games we have um like 10 games each can be visible at the same time obviously a game is very complex you don't want to have all the game states of all the games in one class because every item is complex how would you do this okay um yeah so it's

45:12 · not just a list of um dumb objects it's a list of objects that may update independently that has different roles too so it's not just the same kind of object okay um um um so I think um different approach is uh to um have a separate provider for

45:36 · like when you have um this kind of use case you may want to instead of storing the list of games just store the list of IDs of games and then um so you can update just the IDS new IDs remove IDs and then the listening of um the object is is done separately um so uh the idea you you may want to use something like family um so you want to create um separate uh game uh provider

46:09 · that is as CH your provider or techn provider and use the uh dot family Constructor to um create your game instance based on the um based on the ID

46:32 · um turn I'm not sure I think do do you want to add new games at at TR time possibly like imagine it not just being games it there are apps with just complex interactions within this items like not all apps just have this dumb data sometimes it's just just complex so think of this game as being being anything that is complex so yeah adding removing updating um would be would be something the one

47:10 · wants um I mean uh the the reason I'm um thinking about it is that with games they have completely different implementation so it's a bit like depending on the game type you may use a completely different controller so that's speciic use case for example it's always the same game like it's Tetris or

47:30 · something but obviously with a different state like different instances of the same game yeah that's that's an example yeah so in that case the uh what I was explaining previously totally makes sense where you have your list of IDs on one side and on the other side you have um your statement if your provider or CH provider. family and then um it receives

47:54 · the uh game ID um because families are just providers that receive an extra parameter to do some extra fancy stuff so here it's just the ID you don't really care about the ID inside the game instance it's just uh the ID Associated to the to the game and so your state notif provider will create the game instance so the the tetris instance and then your UI will be able to

48:20 · um like when you want to add a new game what you will do you will just uh push a new ID to the list um and then that will automatically update the UI that listen to all the IDS so you you may have a list view somewhere which will update because you added a new ID and then when you want to read the game Associated to the S ID you will um read the game provider that you created which is a family so you will have to do like watch game provider and then uh

48:54 · pass parameters to the game provider so you pass the idid that you received previously from theist View and so by doing that U that will uh the first time you try to read this ID that will create the T instance automatically for you and that will also subscribe to the T instance such that when it change change are

49:16 · propag propagated and also think that this makes a lot of sense because the object which manages the list doesn't have to load all the items and wait until like five instan of Tetris are loaded it just says okay we have five items we can distinguish between those items and the actual loading which may include a loading indicator or some sort of network fetching can be done externally in these Tetris providers yeah so this

49:44 · can be so again single responsibility we have one list that is being managed and we have one individual game that is being managed which could also live on its own yeah so um to make things uh even further complicated because that's the thing I like is um okay we have like three uh Tetris games and now we want to

50:08 · implement some weird impossible game that accesses the state of another Tetris instance think you're playing Tetris on free Tils and you want one Tetris to see okay if the other Tetris just spawned a cube I want to spawn a a

50:25 · something else how would you do something like this can you still add tus at run times of course um so how does the interaction between tet instance works like what how how does it determines which tus instance does it want to use I mean an example would be would be

50:47 · at at the initialization stage you would be select another tetr sance maybe viid so or example you always want to use the instance which is on top of it in the list just some ristic I'm asking mainly because um there is a very important part in State Management which I think is not used in us which is uh un generational data flow um and uh providers uh can of

51:16 · enforce you to use Ral data flow to make sure that your application uh doesn't lead to Spaghetti code on the wrong run um so you need to think about how your objects interacts so in the case of uh you're only reading the previous T instance it's fine because it's just a linear list so that's unctional so you don't have re issue so yeah in just say in this case you can just inside your um game provider which is still a family um

51:50 · you you receive the ID Associated as parameter uh if you remember correctly so since you have the ID as parameter you could technically uh listen to the ID minus one to obtain the previous instance so you could like using the ref object you could do ref. watch uh game provider and

52:10 · then pass your ID minus one and then you will be able to listen to the previous instance interesting I really like the fact that it's so easy to access all of this without having to worry about okay can I access this because am I above or below the provider like things you would be having with the provider package where you have to think about this you will still have an exception if you try to do something that is not a unit directional data flow so if you have so

52:38 · if you're trying to read as a previous T and then the previous Tetris is trying to read the next Tetris you will have an exception telling you that it's not possible because yeah because it's cycle and it would be infinitely updating right yeah and then especially uh that's also why we can do some powerful things like the autod dispos flag because since it's an un data flow um you don't have this cyclic dependency so you know when

53:04 · you can dispose resources whereas if you had a cyclic dependency you wouldn't be able to know oh okay it's not used anymore um so so yeah rivot will not let you do very weird stuff you have to be careful and that's also that that's one of the biggest reason I'm working on De on a de tool for rivot at the moment where where um I'm extending the FL depal and um so you have a a new tab for rivert

53:35 · which shows like your typical State Management uh T tool where it shows um the um exp expanded view of an object but here also has an extra tab where you see the graph of States so um you would

53:53 · see oh this provider depends on this other provider and then you have this this tree um of states and see what what happened when you update this provider which or the provider depends on it and you also will likely see the widgets too at the same time so you could like I really like the idea yeah I like the idea I feel like I

54:16 · feel like all the State Management Solutions could use a bit more love from the def tooling uh Direction because you have all this St manag and things but it's still kind of awkward to inspect the state uh especially during runtime and if like even if you are in debug mode you first have to set a break point you don't have to manually go through the variables and the references just having a way to have more information be

54:42 · visible with less effort I think that could be um very helpful and I think um I I'll give a shout out to Z go team like um tried the I've already started working on the dev tool and I've tried it um tried what's

55:01 · existing in the dev tool and there actually have the possibility to expect objects D objects at R time so you are able to list all the all the properties and everything you want to implement a DA tool which means that I was able to um list everything we want to do and

55:21 · um um in know typical death tool so list all your properties and list and potentially update them we can also um update the state of your um State at from the death to so you can click on something to go bu and update strings um

55:41 · so yeah the death is very very very powerful and I think uh it's quite underrated at this point uh and maybe in the future more people will contribute to the death to once they realize that they can do all this fancy stuff that typical applications in dark would not be able to do mhm yeah that is indeed super interesting I didn't know you were able to do so much even during the runtime but that's definitely something I'm super excited for so um yeah that's

56:10 · why I'm surey if if anybody wants to know more just FL Remy um I'm pretty sure once things are ready you'll be able to you you'll know um yeah on Z death to um I would

56:26 · say that I at this current stage I'm able to obtain all the different informations needed to show the de tool like the graph and update the things and the only remaining thing is uh making the pretty because it's certainly not very pretty but I mean if you think about making stuff pretty um then I'm pretty sure you're at a stage where all stuff is working so if it's just making it pretty I'm pretty sure you'll be able to accomplish that

56:59 · yeah so um I think we are slowly getting to the end do you have anything to add to say um yeah I would say if you have any feedback about repot whatever it is even if it's like oh no repot is super bad it's fine um please tell me I would love

57:21 · to get as much feedback as possible like the only thing I've seen is people saying uh maybe thank you or something like this so it's great to hear but um I love to hear also about what problems people are facing so that maybe I can document it or maybe I have some new features to develop so if nobody is complaining it's difficult to do uh my

57:45 · job you know I can't really improve this thing further if nobody's complaining because I don't know what to improve maybe it's just so good that there is nothing to improve who knows it's very unlikely I'm pretty sure that there are many things I need to improve like for example I sometimes when I try

58:02 · when I randomly try stuff I find bugs so I'm wondering is it that people don't bugs or is it that they didn't find it and I always have this question at the back of my mind do people actually use the stuff I make I never know I definitely

58:21 · do okay thank you so much for being on show um for all the listeners we'll have all the links we'll have his Twitter handle and the ways you can follow him in the show notes thanks again for being part of the show and thank you for good [Music] one

Gemma now available in KerasNLP collection, Signal Input in developer preview, and more dev news!

Tue, 12 Mar 2024 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Gemma now available in KerasNLP collection, Signal Input in developer preview, and more dev news!

Description

TL;DR 381 | The Google Developer News Show

0:00 - Intro 0:08 - Signal inputs now in preview for Angular devs! → https://goo.gle/4a7Pdv5 0:39 - Gemma is now available in the KerasNLP collection → https://goo.gle/43gi8uA
1:02 - Croissant, a new metadata format for ML datasets → https://goo.gle/3PgtGbG 1:49 - MediaPipe now supports LLM inference and image generation → https://goo.gle/3v3y331

Here to bring you the latest developer news from across Google is Rody Davis.Tune in every week for a new episode, and let us know what you think of the latest announcements in the comments below.

Follow Google for Developers on Instagram → https://goo.gle/googledevs

Watch more The Developer Show → https://goo.gle/GDevShow Subscribe to Google for Developers → https://goo.gle/developers

#Google #Developers

Speaker: Rody Davis; Products Mentioned: Material Design - General, Angular - General;

Transcript

Intro

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi.

0:03 · I'm Rody for "The Developer Show".

0:04 · And this is your weekly update on the coolest developer news from Google.

0:07 · Starting with Angular, signal inputs are now in developer preview.

Signal inputs now in preview for Angular devs!

0:11 · Signals provide a powerful reactivity model that enables you to efficiently monitor changes, derive values, while automatically notifying Angular when any specific part of your application needs to be rerendered.

0:23 · Signal inputs can also improve your application by automatically marking OnPush components dirty, being more type safe, and can be derived and used in other signals.

0:32 · This can also be easily monitored when using effects.

0:36 · You can learn more on the Angular blog.

Gemma is now available in the KerasNLP collection

0:39 · Next, let's head over to Google AI.

0:41 · The Keras team is happy to announce that Gemma is now available in the KerasNLP collection.

0:46 · Thanks to Keras 3, Gemma runs on Jax, PyTorch, and TensorFlow.

0:50 · Keras is also introducing two new features, a new LoRa API, or low-rank adaptation, and a large-scale model parallel training capability.

0:58 · If you want to learn more, check out the Google for Developers blog.

Croissant, a new metadata format for ML datasets

1:02 · If you're a machine learning practitioner looking to reuse existing data sets to train ML models, you'll probably spend a lot of time understanding data, making sense of its organization, and figuring out which subsets to use as features.

1:14 · ML data sets cover a broad range of content types, including text and structured data to images and video.

1:21 · There are some general-purpose metadata formats for data sets.

1:24 · But these were mostly designed for discovery.

1:26 · Today, we're introducing Croissant, which is a new metadata format ready for ML data sets.

1:32 · It was developed collaboratively by a community of industry and academia as part of the ML Commons effort.

1:37 · Starting off, it will support three popular collections of ML data sets-- Kaggle, HuggingFace, and OpenML.

1:43 · To learn more about the 1.0 release of Croissant, check out the Google research blog.

1:48 · And finally, MediaPipe now supports two new generative AI tasks, including LLM inference and image generation.

MediaPipe now supports LLM inference and image generation

1:54 · The LLM inference API supports Gemma 2B and can run on-device generative AI text-to-text generation.

2:01 · You can learn more about MediaPipe on developers.google.com.

2:05 · To learn more about all these week's stories, make sure to check the description box below for all the links.

2:10 · Please remember to like, subscribe, share, and stay safe.

2:13 · I'm Rody for "The Developer Show."

2:14 · Thanks for watching.

2:15 · And we'll see you next week.

2:17 · [MUSIC NOTE]

Google Computer Use model, Gemini CLI extensions, and more! - Google Developer News October 2025

Thu, 23 Oct 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Google Computer Use model, Gemini CLI extensions, and more! - Google Developer News October 2025

Description

Welcome to this episode of Google Developer News – the October Edition. This month we dive into new features in the AI realm that include the Google Computer Use model, Gemini CLI Extensions, and the Agent Development Kit (ADK). Want to get involved? We also explore upcoming hackathons—AI Accelerate, the Chrome Built-in AI Challenge, and the Cloud Run Hackathon, while preparing for DevFest 2025. Register for these events below.

Chapters: 0:00 - Introduction 0:12 - Google Computer Use Model 0:39 - Gemini CLI Extensions 1:18 - Jules Tools 1:53 - Agent Development Kit 2:56 - Hackathon opportunities 3:02 - AI Accelerate Hackathon 3:40 - Chrome Built-in AI Challenge 4:21 - Cloud Run Hackathon 5:00 - DevFest 2025 5:43 - Wrap up

Resources: Introducing the Gemini 2.5 Computer Use model → https://goo.gle/4o6qzm5 Now open for building: Introducing Gemini CLI extensions → https://goo.gle/47Cb3bI Meet Jules Tools: A Command Line Companion for Google’s Async Coding Agent → https://goo.gle/47DVArC Delight users by combining ADK Agents with Fancy Frontends using AG-UI → https://goo.gle/4qp2mc4 AI Accelerate Hackathon → https://goo.gle/49gBx3G Built in AI Challenge → https://goo.gle/4hude4C Cloud Runathon → https://goo.gle/48W0dya

Watch more Google Developer News → https://goo.gle/4e8Rysd
Subscribe to Google for Developers → https://goo.gle/developers

#GoogleDeveloperNews

Speaker: Rody Davis Products Mentioned: Gemini, Agent Developer Kit (ADK)

Transcript

Introduction

0:00 · Welcome back to the Google Developer News Show.

0:02 · I'm your host, Rody Davis, and we've got lots of exciting news to get through this month.

0:07 · Let's get into it.

Google Computer Use Model

0:12 · Firstly, we released the Google Computer Use model.

0:14 · It's based on Gemini's best-in-class visual understanding and reasoning capabilities.

0:19 · But what does that mean?

0:20 · It gives AI agents the ability to fill out forms, manipulate dropdowns and filters, and operate behind logins.

0:27 · It's a crucial step in building powerful general-purpose agents that can automate all types of complex tasks.

0:33 · Try it out now in the Gemini API on Google AI Studio and Vertex AI.

Gemini CLI Extensions

0:39 · We're also introducing a major new tool for developers, Gemini CLI extensions.

0:44 · They're designed to be a significant evolution beyond the core functionality of MCP, giving developers more functionality and a seamless experience.

0:53 · They're easily installed and they include a simple playbook, so Gemini knows how to execute the job that's customized for you.

1:00 · Gemini CLI extensions also put you in control.

1:03 · You can combine extensions, chain commands, and build a personalized tool chain.

1:08 · Open up new possibilities!

1:10 · Whether it's streamlining a personal workflow or integrating a company's internal tools, we can't wait to see what you'll build.

Jules Tools

1:18 · Next up, say hello to Jules, our asynchronous coding agent.

1:22 · Jules is designed to understand the full context of your project and take on tasks such as writing tests, building new features, fixing bugs and a lot more.

1:32 · You can run multiple tasks at the same time, and they'll finish asynchronously.

1:37 · Until now, you've only been able to work with Jules in your web browser, but with Jules' tools and new lightweight command line interface, you can create tasks and monitor what Jules is up to, all without leaving your workflow.

1:52 · The last year has seen incredible advances in agenic AI, but a powerful agent is only half the story.

Agent Development Kit

1:58 · How do you create a truly collaborative experience between your user and your AI?

2:03 · To help with that, we're excited to tell you Agent Development Kit, or ADK, now works with the AG-UI Open Protocol.

2:10 · But what does this mean?

2:12 · You can now build sophisticated AI agents and give them a collaborative front-end, all with minimal effort.

2:18 · The integration provides access to a new class of features right out of the box, which will transform the user experience.

2:25 · Your agent can go beyond text in generating and rendering UI components directly in the chat.

2:31 · For added security, users can supervise, approve or correct agent action before they're executed.

2:37 · You can even empower your agent to directly interact with the front end, allowing it to fill out forms or navigate pages for the user.

2:45 · With the ADK and AG-UI integration, you can focus on what you do best: shipping powerful, intelligent and collaborative AI applications.

Hackathon opportunities

2:56 · Now for hackathons: we have three to highlight this month, where you can showcase your skills to the world.

AI Accelerate Hackathon

3:02 · First up is AI Accelerate: Unlocking new frontiers.

3:05 · It's a little different to the other hackathons, with developers choosing to take on challenges posed by our partners at Elastic and Fivetran.

3:13 · Create a solution that will show how Elastic plus Google Cloud can transform how people and data interact.

3:20 · Or combine Google Cloud with Fivetran to create an application that improves customer experiences.

3:26 · Two challenges, one unique opportunity.

3:29 · The winners of each challenge will win a share of $50,000.

3:33 · Visit AI-accelerate.devpost.com to find out more.

3:39 · Next, do you have what it takes to build the best AI-powered web app or Chrome extension?

Chrome Built-in AI Challenge

3:44 · Join the Google Chrome Built-in AI Challenge 2025 for the chance to win a share of $70,000.

3:51 · There's a wide range of tools at your disposal.

3:54 · Create using a suite of built-in AI APIs and extend your project's reach by implementing a hybrid AI solution with Firebase or Gemini API.

4:05 · It's a great opportunity to unleash your creativity.

4:09 · To enter, visit googlechromeAI2025.devpost.com and make sure you submit your project before the deadline on October 31st, at 11:45 p.m. Pacific time.

Cloud Run Hackathon

4:21 · The final hackathon for this month is the Google Cloud Run Hackathon.

4:25 · Build and deploy serverless applications on Cloud Run.

4:29 · We're looking for projects that really showcase the power, simplicity and scalability of serverless technology.

4:35 · Your solution can fall into either the AI Studio, AI agents or GPU category, as long as they're deployed on Cloud Run.

4:44 · The choice is yours.

4:45 · As well as the grand prize winner, there will also be winning projects in each of the three categories.

4:51 · To enter, visit run.devpost.com and submit your project before the deadline, November 10th, at 5:00 p.m. Pacific time.

DevFest 2025

5:00 · We end this month's Google Developer News Show with a big one, DevFest 2025.

5:06 · DevFest is the largest community-led developer conference in the world.

5:10 · Last year, Devfest hosted over 560 community-led conferences globally, reaching over 810,000 developers in 105 countries.

5:21 · DevFest is a chance for developers, from aspiring to senior professionals, to come together to share what they know and learn from each other.

5:29 · We hope you'll join us to learn, connect and grow with fellow developers, no matter where you are in the world.

5:35 · Visit developers.google.com/community/DevFest to find a DevFest event near you.

Wrap up

5:43 · From powerful new agents to hackathons and DevFest, we hope our October updates spark new ideas and help you build something amazing.

5:51 · I'm Rody.

5:52 · Thanks for watching, and we'll see you soon.

How to Automate PR Summaries with Opal AI

Mon, 12 Jan 2026 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

How to Automate PR Summaries with Opal AI

Description

Uncover how Opal from Google Labs revolutionizes building AI systems with its intuitive natural language and visual workflow editor. This tutorial guides you through creating an AI-powered mini-app, Git-Clarity, designed to summarize GitHub pull requests efficiently. Understand Opal’s multi-step workflow creation, fast iteration capabilities, and instant hosting features, making AI development accessible for everyone.

Resources: Learn more → https://goo.gle/3Yx4aDq

Chapters: 0:00 - Introduction to Opal from Google Labs 1:06 - Opal’s intelligent multi-step workflows 2:10 - Exploring the generated workflow steps 3:29 - Verifying the complete workflow 4:52 - Iteration in practice: Refining output 5:25 - Sharing your live prototype 5:35 - Closing thoughts and future possibilities with Opal

Subscribe to Google for Developers → https://goo.gle/developers

Speaker: Rody Davis Products Mentioned: Google AI

Transcript

Introduction to Opal from Google Labs

0:02 · Opel is a new experiment from Google Labs that you can use for building and testing chained AI systems in minutes, all using natural language and visual workflows. In this video, we're going to be using Opel to build a fully working mini app called Git Clarity, an AI powered tool that turns any GitHub pull request into a clear one paragraph summary for non-technical stakeholders.

0:24 · We'll build this entire thing from a blank Opal canvas using only natural language prompts and Opel's visual workflow editor. There's no coding required here. Instead, you describe what you want and iterate visually. Opel is designed for maximum versatility.

0:39 · Opel is a sandbox for rapid AI prototyping. Perfect for anyone who wants to chain models, test ideas, iterate on prompts, and experiment with tool setups before moving to production.

0:51 · Today we're going to show a developer focused use case. How Opel lets us go from I want an app that summarizes PRs to a working UI, a chained AI workflow and a sharable tool in just a few minutes. If you're new to Opel, here's a mental model to help you throughout this demo. Opel intelligently creates multi-step workflows automatically adding steps like fetching web content, processing data, and displaying results.

Opal’s intelligent multi-step workflows

1:15 · In the visual workflow editor, every step is a component. Inputs, generate steps, and outputs are all visible along with their connections. This allows for fast iteration. We can change prompts, adjust steps, and rerun immediately using natural language. And with instant hosting and sharing, your app is deployed automatically and becomes sharable via a URL. We'll also get into the iteration process with Opel because prototyping isn't about getting it perfect the first time. It's about exploring and trying out ideas quickly.

1:47 · Let's get started. Here we're starting with a blank Opal canvas where we're going to build the entire app using natural language. First, we enter our prompt.

2:01 · Opel immediately interprets this and creates a workflow-based app. Not just a simple form, but a complete multi-step workflow. Check out how Opel automatically generates a title in an input field while intelligently creating workflow steps to fetch and process the [music] PR content. Okay, this is a pretty good workflow. Let's take a look.

Exploring the generated workflow steps

2:20 · So far, we got a user input step for the PR link, a fetch PR content step that uses the Git web page tool to retrieve the PR, a generate step to summarize the content, and an output step to display the results. Notice how each step can use different tools like maps and [music] web search. Let's click on the summarize PR step to see its configuration. When you select a step, Opel opens up a configuration panel on the right side.

2:49 · Here you can see the model dropdown.

2:52 · Opel makes it easy to choose from available models for each step.

2:57 · You can also see the current prompt in the editing area below.

3:02 · First, in advanced settings, we'll manually add some context about how we want the model to behave. You can edit the prompt directly, or you can use Opel's natural language editing to help update the prompt for you. We'll update it to say this. Opel has already created the output display for us as part of the automatic [music] workflow generation. This is useful to preview the model output while keeping in mind the model may provide different responses to the same prompt over time.

Verifying the complete workflow

3:30 · We'll now verify if the workflow is complete. In the editor view, we can see the GitHub PR link connected to get PR content which connects to summarize PR which connects to generate PR summary.

3:43 · All the connections are safely made.

3:45 · Opel's visual workflow editor shows us the complete flow. If we wanted to enhance this workflow, we could easily add more steps or tools. For example, we could upload reference documents from Google Drive using the add assets feature or add additional processing steps. But for now, our workflow is complete and ready to test.

4:07 · Time to test our app with a real GitHub pull request.

4:11 · If you click the app view, you'll see the immersive app experience. For now, we'll preview the app in the side panel in our editor view. In our output, we see the get clarity title and a start button. I'll click on it to begin.

4:25 · Let's use a PR from Google's now in Android repository. Paste the link in the input field and click submit.

4:33 · Watch as Opel runs through our chained AI workflow, fetching the PR content from the web, processing it with AI to generate a summary and displaying the result. [music] In seconds, we have a clear non-technical summary of the pull request. Exactly what we built this app to do. Nice. One of Opel's core [music] strengths is how easy it is to iterate and test changes. So, let's refine the summary prompt to improve the output. Go back to the editor view to use the suggest and edit box to refine the generate step.

Iteration in practice: Refining output

5:03 · Opel updates the prompt immediately. No need to redeploy or restart anything. We can test again right away to see the improved output.

5:14 · This is the power of rapid prototyping with Opel. Iterate quickly, test immediately and refine your chained AI workflows in real time. When you're happy with your prototype, you can click the share button.

Sharing your live prototype

5:27 · Opel generates a public URL that you can use to share with your team. And here it is live. You can think of Opel as a place where you explore, experiment, and validate AI workflow ideas before committing to production builds. In just a few minutes, we built Git Clarity entirely through natural language and visual editing, a chain system that fetches web content, processes it with AI, and displays the results.

Closing thoughts and future possibilities with Opal

5:49 · Beyond Git Clarity, you could use Opel to prototype customer support bots, internal dashboards, creative tools, data processing pipelines, or any chained AI workflow you can imagine. The sky is the limit. Try Opel out at Opel.google and start building your own mini apps today.

How to connect interfaces to the cloud with AI agents

Wed, 17 Dec 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

How to connect interfaces to the cloud with AI agents

Description

Verdure example → https://goo.gle/3XY7GX8 GenUI package → https://goo.gle/4oXUoou

Give AI agents massive reasoning models, real-time APIs, and the ability to perform complex tasks. Watch along as Googler Rody Davis leverages Agent Development Kit (ADK) to securely access databases, call internal APIs, and orchestrate complex workflows. Watch along and discover the power of GenUI SDK for Flutter.

Chapters: 0:00 - Intro 0:36 - What is Agent Development Kit? 1:17 - Rendering the UI for app workflows 1:56 -[Demo] Verdure 2:44 - [Demo] Building a new “Budget Slider” 4:32 - Summary

Watch more Flutter Flight Plans → https://www.youtube.com/watch?v=pMoUg3dkDJk&list=PLjxrf2q8roU1yXu4k7ivSLAa0cizD4feH 🔔 Subscribe to Flutter → https://goo.gle/FlutterYT

#Flutter

Speaker: Rody Davis Products Mentioned: Agent Development Kit, GenUI SDK for Flutter

Transcript

Intro

0:07 · [music] In a recent video, get started with GenUI and Flutter, we explored how to build dynamic client side UIs. We focused on local interaction, showing you how to create adaptive experiences without needing a complex server setup.

0:24 · Today, we're taking the next step. We're looking at how you can connect those interfaces to the cloud, giving your agents access to massive reasoning models, real-time APIs, and the ability to perform complex tasks. To do that, we can use agent development kit or ADK. It provides the infrastructure needed to build these powerful back-end agents.

What is Agent Development Kit?

0:44 · ADK is an open- source framework that handles the heavy lifting, reasoning, state management, and tool execution. to communicate with the user. The agents built with ADK use a standardized streaming protocol which we can use to have a standard way to send dynamic UI components to the front end. Decoupling your agents logic from the client implementation. The real power lies in what ADK enables on the server. Your agents can securely access databases, call internal APIs, and orchestrate complex workflows, things you can't easily do on a client device.

1:15 · But how do we render the UI for these workflows?

Rendering the UI for app workflows

1:20 · Instead of sending static images or HTML, the agent generates structured JSON payloads describing the intent of the UI. This is where Flutter Genui package comes in. Your app receives the structured response which might include an initial generated plan alongside specific inputs for refinement. It maps the schema to the widgets you defined.

1:42 · The agent provides the content and the controls and your app decides to render this as a seamless experience. This means your agent can think, fetch data, and update the UI incrementally without you having to write complex socket management code. Let's see this in action. This is for a demo of a landscape design agent. It is a Flutter client powered by an ADK backend. Let's say the user starts a new landscape design. The agent processes a request and responds not just with the text, but with a structured JSON payload describing the interactive interface.

[Demo] Verdure

2:15 · It's similar to how a web server might return a form, but here it's fully native. But unlike a normal client server form, it can generate unique questions based on the content that the user uploaded powered by Gemini. In this video, the agent composed a layout in its response and the Flutter app composed to gather the corresponding widgets. When the user takes action, it will update the client side data model.

2:37 · And when they hit submit as a user action, it will be sent back to the agent with the new context and returns the new state.

[Demo] Building a new “Budget Slider”

2:45 · This looks like magic, but the code is surprisingly simple. Let's build a new budget slider component in the Verdue sample to see what is needed on the client and server to have these custom components beyond what the default catalog provides. First, in Flutter, we can introduce the default widget catalog. Then, we can use the Genui package to map a name and a schema with a widget builder to the new custom component. Notice that we aren't writing any networking code here.

3:10 · We just tell the SDK if the agent asks for a budget slider, verify that the data matches the schema and render the standard Flutter slider. Now, let's flip to the backend.

3:21 · Since the Genui architecture relies on a standard JSON protocol to describe the widgets and intent, your backend can technically be anything. A Dart server, a Node.js app, or even a Python service.

3:33 · As long as it returns the correct JSON schema, the Flutter client can render it. However, to build a robust, scalable agent, we recommend using ADK. It handles the complex reasoning and state management for you. In our code, we simply define agents logic to have it return the UI structure. ADK takes care of the rest, bridging the intelligence back to your Flutter app. But why go to all this trouble? Why not just render markdown or HTML? It comes down to control. With Genui, you are not limited to just generic text and images. You define components.

4:05 · This means the agent can leverage custom interactive components like the budget slider that fit perfectly into your app's design system. You get the flexibility of generative UI without sacrificing the native look and feel and performance.

4:20 · Because we're sending lightweight JSON structures, not pixels or heavy layout code. The payloads are tiny. And because the widgets are in Flutter, you get 60 FPS animations and native gestures. By combining the Flutter Genui package with an ADK backend, you can unlock a whole new class of applications. Check out the Verdue sample and start building your own widget registry at github.com/flutter/genui.

Summary

4:44 · We cannot wait to see what you'll build.

4:47 · [music] [music]

Leverage Gemini in your Android apps, Global Gamer Challenge, and more dev news!

Tue, 16 Jan 2024 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Leverage Gemini in your Android apps, Global Gamer Challenge, and more dev news!

Description

TL;DR 373 | The Google Developer News Show

0:00 - Intro 0:09 - Leverage Gemini in your Android apps → https://goo.gle/4aZCnjN 0:51 - Announcing the Global Gamers Challenge → https://goo.gle/4aVHAZZ 1:23 - Solution Challenge 2024 → https://goo.gle/4b2gbpp

Here to bring you the latest developer news from across Google is Rody Davis. Tune in every week for a new episode, and let us know what you think of the latest announcements in the comments below.

Follow Google for Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow Subscribe to Google for Developers → https://goo.gle/developers

Products Mentioned: Gemini Nano

#Google #Developers

Speaker: Rody Davis Products Mentioned: Google AI, Gemini

Transcript

Intro

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi.

0:03 · I'm Rody for "The Developer Show."

0:04 · And this is your weekly update on the coolest developer news from Google.

0:08 · Have you integrated AI into your Android apps yet?

Leverage Gemini in your Android apps

0:10 · If not, now is the perfect time to leverage Gemini in Android.

0:14 · Android can run a local model called Gemini Nano on select devices.

0:18 · But to target all Android models, you can use Gemini Pro, which runs off device in Google data centers.

0:24 · Gemini can be called via the Gemini API and Google AI SDK.

0:29 · To get started with prompts and testing various interactions, you can use the new Google AI Studio to generate API keys, code snippets, and easily go from idea to app.

0:38 · Lastly, you can import the fresh generative AI sample in Android Studio.

0:42 · Make sure to leave a comment and let us know what you're building with Gemini Pro.

0:46 · To learn more, check out the Android Developers blog link below.

0:50 · We are excited to release the new Global Gamers Challenge for Flutter.

Announcing the Global Gamers Challenge

0:54 · This is an eight-week contest to design, build, and publish sustainable games sponsored by Flutter and Global Citizen.

1:00 · The awards will be judged based on the following criteria-- originality and creativity, sustainable action and story, use of animation, and effective multi-platform development.

1:11 · The contest winners will receive a trip to New York City in September and meet some of the Flutter team for a day of workshops and mentorship, and then celebrate with 60,000 global citizens at the Global Citizen Festival in 2024.

Solution Challenge 2024

1:24 · To learn more, check out flutter.dev/global-gamers.

1:29 · If you're a student developer, then check out the new Solution Challenge 2024 for using technology to address UN sustainable development goals.

1:37 · This year marks the five-year anniversary of the Google Developer Student Clubs Solution challenge, and we're excited to be back.

1:43 · There are some great prizes.

1:45 · And the first hundred winners will be announced in April.

1:47 · Make sure to submit your project by February 22 at the link below.

1:52 · To learn more about all this week's stories, make sure to check the description box below for all the links.

1:56 · Please remember to like, subscribe, share, and stay safe.

1:59 · I'm Rody for "The Developer Show."

2:00 · Thanks for watching.

2:01 · And we'll see you next week.

2:02 · [MUSIC PLAYING]

The Gemini Cookbook, Popover API lands in Baseline, and more dev news!

Mon, 29 Apr 2024 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

The Gemini Cookbook, Popover API lands in Baseline, and more dev news!

Description

TL;DR 388 | The Google Developer News Show

0:00 - Intro 0:19 - Popover API lands in Baseline → https://goo.gle/4a3qs2K 0:44 - Achieving privacy compliance with your CI/CD → https://goo.gle/4a6n0Vi 1:24 - Safely repairing broken builds with ML
1:54 - Improving Gboard language models via private federated analytics 2:37 - Gemini Cookbook → https://goo.gle/44jp9vq

Here to bring you the latest developer news from across Google is Rody Davis.Tune in every week for a new episode, and let us know what you think of the latest announcements in the comments below.

Follow Google for Developers on Instagram → https://goo.gle/googledevs

Watch more The Developer Show → https://goo.gle/GDevShow Subscribe to Google for Developers → https://goo.gle/developers

#Google #Developers

Speaker: Rody Davis; Products Mentioned: ‎Gemini, Web Stories - General;

Transcript

Intro

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi, my name is Rody, and I'm a developer relations engineer on the developer solutions team.

0:08 · This is your weekly update on the coolest developer news from Google.

0:11 · Make sure to check the description for any links or topics mentioned.

0:15 · Now let's get started.

0:17 · Starting with the web, the Popover API lands in baseline and in all major browsers, which means it's safe to use in your applications and websites.

Popover API lands in Baseline

0:25 · If you're unfamiliar with the API, it allows you to promote content to the top layer, add light-dismiss, default focus management with tabbing, and finally, accessible keyboard and component bindings.

0:36 · The Popover API makes it possible to create complete interactions that previously required JavaScript.

0:41 · You can learn more on the web.dev blog.

Achieving privacy compliance with your CI/CD

0:44 · Next, we have two stories to help you with your continuous integration and delivery pipelines.

0:49 · First, on the Google Developers blog, you can read about how to achieve privacy compliance using checks.

0:54 · This integration into CI/CD allows you to move towards automating compliance and privacy standards as part of the release cycle.

1:02 · There are multiple benefits when adopting checks into your application release pipeline.

1:06 · This includes real-time intelligent alerting, understanding data sharing for third-party SDKs, making sure you follow company policies, keeping your Google Play Data Safety section up-to-date, and deploying quickly with confidence.

1:20 · You can learn more on the developers.google.com blog.

Safely repairing broken builds with ML

1:24 · From Google Research, you can now learn how machine learning can be used to safely repair broken builds as part of a CI/CD pipeline.

1:31 · The DIDACT ML model is used to predict build fixes and repair them automatically.

1:37 · This model, which ran as an experiment for 11 weeks, resulted in 2% reduction in active coding time and developer time after a change was submitted to review as well as a 2% increase in total change throughput throughout the week.

1:51 · You can learn more on the research.google blog.

Improving Gboard language models via private federated analytics

1:54 · Next, heading over to AI, we can learn about how Gboard has been improving its language models via private federated analytics.

2:01 · Gboard uses language models to improve typing through features like next word prediction, autocorrection, Smart Compose, slide to type, and proofread.

2:10 · To boost Google's keyboard performance while keeping the user data private, we have worked with language experts to refine its dictionaries, developed novel privacy-preserving techniques based on federated analytics and differential privacy to discover out of vocab words directly on the user's devices, and employed secure hardware infrastructure for confidential and externally-verifiable server-side data processing.

2:32 · You can learn more about the approaches taken on the research.google blog.

2:36 · And finally, you can learn about some of the new exciting additions to the Google Gemini Cookbook.

Gemini Cookbook

2:41 · This GitHub repo contains lots of examples that can be run on Colab, targeting Python developers, or anyone wanting to work with Gemini via REST.

2:49 · Some of the exciting quickstarts include content for the following-- system instructions, function calling, embeddings with RAG or Retrieval Augmented Generation, uploading files like audio and PDFs through the Files API, finetuning, JSON mode, streaming, and safety.

3:04 · There are so many more examples not listed, but make sure to check out the GitHub repo.

3:07 · You can open any of them in Google's Colab and grab an API key from Google AI Studio to get started.

3:13 · You can learn more at github.com/google gemini/cookbook.

3:18 · To learn more about all these week's stories, make sure to check the description box below for all the links.

3:23 · Please remember to like, subscribe, share, and stay safe.

3:26 · I'm Rody for the Developer Show.

3:27 · Thanks for watching, and we'll see you next week.

3:29 · [MUSIC PLAYING]

Offline vector search with SQLite and EmbeddingGemma

Wed, 26 Nov 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Offline vector search with SQLite and EmbeddingGemma

Description

Learn from Rody Davis, Senior Developer Relations Engineer at Google, how to query and embed documents using SQLite and embeddings with EmbeddingGemma and Gemma3. Create an offline RAG system that runs in the browser offline.

Resources: Github → https://goo.gle/4p2b3b1

See more Web AI talks → https://goo.gle/web-ai
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

Event: Web AI Summit 2025

Speaker: Rody Davis Products Mentioned: AI for the web, Gemma 3

#ChromeforDevelopers #WebAI

Transcript

0:01 · [music] How's it going? My name is Rodie and I am a developer relations engineer at Google working on the AI workflows team.

0:14 · Super excited to be here today at the WebAI summit. Something I'm very passionate about is ondevice and local first types of applications. And so before we get started, let's talk about vectors and databases. Vectors, as you know, can be generated um with both hosted and local models. There's a lot of trade-offs that go for each one of those and typically uh will require specific needs of your application. So, vector stores can grow quite large and often require an API to access.

0:43 · And while that's fine for certain types of applications, uh it may not be ideal when you have intermittent network connectivity, for example.

0:54 · Uh one important thing about vectors uh if you're not familiar with them is you have to have the same encoder and decoder uh both wherever you use to query and to update documents. And this is really important because you can't take advantage of like a really powerful um encoder and then a very lightweight decoder. You have to use the same um which was kind of frustrating when I uh was first getting into it.

1:19 · And then another thing that uh server side can really take advantage of is they can be so much faster because they have a lot of RAM. They're optimized for NVME storage. But I've listed a lot of pros on the server side, but why would you even want them on the client? Well, first of all, you can store the vectors just for the user. You never have to worry about running a query and getting some sort of uh dimensionality for uh content that's not theirs.

1:47 · You can also just have the advantage of it already being partitioned for that user on the client.

1:55 · So with most things that require trade-offs, usually a hybrid approach is more appropriate. And in this case, we can use the server side to have some nice parallel compute to be able to batch encode a bunch of vectors. And we can store them inside of Firebase using Fire Store vector support which was added.

2:15 · And of course there's vector databases that already work um a lot better for vectors, but one of the nice things about fire store is it gives us a nice syncing uh modality that we can use on the client that we can store everything in a bucket per user. Um and really it's meant to be a fallback when the model isn't downloaded. I'm a huge fan of SQLite and one of the cool things about SQLite is you can load extensions including vector support. So we can actually pull in those vectors from fire store into SQLite and then you can query them directly on the client.

2:46 · But here's where the magic really starts to happen.

2:50 · When you go to update models, you can use that local encoder and decoder to incrementally regenerate new documents.

2:59 · This makes it really nice to pull down a massive data set and then as the user is making changes and edits, you get to keep that up to date without having to do that round trip and requiring internet always.

3:10 · So, embedding Gemma is a super awesome encoder and decoder uh that we have launched and I really love it. It's about 38 million parameters. It's meant to be run on mobile devices but just because you can do that doesn't mean you can't use it on the server which is really awesome including support for things like cloudr run where we make it really easy to launch it on uh with Olama. So you can have a nice fallback API when the model isn't downloaded yet and you just want to have this kind of ad hoc experience.

3:41 · One of the reasons I like using it is it has 768 dimensions.

3:47 · So it has a very significant uh quality for the types of uh tasks that you can throw at it. It's still configurable and uh the just the whole Gemma family is really awesome. Uh but well I know a lot of people today have talked about Jimma 3N and you can totally use that with this but for this talk it's just going to be on the the database side and vector support uh without LLMs.

4:12 · Another cool thing about uh these models is you can use transformers.js which was uh talked about many times today. It allows us to use the CPU and GPU to run inference on these uh encoder models and it also supports the 768 dimension space that embedding Gemma can use and output for the vectors.

4:33 · Here's a uh code snippet on how you would get this running with embedding Gemma. I'm using the uh Onyx runtime for the embedding Gemma version of it, the 300 uh million parameter option. And here we can just create a simple pipeline that uses feature extraction as

4:50 · well as being able to take that embeder give it the correct task type which it can be query or document or others listed on the documentation and then we just kind of uh normalize the vectors before we return it back and since we're on the web it's important to return it as a float 32 array because that's what SQLite's also going to expect um for the storage as well as fire store.

5:14 · So like I said, fire store supports vectors which is awesome. It makes it really easy to sync. Uh when fire store will first load into your application, it'll pull down the documents that you have queried for that user. And as you make updates, fire store takes care of all of the work of if you update a single document on the server side, it will just pull down the incremental uh patches as well as making updates can send it back up to the server. So you don't have to manage any complex sync logic on your side.

5:41 · But they also launched vector support which means you can literally add the vector type directly into those documents keeping it collocated with that user and their collections.

5:54 · So here's just a simple snippet of how you might do that in fire store uh using the the modular JavaScript SDK. You can just create a fire store application using the uh the app that you initialize and in this case it's an emoji application and you have the embedding which you can then add the doc and then use the vector type which you can import as well from the SDK.

6:17 · So SQLite huge fan uh there's a really cool project called SQLite VEC if you're not familiar with it I definitely suggest you give it a look. uh it allows us to use low-level KN&N queries uh directly inside of SQLite by extending the syntax. Uh this project has also expanded a lot since the first version.

6:37 · It now has metadata filtering, partitioning and virtual columns and so much more. But this allows us to create those embeddings directly into SQLite.

6:47 · Now, you can also store the the blobs of the float 32 directly inside of um regular tables, but one of the cool things about the virtual tables is it's optimized for those queries. So, it doesn't have to scan do a full table scan every time you uh do a query. Also, SQLite compiles to Wom and you can add any extensions that you have inside of that.

7:12 · So, um, in this example that I'm going to share on GitHub later, uh, it has SQLite vec pre-installed, but you can totally add your custom ones as well.

7:22 · So, here's an example of how you might do that in SQLite. Uh, we're importing the official uh, SQLite package here uh, from SQLite.org as well as just pulling down the Wom module. You can just create it like another table using the VEX0ero uh, table syntax. And this allows us to have that float 768 dimension syntax.

7:43 · And you would obviously change this for the type of uh encoder and decoder you're using. But that's it. You just work with it like a normal SQLite database if you're familiar with that.

7:53 · But this is all happening on the client.

7:55 · It can do massive data sets. It's often that you can run millions of queries in just like a second on uh on the browser.

8:02 · So definitely suggest giving it a look.

8:05 · So when it comes to querying, it's also very similar to SQL. I know this may not be familiar for everyone, but uh as a a mobile developer and someone who likes to build applications, writing SQL queries on the client, knowing it's just the data set makes it really easy to create the types of views that I want.

8:22 · And in this case, I just query from the emojis embedding table. I join on that foreign key and then here's where the magic comes in with the match keyword, which is using the ve0 functions as well as the KN&N queries with the limit. and then we can order it by the distance and then uh grab it out and present it to the user later.

8:43 · So, time for a demo. This is a uh a little bit different take than the other demo from earlier which was about using embedding Gemma for um emojis. I want to create a better vector search for emoji emojis. So, I took the entire Unicode data set and I vectorized each of the descriptions with the emojis. So as you're typing it returns the emojis that are closest to that embedding space based on what your query is and each time you on key press it will actually vectorize the query itself.

9:14 · So this model once it gets downloaded onto the browser this can happen completely offline. So you can obviously expand this to other applications where you can have uh documents that you pull in for your business data or just specific uh types of tool calls like for example you can vectorize a thousand tool definitions and only provide maybe five to the model at any given time. It really opens up and expands the types of use cases that you can build. Um this code is available uh on my GitHub.

9:46 · You can check it out at emojis search. Uh I am uh usually pretty available on GitHub and Twitter and LinkedIn. So uh definitely feel free to reach out. But uh thanks so much.

10:01 · [music]

Flutter & Antigravity | Observable Flutter #76

Thu, 20 Nov 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Flutter & Antigravity | Observable Flutter #76

Description

Watch as Craig Labenz is joined by Rody Davis and Andy Zhang to explore Flutter development in Google's new IDE, Antigravity.

Download Antigravity → https://antigravity.google GitHub → https://goo.gle/4nBfIQj

Watch more Observable Flutter → https://goo.gle/ObservableFlutter Subscribe to Flutter → http://goo.gle/FlutterYT

#Flutter #ObservableFlutter

Transcript

0:00 · [music] Hello everyone and welcome to another episode of observable flutter.

0:13 · My name is Craig Labenz and I'm your host and today we are treading into uncommon rare ground in observable flutter history where I have the pleasure of being joined by not just one but two esteemed guests.

0:28 · One most of you probably already know and the other you will know in short order.

0:34 · So as you may have heard there was some news recently. Google has a new AI based editor and it's called anti-gravity. I've of course been playing around with it a lot. Maybe some of you have as well and today we're going to kick the tires and I I'm very excited about the guests today a lot of expertise.

0:57 · They've both either used or been working on gravity quite a bit. So before we get too far into it please do recall that this is the flutter community. We hold ourselves to a high standard and I know today we will meet and maybe even exceed that standard.

1:16 · All right.

1:19 · My guests today are both Roddy Davis and Andy Zang. They work at Google of course. Roddy is one of my compatriots in the developer relations wing of Google and Andy is a design engineer on anti-gravity and has been building it for I don't actually know how long.

1:37 · We'll let Andy tell us that.

1:39 · So Andy and Roddy welcome to observable flutter. You can introduce yourselves.

1:46 · Hey guys. Great to Great to be here. My name is Andy. I'm a design engineer on the anti-gravity team.

1:53 · And great question earlier. I've been working on anti-gravity for just over 3 months now. So it's been a very very exciting crazy 3 months and we're super happy to put this out in the wild for everybody to be using it.

2:06 · I'll pass it on to Roddy now. Cool.

2:08 · Awesome. I'm Roddy. I'm on the AI workflows team at Google. I'm in DevRel and I'm super excited to be able to think about all the ways that we're using Gemini that includes Gemini CLI, anti-gravity and a bunch of other services that you have come to love.

2:24 · I also really love working with the flutter team and all the different full stack projects across Google.

2:32 · Nice. Yeah. Okay. So it's funny you know the the answer of 3 months is is quite funny. It's really not a very long amount of time but I think as a lot of people know this all came out of the Windsor fact position which was just kind of mid summer of this year. So it couldn't have been much longer than that and uh so obviously these projects take a lot longer than 3 months but Google has has scrapped this together very quickly very honestly impressively.

3:01 · I didn't know what to expect the first time I launched anti-gravity and just a few nights ago I was coding with it of all night. I was preparing to open source this library that I've been working on and I found it to be extraordinarily delightful and helpful in a way that really exceeded my expectations and you know I'm I'm not just saying that like that was my my very real experience using it.

3:27 · So Roddy recently you put up you you just kind of screen recorded something put up a quick video on YouTube.

3:35 · Folks may or may not have seen that. Can you walk us through what you were doing and just kind of how you think about using anti-gravity?

3:43 · Yeah.

3:44 · So anti-gravity is like a really cool way to start from scratch or kind of work at multiple levels at once. Um as people know like when you're working with flutter it's really common to have a bunch of like mono like a mono repo with like sub packages and specifically anti-gravity has a thing called an async manager and you can actually open up individual packages. It's like their own like sub projects and be doing a bunch of tasks across everything at once.

4:14 · Um the video that I uploaded was like starting from scratch with flutter and like that end to end experience of like I have this idea for an app. Can you come up with a plan iterating on the plan and having it like do native dependencies, fix cocoapods for you and also even run Mac OS in the background and it was really cool.

4:36 · I I had a great experience with it and when you can get it working with it under like 10 minutes I feel like that's usually a good sign of success. So Fixing cocoapods too. That is the real challenge. [laughter] No small feat.

4:53 · That's flutter development's version of you know does it run on IE6? Yes. Yes.

4:58 · Windows or from web development like 10 15 years ago. Yes.

5:04 · Interesting comment here. So I'll obviously just go to chat randomly. Kyle says hoping we can get rid of Gemini 3 is going to start working suddenly and wonder how powerful it is but it's completely broken in anti-gravity. I presume you're basically talking about the the quota issues. Gemini 3 has been in demand and I it's been really fun I think to see how many people all around the world are using it but uh you know there are for more servers. Yeah.

5:30 · [laughter] GPUs and they're they're trying to slap more into those data centers as fast as they can. Uh all right. So at some point today we're going to I'm going to launch anti-gravity and we're going to we're going to play around with it and actually try to build something and if we've obviously got Andy here to make sure we don't miss any of the bells or whistles that might be less obvious.

5:51 · Either of you two have any other thoughts before we get into that?

5:56 · Um I would say this is like a really cool opportunity for people that are looking for a desktop driven agentive experience.

6:05 · If you think that it's just a VS code fork you know you definitely wouldn't be remiss because like it does share the same extensions and other stuff. But it really does like have so many little DX features that have added up to like bring a really delightful experience when working in this IDE. Like for example the ability to like kick off like background sub processes.

6:28 · You're in the terminal and I can highlight a part of the terminal and then have that put into the chat or being able to like debug things like in all the different levels. When you run a web server it opens up a notification that can open up the browser and control it, take screenshots and take it's like this this full end to end experience that I always uh kind of wish that VS code could do but I just feel like it does it at just a really nice level and then things like the async manager and really deep Gemini integration.

7:01 · Yeah. I think Roddy couldn't have said it better on that. I think we've really spent a lot of time trying to think of exactly about the things you were just talking about which is the end to end experience.

7:09 · There's a lot of work that happens in the editor but there's also so much work that happens inside of the browser and there's so much work that happens in the research and why have such a fragmented experience across like these different services when you can all have it bundled in one and I think that cohesion of all of it in bundled in one really makes the developer experience just way more delightful and I think that folks are going to find that in anti-gravity.

7:31 · Yeah. Like I I literally caught myself copying logs. I was like wait like this is now a built in feature. I no longer have to do that. I can just say look at this terminal tab and then just grab it for me.

7:41 · [laughter] Yeah.

7:43 · I think a big part of Oh go for it actually. I was just going to say I I actually don't think this is why I was really excited to have you specifically on Andy and I I imagine Roddy also knows a lot of these things.

7:54 · Mhm. I think right now I am the opposite of an anti-gravity power user. I have not done any of these native terminal like just piping the text through from one thing to the next features that you two are talking about. So anyway I'm I'm excited to see these in action.

8:10 · Yeah.

8:12 · What were you going to say Andy? Yeah. I was going to quickly add before we we jump on to the demos that I think the the really cool thing about building anti-gravity as one of the design engineers on it is that like you use the tool that you are building and so to that flow of like you know like you have these terminal logs like oh I got to like move it around. Like there was at some point someone on the team was like this is frustrating like why don't I just go ahead and build this so that it's just way easier. And so when you have an entire team of people who run into these issues and they are actually in control of the product.

8:45 · That's how you you end up with the situation where the product it feels like as if everyone has really thought through all these things that users kind of go through and so hopefully that's what folks experience when they try it out. Mhm.

8:57 · [clears throat] Totally.

8:58 · So that begs the question. There was a developer who was working on anti-gravity and they were tired of piping you know manually copying and pasting error logs and then they built the solution to it in the anti-gravity. So are you all building anti-gravity in anti-gravity? Exactly. It's it's anti-gravity inception.

9:17 · [laughter] Nice.

9:20 · Best way to dog food. That's for sure. Hell yeah. Yeah. Yeah. Exactly. All right. Well I'm ready if you two are ready. So [clears throat] I don't have a tremendously detailed plan today for what we're going to build. Long time viewers will know that I often just ask chat for inspiration on what we want to build but I'm also happy to take suggestions from either you Andy or Roddy but yeah let's let's begin here.

9:48 · So I'm going to share my screen which is right here. And here we go. I'll make the text a lot bigger. Now, my first question for both of you, and you can answer in whatever order, or as is tradition, just talk over each other. I am not I would say I'm not natively drawn to, or an expert in, or feel very comfortable in the agent first workflow.

10:22 · So, how do you And maybe I'll start with you, Andy. How and you are you imagining developers who want to really experience the agent first workflow use Antigravity? Like, where should I click? What screens am I on? How do I think about it?

10:42 · Yeah, I think that's a really good question. And I think, you know, a lot of developers were just fluent in code, and that's kind of what we live and breathe, because that is ultimately the source of truth.

10:52 · But as folks shift towards more of a like an agent first view, it really takes a bit of time, you know, you're seeing a lot of unknowns, and you're like, I haven't seen this before, and I don't know if this if this is for me. And as you use it, some people might love it, other people might still prefer the code. And ultimately, what we try to bake in is for you to have the agency to pick, like, I actually prefer working in code, so I'm going to stay within the editor.

11:15 · But if you want to work in something more agent first, we do have a the the agent manager, which you where your cursor currently is. Um and in that view, the focal point is a lot more on the agent. And so, suddenly you're able to like focus specifically, like, oh, like, this is what I should be doing next, which is starting a new conversation in this this current workspace Story Forge.

11:42 · And then from there, the agent will kind of carry you along the journey of like what it's kind of working through.

11:47 · And at any point when you realize, like, hey, this might not be for me, I prefer go like stay in the code, you still have the open editor button on top right, or over there, right below the input, to bring you back into a more familiar experience in the editor. So, it's really just like you get to choose your own adventure, depending on what you want to do. If you want to read code, the editor is there for you. But if you want to read what the agent is doing and thinking for you, then the agent manager, or the side panel within the editor, is the right fit for your use case.

12:17 · So, ultimately, the flexibility is built in for users to dip their toes in the agent first experience, but also always hop out when they want to.

12:26 · So, I think, one of the interesting ways to think about it, if you're like really deep in the Dart and Flutter world, is this is like build runner, but with a prompt, and you can have multiple sub processes going at the same time. Uh you know, if you're doing a lot of Flutter work, it's probably common that you're going to have a bunch of uh folders cloned on your your development machine, and you're going to have a bunch of probably internal packages, external packages, uh and at

12:56 · any given time, you may be wanting to make sure the change log is up to date, and you're bumping a version, or you're over here making sure that I've updated all the dependencies. There's there's a lot of like common tasks that in Flutter and Dart that just have toil that either have commands run um that aren't necessarily complicated, but this is where like an async manager can be really nice, cuz you can you can have all of your your packages that you've cloned uh like as like top-level things with subtasks.

13:27 · And you can be saying, like, okay, go update this, and then you can go work on your project, and then you can come back, and you'll see this is waiting for input from the user, so I can see, yep, oh, that looks good, go ahead and publish, and then you can kind of be working around. It kind of gives you that ability to just like hyperthreading to be able to switch processes faster while keeping your keeping yourself in the zone a lot more of the time.

13:55 · Yeah, so one one question I have in response to all of that, and it it kind of I guess it's in in response to one of the first things that Andy was saying. Is it true, like if I actually haven't even tested this.

14:07 · This is a genuine question. Is it true that if I start some conversation here, like, you know, please I don't even know if I already did this or not, but please update this to the latest Flutter and Dart versions.

14:23 · [clears throat] So, we'll see I'll just let this go. Look, it may already the task may be complete.

14:28 · The difference between the agent view and the typical editor view, is it really just that the code is hidden?

14:34 · Like, if I click editor view right now, I'll see this same conversation happening. Yes, but it's also in another window. I think that's what confused me. Think about it as like a menu for your sub projects. So, it's like it lives above the the folder level. Like, this is like across anything that's inside of Antigravity.

14:58 · So, it's like your front door, basically. Like, you can you can have things in 20 different directories all open in the async manager. They don't have to be all in like the same sub project.

15:08 · Yeah, I think that's a really good way to think about it is that you ultimately become like more zoomed out, and that's also the reason why we call it the manager, because you're just not just focus on one folder anymore. You can zoom out and see many different things.

15:20 · And that just gives um so much option for you to just like spin up like as many as you want across as many workspaces as you want, and just feels a lot more powerful. I see. Okay. All right. All right. Yeah, the I was originally thrown by the jump in the jump to another window here.

15:41 · Oh, we're going to beta. All right, let's do it. Let's jump to beta. And the quick way to do it is command E. And you can Okay. kind of jump out into it. Yeah. Oh. Is that toggling windows, or is it staying within the same window? It should be opening it up as a new window. Yeah, cuz it's its own experience. Yeah.

16:05 · Okay. I think I have some uh some more tire kicking to do there. One thing that I expected I got used to in the Gemini CLI, whenever it wants to run a command, you've got the three options, yes this time, yes always, and you know, no, what are you thinking?

16:24 · There doesn't Is there a yes always? Cuz it feels like when it wants when it comes back for input, I'm not seeing a way to say like, yes, and you don't need to ask. Uh Andy, you want to talk about some of the settings that are available?

16:42 · Oh.

16:43 · Andy's connection is not what Andy hoped it would be.

16:49 · [laughter] Yeah. He'll be back at some point. Brody, you want to talk about Yeah, go ahead. So, basically, if you click on we should have an Antigravity user settings that is in the gear icon on the top.

17:04 · Basically, command comma, I'm guessing you're Yeah, and so here is actually where you can choose when to trigger those terminal. You can say like at what level the agent deciding if it's going to request permission is the first option in that drop-down. And you can say like always proceed. And and if you keep scrolling down, this is like where you can really start to fine-tune it for your exact preferences.

17:29 · Um you can even like disable you know, allowing anything at all. You can auto-execute always. You can even like say like, I'm going to explicitly allow Flutter and NPM as things that you never have to request. And so, this is like kind of that space where you can customize cuz everybody's going to have a different level of um um Oh, I see. So, I could say like, you know, Dart is always allowed. Yeah.

17:58 · Oh, is it a comma-separated list here?

17:59 · But never use like never run RM or something. Yeah. Right. And that's exactly what I was going to say. Yeah. [laughter] RM is off limits. Yeah. Uh okay, also I would make this bigger for everyone, but command plus and minus don't work on this window. So, apologies, folks, for the small text. So, I have not read all of the settings here.

18:18 · And it to avoid just doing that, you know, reading aloud for the class, are there any on this screen, Brody, you just called attention to the allow list and deny list for commands. Are there any others on this screen that we should think about specifically?

18:36 · Maybe not this one, but on the left side, you'll notice that there are tabs over here, and these are good ways for folks to really configure not just the agent experience, but the entire Antigravity experience.

18:48 · One of the core features that is probably one of my personal favorites now when I'm doing web development is the browser, and how it's able to go ahead and make changes for you. So, Oh, is is my connection No, it's from a few minutes ago. You're perfect now.

19:03 · Okay, great. Yeah, yeah. I just connected Ethernet, so apologies for being disconnected, but I should hopefully be good now. Um Hardwired will do it. Yeah, lesson learned. On the browser side, over here, as you can see, like, there's a really great integration with the browser with Antigravity, and you should be able to like configure it over here. There's also the execution policy for JavaScript, and also if you want to enable and disable it.

19:32 · Um obviously, there's also configurations with the editor, given that it is a VS Code fork, so folks can change the settings with the editor however they like. Um and then notifications in tab as well. The notifications are great. It's nice to be able to like literally be on a different program, and just like it notifies you that you have something to review. That opens up the async manager and I can jump right back in.

19:58 · Mhm. Okay.

20:00 · So, as an example of the Nice. Yeah. It's really, really nice if you just have a bunch of things running and you know you want the agent to like intervene and like tell you if it's block it doesn't want you don't want it to RM something. So, it's going to be like "Hey Craig, like you want me to RM or this or not?" You're like "Thank god you asked me. You go ahead and [laughter] you just like do not RM my root directory."

20:26 · Or any other directory probably.

20:27 · removing all bugs on deleting the project. So. Yeah, exactly.

20:30 · [laughter] Yep, can't have bugs if you don't have code. Uh great question here from Kyle for the browser you are allow list. Is this for something like pinning documentation? Like what what uh how should I think about this?

20:40 · Yeah, that's a great question. So, basically um the browser integration the way it works is that it's going to open up uh Chrome in a different profile. Um this profile is different from your usual Chrome that you open uh and it has like a set of white list that you might allow um when you when you first uh when you first onboard. Um but sometimes when it's on a new website uh it will it will always request for permissions if you want to add it to your allow list or not.

21:08 · And that way um you have confidence that it's not just going to go rogue and like start modifying a bunch of websites that you didn't give it permission in, but instead it will always make sure that you consent to uh it having control on a specific website before it does anything such as uh scrolling through the page, clicking on it, uh typing out input and a lot of typical browser actions that uh we typically do as users.

21:34 · And I this would also be to help uh hedge against like the LLM is taking control and going to be taking screenshots. So, if it uh tries to click on links that are like maybe malicious or uh what you're not intending on, this is kind of like keeps that little sandbox uh for you know known websites.

21:52 · Mhm.

21:53 · Uh interesting. So, I mean, hopefully one doesn't have malicious links in their own projects. Otherwise, something very strange is going on.

22:02 · Like in in a website that you're crawling or something. Yeah. I see. So, that the browser there is not only for it to test your web-based app, it is also for to crawl the web and do random things cuz obviously Gemini CLI and if you go to gemini.google.com and other LLMs as well will look up stuff for you, but they do it in a headless way.

22:28 · Am I hearing that this will also kind of do some research on your behalf and you can watch it research as it crawls different websites. Is that what's going on here?

22:38 · Um that is not the primary use case for it.

22:42 · Uh but if you ask it to, it has the ability to do that. Um the the agent obviously has the ability to decide like how it wants to proceed. And so, to your point like if there is more efficient approach like the headless approach or hitting an API endpoint, it's going to go ahead and do that as opposed to opening up a browser, waiting for load time, loading entire like DOM, and then actually clicking on things. And so, um it will it knows the options available and it will always find the most efficient ways of doing things based off of your preferences. Mhm.

23:11 · [clears throat] Okay, so anyway, this looks basically like a you know SSH hosts file or or [snorts] something where it's just it's a one one domain per line, I'm guessing.

23:21 · Exactly.

23:23 · Um and localhost is there because the primary use case um that that I I personally love is specifically for live coding when you are trying to spin up a a website and you are um you're just ripping it you're letting the agent just go crazy and um build a ton of features across many of your different conversations. And then um the browser is able to just start testing it for you uh and as after it's done testing it, it's also going to be able to record what it did while it was testing.

23:50 · And so, you could just be in the agent manager and be like "Oh, like can you just show me your work?" And it shows you the video recording of the thing that it built and also uh how it tested out whether it's a scrolling or like clicking on different buttons. And when all of that happens, it's like "Oh, like not only did it write all the code for me, but it also has proof that the website works as expected." Um which saves a lot of work on our end and gives a lot of trust in the code that was written.

24:17 · Um maybe something Andy uh could you talk about like just the level of control it has over the browser cuz I think a lot of people think it may just like kind of open it up and do it kind of basic stuff, but I've been really impressed with how powerful it is. I I'd love to see that as well. Maybe we can throw together Let me Let me just actually let's I'm going to start a new project. It'll just be Flutter counter. We'll run it in Flutter web. And then let's see it uh driving that. I think that'll be pretty fun.

24:46 · So, I'm going to go to I don't think this code is going to be interesting. I have a repo where I put code that I write on this show and I don't think uh yet another Flutter counter app needs to be committed. So, this could be an example of using the async manager if you want. Uh if you want to start yeah. Do command E. Whoop, that's a bigger than I was expecting.

25:12 · [laughter] So, the reason that happened, I kept pressing plus Oh, plus plus plus minus minus plus plus plus plus plus on the settings tab. And it wasn't rendering there, but it was doing something and it was waiting.

25:24 · [laughter] Oh, that's funny. Okay, so uh Roddy Yeah, so the async manager. Yeah, go ahead and hit uh command E. And um I believe it would work in the playground, although um I would suggest like uh we could just start a new conversation at the top.

25:43 · Okay.

25:44 · And then this is where you can say I want to create a Flutter app, use the Flutter create tool, uh blah blah blah. Now, what's I don't want to be in this Yeah, I kind of want to just be like nowhere.

25:56 · Um so, I don't want to be in this other workspace. No, that it should be um uh start a new conversation should be the folder, but you can um Yeah, so apparently I I have a folder that doesn't exist, but now it seem I don't know. Let's just see what this does. Oh, yeah, this is this should work. Yeah. Okay, yeah. I thought the button, yeah.

26:18 · Which only targets web, use the empty template. Let's see if it a femoral file system, right?

26:28 · Oh, I may need to create this folder?

26:32 · Let's see.

26:34 · Um I think you should be good. Press okay.

26:38 · Oh.

26:41 · Well, given that there apparently wasn't a problem, that was a surprising pop-up.

26:46 · So, uh you've mentioned the async manager. Is the async there just that the task is going to take however long and it comes back when it's done?

26:55 · Uh it's just really a manager, but um it's optimized for seeing all of your async tasks and what the latest state is. I wonder if it is blocked on this folder not existing.

27:05 · Yeah, maybe maybe what we could try doing is we can open up a uh another new directory uh and then opening up that as a workspace. Um you can do this within the agent manager as well. Okay. Uh so, like here I would just say open a GUI in some new directory. Uh no, so so open up a new workspace um from the sidebar.

27:29 · Um so, if you press on the taco button at the top, um you'll see that there's an open workspace below. There you go. And this allows you to add another workspace um within um your your file explorer. And so, here you can just designate another one. Yeah. Uh and this is when you can really just elevate your experience in Antigravity to be working across many, many different workspaces. And this is a lot obviously a view that you just don't get when you are inside of uh the the editor.

28:00 · So, would a workspace like I have this little folder here uh called Flutter DevRel FDR, not to be confused with the president. And I've put a ton of scratch projects in here. Is this the kind of folder that would make sense to be a workspace or should I be one more folder in?

28:17 · Workspace should be like yeah, the individual one.

28:20 · Yeah. Mhm.

28:21 · Okay, so I need to make a new folder here and this would be like Yeah. Uh AGUI web test and that's my workspace. Yep, exactly.

28:30 · Okay.

28:31 · All right.

28:31 · And keep in mind you could have like a folder open from downloads, another one open from your developer folder, another one in documents, and they're all like inside the async manager.

28:40 · Okay.

28:41 · So, create a new Flutter web project which or Flutter project which only targets web. And then what did I say? Use the empty um flag. Or template, I said. I've also been really impressed with uh specifically how powerful Gemini 3 is to like uh take on these like really long-running tasks like uh whereas I had to clear the chat a lot with 2.5, like I've been able to go a lot longer uh with three.

29:11 · Mhm.

29:13 · So, I'm seeing a lot of questions in the chat about MCP. It's about 50% people saying we need the Dart and Flutter MCP server and the other 50% are comforting them and assuring them that it already exists. Yep, you can install Dart and Flutter, yep.

29:29 · Yeah, so as a a an Antigravity user, how do I prove to myself which MCP servers I have installed?

29:37 · The way that you could do this currently uh is if you open up the editor um and then click on that three-dot uh drop-down on the right side right below right next to the X. The three dots. And then MCP servers. Uh click on your uh yes, so here you can download some of the MCP servers, but if you want to see exactly which ones you have installed, you can click on manage MCP servers.

30:06 · Um and then you can also view your raw config uh at the top. Uh right there you go. Aha. Yeah. Great. Nice. It's funny. I've installed MCP server in VS Code and for Gemini CLI before and on my personal computer, but it this one didn't have it installed, but now I do.

30:26 · So this was actually useful because I apparently didn't even have it installed. Yeah. Yep. And you can also in Flutter VS Code extensions, which you'd probably already have too. But I believe when you first launch Anti-Gravity, you can import those from VS Code as well.

30:42 · Yeah, I wonder if I failed to do that or if it got reset. I'm not sure. Anyway, great. That was a great little side quest and it actually paid dividends for me as well, which I wasn't even expecting. Now, let's return to our previous side quest, which was to see for ourselves with our own eyes, as Darth Vader would say, the web the embedded web browser and AGY driving it.

31:06 · So I presume that I would just start by saying what should I tell should I ask Gemini to run You could say like run the run the web app to see if it's rendering correctly or something like that, maybe. That should get it to do a screenshot.

31:27 · Uh if you go to the editor Yeah, go back to the editor. I can help you out there. Open the editor toggle agent and click on back to agent. There you go. Back to agent. That's what I needed. Yeah, yeah, yeah, yeah.

31:40 · Okay.

31:41 · So you can run the app using that. Okay, great. So I'll say run it, please. 30% 33% waste of tokens there for manners. It's also super super fast. I've been really excited with how much it can do in parallel.

32:00 · And I like that another like just small little detail, but like when you're doing a big task and you have some additional feedback to give it, you just add a new message and it'll add it to the queue and bring it and kind of modify it. It doesn't have to stop everything. And the implementation plan, you can actually comment on individual pieces of it. So you can say actually like use this package instead or I don't want to use that and this all takes it as feedback while it's live uh um updating. So Oh my gosh, this is so funny.

32:31 · I have no ability to think ahead at all. I said use the empty thing but I actually wanted to have it drive the counter app. So a terrible time to remember that I typically want to use dash dash empty. That's all right. So it could probably add the counter app pretty easily, but uh Yeah, I was just going to say let's um add some interactive UI to this app. I don't care what it does.

32:58 · Before you uh before you uh oh, one thing that you could try doing is uh I think you're currently on on uh on fast mode. Um if you toggle that into planning mode, um we could try out some of the things that Roddy was talking about. Um so a quick

33:16 · quick explanation of that is planning mode is where you want the agent to be able to uh think in more like task blocks and being able to do its own planning work uh and this is one to give the agent more the of the ability to create these artifacts, which are really great summaries of like different checkpoints. So as an example, uh what Roddy was mentioning was like uh the agent is able to create implementation plan for you. So that way before it starts modifying any type of code, it tells you like this is how I'm thinking about building this interactive UI that you currently have in mind.

33:48 · Um or if it did a bunch of work and it also worked with the browser, the agent is also able to create a walk-through for you and basically tell you, "Hey, I I did all this work for you. This is my proof of work. Here's some screenshots of the browser.

34:06 · Um what else do you want me to do?" Uh and so that's really like the the the kind of capabilities that planning is able to do. Whereas if you just want to do something very very quick and dirty um and you don't want the agent to do all this like planning type of work, that's where the fast mode uh comes in.

34:24 · Yep.

34:26 · And you can just have it say continue too if it gets stuck.

34:34 · Yeah, I I've also really liked the uh the the task list that it generates too when when it's already starting on the implementation. I find that the model just stays on track a lot better and can be doing this in kind of individual parallel subtasks and uh yeah, it's just been super So one thing I'm I'm maybe concluding here, I don't think planning mode is maybe that great with uh just like, you know, run the app, please. It's like making a a plan for how to run the app.

35:02 · Yeah, so [laughter] yeah, yeah, yeah, yeah. I wouldn't use it for that, but that's that's pretty funny.

35:10 · So you could say like a good thing for like planning mode would be like I want a um I want to use routing and have this type of feature first folder structure and I want to have these models and blah blah and like it would like plan that all out as like a kind of mini PRD and then create subtasks to like go and like implement that. But the cool part is you can comment and be like "Oh, instead of go router, use this one instead or use this for state management" and stuff like that.

35:39 · Um so you can kind of like guide the model what your preferences are and then uh hopefully save those as rules files for the future. Got it. Yeah, okay. So I'm I definitely want to do exactly that. I just can't help it continue to appreciate how funny this is. The app has been launched for like 3 minutes and it finally decided that it did it.

36:00 · [laughter] Checked it off.

36:04 · That's just very funny. Yeah, well well done there. You deserve a cookie there. You're the best boy, Gemini. All right.

36:12 · So I think it would be fun to I I want to see to take a big step back since Gemini CLI arrived and even Gemini Code Assist before that, periodically on this live stream I've tried to lean really heavily into AI for a specific project and even had Randall, one of our Flutter GDEs on twice to work

36:36 · through this concept of having the LLM start with a PRD and whatnot and at that point it was really a roll-your-own experience to you know, you could just say like, "Man, burp up all this code for me, please."

36:52 · Or you could be more thoughtful and and start with a plan and then turn that into a PRD and implementation steps and whatnot. Sounds like this experience of doing that is now basically just baked into selecting planning out of the drop-down here. So I do want to see that work and kind of see what the UI looks like, although we're getting a bit of a preview here. I'll close this for now.

37:15 · So I was thinking maybe we could ask this to um build on this and maybe we use state management to like store the history of colors and have a back button to kind of go back through history and see what random colors we had before. All right, not a very something more complicated like add undo redo for individual screens and then be able to use routing to store a kind of a list of the those pages.

37:47 · Yeah, that that that's basically um you know, undo would be go back, redo would be go forward in the stack. Yeah, we're totally totally thinking same way there.

37:55 · So let me I'm going to start typing and I want you to to interrupt when you have a better idea of how to prompt it for what I'm saying. Sound good?

38:07 · Perfect. [snorts] You like interrupt [laughter] me. You know, don't say please. And also like, you know, feel free in chat, you know, to give us any ideas on what to tweak as we go to.

38:20 · Do I even need to say please create a plan? Like actually how how do I prompt this?

38:24 · Put it in planning mode and say like, you know, um I want to now use like a feature uh folder architecture with routing and I want to have like undo you know, like like list like what you the goals are. And it'll create a plan from that and it'll say like, you know, hopefully have you review that plan and then you can go forward.

38:48 · All right, so I want um routing. I'm just going to put routing and let we'll see what it comes up with. Uh state like a state management package and history for what colors have been generated. And then I want to be able to revisit old like past previous colors. Also maybe an ability to add a custom color or something. That's maybe something I would take input. Oh, sure. Yeah.

39:25 · Uh the ability to add a custom color instead of only generating random colors. We've got a question from from chat here. Folks may know, Emma asks, "Is it true that saying please makes it better?" This has been rumored for, you know, years at this point.

39:51 · [laughter] We could try. We could ask uh say please, please, please. Yeah.

39:56 · [laughter] I beg you.

40:00 · One one thing before we proceed, uh could we check what the settings are right now for our artifact review policy? And uh the reason why I ask is because I want to make sure that the agent takes the time and like and like asks for your input. Um the way to get there is you can press on the the uh uh anti-gravity uh settings. And then yes, so right now the review policy says agent decides. Let's change that to always be uh request review.

40:23 · And then the reason why is because now when it creates the implementation plan, maybe it thinks it's straightforward, but you know what, just for the sake of like showing off what it's able to do, I think it'd be really great for us to um see the the plan, review it, be able to add comments, and then being like, "Hey, LGTM. Let's go ahead and build this."

40:45 · Also, you may want to kind of start with this mode as you build up confidence with anti-gravity and like kind of switch to those more deciding modes later as you uh uh can kind of trust where it's going.

40:57 · Mhm.

40:58 · This is an interesting question. I haven't seen this feature, but it seems actually quite reasonable. Like, I've given you this really lazy prompt. Can you improve the prompt for me? Which is gotta be the peak laziest thing in the world. But is that a thing? Or is Randall making that up?

41:13 · This This is not a thing, but what you could do as a shortcut to that is you could write a simple prompt, and then you can ask it enhance this prompt for me, please.

41:22 · And then the agent will just enhance the prompt for you, probably most likely. Uh and then maybe it'll also propose other features. And then if you want, you could just copy that and then be like, "Yeah, let's do exactly that." That's also where I think the implementation's really nice, though. It'll take this and and kind of already start to enhance that cuz it'll list out its thinking and all that. Yeah.

41:42 · Yeah, I I wonder, I mean, that's kind of what we were already doing Yeah, exactly. planning mode. So, this might this might be redundant. Let's just go with uh let's go with asking it to plan this out. Mhm. Although uh uh we've started it. What [snorts] one of you said that maybe it would come up with its own features as well, and I can imagine it really getting creative on new features in the please enhance this prompt style.

42:09 · So, one of the things that I've usually done when I'm sending uh prompts to the model uh when I'm starting off like a a bigger task like this, is I usually always suffix my prompts with like come up with a plan and get started to try to trigger like a like thinking through the process of like what it's going to do, and then um building out the plan. But um that's like one of the things that anti-gravity just kind of does for you if you're in planning mode. So, um I found I didn't have to use that as much.

42:36 · Nice.

42:37 · Oh boy, we're getting a lot of a lot of proposed screens and classes in here. It's going to flutter riverpod.

42:45 · That is uh And so, do you have an option to select the implementation?

42:50 · All right, so yeah, it popped it up. Okay. And now do you see the GIF here, um oh, I can dismiss this. Is that what's going on? Okay, good. Okay.

42:59 · Yes.

43:01 · I didn't see the dismiss button below it. So, as you start to hover, do you see that little blue icon?

43:07 · Mhm. That is the comment button. So, you can like comment on any one of these items in here and like give it your preferences of on what to use. Nice. Also, just so that's awesome, and I uh yeah, okay, cool. I see that and I should because it's you don't have It doesn't stop the flow. It'll take your input and just constantly modify as it's building.

43:26 · So, you can you can give it like this live input um and guide it as it's generating.

43:31 · Mhm.

43:33 · Also, this this is the subtlest little thing, but there's obviously some styling on this markdown. And I just find this to be very pleasant. So, Yeah, that's a cool quote. Yeah.

43:45 · Wonderful.

43:46 · Okay, let's skim this. So, refactor a single thing to be more over-engineered. Great. User review required. Yeah, that obviously using riverpod for state management, go_router for routing. Flex color picker, that's great. Then it's going to use those packages. Great. Why not? It even wants to add localization. Love it. So, we've got feature-based stuff here. The color generator, history.

44:14 · Um I can't tell if this is like clipping cuz there's so much under color generator and nothing under history.

44:20 · It's definitely gone with clean the clean architecture model of like You can you can comment on that and say I want a feature-first folder. Yeah, exactly. I don't want uh So, yeah, it just literally like uh yeah, yeah, right there. Oh, I got it. You can also select if you if you want to be highly specific, uh you can also just drag and select text that you'd want to comment on.

44:42 · Um so, you all you always have those two options, whether you just want to comment on the line, or you can just comment on the text that you have selected. I'm giving it a really like confusing lazy message here.

44:56 · I want to see how it Now, is it automatically incorporating this, or do I need to Like, I don't want to say proceed on the whole thing, but I do want it to proceed on taking this comment. So, what do I do with that? So, you have a couple of options here. You can uh maybe just click on the review button, and then uh here add an optional message and click submit. Or if you want to go back to what you all are used to, you can also do that inside of the the prompt box inside of the at the bottom right um to submit the comment.

45:28 · Then as you can see, the comment is already attached to your input box. Yeah, this is like a GitHub code review. Where you can leave a bunch of things and then submit them all at once. All right, so I'm going to lean into that. See if we have any other suggestions here. Controller. Manages current Sure, that seems reasonable. Routing.

45:51 · Yeah, the history screen. So, okay, I'm going to put another thing here like I want a navigation stack that goes backwards through chosen colors, not just one screen that lists all past colors.

46:12 · Obviously.

46:12 · way cheaper and faster to make decisions here than it is later. So, uh definitely make sure to get this implementation how you want.

46:21 · Oh, right, right. Yeah, once it's written all the code and I'm like boo, then I've wasted a whole bunch of you know, my own tokens and my own bill, right?

46:31 · Okay, so to play blah blah blah, generate, yeah. Color Okay, that seems reasonable.

46:37 · History.

46:39 · So, remember that this is a navi- or like um yeah, history stack. I forget, you know, kind of a navigation stack like history or chain stack. Yeah, undo, redo stack. Yeah. Not just one page. Yeah, yeah, yeah, yeah. Perfect.

46:56 · [gasps] Got some color. Yeah, yeah, yeah, yeah, verification plan. Well, one day we're going to see this run in the browser, and it's going to be awesome. So, yeah, submit.

47:08 · I don't know why, I just think it's really cool to see like when it's submitted and you see how like the count of comments that it it reads and like the context. It's so uh I just every point in this editor, it's like it's giving you confidence that it's like uh reading the right type of things. So, um yeah, it's super cool.

47:26 · [laughter] I love the idea of putting make no mistakes at the end of any prompt. And also like don't go jump.

47:34 · Uh let's see.

47:37 · [sighs] Skimming chat here while it cooks to see other other questions. Folks, normally I read a much higher percentage of chat messages, so I apologize for that on this. Um I am trying to read as many as possible. Randall apparently had some genius idea earlier. Let's see what he said before. Oh, that was the enhance the prompt thing. Okay, great. We We talked about that.

48:04 · Uh Danny, Danny is the maintainer of the Flutter and Dart VS Code extension, which I presume is the same one used in Cursor and anti-gravity and all of them.

48:17 · So, Danny is asking, "Where's best place to send feedback?"

48:22 · Mhm. Yeah, that's a great question. Uh best way to send feedback right now is if you open the settings window, um there is a place where you can uh so, open anti-gravity user settings, and then at the bottom left, there is a provide feedback section. Uh and this is where you can just provide any type of feedback that you have. Um make sure you submit that. I think the dev team would be very happy to see this in the the feedback form.

48:49 · Great, I'm putting it in. It's not really a bug report. I guess it's just general feedback. Yeah, and this Yeah, it's me.

48:55 · And the nice thing about this is that it has all the labels needed, so we can just uh have it be a lot more organized in that way. We can just get to your uh feedback as soon as possible. As you can imagine, we're getting a ton a ton of feedback, so it's it's really nice to have it like organized, so that we know exactly like, "Okay, like these are the ones that are features, these are the ones that are bugs, and how we can prioritize that to make your developer experience better."

49:21 · All right, so this must be just kind of representative cuz we lost history entirely, but I trust that it's still going to add that. No, it's kind of dropped. Oh, maybe the navigation is just going to yeah, be baked in. So, it's not really its own feature anymore. All right, it'll be interesting to see Yeah. maybe the color controller is just going to have that now? Yeah, we'll see what it does.

49:41 · Okay, I'm going to say proceed. I'm ready to roll the dice.

49:45 · Do we need to um change the editor settings to make it to agent decides or will it request each time?

49:53 · Now it's going to request each time, uh but you can always go back to the settings to change it back to um agent decides or right below the proceeded with implementation plan, there's a shortcut where you can click on request for uh request review on the right side and there's a drop-down where you can just configure it uh for your entire user settings. Oh, so this is not just for this conversation. This is a global change.

50:17 · Yes, exactly. Okay. All right, well let's put it on agent decides because that's what I want.

50:24 · [laughter] Uh all right, going back to chat here. Ooh, every now and then I This is another form of rolling the dice where I just see a long message, the first few words seem reasonable and I click it without reading the whole thing. Here we go.

50:40 · Uh missed the start of the stream. Is there uh will there be a Flutter sub-agent support for anti-gravity to see into actually running Flutter apps in a simulator? Actually, this is kind of related because we're about to run it in the web app, the browser, and see it drive there. But yeah, any any connection with simulators? I imagine that's maybe a bigger challenge.

51:02 · So, um right now there's the the dev tools like MCP server control for browser specifically and that uses like Chrome dev tools like deeply integrated. Mhm.

51:14 · But we as Flutter developers can also take advantage of the Flutter driver where it can start to write and run integration tests and smoke tests. Um um on these like kind of different things, they can like write a specific test to instrument what you're trying to do um and that would give you a lot better results cuz you'd have the access to LSP and all the logs.

51:37 · That makes sense. Yeah, so [sighs] of course that's running through an MCP browser server and that makes sense.

51:43 · When I before I was at Google, I was at Zapier, which is kind of like you know, it's the connective tissue of the internet. You can have the outputs from one service be the inputs to another service and it it just provides this standardized kind of like pub sub for the whole internet. And of course, MCP is that on your computer for all the different things.

52:04 · Um So of course, that runs through an MCP server. And it's also like really deep control. Like it can have specific logs from V8 directly as opposed to um just like high-level ones. All right, let's see. Do we have Oh, yeah, we got some red here. So that means code.

52:26 · All right, so this code was waiting for me to accept it, which of course was possible because we put it on agent decides and then it decided that I needed to accept this or not. But other than seeing that there was some red here and thus deducing that it had written code, like let's say I was just sitting back here and I didn't open this file myself and I'm I'm just kind of waiting.

52:51 · What is the intended flow for me to interact with the progress that it is making?

53:00 · Yeah, I think that's a that's a good question. I think something that we've been trying to uh figure out was the the best way for developer. I think when you're looking at the conversation, that is like one way you could be spending your time, which is just tracking and seeing what is the work that it's doing.

53:14 · So that you always have the ability to course correct uh as needed. Um there's also, if you want to review the current changes that it's currently done, there's the review changes button, which is right above the stop button uh on the bottom right. Um it's a little less visible, but yes, that's the that's the place where you can review the code changes if you care about uh all the code that it's written. Um otherwise, I think it's more of like a hey, you could just sit back, relax, and let the agent cook. And from there, once it's done, it'll give you a walk-through of everything.

53:46 · Um and then that way um you get a summarized version of all of the work that it's done. So as you can see right now, because [clears throat] the agent is still running, you don't have that walk-through yet. Uh and that's because, you know, it's it's still working. But once it is done, it will create a walk-through of everything and the screenshots uh of of the web app that you just built. This could also be where you open up command E, go to a different project while it's doing this, and you'd get notified when it's finished.

54:14 · So like that's where the async manager would really start to come into play. Uh you would you know, like sometimes it can take a while to build the the iOS and Android application, and so you could be like on a different task and uh yeah. Yeah, that that'll really, you know, that'll task that will stress test my ability to think about two things at once.

54:38 · [laughter] Like yeah, the the bottleneck is me. You're single-threaded, so yeah. Right, exactly. All right, let's see what it came up with here. So Oh man, this is great. Now I don't I don't know how it's going to handle kind of like forks in the nav history, so let's Orange wasn't part of us.

55:00 · custom color picker on the top right.

55:03 · Oh yeah, so wait. So if I give if I go back in time and then generate a new random color, we lose the history in front of it. That makes sense. I was wondering how it was going to handle that edge case. And then we'll pick a custom color as you said. Oh my goodness gracious. Look at this.

55:20 · Yeah, that's cool.

55:21 · Uh now I was kind of expecting the like color wheel, but be an option you could refine later, but yeah, it's a Ooh, that's a that's a hefty color there. That's really limey. I do feel like this is a just like a good example of one, something that already looks better, you know, by default. Um Gemini 3's I feel like a lot better at UI design and uh also just like more technically deep.

55:47 · [snorts] Yeah, this is I mean, you know, obviously we got to ship this. This is like a great startup idea. Uh all right, I want to see you mentioned the walk-through and just such a file literally labeled walk-through has appeared. So this is presumably the beginning of the answer to my next cute question, which was how do I look at the walk-through?

56:08 · So, let's see what it said. It believes, and I agree, that it has successfully refactored the application in the requested way. The code is organized by feature color rather than by layer. Wonderful. Uses Riverpod, GoRouter, and generates random colors. I saw that. It did it. And has the history.

56:29 · Awesome.

56:30 · Yep, generating a new color clears the forward history, standard behavior. Yep. As as witnessed by us. It's got the picker. Yeah, it didn't uh wasn't what I was expecting. Maybe we'll come back and ask it to give us a color wheel or maybe that's not actually that important for the purposes of this stream.

56:50 · So verification, it [clears throat and cough] Oh, oh right, right, right. Our whole original thing, my original question was like to what extent can it kind of put on its Selenium hat and drive the UI and verify these things itself. I clicked buttons and I verified it, but did did it do that?

57:13 · Didn't seem to do it this time, but what if we just ask it explicitly, can you test this out for me?

57:19 · Okay, I love that idea. Oh wait, there's another window.

57:22 · like do you tag the workflow or should you just like give it a a shorter task?

57:26 · Um I think you could just say like, hey, can you use the browser and test it out for me?

57:32 · And we had two open, so I'm going to close them both. Now review changes, they're highlighted still in the git diff thing even though I accepted them.

57:40 · Yeah, those are effort changes. You can do this later. Yeah. All right, so I'm going to close all these things. Actually, I don't really care about any of this for now. Oh, nice. Great. Um Yeah, verify is checked. Interesting. I [clears throat] want to watch that happen though.

57:55 · So uh yeah, please verify. What was the wording that you were saying? Like verify this works?

58:01 · just like, hey, can you use the browser to verify if this works?

58:06 · Use the browser to ver- verify that this works. One day I'm going to learn how to type, but today is not that day.

58:19 · [sighs] All right.

58:22 · Oh man, it's giving us the the process ID. Well, that's just thoughtful.

58:27 · You can also think about like how many times you're building an app and you have a specific CUJ in mind where you could like tell it to like test out this flow uh on your application and then see how it works. It's kind of like a mix between testing and then also debugging um cuz if the if it's getting caught up on something, maybe there's something you could simplify or improve there.

58:52 · Uh so I think what is going on here is that the agent is trying to decide between using um the Dart uh MCP server versus the browser. And so that's why a lot of the browser integration is not uh working as expected. Uh we're at least not Sorry, it is it is working as expected, but it's mostly the agent is a bit more confused as to which type of tool it should be using.

59:15 · So um I think that uh because the MCP server for the Dart probably also uh carries like, I am also a browser that you can use, um it is a bit more it is always relying on the MCP, which Which why in this case it did not actually leverage the browser. Maybe we could say take a screenshot.

59:39 · Oh, actually here. This is spoke to you actually. Yeah, let's let's try this out. Let's try setting up the the browser. All right, moving my cursor off the window. Cursor is over here. Oh, and then you you do need to do a first time installation process. And it's going to ask you to to sign in and to install Chrome extension. So if you don't have the Chrome extension, unfortunately the browser integration will not work.

1:00:15 · All right, I'm going to do this off screen.

1:00:17 · [laughter] Yeah. Which is a lesson that I It's also all that's like I'm signing into the empty Chrome. Oh, where's my phone? I'm going to do the QR code.

1:00:28 · Or a passkey.

1:00:30 · Uh while he's doing that, Andy, another cool little piece of UX I really liked in the chat is the inline terminal that you can even work with interactive commands. I thought that was such a cool touch.

1:00:44 · Yeah, thank you. Yeah, I think that the team has put a lot of thought into this and I think that one of the biggest challenges I remember we faced was the fact that the terminals sometimes it requires you to interact with it. One of the cool things that we recently added is that the agent is also able to just send things that send things into the terminal so they can interact with it for you.

1:01:08 · So example, if you're trying to create a new app and it's like would you like to use this or that? Instead of having to like open the terminal press enter, the agent's like I'm just going to press enter for you.

1:01:16 · And that really just like drives the this whole like like agent is able to control everything for you. Or if you want to take it over like be our guest and just go go for it. Last night I had it um was working with Docker Compose. And so it would be like spinning up and down containers. And I I found that it would want to check the logs.

1:01:37 · So it open up spin up the containers, run a shell command inside of it, wait a couple seconds, kill the container, and like it was just such a cool like autonomous agent kind of running in the background.

1:01:51 · Which is awesome. Yeah, what when we first put out terminals and like I saw it was running all these things it's like wow, like this is incre- this is increasingly like so cool cuz it's like managing all these things that I don't have to constantly open the terminal myself and do those things anymore. And that way like you as a developer you're going to spend more time thinking about like hey, like what do I want to build?

1:02:12 · Does this look good or not? Should I add comments and course correct it even further? Mhm. Oh, yeah, totally. Um Is there any thing else Yeah, it's not working. Oh, it's not working correctly.

1:02:25 · It which is a passkey like Google app. It just is looping through a UX like recursive bit of nonsense. So unfortunately, I don't think we're going to be able to watch it drive the browser. Uh but I believe that it could be done. Maybe I maybe my passkey is only half set up or something. I don't know.

1:02:51 · But anyways, it would install the Chrome extension. And really it's there to make sure that you have the the Chrome APIs available to that browser. But you should only have to do it once. Mhm.

1:03:06 · Uh let's see. A couple other questions here. Is there a code dot command for gravity? I I think what you're the what Flutter Universe here is asking is how you can say, you know, code space a thing and it'll open that in Yeah.

1:03:20 · VS Code. And yeah, it's AGY and it self installs when you download AGY. And if you're asking something else, then please clarify.

1:03:30 · [snorts] Yeah, is is AGY the terminal command for that?

1:03:34 · I believe it Okay. Okay, continuing to read. There's some debate on whether or not it should be shortened to anti or grav. And we got at least one vote for grav.

1:03:50 · [laughter] In colloquial conversation.

1:03:55 · Another vote for grav. Uh I think the these folks may have an uphill battle to climb. But I wish you well in your quest to you know, make fetch happen.

1:04:07 · Um maybe something that people could try if they're downloading anti-gravity for the first time and want to try the async manager is to pick a package you're working on and open up the example as its own subproject. Because it will have an application open that is specific for you know, consuming the the package. And you can send tasks that are like to the main package of like I want to add this feature. And then in your your example you say like I want to update the UI to match this feature. And they can be working in parallel.

1:04:41 · And you know, while you could do that from a single repo, it could allow you to start to experiment and see like how you could use these as completely separate processes.

1:04:51 · Yeah, I was thinking about that exact scenario the other day of you know, getting around my Oh, poor thing. It's still trying to talk to the browser. I'm going to have to say deny. Sorry, I tried. Um [laughter] Feeling bad for Yeah, it's trying so hard. Um Oh, and we got a walk through of the attempted thing. What it would have done if I hadn't been the the weak link in the chain.

1:05:24 · Um Yeah, having like a full stack application and you you know, one browser is working on maybe use the planning step first to define the the exact schema and everything, the the communication protocol for how the front and back end are going to talk to each other. And then unleash one agent to work on the front end and one to work on the back end.

1:05:48 · That's probably the limit of where I can imagine my brain keeping up with multiple things running concurrently, but who knows. So we could look at all the code that it wrote. Um most episodes on this live stream are in fact about Flutter code. This one less so. Also the app did seem to work pretty well.

1:06:10 · So I don't think we really need to spend time nitpicking what it wrote. It probably does also just seem to be fine.

1:06:18 · That's also really a Gemini thing and not even an AGY matter. So any thoughts from either of you two about where we might go next or should we take questions from chat? What do what do you think?

1:06:30 · I have a something I'd love to try out.

1:06:33 · This isn't something that like while I was testing out anti-gravity, I was kind of blown away cuz I was recording some some demo videos and I was thinking like oh, like wouldn't it be cool if like I designed like a concept restaurant and I called it like Maison Anti-gravity. And like and then I had all these like futuristic dishes. And I spun it up and then I I I ran to a little hiccup, you know, cuz it was still in development and none of the images were loading. But it had the website and everything set up. So I was like, okay, like can you can you fix this for me?

1:07:04 · And I thought it would try to point to some like online like images. But then it started generating images. And that's when I realized oh, like we are at Google. Like we have Nano Banana. Um and at that point I was like, oh, okay, like it started generating dish futuristic dishes for me. And then using the terminal to move all those images into the appropriate folders. And then afterwards I had a website with really really cool dishes. Like it had like one of the dishes was called like Quantum Carpaccio.

1:07:35 · And then I was like that sounds really good. Um and so I think that would be [laughter] I it tastes it sounds very futuristic to me. So I'm thinking like okay, like this sounds like a really really killer use case.

1:07:50 · Especially with its ability to generate image like given that we are building a web app like why don't we try out something where see if it's able to generate an image and see if it's able to like uh I don't know. Let's say let's say our goal here is to extract like the the most popular colors inside of an image that generated.

1:08:11 · I was also going to think very common thing for Flutter is generating app icons and generating the the favicons and image assets in the web folder which you know, it generates a default when you do Flutter create. But that's my favorite use case for Nano Banana is like now generate a fun icon for this app as well. Totally.

1:08:29 · Yeah, that's a that's a great idea. And because it's just baked into the product that has access to your code, you don't have to do it one place drag it over. But instead the agent will just take care of all of it for you.

1:08:40 · Yep, totally.

1:08:45 · The caps lock really helps. Also yeah, muting myself also really helps. Yeah.

1:08:51 · [laughter] All right, now really impress me. Here we go. It's not an observable Flutter if I don't talk while muted at least twice. It's like lumps in your mashed potatoes. You know, that's how you know they're [laughter] homemade. All right, I'm curious to see what happens here.

1:09:07 · have had it generate images with Nano Banana, run terminal commands, and then like format and splice up the image to fit into the asset folders of Mac OS, iOS, Android, and all that. And so like it can basically like generate that for you know, 50 plus images from a single one.

1:09:26 · Oh, that's interesting. Yeah, the I've always used There's there's a a Flutter plug-in that, you know, kind of does all the copying and resizing and whatnot for you. I hadn't thought about I hadn't thought about burning way more electricity to have an LLM do it. Yeah.

1:09:40 · [laughter] Well, it runs uh it it uses Nano Banana once to create a high-resolution image and then uh just like ImageMagick like terminal commands to then splice it and yeah.

1:09:51 · Yeah.

1:09:52 · [snorts and clears throat] So, Andy, you were talking about an interesting thing there and where I thought you were going to go Oh my goodness, what a What an icon. Great.

1:10:01 · [laughter] So, that's super great. It even did something that approximates a squircle. I wonder if it actually got the math right on a squircle. I mean, it looks looks pretty squirclly.

1:10:12 · So, did it put this in the uh what is it?

1:10:18 · web favicon.png? It did not do that yet. So, please generates the image and then it's going to it's I think it's still generating still doing stuff.

1:10:31 · Yeah, so it's probably still doing some work and Oh, okay. So, now it generates the image, but it hasn't it does not know where exactly it should put it. So, I think that at this point um you could comment ask it like yeah, like just tell it like like, "Hey, love this image. Um actually, one cool thing that I would I'd love to show off before we do that.

1:10:51 · Uh I think you might be able to click on the image here.

1:10:54 · Done.

1:10:55 · Yeah, and you can actually review on it.

1:10:57 · So, maybe if you want to like say like, "Oh, like can you add a like a face of a dog in the picture?"

1:11:02 · [laughter] Yeah.

1:11:03 · Oh my god.

1:11:05 · That's incredible. Okay, yeah. Well, obviously I want a face of a dog in the middle. So, with uh add the face of a [laughter] husky. Okay, I was going to tell it that I loved it, but now that you've informed me I could have a husky for no reason at all in the middle of this.

1:11:30 · So, uh while it does this, as I Honestly, it was a cool image. We're going to ruin it with this husky in the middle. But, um what you were talking about with the futuristic restaurant and the quantum uh gazpacho or whatever it was.

1:11:46 · The the images that didn't load, what I imagined was going on is I thought you were going to talk about cores and having it engineer some solution to a cores problem, which is, you know, of course, the bane of everyone's existence. So, there was a thing that you said you wanted to try, but where your story went Oh man, this is not better.

1:12:08 · [laughter] Oh, now it's hiding it. Um [laughter] I mean, it's not wrong. It's what I asked. Yeah.

1:12:20 · [laughter] Um great. Now with 100% more husky, uh please apply this.

1:12:30 · [clears throat] The other one was objectively better.

1:12:34 · Um what was I Oh, yeah, yeah. So, you your story started with There's something I want to try and then you told us about the restaurant, but the story ended with it seeming like you getting everything working. So, what was the thing that you wanted to try and can can we still try it?

1:12:49 · So, yeah, what I was trying to do is I was something I was trying to create a very, very simple website. I wanted a website uh I wanted the agent to be very creative uh and Gemini to create uh the designs of the website, the copy for the website, and then also create an entire menu uh for the website, meaning it had to come up with a dish name and all of the ingredients.

1:13:11 · Um and a lot of it was obviously anti-gravity themed. Um so, it got all that stuff working. Oh, look at that.

1:13:20 · [laughter] Oh, that's cool.

1:13:22 · Nice.

1:13:26 · Okay, [snorts] sorry. Keep going. And now you have a husky icon. Um yeah, so that that's what I was trying to do and then the the images just weren't working and I never uh because I was mostly vibe coding, I wasn't looking specifically at like what kind of errors there were, whether it was cores or whether it was pointing at fake URLs.

1:13:44 · Uh and you know, like agents make mistakes. That's completely okay, but that's kind of what we're here for is to make sure that, you know, we can make sure it's doing a good job. And so, in this case, I said like, "Hey, like this is the problem. Um or I I think I remember I I interrupted the agent because I was like, "Okay, I think you're you're going off track. Uh I have a busy day.

1:14:02 · This is the problem I want you to solve right now. Go fix the images." And it immediately course corrected and it's like, "All right, like I let me go ahead and generate images for you instead of like pointing to uh incorrect places." And then immediately it just generated like six images all at the same time and I was like, "Whoa, like not only was it able to generate images, but it was doing all this parallel." Um so, it was being as fast as possible with it.

1:14:27 · And then immediately after it went ahead and ran some terminal commands, moved all them to the relevant um directory and then integrated it with my application. And at that point, I was like, "Oh, wow, like it just corrected what I pointed out immediately."

1:14:41 · Um so, that's that's definitely something we could we could try as well over here uh if we want to test out further uh image generation. Um so, yeah, that's basically like how I went into end with uh and ran into this which is really cool. Oh, maybe there's also we could um add documentation comments and tests cuz that also could it could show the feedback loop there of the testing as well.

1:15:07 · Yeah, definitely. That's a great idea. Let's let's get some tests going here. Uh Danny, know that the favicon is all yours. I'll I'll yield it to you if you're interested. Also, it was very cheap to generate and you can probably ask Nano Banana to make it yourself.

1:15:22 · But, um Andy, I really liked your comment on the just like having the idea for Nano Banana because I feel like that's been the whole vibe of anti-gravity in general is like I feel like it's bringing like the best of all of Google's tools in like one place and we're trying to, you know, have an experience where we're just trying to like reduce friction and enable people to go faster and like hopefully even expose people to all the things that we we even have at our disposal, too. Mhm.

1:15:50 · Totally. I think we're at the best place to kind of like tie all these powerful tools together. This is so many powerful things.

1:15:56 · Uh and it's very exciting to see like obviously the power of each one individually, but this is like a really, really good example of where the the total or what's that expression? You know, you guys know what I'm trying to say, right? Like the total is better than the sum of the parts and I think that this is a really great example of that where you like combine Flutter, you combine it with Nano Banana and a lot of your ideas inside of this amazing tool and suddenly you're able to just like go crazy with your imagination and just let uh the agent cook. Oh, totally.

1:16:24 · Like last night I had it running with Go Lang and Postgres and a Flutter front end all running together in the same project. Like you can you can really like mix and match and it works really great. Mhm. Good to see Astra. Yeah, Atlas is my husky. Even folks who didn't know I had a husky probably could have guessed it based on the very specific dog selection.

1:16:50 · Um Okay, well, there are so many good questions in chat. I've been trying to star them all. I've got 10 starred, which is a tiny percentage of the great questions and comments that deserved being starred.

1:17:04 · Um Oh, yeah. So, we wanted to watch it run tests. I'm going to keep that going by Yeah, sure, whatever. Clicking accept cuz I do want to see that feedback loop, but then maybe we can get to some questions as well as we're coming up on the last few minutes here. Uh real quick, Andy, can you open up multiple um chats with the same project folder? I haven't actually tested that specifically, but would it like show up as multiple things in the agent manager?

1:17:34 · Yeah. Yeah, you could it's it's very like end-to-end. You can just have like as many conversations in the same workspace. You can also have like many different workspaces, each with many different conversations. Um so, really it's like all that flexibility is baked in already. Sweet. Many-to-many. Yeah.

1:17:52 · Yeah, great question.

1:17:57 · [laughter] Icon is missing the caption. POV, you're the favorite toy in the washing machine. That is the vibe of that icon.

1:18:08 · Uh okay. So, did it run the test?

1:18:15 · I can't tell if it ran the tests.

1:18:18 · It wrote the tests. Oh, and it says they're all passing. I want to see that terminal output. But, also, you guys were talking in the very beginning about copying terminal you know, piping terminal output from somewhere to another place and I still don't know what that feature is. You control tilde to open up your terminal?

1:18:36 · Okay.

1:18:39 · That didn't do what I was expecting. Uh Yeah, the control escape basically or I at least on my keyboard. Yeah, it's not open now. Yeah, there we go. Yeah. Um have I have, by the way, Sublime Text keyboard shortcut, so that's probably Okay. So, like like maybe just cat the readme, for example.

1:18:59 · Like literally I say cat readme?

1:19:01 · Yeah, yeah, yeah. Cat space readme or whatever the Okay. And so, you can do two different things. You can like select a region and it should pop up like a little chat thing.

1:19:10 · Oh, interesting. Right there?

1:19:13 · And that'll send to chat. Or inside of the chat itself, you can use the at annotation and then type terminal and it'll uh select that as well. Oh, so wait, if it gave me a command, so like let's see here. This seems to be maybe is this what That's an inline terminal, yeah.

1:19:31 · Okay, so what what where would I do the at command that you're talking the very bottom on the chat. Oh, down here? Yeah, you can just do yeah. And I'm familiar with doing this with files and whatnot, but where oh term And terminal is one and if you yeah, you just click terminal and then if you have multiple terminal tasks, it'll you can pick it by name.

1:19:50 · Uh so you can pick to say oh, okay. So if I were to say here run the tests, is what's going to happen? It's going to say dart or like flutter test here? No, it would be like you would say like at terminal, here's the output logs of the error, you know, something like that. You could have it and it would pull in the terminal as context.

1:20:08 · I see. I see. I see. Okay, great, great, great, great, great.

1:20:13 · And so that's cool. You can copy it.

1:20:14 · Yeah, nice.

1:20:16 · Um All right, neat. I I'm I'm trying to think of a non-contrived way to do that. We know the tests are currently passing. Maybe I'll just break a test and then we'll run it and they'll fail and I'll ask it to fix it. That might be kind of fun. So you could say like you can even prompt it to say like run flutter test in the terminal.

1:20:35 · Um and it would pop up or you could even you could just run it yourself even as well. This is funny. It's showing all the tests for a different workspace.

1:20:44 · Nice. Oh, I'm in that workspace. How did I get to that window?

1:20:48 · Okay, well, never mind. Uh it is absolved.

1:20:52 · From having [laughter] It's always PEBCAK. I don't know if anyone else here familiar with the phrase PEBCAK, problem exists between keyboard and chair?

1:21:02 · [laughter] It's the human error, yeah.

1:21:07 · Okay, so let's say dart test. Or I mean flutter test I needed to run.

1:21:12 · This is not going to work to hit Is it going to just proxy to flutter test?

1:21:18 · I've never run dart test in a flutter project before. I would presume it isn't going to work. But actually if it doesn't, that's a good way to to to find out why. Great Great point. Yeah, terminal.

1:21:30 · Um Why is this test failing or whatever?

1:21:33 · perfect, yeah. It's such a good See if it can [clears throat] be like, well, you ran the wrong command, idiot. It was such a cool feeling like realizing like, oh, I don't have to copy these errors anymore.

1:21:46 · [laughter] Yeah.

1:21:48 · Okay, so Oh, wait, it it said a bunch of stuff.

1:21:52 · What did it say?

1:21:53 · Dart test. Yeah, user's use of dart test could be the root cause. Could be, indeed. All right, that's awesome. That's super cool. We saw it work. I typed at terminal, why did it fail? And it ran flutter test instead. So cool.

1:22:08 · That's awesome.

1:22:10 · All right, there's a lot of cool a lot of good chats and I think the time has arrived to actually read them. So [laughter] Picnic, problem in chair, not in computer. I presume that oh in computer was not intended to be capitalized. It's a good one. Okay, so again, I'm sorry. I've definitely failed to highlights or to star so many chats that deserved being starred, but I'm going to go through the ones that I did catch.

1:22:44 · Noe asked quite some time ago, no idea if he's still here.

1:22:49 · Do we know if the Firebase extension works in antigravity?

1:22:53 · Yeah, you should be able to install the Firebase MCP server as well as some other Firebase extensions.

1:22:59 · Wonderful.

1:23:01 · Uh Flutter Universe tends to be quite plugged in based on chats over the years on observable Flutter, but maybe the last person on this stream to learn about Nano Banana.

1:23:12 · So Flutter Universe, Nano Banana is it's basically just a code name for Imagen, right? Yeah, it's a fun um I would say, you know, Google's had image generation for a while, but the thing that uh Nano Banana specifically did was bring image generation down in cost and time, so you can generate images really quickly and the quality is really great.

1:23:37 · Uh it can do text inside of images um and you can generate multiple. It's embedded in lots of different experiences, so definitely check it out. And you can give it it's like multimodal inputs, too.

1:23:50 · Yeah, and and yeah, you can do edits as well. Like you know, that was a big use case is you could upload an image and say like remove this and stuff like that. Or you could upload an image of yourself and then upload an image of a place Yep. and then say, you know, put me in this scene and make it a cartoon, you know, all all the fun things.

1:24:07 · I And speaking of Nano Banana, today we all Groq also just launched Nano Banana Pro. Yes. And I've seen some examples of it and it is mind-blowing. It really is.

1:24:18 · And [laughter] it's also integrated with antigravity as well, so definitely worth checking out. Yep. So it's the pro, it's not like limits, it's just it's the next tier of capability. The coolest demo I saw was like a comic strip, so I have been wondering for people who maybe are storytellers, but not artists, you know, the the trouble with

1:24:41 · or I imagine the challenge of someone who maybe wants to produce a comic strip cuz they have the story in their head and that's the medium they want, but they're not an artist is like all the details of every scene need to be just right and kind of getting that and specifying it can be very challenging.

1:24:55 · Um Well, specifically with with Nano Banana Pro, you can say like it can provide that reasoning. He's like, explain this to me in like five different things and it like takes something, breaks it down into subtasks and then like has generating text in each of those sub blocks. So it's like something that like normal Nano Banana would have struggled with, but like it did a great job.

1:25:14 · Well, interesting.

1:25:16 · Um get your philosophy hats ready. My daughter in primary school has to create a create a classic webpage with HTML and CSS. Do you think that is still relevant? Well, Marcin Marcin, if that isn't the billion-dollar, trillion-dollar question of our time.

1:25:34 · I certainly have my thoughts on it, but yeah, Rodi and Andy, what how do you two think about that these days? I I personally think that there is no better time to learn how to publish and share things with the world. HTML and CSS was even how I started back in in high school like trying to just like build something on GeoCities, you know?

1:25:54 · But now what we do is we have like these amazing tools at our disposal to like build and craft anything that we can imagine. Uh there's there's a huge spectrum between like programming and engineering all the way to just like producing artifacts whether it's just a one-off thing that you're building for yourself or your kids or, you know, just like that brings you delight or like building businesses on top of it. And so um yeah, I think it's it's a great way to learn.

1:26:21 · I also think that HTML and CSS and JavaScript specifically help you by not crashing when you put in an error or like a invalid token and it's it's a great way to like kind of express your ideas.

1:26:39 · Mhm. Yeah, I think I couldn't have said it better. I think Rodi nailed the point. It's just very, very useful to learn and it goes a very long way. I I also think that having the ability to or knowing how to use HTML, CSS, JavaScript and so much more technologies also gives you the vocabulary and understanding to just take take your ideas to the next level by understanding a bit of the technology.

1:27:04 · And so I definitely still recommend learning those those core technologies. Oh, you're also muted again. Yeah.

1:27:16 · Nice. Another lump.

1:27:19 · The only thing I would add to Also, God bless you two for telling me right away.

1:27:25 · Um to all of us, you know, Marcin's daughter, everybody else, if you find the task of thinking about and understanding a certain piece of code fun, you know, HTML and CSS in that example message, don't let the ability of an LLM to have written it for you stop you from learning it and understanding it and just having that human experience of the

1:27:53 · euphoric like, I know how this works and it you know, I executed it correctly and I implemented it and I could fix it if I needed to.

1:28:02 · If she's enjoying HTML and CSS, I would absolutely encourage her to keep going in that direction, but nobody loves every part of technology. Like I've been a web developer for 15 years. When you start getting into the operating system level and like really low-build system stuff, I'm out. I just don't care.

1:28:23 · [clears throat] And so there I very happily let these tools kind of pick up, you know, the baton at that point for me because that is just not what makes me happy. It is not why I got into this and stayed into this or stayed in this.

1:28:37 · And so I would still let for all of us, let your just kind of humanity and your curiosity and what you know, what gives you what sparks joy, you know, still pursue those things.

1:28:52 · Totally. That's my that's my thinking. I also think even along that same vein is like use what you do know and combine it with the LLM to help you learn something you don't know. So like when I have been learning C recently, just like native

1:29:10 · built-in C without C++, I would be I would write a function in dart and I'm like, can you explain this to me if it was written in C or assembly or some other language that I don't know and like being able to see a language that I can read like in Dart or JavaScript or go can start to help you like see multiple examples and help you bridge that gap and LLM's are really great at that.

1:29:33 · Mhm.

1:29:34 · At the end of the day LLM's are not only for they're not only for building they're also for learning. They're honestly probably one of the best tools for learning so.

1:29:42 · 100%.

1:29:44 · Absolutely. A while ago a couple years ago I had a a project for on the Flutter team where I had to learn and write some C. Didn't really enjoy that project but you know Gemini was called Bard at the time and it was still it was my C mentor and it was so much nicer I could be like you know I know I need a thing I need to like copy a pointer of a string and add the thing to it and I need to not leak memory and I don't want to become an expert at this.

1:30:13 · Please write me that C snippet and you know then I would take the time and read it and be like okay I see how that works. It's so nice so nice.

1:30:22 · like Dart FFI you know it's been really useful.

1:30:24 · Yes.

1:30:25 · Yep.

1:30:26 · Um let's see feature request here. Majid we saw how to submit feedback so I invite you to submit this feedback but yeah a direct Stitch integration excellent idea. So you could do that already with the Stitch MCP server that you could add. Brilliant. I didn't know Stitch had an MCP server but of course it does. At this point I should just assume every single entity in the universe has an MCP server.

1:30:49 · Another call out here for Figma design.

1:30:52 · Now there is a Flutter to Figma MCP server and I actually had the maintainer of it on observable Flutter I don't know however long ago. You can find it in the history and that MCP server is awesome so you could certainly get that going. I don't know if there's anything specific And Figma should have an MCP server too. For sure. I don't remember if there's basically depends on the Figma MCP server. I mean it it would make sense that it did.

1:31:21 · So I would maybe consider this one just a checked box and it's a really good flow. Like I was blown away by in this episode all of our ability because we can all install these tools to just be like this component in Figma give me the Dart code and it was really accurate. It was super good.

1:31:39 · But you could also use browser use there too. You could say like here's this the the Figma design project that I have open. Open up the browser go to this component take a screenshot and implement that. Mhm.

1:31:52 · All right I'm scrolling through the last chat messages cuz I got to the end of the ones that I starred so reading what people have said while I had the starred list up. Um oh actually someone else was just asking about MCP. Actually I think this is the same person asking again which is fine. Um and I did show how to use it in that episode that I was just talking about.

1:32:12 · [snorts] Uh do do do [singing] All right I think we have kind of done it. Any any final thoughts Roddy anything Show show them a link to where to where to find it. Oh yeah links are always hard but you two start sharing some final thoughts and I'll pull that up. Cool. Yeah Andy. Um this has been really really fun. I think that anti-gravity is a both a joy to build and to use.

1:32:38 · It packages all of the things that Google has the really cool like browser integration with Chrome as well as Nana banana Gemini 3 and so much more and I hope everybody who uses uses it has as much joy using it as I did both building and using it on my own free time. Uh Roddy?

1:32:56 · Yeah I I really like having all the Google parts coming together in one awesome engine and on top of that it's really kind of refreshing to be able to start to experiment with the async manager of like now I can think it like a 10,000 foot view across my entire machine and like here all my projects and like let me some tasks I may kick off but not

1:33:24 · review for 3 days from now you know and now I can be like working and keeping on task or you know iterating a lot better than you would instead of having to just like open up VS code like in the chat history goes away or even if it's persistent this kind of like lets you really stay focused and intentional about what you want to work on and what you want to improve over time. Not only that like I feel like there is just so much to improve from here like hopefully this is the worst version of anti-gravity ever and it gets some It will be. Yeah.

1:33:57 · We can promise that. Yeah. That reminds me one of my biggest pet peeves ever is every time the fruit company announces new hardware and they're like this is the best iPhone we've ever made. Like no duh. You mean you didn't make the last year's one worse? Like of course it's the best that you've ever made.

1:34:16 · Uh all right I've got maybe the least helpful banner that anyone has ever seen. This is where you find the MCP server guide and no one wants to type in a URL so just search in YouTube for observable Flutter MCP or sorry observable Flutter Figma and you'll get a great guide there.

1:34:35 · [gasps] All right And then also anti-gravity.

1:34:39 · Yeah. Uh it should just be anti-gravity.google.

1:34:43 · Yep. Yep.

1:34:45 · Oh that's what you meant. That makes so much more sense [laughter] than we were just talking about the Figma thing so I thought that's what you meant. Yeah. No that's It's a shared context issue sorry about that.

1:34:56 · That's a lot smarter.

1:34:57 · [laughter] So this is where you download anti-gravity.

1:35:03 · [gasps] Oh gosh that's funny. Okay folks thanks so much for tuning in. I had a lovely time. Andy Roddy you two are the best. Uh for viewers next week is a US holiday so I'll be off and then the week after that I am just busy so I'll be off that week as well and then we'll hopefully

1:35:28 · and I when I say hopefully I mean I already told a guest that we will stream on I believe is December 11th so hopefully I'll be back on December 11th and until then everyone happy Fluttering. Awesome. Thanks. Bye. Thank you.

How to build with Flutter and Google Antigravity

Wed, 19 Nov 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

How to build with Flutter and Google Antigravity

Description

Google Antigravity: https://antigravity.google/ Flutter: https://flutter.dev

Transcript

0:00 · Hi, I'm Rodie. I'm on devro at Google. I want to show you how easy it is to build with anti-gravity and flutter. Here, I can paste a prompt for an app that is a meal tracker using go router and signals. Both of these things should rely on the model's ability to go and retrieve information, especially for this step of using SQLite for storage using something other than the default package that people go to. So, let's go ahead and begin and see how it works.

0:30 · One of the cool things about anti-gravity is it creates a plan with a list of steps that it's going to tackle.

0:36 · And one of the really cool UX pieces that we have is the ability to comment on each individual piece if we want to change how that implementation is carried out and just to be able to give a little bit of that feedback back to the model. So, here's the implementation plan. Again, like I said, you can comment using this icon down here. And already it looks like it's picked up the correct signals package, correct Go router using SQLite 3 and everything else that we were planning on. It can run terminal commands for you without needing approval.

1:08 · Of course, you can customize all this in settings.

1:13 · It's also really cool how it's able to tackle all of these tasks. It'll do them one by one and check them off as it goes, making it really easy for you to pick back up where you left off and to keep the model on track. In this demo, we're using Gemini 3 Pro preview. You can see at each step what it's done, the list of MCP servers if it's relevant, and also things like the implementation plan and tasks that you can always get back to.

1:41 · Because it's natively integrated, it's able to pick up on errors and other things from the LSP from the editor. And you can also use things like the Flutter extension if you want to add the MCP server directly. In this case, we already have Dart and Flutter installed as extensions. And because it has the same VS code like marketplace, you can just find your favorite one and it should work here with no issue. We can see it's already starting to run the application which it should pop up shortly.

2:09 · So we did get an error which is common sometimes when you need to set up Coco Pods but as you can see it's already jumping in and proactively fixing those issues for us. We can also open up and see the files it's created so far.

2:34 · Looks like we got our meal state home screen and our database itself.

2:41 · Cool. Looks like it built successfully and we have our application. So we can go ahead and say breakfast.

2:57 · We'll do 400.

3:00 · Save a meal. And we got our item there.

3:04 · We can go ahead and see the calories. We can delete it. That's all using SQL light.

3:11 · Awesome. So, this is just a sneak peek at anti-gravity.

3:15 · But hopefully you can take this a lot further. It makes it really easy now for you to make subsequent changes by asking the model. And when you're happy with everything, you can just run accept changes, which will save all of the things to disk.

3:31 · We can go in here. You can do accept or we can go down here and do accept all which would, you know, accept all the changes. Um, I personally love this feature because you can undo individual files or kind of peacemail what you really want. And I think it makes uh working like that a lot easier.

3:51 · It looks like it's finished through the rest of the tasks and the implementation and we have a working app. All right, that's it for this one. Thanks. Bye.

Intro to Agent Skills

Sat, 28 Feb 2026 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Intro to Agent Skills

Description

Introducing Agent Skills, a breakthrough method for giving your AI agent access to vast, specialized knowledge that only activates precisely when the task requires it. You’ll learn how to move beyond simple code completion by creating modular, on-demand skills that provide the deep context necessary for complex, modern development.

Subscribe to Google Antigravity → / @googleantigravity

Google Antigravity is an agentic development platform, evolving the IDE into the agent-first era. Antigravity enables developers to operate at a higher, task-oriented level by managing agents across workspaces, while retaining a familiar AI IDE experience at its core. Agents operate across the editor, terminal, and browser, enabling them to autonomously plan and execute complex, end-to-end tasks elevating all aspects of software development.

To learn more: Website: https://antigravity.google/ X: https://x.com/antigravity LinkedIn: / google-antigravity

Transcript

0:00 · AI progress moves at an incredible rate and standards, best practices, and techniques are constantly evolving.

0:06 · Sometimes we make big leaps with the models, but other times the tooling can close critical gaps. We've moved away from simple code completion to full agentic driven chats. But we've hit a wall, context bloat. You can't fit your entire codebase into the context window without confusing the model or wasting tokens. Agent skills are a great way to provide narrow and deep context for how to do something, but allow the agent to discover them only when they're needed.

0:34 · Because they can be lazily loaded in, you don't have to pay the cost of the context bloat for the entire skill definition if it's not relevant to the task at hand. At its core, a skill is simply a skill.md file in a named folder inside the agent skills local or global directory. The skill.md file is just a markdown file with front matter that includes the name and description that the agent will use to see if the skill makes sense to read in for the current task.

1:00 · You can have global skills that apply to the frameworks and languages you work on and project specific skills for libraries, SDKs, and frameworks specific to the app or backend that you're working on currently. A skill can include other resources, scripts, code examples, and other assets that are needed. It makes it easy to colllocate and distribute the skills with your team and manage them on disk. You can find skills in many popular repositories from GitHub repos or even have the agent generate them for you.

1:32 · Let's walk through how to build custom skills together. First, we can open anti-gravity and create a new project in the playground. Create a nested folder called aagent/skills/html3danvas and create a skill.md inside of it.

1:47 · Inside the skillmd, we create triple dashes to indicate the front matter region and provide a YAML name and description. We then can ask Gemini in the agent chat to generate us a skill for working with 3GS and V and how to set up the resize listener as well as the animation loop. We should also ask for a skill for working with the new TSL tiny shader language, which is a recent addition to 3JS and may not be well represented in the training data. After it creates the skills, we then can start a new chat and ask the agent to build us a 3D solar system on the web.

2:17 · The agent should come up with a plan and while generating it should read the skills and load them into context. Agents are getting better with training data and sometimes it'll be able to solve the problem without skills. But by providing the context, you can influence the specific type and style of output that you're going for and better convey the intent for when you're asking for various tasks. These can also be very company and industry specific and you will add more as your project grows.

2:44 · Now that we have a project, we then can ask the agent to create a skill for building games with 3JS and another skill for adding HTML guey that sits above the canvas. After that is done, we can start a new chat. We can ask the agent to update our code and create a learning based game for the solar system. Then we can have a generated quiz and facts for each planet that we click on. As it generates, you should see it read in the new skills that we created. And when it is done, you can see if the game works.

3:17 · When we decide to share this code with others, this will load the project into anti-gravity and the skills will be discoverable for them, making distributed knowledge possible, meaning that they can have it colllocated with the project. There are many places to find skills and many tools that are being created to make it easier. You can use skills.sh sh to add any number of skills for supported git repos. For example, skills are an open standard and you can check them out at agentskills.io.

3:44 · You can get started today with anti-gravity and skills by downloading the IDE and adding your favorite ones.

3:49 · We'll include a link to some good skills to check out in the description. Thanks for watching and let us know how you're using skills to level up your agentled development. Thanks.

Announcing TensorStore, Chrome Root Program, and more dev news!

Thu, 29 Sep 2022 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Announcing TensorStore, Chrome Root Program, and more dev news!

Description

TL;DR 313 | The Google Developer News Show

0:00 - Introduction 0:10 - New startup CPU boost improves cold starts in Cloud Run, Cloud Functions → https://goo.gle/3xUAwej
0:34 - TensorStore for High-Performance, Scalable Array Storage → https://goo.gle/3y0lLXo
0:58 - Announcing the Launch of the Chrome Root Program → https://goo.gle/3xZ3Hge
1:16 - Google Play’s $2M Indie Games Fund in Latin America → https://goo.gle/3dNYzVg
1:43 -Don’t forget to like, comment, and subscribe!

Here to bring you the latest developer news from across Google is Rody from Developer Relations. Tune in every week for a new episode, and let us know what you think of the latest announcements in the comments below.

Follow Google Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow
Subscribe to Google Developers → https://goo.gle/developers

#Google #Developers

Transcript

Introduction

0:00 · [MUSIC PLAYING] SPEAKER: Hi, I'm Roadie for "The Developer Show."

0:06 · And this is your weekly update on the coolest developer news from Google.

New startup CPU boost improves cold starts in Cloud Run, Cloud Functions

0:10 · First up, we have an update to Cloud Run allowing for faster cold starts with a new feature called Startup CPU boost.

0:16 · This feature will work with Google Cloud Run and Cloud Functions, second generation.

0:21 · With CPU boost enabled, it will allocate more CPU usage during the startup, which will help with serving requests faster.

0:27 · For some workloads measured, startup time was cut in half.

0:30 · And you can find out more on console.google.com.

TensorStore for High-Performance, Scalable Array Storage

0:34 · Next, we head over to TensorFlow to talk about the newly announced TensorStore, allowing for high performance, scalable array storage.

0:42 · This is an open source C++ and Python library that is designed for storage manipulation of in-dimensional data.

0:48 · This offers asynchronous API, composable indexing, and so much more.

0:53 · You can find out more on GitHub.com/google/tensorstore.

Announcing the Launch of the Chrome Root Program

0:58 · Next, we can head over to Chromium to talk about the announcement of Chrome Root Program and Chrome Root Store.

1:03 · This program determines which website certificates are trusted by default in Chrome and enables a more consistent and reliable website certification process across platforms.

1:13 · You can learn more at blog.chromium.org.

Google Play’s $2M Indie Games Fund in Latin America

1:16 · And, lastly, we can talk about the newly launched Indie Games Fund in Latin America.

1:20 · This will be awarding two million dollars in nondilutive cache awards and hands-on support for small selected game studios in Latin America.

1:28 · This program aims to help them grow their business on Google Play and is open to indie game developers who have already published a game, even if it's already on the Play Store.

1:36 · You can apply at developersonair.

1:38 · withgoogle.com/e vents/indie-games-fund.

Don’t forget to like, comment, and subscribe!

1:43 · To learn more about all these week's stories, make sure to check the description box below for all the links.

1:47 · Please remember to like, subscribe, share, and stay safe.

1:51 · I'm Roadie for "The Developer Show."

1:52 · Thanks for watching.

1:53 · And we'll see you next week.

1:55 · Hi, I'm Roadie for the-- yeah.

Blockchain-Based experiences, Govulncheck v1.0.0, and more dev news!

Mon, 17 Jul 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Blockchain-Based experiences, Govulncheck v1.0.0, and more dev news!

Description

TL;DR 350 | The Google Developer News Show

0:00 - Intro 0:09 - New to the web platform in June → https://goo.gle/44whMQI 1:09 - Rust fact vs. fiction: 5 Insights from Google's Rust journey in 2022 → https://goo.gle/471ZVTp 2:25 - Govulncheck v1.0.0 is released! → https://goo.gle/3OdoHIx 2:46 - Enabling New Blockchain-Based Experiences on Google Play → https://goo.gle/44I9Tau 3:09 - New policy update to boost trust and transparency on Google Play → https://goo.gle/43rjuRG

Here to bring you the latest developer news from across Google is Rody, a Developer Advocate. Tune in every week for a new episode, and let us know what you think of the latest announcements in the comments below.

Follow Google for Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow Subscribe to Google for Developers → https://goo.gle/developers

#Google #Developers

Transcript

Intro

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi, I'm Rody for "The Developer Show," and this is your weekly update on the coolest developer news from Google.

New to the web platform in June

0:10 · Now that Firefox 114 is stable, there are some new exciting features coming to the web platform.

0:14 · Starting with the WebTransport API, this is a modern update to the websockets, providing multiple streams, uni-directional streams, and out-of-order delivery.

0:23 · Next, the SVG element can now support the cross-origin attribute and will work the same way as the HTML attribute and applies to all the image tags in the element.

0:32 · Some interesting beta releases include the animation composition property with the new array properties in Firefox 115.

0:39 · And Safari 17 adds web apps and lots of CSS features, like container style and font face adjust.

0:45 · On the Chrome side for the 115 release, we now have scroll-driven animations and a series of technologies from the privacy sandbox, such as frame fences that allow for embedded content with limits to the communication, including the topics API that allows for interest-based advertising without tracking the sites a user visits, and plenty more.

1:04 · You can learn more on the web.dev blog and check out the latest video on what's new in Chrome.

Rust fact vs. fiction: 5 Insights from Google's Rust journey in 2022

1:09 · Rust only reached 1.0 in 2015, which makes it a relatively new language with a lot to offer and discover in terms of performance and memory safety guarantees.

1:19 · At Google, we have been seeing an increase in Rust adoption.

1:22 · And pulling from over 1,000 Google developers, we can address some rumors about Rust head on.

1:27 · Rumor number one-- Rust takes more than six months to learn, which is debunked.

1:33 · Based on our studies, more than 2/3 of respondents are confident in contributing to a Rust code base within two months.

1:40 · Rumor number two-- the Rust compiler is not as fast as people would like it to be, which is confirmed by the developers.

1:46 · Only about 40% of the respondents are finding the speed acceptable.

1:50 · Rumor number three is unsafe code and interop are always the biggest challenges, which is debunked.

1:56 · The top three challenges include macros, ownership and borrowing, and async programming.

2:02 · Rumor number four is about Rust's amazing compiler messages, which is confirmed.

2:07 · And rumor number five is that Rust code is high quality, which is also confirmed.

2:12 · 77% of developers were satisfied with the quality of the Rust code, and more than half say that the code is incredibly easy to review.

2:19 · Stay tuned over the next year for another update, and check out the "Google Open Source Blog" for more info.

Govulncheck v1.0.0 is released!

2:25 · Heading over to Go, we can talk about the exciting announcement of Govulncheck, which is a command-line tool to check vulnerabilities in your codebases and binaries.

2:33 · There is a great video from Google I/O this year you can watch titled "Build More Secure Apps With Go and Google."

2:40 · The tool is powered by the Go vulnerability database, and you can learn more at vuln.go.dev.

Enabling New Blockchain-Based Experiences on Google Play

2:46 · Finally, we can head over to Android to talk about some policy updates.

2:50 · There's a new policy update which allows new ways to transact with blockchain-based digital content with apps and games on Google Play.

2:57 · From reimagining traditional games with user-owned content to boosting user loyalty through unique NFT rewards, we're excited to see creative in-app experiences flourish and help developers expand their businesses.

New policy update to boost trust and transparency on Google Play

3:09 · Organizations signing up for Google Play now require a DUNS number.

3:13 · This is a unique, nine-digit identifier that is widely used to verify businesses.

3:18 · On your app store's listing, the Contact Details section is now being renamed to App Support and now includes a new section called About the Developer.

3:26 · And finally, there are new expanded developer verification requirements that will help users make confident, informed choices on what to download.

3:34 · You can learn more on the "Android Developers Blog."

3:37 · To learn more about all these week's stories, make sure to check the description box below for all the links.

3:42 · Please remember to like, subscribe, share, and stay safe.

3:45 · I'm Rody for "The Developer Show."

3:46 · Thanks for watching, and we'll see you next week.

3:48 · [MUSIC PLAYING]

Compression Streams support on all browsers, Android’s New Credential Manager, and more dev news!

Tue, 07 Nov 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Compression Streams support on all browsers, Android’s New Credential Manager, and more dev news!

Description

TL;DR 366 | The Google Developer News Show

0:08 - Compression Streams support on all browsers → https://goo.gle/3QOMNLd 0:27 - Android with Credential Manager and passkeys → https://goo.gle/3Mu3hWv 0:57 - More ways for users to identify independently security tested apps on Google Play → https://goo.gle/4632HWD 1:25 - Developer solutions: Unlock and simplify your workflow → https://goo.gle/47ppAVp

Here to bring you the latest developer news from across Google is Rody Davis. Tune in every week for a new episode, and let us know what you think of the latest announcements in the comments below.

Follow Google for Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow Subscribe to Google for Developers → https://goo.gle/developers

#Google #Developers

Transcript

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi.

0:03 · I'm Rody for "The Developer Show," and this is your weekly update on the coolest developer news from Google.

Compression Streams support on all browsers

0:08 · First, we can head over to the web to talk about the new Compression Streams API.

0:11 · And it's available in all three browsers.

0:14 · This API makes it possible to compress and decompress using gzip or deflate formats and no longer requires you to include a compression library in your applications.

0:23 · You can learn more about the API on web.dev.

0:26 · Next, we can head over to Android to talk about the announcement of the public release of Credential Manager.

Android with Credential Manager and passkeys

0:32 · This also includes support for passkeys, which enable a seamless login experience without requiring passwords.

0:38 · The new Credential Manager makes it easy to show multiple logins available for each website or app you're trying to log into.

0:45 · And if you already have a preferred password manager, there's a new credential provider that allows you to use them with the new Credential Manager.

0:52 · To learn more, check out Android developers.googleblog.com.

More ways for users to identify independently security tested apps on Google Play

0:57 · Next, when it comes to security in Android, privacy is extremely important.

1:01 · And now Google Play will show a new banner if an app like a VPN has gone through security testing from an independent party.

1:07 · These labels will help in building trust, influencing product decisions, and placing a critical role in consumer risk protection.

1:15 · These banners are also to highlight developers that prioritize user safety and data transparency.

1:20 · If you want to learn more, you can check out security.googleblog.com.

1:24 · Finally, we have some exciting new launches on developers.google.com featuring three new solutions aimed at helping developers get started when building microservices, three-tier architectures, and serverless web apps.

Developer solutions: Unlock and simplify your workflow

1:35 · Each of these solutions contain a pathway, a video, one click to deploy on Google Cloud, and a quiz where you can earn a badge and save it to your developer profile.

1:44 · You can learn more at developers.google.com/solutions.

1:48 · To learn more about all this week's stories, make sure to check the description box below for all the links.

1:53 · Please remember to like, subscribe, share, and stay safe.

1:56 · I'm Rody for "The Developer Show."

1:58 · Thanks for watching, and we'll see you next week.

2:00 · [MUSIC PLAYING]

Connect Google Services to Bard, Flutter’s Consulting Directory, and more developer news!

Mon, 25 Sep 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Connect Google Services to Bard, Flutter’s Consulting Directory, and more developer news!

Description

TL;DR 360 | The Google Developer News Show

0:00 - Introduction 0:09 - Updates to Bard →https://goo.gle/48EOlOO 0:41 - WASI support in GO → https://goo.gle/3PSNItF 0:56 - Introducing Flutter’s Consulting Directory → https://goo.gle/452AIpr 1:19 - How we made Space Invaders: World Defense →https://goo.gle/48wxfmb

Here to bring you the latest developer news from across Google is Rody Davis, a Developer Relations Engineer. Tune in every week for a new episode, and let us know what you think of the latest announcements in the comments below.

Follow Google for Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow Subscribe to Google for Developers → https://goo.gle/developers

#Google #Developers

Transcript

Introduction

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi, I'm Rody for "The Developer Show."

0:04 · This is your weekly update on the coolest developer news from Google.

0:08 · First off, we have some exciting updates to share about Bard.

Updates to Bard

0:11 · It can now connect to Google Apps and services, which means it's able to pull from data in Gmail, Drive, Docs, Google Maps, and YouTube.

0:19 · Imagine applying for a new job.

0:20 · You can use Bard to find your previous resume from Drive and continue to collaborate on a new cover letter in Docs.

0:27 · We're committed to protecting your personal information, and the content is never seen by human reviewers.

0:32 · You are always in control of your privacy, and you can turn off these extensions at any time.

0:37 · Check the description to learn more.

0:39 · Next, we can head over to Go to talk about some exciting updates with WASI.

WASI support in GO

0:44 · Go can now target WASI via a new API in preview.

0:47 · This allows you to bring WebAssembly out of the browser and run sandboxed applications on the server.

0:53 · You can learn more on the Go blog.

Introducing Flutter’s Consulting Directory

0:56 · Now heading over to Flutter, we can talk about the newly released Flutter consulting directory.

1:01 · This is a place for design agencies and digital technology consultants to be discovered and to have a place to point people to when they ask about Flutter work.

1:09 · There is also a Flutter pitch deck which you can copy and help consultants as they ramp up their Flutter expertise.

1:15 · You can learn more at flutter.dev/consultants.

How we made Space Invaders: World Defense

1:19 · And to help celebrate the 45th anniversary of Space Invaders, we collaborated with Taito, which is the Japanese developer of the original arcade game.

1:27 · We are happy to launch "Space Invaders World Defense," which is an immersive AR game that uses location-based technology to explore neighborhoods.

1:35 · In this game, you defend the Earth from virtual Space Invaders that spawn from nearby structures, and you get points by taking them down.

1:42 · The Geospatial API allows you to attach content remotely to any area mapped by the Google Street View, creating richer, more robust experiences.

1:51 · You can learn more on the developer's Google blog.

1:54 · To learn more about all these week's stories, make sure to check the description box below for all the links.

1:58 · Please remember to like, subscribe, share, and stay safe.

2:02 · I'm Rody for "The Developer Show."

2:03 · Thanks for watching, and we'll see you next week.

2:06 · [MUSIC PLAYING]

Dataset Search, Wear OS updates, and more dev news!

Mon, 06 Mar 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Dataset Search, Wear OS updates, and more dev news!

Description

TL;DR 331 | The Google Developer News Show

0:00 - Introduction 0:11 - Datasets at your fingertips in Google Search → https://goo.gle/3ydULmK 0:29 - Firebase 2022 Recap → https://goo.gle/3YrMhTT 0:54 - Policy Updates: New Wear OS App Quality Requirements → https://goo.gle/3ZmDFPC 1:14 - New to the web platform in February → https://goo.gle/3ZNOt9v 1:37 - Don’t forget to like, comment, and subscribe!

Follow Google Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow
Subscribe to Google Developers → https://goo.gle/developers

#Google #Developers #web #data

Transcript

Introduction

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi.

0:05 · I'm Rody for "The Developer Show," and this is your weekly update on the coolest developer news, from Google.

Datasets at your fingertips in Google Search

0:11 · First, let's talk about how Google is making it even easier to search public datasets.

0:16 · While it has been possible to search this data with the Dataset Search, they now appear alongside regular search results.

0:22 · This comes at a time when the United States enacted a new policy that requires free access to federally-funded research.

Firebase 2022 Recap

0:29 · Next, we can head over to Firebase to talk about the just released 2022 recap.

0:33 · This was a very big year for Firebase, including the option to initialize Firebase in pure Dart using environment variables for Firebase functions, a modular JavaScript SDK, Swift SDK out of beta, auth middleware, official Flutter support, extensions marketplace, and so much more.

0:51 · To learn more, check it out on the Firebase blog.

Policy Updates: New Wear OS App Quality Requirements

0:54 · Heading over to Android, we can talk about some of the new, important policy changes coming for WearOS apps.

0:59 · These updates include a black background for all apps and tiles, requiring the ongoing activity indicator if used, and displaying the time at the top of the app, while not in dialogs.

1:09 · To read more about these policies, you can explore them on the Android developer blog.

New to the web platform in February

1:14 · Finally, let's talk about some new exciting updates for the web platform.

1:18 · With the latest stable releases of Firefox 110 and Chrome 110, this means that container queries are now supported in all three engines.

1:25 · Chrome has also added the CSS initial letters property, setting the sync ID for audio context and the launch of the iFrame credential list experiment.

1:34 · For more info, you can check out the Web.dev blog.

Don’t forget to like, comment, and subscribe!

1:37 · To learn more about all these week's stories, make sure to check the description box below for all the links.

1:41 · Please, remember to like, subscribe, share, and stay safe.

1:44 · I'm ready for "The Developer Show."

1:46 · Thanks for watching, and we'll see you next week.

1:48 · Yeah.

1:49 · Then, you scroll down-- go ahead.

1:51 · CREW: [INAUDIBLE] RODY DAVIS: No.

1:54 · It's OK.

1:54 · I just-- yeah.

1:55 · I just keep thinking that's a new sentence.

1:57 · Yeah.

1:57 · That would help.

Jetpack Watch Face library, Datastream is GA, Bazel Con recap, and more dev news!

Thu, 09 Dec 2021 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Jetpack Watch Face library, Datastream is GA, Bazel Con recap, and more dev news!

Description

TL;DR 273 | The Google Developer News Show

0:00- Introduction 0:11- Join Cloud Learn to build your Google Cloud skills → https://goo.gle/3y1M1zt 0:45- Develop Watch faces with Stable Jetpack Watch Face Library → https://goo.gle/31HIzh2 1:27- Datastream now Generally available → https://goo.gle/3IEZ0ft 1:58- Bazel Con 2021 Wrap Up → https://goo.gle/3rIklhO 2:34- Recognizing the 2021 TensorFlow Contributor Awardees → https://goo.gle/33d99zL 3:01- Please remember to like, subscribe, and share!

Here to bring you the latest developer news from across Google is Developer Advocate Rody Davis. Tune in every week for a new episode, and let us know what you think of the latest announcements in the comments below! 😃

Follow Google Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow
Subscribe to Google Developers → https://goo.gle/developers

#Google #Developers

Transcript

Introduction

0:00 · [MUSIC PLAYING] RODY DAVIS: I'm Rody Davis for "The Developer Show".

0:06 · This is your weekly update on the coolest developer news from Google.

0:10 · To get us started, Google is hosting a Cloud Learn digital training event for developers, IT professionals, and data practitioners of all career levels on December 8 and 9 at no cost.

Join Cloud Learn to build your Google Cloud skills

0:20 · For those in Europe, the Middle East, and Africa, the event will be on December 9 to 10.

0:25 · The interactive event's purpose is to help equip more than 40 million people with Google Cloud skills.

0:31 · It'll also include live technical demos, Q&As, career development workshops, covering everything from Google Cloud fundamentals to certification prep.

0:40 · You can check out a full listing of everything to expect at cloudonair.withgoogle.com.

Develop Watch faces with Stable Jetpack Watch Face Library

0:46 · Over at Android, the Watch Face Studio from Samsung is revealing its Jetpack watch face library.

0:50 · The newly announced developer tool creates watch faces without writing any code.

0:55 · The Kotlin-developed library is also useful for developers with a more fine-tuned control.

1:00 · The release also includes functionality from the Wearables support library, with new features to support customization on smartwatches and a system companion app on mobile.

1:09 · If you use the Jetpack library to save your watch face configuration options, the values are synced with the mobile companion app.

1:16 · The mobile app will also automatically present those options in an intuitive interface with previews that update real-time.

1:23 · A link to all the new features with the library will be in the description box below.

Datastream now Generally available

1:27 · All right, circling back to cloud, Data Stream, Google Cloud's serverless change data capture and replication service, is now generally available.

1:34 · This allows you to synchronize data across databases, stored systems, and applications reliably with minimal latency.

1:41 · This will also support real-time analytics, database replication, and event-driven architectures.

1:47 · It will also allow you to deliver change streams to Oracle and MySQL databases into Google Cloud Services like BigQuery, Cloud SQL, Google Cloud Storage, and Cloud Spanner.

1:57 · And we can't forget about BazelCon 2021.

Bazel Con 2021 Wrap Up

2:00 · This year's attendees had a chance to interact with the community through a series of Birds of a Feather sessions with live Q&As.

2:07 · Other sessions included reproducible builds with Bazel, embedded platform testing with remote execution, and Bazelizing a gigantic iOS app, and so much more.

2:16 · Also announced, the updated version of the next-gen multilanguage, multiplatform build, Bazel 5.0, which will release soon.

2:24 · It includes a new dependency system called Bazel mod.

2:28 · For answers to any of your questions regarding BazelCon 2021, you can reach out to bazelcon-planning@google.com.

Recognizing the 2021 TensorFlow Contributor Awardees

2:35 · And finally, we wanted to recognize the TensorFlow Contributor awardees for 2021.

2:39 · Contributors to the TensorFlow PA write code, teach classes, and answer questions on forums, plus they organize and host events.

2:46 · This year's categories include the SIG Leadership Award, Active SIG Award, and TensorFlow Forum Award, Diversity Inclusion Award, and so much more.

2:54 · Congrats to all this year's participants.

2:57 · Make sure to check out the link in the post for the full list of this year's awardees.

Please remember to like, subscribe, and share!

3:02 · To learn more about all these week's stories, make sure to check the description box below for all the links.

3:07 · Please make sure to like and subscribe, share, and stay safe.

3:10 · I'm Rody for "The Developer Show".

3:12 · Thanks for watching, and we'll see you next week.

3:17 · All right.

New to the web, try out Android predictive back gestures, and more dev news!

Thu, 04 Aug 2022 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

New to the web, try out Android predictive back gestures, and more dev news!

Description

TL;DR 305 | The Google Developer News Show

0:00 - Introduction 0:11 - MFA, Blocking functions, and more come to Firebase Authentication → https://goo.gle/3BCrqoY 0:34 - New to the web platform in July → https://goo.gle/3Sk6ER8 0:56 - Prepare your app to support predictive back gestures → https://goo.gle/3bqZIAU 1:15 - Brushing up on Compose Text coloring → https://goo.gle/3By5iMv 1:36 - Profiling XNNPACK with TFLite → https://goo.gle/3zNVk8x 1:55- Please remember to like, subscribe, and share.

Here to bring you the latest developer news from across Google is Rody Davis from Developer Relations. Tune in every week for a new episode, and let us know what you think of the latest announcements in the comments below.

Follow Google Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow
Subscribe to Google Developers → https://goo.gle/developers

#Google #Developers

Transcript

Introduction

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi, I'm Rody, for "The Developer Show."

0:07 · This is your weekly update on the coolest Developer news from Google.

MFA, Blocking functions, and more come to Firebase Authentication

0:11 · First up, we have some exciting new features for Firebase authentication.

0:14 · You can now provide even better protection for your users with multifactor authentication.

0:19 · Adding MFA into your existing apps is very straightforward and is coming to Firebase UI and all the platforms very soon.

0:26 · In addition, there are new blocking functions that let you check if a user can create an account or log in before finishing the auth flow.

0:33 · With the latest stable releases of Firefox and Safari, there are some new CSS features that just become possible across all the browsers.

New to the web platform in July

0:41 · First up is the backdrop filter, which makes it possible to apply effects in the area behind the element, such as a grayscale invert or blurring.

0:49 · Next, we get the scroll-snap-stop property, which makes it possible to control the snapping behavior of scrolling elements.

Prepare your app to support predictive back gestures

0:56 · With the Beta 4 release of Android 13, you can now update your app to support the new predictive back gesture.

1:02 · This allows you to show a preview of what will happen when you're swiping back, and this feature requires the app to explicitly opt into the feature and the setting to be enabled in Developer Options.

1:12 · After Android 13, this will be ignored.

Brushing up on Compose Text coloring

1:15 · In Jetpack Compose 1.2.0, it is now possible to add gradients and other color options for text rendering using the regular and shader brush.

1:23 · This approach uses the brush API instead of using Canvas or Modify or Blend modes to make it a lot simpler to use and to build custom textiles.

1:31 · Quick note that this will not work with emojis, as they're skipped by the shader.

Profiling XNNPACK with TFLite

1:36 · And in case you missed it, XNNPACK is now available on 2.9.1 and later and is a highly optimized library for floating point neural networks interference operators on multiple platforms.

1:46 · This library will help in getting the best performance possible for your models while no longer having the profile accumulate all the delegated operators into a single row.

1:54 · To learn more about this and all the week's stories, make sure to check out the description box for all the links.

Please remember to like, subscribe, and share.

1:59 · Please remember to like, subscribe, share, and stay safe.

2:02 · I'm Rody for "The Developer Show."

2:04 · Thanks for watching, and we'll see you next week.

2:07 · Delegated operators into a single row.

2:09 · I'm going to do a redo of that section.

2:11 · There's a lot in there.

2:12 · [LAUGHS]

Privacy Sandbox Demos, Pixel devices, and more dev news!

Wed, 05 Jul 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Privacy Sandbox Demos, Pixel devices, and more dev news!

Description

TL;DR 348 | The Google Developer News Show

0:00 - Introduction 0:11 - The new Pixel Fold & Pixel Tablet are here → https://goo.gle/3O2n5Be 0:53 - Better full screen mode with the Keyboard Lock API → https://goo.gle/3PJAPCb 1:23 - Introducing Privacy Sandbox Demos → https://goo.gle/3NDqF3x 1:54 - Google Cloud Awards $313,337 in 2022 VRP Prizes → https://goo.gle/3rdoyvU 2:21 - Don’t forget to like, comment, and subscribe!

Follow Google for Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow Subscribe to Google for Developers → https://goo.gle/developers

#Google for #Developers

Transcript

Introduction

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi.

0:05 · I'm Rody for "The Developer Show," and this is your weekly update on the coolest developer news from Google.

0:10 · The new Pixel Fold and tablet are here.

The new Pixel Fold & Pixel Tablet are here

0:12 · So now, it is time to start optimizing your apps for these large and folding screens.

0:17 · There's a lot of new tools and APIs to get started with.

0:20 · There are three important design principles you can follow to make most of the large screens on Android.

0:25 · There's two-pane layouts to display content across two columns, showing you more content across the unfolded, larger screen, and allows you to do more without extra taps or losing context.

0:36 · App continuity on foldable phones ensures apps easily transition from folded to unfolded orientations.

0:42 · Responsive layouts resize content and controls when the screen size changes, such as when you use two apps in split screen mode.

0:49 · You can learn more on the "Android Developers Blog."

0:52 · Next, we can head over to the web to talk about the new keyboard lock API.

Better full screen mode with the Keyboard Lock API

0:56 · If you've ever been playing that game and you try to close a game dialogue with the Escape key, you know how frustrating it is when it breaks the immersion and leaves the full-screen experience.

1:05 · With the new Keyboard Lock API, available on the navigation.keyboard, you can now lock and unlock to capture all the events.

1:12 · If the user presses the Escape key, they'll just get a dialog that says they need to press and hold Escape to exit.

1:18 · You can learn more on the "Chrome Developers" blog.

1:21 · Also on the web, there are new privacy sandbox demos to check out, with over 20 APIs to protect people's privacy online and to help give companies and developers tools to build thriving businesses.

Introducing Privacy Sandbox Demos

1:32 · All of these demos are open source and include lightweight infrastructure scripts bundled as container images.

1:38 · You can run all those demos locally with Docker or deploy to Google Cloud.

1:43 · There are even Google-hosted instances for everyone, including those who are just simply curious and want to start learning and experimenting.

1:50 · You can learn more on the "Chrome Developers" blog.

1:53 · 2022 was a successful year for the Google Vulnerability Reward Program, and they identified over 2,900 issues.

Google Cloud Awards $313,337 in 2022 VRP Prizes

2:00 · They awarded over $300,000 in prizes and over $12 million to bounty rewards to researchers.

2:07 · All of these reports help improve Google Cloud products, which can help users, then customers, as well as the internet, at large.

2:15 · You can learn more about the top seven prizes won on the "Google Security Blog."

2:19 · To learn more about all this week's stories, make sure to check the description box below for all the links.

Don’t forget to like, comment, and subscribe!

2:24 · Please remember to like, subscribe, share, and stay safe.

2:27 · I'm Rody for "The Developer Show."

2:28 · Thanks for watching, and we'll see you next week.

2:31 · All of these reports help imploo-- [COUGHS] help imploo.

2:34 · One more time.

2:35 · Yeah, thanks.

Scaling vision transformers, Compose Pager, and more dev news!

Mon, 10 Apr 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Scaling vision transformers, Compose Pager, and more dev news!

Description

TL;DR 336 | The Google Developer News Show

0:00 - Introduction 0:10 - Wonderous nominated for Webby Award → https://goo.gle/40LIliK 0:28 - How WebAssembly is accelerating new web functionality →https://goo.gle/3ZR0L04 0:54 - Scaling vision transformers to 22 billion parameters →https://goo.gle/3mjc7fG 1:29 - Customizing Compose Pager with fun indicators and transitions →https://goo.gle/43dVOS9 1:48 - Don’t forget to like, comment, and subscribe!

Follow Google Developers on Instagram → https://goo.gle/googledevs

Watch more #DevShow → https://goo.gle/GDevShow
Subscribe to Google Developers → https://goo.gle/developers

#Google #Developers

Transcript

Introduction

0:00 · [AUDIO LOGO] RODY DAVIS: Hi, I'm Rody for The Developer Show.

0:06 · And this is your weekly update on the coolest developer news from Google.

Wonderous nominated for Webby Award

0:10 · In case you missed it, the Flutter app, Wonderous, just got nominated for a Webby in the best user interface category.

0:16 · You can vote for the app on the Webby Awards website.

0:19 · This app was made in partnership with the gskinner team and since launch has had 30,000 users.

0:24 · To learn more about Wonderous, check out the Flutter blog on Medium.

How WebAssembly is accelerating new web functionality

0:28 · Next we can head over to Chrome to talk about all the exciting ways WebAssembly is accelerating the web.

0:33 · Some powerful real-world examples include FFmpeg on Wasm, background blurring on Google Meet, SQLite on Wasm, which replaces Web SQL, and the universal scene descriptor in Safari.

0:45 · WebAssembly brings faster iteration speed, immediate support across browsers, and improved security.

0:51 · To learn more about WebAssembly, check out the Chromium blog.

Scaling vision transformers to 22 billion parameters

0:55 · If you're building AI vision models, then you'll be excited to learn about how to scale vision transformers to 22 billion parameters.

1:01 · LLMs, or Large Language Models like PaLM or GPT-3 show that scaling parameters improves performance but also unlocks emergent abilities.

1:10 · But the largest dense models have only reached around 4 billion parameters.

1:15 · Thanks to VIT-22B, we can incorporate ideas from scaling models like PaLM to a new modified architecture to scale to 5.5 times larger.

1:24 · To learn more about this new technique, check out the Google Research blog.

1:28 · Finally, we can talk about the March 2023 release for JetPack Compose.

Customizing Compose Pager with fun indicators and transitions

1:33 · There are new composables introduced-- horizontal and vertical pager.

1:37 · There are lots of fun transition effects and behaviors that can be applied when swiping through content.

1:42 · You can also add page indicators, change the viewport offset fraction in the current page and the page state.

Don’t forget to like, comment, and subscribe!

1:48 · To learn more about all this week's stories, make sure to check out the description box below for all the links.

1:53 · Please remember to like, subscribe, share, and stay safe.

1:56 · I'm Rody for The Developer Show.

1:58 · Thanks for watching, and we'll see you next week.

2:00 · [MUSIC PLAYING]

Build full-stack AI apps in minutes with Firebase Studio

Thu, 22 May 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Build full-stack AI apps in minutes with Firebase Studio

Description

The way we build software is fundamentally changing with AI-centric tools. This session covers how Project IDX helps you build and ship full-stack apps faster. Your codebase becomes context for Gemini, enabling powerful agentic capabilities in your editor. Generate and modify code or execute commands, all with natural language prompts. You’ll leave this session with strategies to ship better software, quicker.

Speakers: Kirupa Chinnathambi, Rody Davis

Check out the cloud session track from Google I/O 2025 → https://goo.gle/io25-gct-yt Check out out all the Firebase sessions from Google I/O 2025→ https://goo.gle/io25-firebase-yt Check out all sessions from Google I/O 2025→ https://goo.gle/io25-sessions-yt

Subscribe to Firebase → https://goo.gle/Firebase

Event: Google I/O 2025

Products Mentioned: Cloud

Transcript

0:00 · [MUSIC PLAYING] KIRUPA CHINNATHAMBI: Hi, everyone.

0:06 · Today, we're going to learn about how Firebase Studio can help you build high-quality full-stack AI apps quickly.

0:12 · My name is Kirupa Chinnathambi, and I'm a PM on Firebase Studio.

0:16 · I'm joined by my colleague Rody Davis, who is a developer relations engineer also on the same team.

0:21 · We're going to start by getting a 30,000-foot overview of how app development has changed and why we built Firebase Studio.

0:28 · We will follow up with a deeper look at Firebase Studio's marquee features, along with a live demo that really highlights the breadth and depth of capabilities that can help you be productive.

0:38 · So there are three big changes to app development over the years that played a big role in us building Firebase Studio.

0:44 · First, app development has gotten really difficult.

0:47 · Building apps today is time consuming, often frustrating, and filled with numerous hoops we need to jump through.

0:53 · And this complexity spans the full software development lifecycle.

0:57 · All stops on this path are more complicated now than they've ever been.

1:02 · This complexity is particularly frustrating if you're a professional developer.

1:06 · You and I don't have the luxury of skipping steps or cutting corners.

1:10 · Some of the complexities you need to wrangle include answering what your technology stack should be.

1:16 · What are your dependencies?

1:18 · Is what you're building secure, scalable, and performant?

1:22 · Depending on your project, your team, and the industry you're working in, the types of questions you need to answer can be numerous and varied.

1:29 · All of this can be hugely overwhelming.

1:32 · The software development lifecycle should be smoother and easier for all of us to navigate as we build our apps.

1:39 · A trend that we've been observing for some time, that really accelerated in the last few years, is that software development is becoming more decentralized and collaborative across devices, geographies, and time zones.

1:50 · It used to be that all we needed to get our apps built was our primary, often powerful, computer.

1:56 · Now, over time, we started to take our work onto our personal devices.

1:59 · These could be our laptops, phones, tablets, and an even smaller devices like watches.

2:04 · Beyond just building our apps across a variety of devices, we also now work from a variety of locations.

2:10 · It could be a coffee shop.

2:12 · It could be a secondary workplace.

2:14 · It could even be our homes.

2:15 · To add more color to the situation, we now collaborate closely with other people, each of whom could be working on the same project from different locations, different devices, and maybe even different time zones.

2:27 · Third, and one that is probably very top of mind for all of us, is the role AI assistants and powerful LLMs are playing in completely changing how we as developers build apps.

2:38 · This visualization really drives home the two extreme workflows you, me, and our teams are likely adopting when building apps.

2:45 · On one end, we have a world where we are in the driver's seat, and the AI plays a purely assistive role.

2:51 · On the other end, we have a world where the AI is doing almost all of the heavy lifting.

2:56 · We're playing more of a consulting role and nudging the AI into the right direction if needed.

3:01 · The complexity of problems AI can solve, though, has grown by leaps and bounds.

3:05 · Today, a quarter of all new code at Google is generated by AI.

3:09 · Beyond just productivity, use of AI also tends to increase overall satisfaction and happiness.

3:15 · Here's where a study that showed individuals assigned to use AI were both productive and more happy than individuals and teams who didn't use AI at all.

3:23 · This chart highlights what I said a second ago, where the use of AI pretty much leads to an increase in positive emotions and a decrease in negative emotions.

3:31 · This is pretty powerful.

3:32 · In recognizing these three major shifts, a handful of us who love developer tools got together a few years ago and asked, can we do better?

3:40 · We landed on a handful of principles.

3:43 · First, the ideal environment needs to be ubiquitous.

3:46 · You should be able to build any app from any device, from anywhere.

3:50 · You and I should have easy access to integrated solutions, not individual puzzle pieces that we have to figure out how to combine in the right way.

3:58 · AI assistants shouldn't just be limited to coding scenarios or tacked on as an afterthought.

4:04 · AI assistance needs to be thoughtfully woven throughout the entirety of the software development lifecycle.

4:09 · Now, software development has always been a collaborative activity.

4:13 · And we need to ensure that our tools help here, where we can be working across a variety of devices, locations, and time zones.

4:22 · To help answer the question of "Can we do better?," we're thrilled to announce Firebase Studio.

4:27 · Firebase Studio is an integrated and extensible agentic workspace to build, run, and manage web apps, cross-platform mobile apps, backend services, and more.

4:37 · Let's walk through some of the high-level features that Firebase Studio brings to the table.

4:41 · First, it is fully web-based.

4:43 · All you need is a browser and an internet connection.

4:45 · And just because it's in a browser, though, does not mean you have to sacrifice capabilities.

4:50 · You have a full Cloud VM with access to the file system, terminal, and other necessary commands.

4:55 · It's also built on the familiar VS Code environment.

4:59 · You have easy starting points, configurable using a technology called NixOS.

5:04 · AI assistance and collaborative features are integrated throughout.

5:08 · Now, Firebase Studio may look very familiar to many of you.

5:11 · It is built on the learnings we received from the hundreds and thousands of you who use Project IDX and gave us your feedback.

5:18 · We actually went public with Project IDX at I/O just last year.

5:21 · So it's great to highlight the evolution of IDX into Firebase Studio with you all at this year's I/O conference.

5:27 · Now, let's take a look at Firebase Studio and walk through its most common features.

5:32 · When you launch Firebase Studio for the first time, you'll have a bunch of options on how you'd like to get started.

5:37 · You can start with our app prototyper, where you specify what kind of app you'd like to build using multimodal, natural-language prompts.

5:44 · In this mode, you can ask us to build an app.

5:47 · Once you do that, we first translate your request into something we call a blueprint.

5:51 · Think of a blueprint as a one-pager or a mini PRD.

5:55 · When you're OK with the requirements, we start building your app.

5:59 · You can continue to interact with the AI assistants to fine tune the app's output.

6:03 · You can draw directly onto the preview surface with our annotation feature.

6:07 · You can select elements and describe the changes you would like to see.

6:10 · Once you are ready to share your application with the world, you can choose to deploy to Firebase App Hosting or make your app temporarily available with our preview mode.

6:18 · Now, going back to the Firebase Studio landing page, you can also create a new workspace and build it entirely from scratch or choose from a collection of templates.

6:27 · We provide some of the most common templates available to you for easy, direct access.

6:31 · You can explore our full collection of templates, which span the most common starting points for frontend, backend, mobile, and more.

6:38 · If you want to go one level deeper, below the templates, we give you a lot of flexibility to specify how your environment is built all the way down to the VM-specific details, build tools, and more.

6:50 · You can also bring your existing project into Firebase Studio.

6:53 · You can choose to open your project from popular Git providers like GitHub, Bitbucket, and GitLab, or you can upload a zip file of your existing project from your local computer.

7:03 · Independent of how you get started with building your app in Firebase Studio, we give you full agentic capabilities throughout with our AI assistants.

7:10 · Changes you ask for can be made to a single line of code or to an entire code base.

7:14 · This is the power of Gemini exposed through our app development environment.

7:19 · Beyond our built-in AI systems, agents from Gemini Code Assist will also be fully available.

7:24 · Our goal is to ensure you have the flexibility to choose how much AI assistance you want.

7:29 · You can use a lot of AI, or you can use some AI.

7:32 · You're fully in control.

7:34 · Lastly, we talked about the importance of collaboration when it comes to building apps.

7:38 · Firebase Studio also share your entire workspace with your colleagues and build apps in real time just as naturally as you might if you're working physically side by side with someone.

7:47 · Before I hand it over to Rody, who will walk through some live demos, a main takeaway is that Firebase Studio is a professional tool designed for all developers.

7:55 · Whether you're AI first, code first, frontend, backend, greenfield, or brownfield, we have you covered.

8:00 · All are welcome.

8:01 · Now let's turn it over to Rody.

8:05 · RODY DAVIS: Hi, my name is Rody.

8:07 · So now it's time to see Firebase Studio in action.

8:10 · There are two main modes that you can start from inside of Firebase Studio.

8:14 · The first is an IDE view, which you should already be familiar with because it's the same IDE from IDX.

8:20 · And the second is a new app prototyping agent.

8:24 · With this new app prototyping agent, you can build full-stack applications from natural language.

8:29 · It will start by creating a blueprint for us to review, which we can modify at will, and then continue to iterate on in the app with the chat.

8:37 · When you're happy with the overview, you can start the app generation, and the blueprint will be saved inside the project alongside the code.

8:44 · The fully featured application it creates is backed by Next.js, connected to Genkit and Firebase.

8:52 · If you're building an AI feature that needs an API key, we will create a Firebase project for you in addition to generating the API key.

9:00 · As you request new features or modify existing ones, Gemini will update Genkit flows and wire up any of the multimodal requests and handling inside of React for you.

9:11 · When you feel like the app is in a good place to share, we have an easy one-click Publish button that will take the Next.js application and deploy it with Firebase App Hosting.

9:21 · As you make changes to your code, you can also create new rollouts by going through the exact same flow.

9:28 · We also support other deployment options, too, which you can take advantage of in the code editor.

9:33 · Firebase Studio has a powerful integrated development environment which lets you bring existing code bases with any stack configured by the Nix ecosystem.

9:41 · And there's also many templates to get started with, with common frameworks and languages that you use.

9:46 · For those that aren't aware, Nix is probably one of the most supported package ecosystems in the Linux world.

9:52 · There's over 120,000 packages to choose from.

9:56 · Every workspace in Firebase Studio is running on a full VM powered by NixOS.

10:01 · This means that you can run most commands in the terminal that you would be able to locally.

10:06 · This could be anything from setting up and configuring databases, to running Docker files, or even running both Python node and go all in the same terminal at the same time.

10:16 · Just like how the app prototyper has a powerful chat, we also have the full capabilities of Gemini right inside of our IDE.

10:23 · Gemini can read and write files and run terminal commands with the context of your project.

10:29 · You can also choose a custom model with an API key, upload attachments or drawings, and have multiple chat histories persisted for later.

10:37 · There are so many more things we did not cover, but make sure to check out our Firebase YouTube channel for more videos and our blog for any updates.

10:44 · Head over to Firebase Studio to learn more and try it out for yourself.

10:48 · We are in preview now, and we would love feedback on the product for things that are going great and things that can be improved.

10:53 · Thanks for watching, and we can't wait to see what you'll build with Firebase Studio.

10:57 · [MUSIC PLAYING]

Building AI Powered Experiences with Firebase Studio and Firebase Platform - Rody Davis Building AI Powered Experiences with Firebase Studio and Firebase Platform - Rody Davis

Mon, 29 Sep 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Building AI Powered Experiences with Firebase Studio and Firebase Platform - Rody Davis

Description

The demand for AI-powered features in applications is exploding, but integrating generative AI is often complex and slow. This session introduces Firebase Studio, a new AI powered Cloud Based Workspace on the Firebase platform designed to dramatically simplify building AI backends.

Join us for a demo-driven guide on leveraging the Gemini API to build sophisticated features with remarkable speed. You'll leave with a clear understanding of how to use the Firebase ecosystem to rapidly prototype and ship scalable, secure, and intelligent applications

Sobre Rody Davis: Developer Advocate for Firebase Studio at Google. Working closely with Flutter, Angular, Firebase, Go and Gemini in Google Cloud. In my time at Google I have also supported Material Design, Lit (previously Polymer) and Google Developers (Solutions).

I have a background in systems administration, audio engineering, music and electrical engineering. I am very passionate about open source and creative applications of software. Currently I am working with teams to take advantage of AI in software development and integration into apps.

My mission is to make the intersection of Google products work better together.

🛤️ Track: DEVELOPMENT 📋 Formato: Charla

Transcript

0:00 · Working with AI can vary a lot depending on your skill level, experience, and model provider, or even the AI agents or tools you're using. At Google, we have many AI offerings ready to meet you where you are and help you take your next or current project to the next level. Here at Firebase, we believe that to make great apps, even through the assistance of AI, will require making it easy to build with agents that can provision resources, author backing code, and build complex UIs.

0:31 · So, who here has heard of Firebase?

0:33 · Raise your hand. Wow, that's awesome.

0:36 · What about Firebase Studio?

0:39 · Nice. Uh, Firebase AI logic or Genkit.

0:43 · Okay, less people, but still cool.

0:45 · Firebase is Google's platform to build, prototype, deploy, and run modern AI powered experiences that users love.

0:53 · What makes fair Firebase so special?

0:55 · Well, you know it very well. First, it's a comprehensive platform. And second, it's very easy to get started. We will give you a well-lit path to accomplish your objectives. There's no need to hack together a solution from multiple blog posts and forums or different parts of the internet. But we don't stop there.

1:14 · Firebase is backed by GCP's infrastructure, security, and reliability, and trusted by millions of businesses. And most importantly, it's extensible and flexible. You get to decide which parts of the platform make the most sense for your application and you bring in the other tools and services as you need.

1:35 · We recently announced Firebase AI logic in the as the next evolution of Vertex and Firebase. We recognize that integrating AI into your applications can be challenging. A year ago, we launched Vertex and Firebase making a lot easier and is already used by thousands of customers in production.

1:54 · For example, who's accidentally shipped their API key to the client? I know there's at least one.

2:02 · Firebase AI logic is one of the easiest ways to integrate, innovate, and deploy AI seamlessly into your apps.

2:09 · On your client, you can use Firebase AI logic proxy to securely access Google AI and vertex models such as Gemini and Imagine. And on the server, you can use Genkit. Firebase AI logic is integrated with other Firebase services like app check remote config and AI observability and remote config.

2:32 · In addition to the Vertex API, you can use the Firebase AI logic client SDKs to connect to the Gemini developer API which has a free tier. And last of not not least, we're launching Unity support which also includes support for Android XR.

2:49 · We recently updated Firebase AI logic to have an experimental mode for using hybrid inference. This is currently offered on Chrome on desktop. With hybrid inference, your inference will happen on the device if the ondevice is available. Otherwise, it will seamlessly fall back to cloud hosted models.

3:09 · We are also expanding AI monitoring.

3:12 · Previously only available to Genkit, you could now monitor your AI logic SDKs coming from the client in a single pane of glass where you can see things such as latency, error rates, token use, or even stack traces. And it's very useful.

3:26 · But we didn't stop there.

3:28 · Genkit is also now a part of Firebase AI logic. Genkit, for those that don't know, is our open- source toolkit for building powerful AI backends, offering libraries, tools, and out-of-the-box integrations with many popular models and cloud services.

3:44 · You've given us great feedback on Genkit, and I'm happy to say that we've heard you loud and clear. At Nex, we officially launched support for Python in Genkit, and since then, we've also been hard at work on supporting and improving Go. But we've also introduced dynamic model registration, which means you no longer need Genkit to have an update to leverage the latest models, and it can just seamlessly update and have access.

4:08 · We've recently announced genkit.dev, which you definitely need to check out because it's our go-to single surface for the most up-to-date documentation and code examples on how to use Genkit effectively in your applications.

4:24 · Now, almost every developer needs a database and you've been asking for Firebase to have a relational database forever when we've heard you loud and clear. And just over a year ago at IO, we launched Firebase data connect.

4:38 · Firebase data connects to your application to your data in Postgress Cloud SQL through secure serverless APIs.

4:46 · We built data connect with one premise.

4:48 · You write the query and we do the rest.

4:51 · That means that all you have to do when you write the query is we'll create an API endpoint, define an O policy for that endpoint, generate uh strongly typed client SDKs in your favorite languages like Noode.js, Dart, Cotlin, and Swift, and it will also create tool definitions so you can pass those queries directly to your LLM that you're using. This significantly accelerates app development and reduces time to value.

5:18 · We also recently supported uh releasing Firebase data connect to go to GA at cloud next and we've also added two things that people have been really excited about. One is advanced query improvements so you can see really nice insights into the sophisticated data retrieval in transactions from additional server values and multi-step capabilities.

5:38 · We've also introduced a schema and query generation agent which is really amazing for when you're wanting to build your application and you give it a list of the models that you're trying to build and we'll generate the schema for you. And this is also available inside Gemini code assist and VS code extensions.

5:57 · Next, let's talk about Firebase app hosting. Firebase app hosting is an opinionated serverless hosting solution for modern full stack frameworks like Nex.js. These fullstack frameworks make it have simpler to get the benefits of serverside rendering so you can have improved SEO and faster load times with the ease and familiarity of JavaScript.

6:17 · But this means that deploying the web isn't as simple as throwing up a bunch of static files on a CDN. You also need a back-end server. You need serverside rendering a build pipeline for the static generation. And of course, you also need a CDN for the caching. There's not a single part of this that you can do without, but with Firebase hosting, we're here to make the entire stack simpler for us.

6:38 · App hosting seamlessly integrates with the deployments from GitHub to Google Cloud, so it sets up all the necessary cloud services and detects what you need in your source code. App hosting automatically builds the assets in Cloud Build, deploys the dynamic content to Cloud Run, and serves the cached assets from Cloud CDN. You push your changes to GitHub and we take care of the rest with Firebase app hosting.

7:01 · We also launched app hosting to GA at Cloud Next, but there's so much more that we've added. We've also launched support for deploying from local using the Firebase CLI, so you don't have to push your code to GitHub. We also now have Terraform support so that you can deploy with any custom images and we'll have and that's especially a big ask for our really big customers. And of course, we also have automatic configuration of the Firebase SDKs using the emulator suite. So now, if you're using Firebase emulators, app hosting just works out of the box.

7:35 · Firebase app hosting also seamlessly integrates with Firebase Studio, which we'll talk about in a second, so you can easily deploy your prototypes.

7:44 · The model context protocol, or MCP, is an open standard designed to enhance the capabilities of AI agents. Raise your hand if you've used MCP or heard of it.

7:55 · Awesome. About half the room.

7:58 · You can kind of think about MCP like a universal remote or USB for AI applications. It's like standardizing the way that they connect and inter interact with the outside world and external data and tools and services.

8:10 · Now with MCP support coming from Firebase, you can use it in the CLI to access the full power of the Firebase services with your favorite agencies inside of Firebase Studio 2.

8:22 · We launched Firebase Studio at Cloud Next this year and it should look very familiar to a lot of you. That's because we were here at Nerdella 2024 and we showed off project idx and this is the evolution into Firebase Studio which is deeply integrated into the Firebase platform.

8:40 · Now let's talk about green field applications. When we have an idea for an application that solves a specific task or workflow, we need to do two one of two things. One, we can build it ourselves and figure out the framework that we're going to use, a deployment strategy or services. Or we find an engineer to take time from what they're doing and build this prototype for us.

9:02 · But now we have a third option, and that's to be able to generate a prototype from scratch without installing anything.

9:09 · We can launch Firebase Studio and give it an idea for an application using the app prototyping agent.

9:16 · In just a few moments, we will see a blueprint of everything that is in the app that it should build. We can take this time to refine it as needed, provide it more context and about the idea, remove features that and we do not need and after we review and ideulate, we can hit generate. Firebase Studio builds a full stack next.js XJS application that uses Tailwind for CSS and Genkit for AI features.

9:42 · You do not have to install anything since Firebase Studio is built on top of Google Cloud Workstations and Nyx OS. We have a single file called dev.nix that we will provision a machine for you and manage all the dependencies for any framework that you choose. Nyx OS is especially cool because it's backed by a massive amount of packages over 100 or 120,000 packages for Linux and you can define them in a single file and it's kind of like Docker but for your operating system.

10:11 · After we see our app running, we can interact it with a built-in preview.

10:16 · This even has the option to share via QR code so that anyone with a link can access it on local host running on the VM.

10:25 · This is not intended for serving, but it makes it easy to get started and get quick feedbacks on prototypes that you're not ready to deploy yet.

10:35 · With applications that require AI features, Firebase Studio will help you generate an Gemini API key. You don't even have to leave the console and we'll take care of everything for you by giving you the correct APIs in the Google Cloud console. And we'll even create a Firebase project for you if you don't have one already.

10:52 · But what if we want to connect to a real database or authenticate the user?

10:58 · This is something that people have been asking about for a while. Well, we recently launched support for connecting to Firebase authentication and fire store right in the chat. We can prompt it to add some features that will require a database or O and we'll provision the resources, set up the rules, and modify any existing screens for you.

11:18 · Firebase makes it easy to move beyond the prototypes and connect to real data sources so that you can move quickly with confidence. We're working on so many other integrations and we'd love to get your feedback. This is available to everyone now. So definitely go ahead and try to get started.

11:37 · When you're ready to deploy and share your prototype with the world, you can hit publish and we will roll out the application to Firebase app hosting for you. So anyone with a link can now access the app that you just built.

11:51 · But what if you're wanting to use a specific stack? Oftent time people come up to us and they're like, I don't want to use Nex.js, but I want to use a specific framework that I love or I want to customize it. Well, Firebase Studio has a lot of templates to get started with. And we recently updated over 10 templates in Firebase Studio to make it easier to work with Agent tooling. We added support for the Firebase MCP server, added rules and files, as well as building a new default workspace layout that let you get started building with Gemini right away.

12:21 · The built-in model in Gemini and Firebase now uses Gemini 2.5 Pro, and this is also something people were really excited about. This will greatly improve the quality of the apps being built as well as the issues being debugged.

12:38 · There are many more templates to check out and if we're missing any, please submit a PR to our open- source templates on GitHub.

12:49 · Now, let's uh now let's build an app with the Angular template.

12:54 · This is one that we recently updated and this template will also include the new Angular MCP server and it will improve the the chat experience in Firebase Studio.

13:05 · With the Angular template open, we can start describing what we want to build.

13:09 · Let me see if I can get this started.

13:16 · This demo is not running, but um similar to the prototyper, similar to the prototyper, it'll come up with a blueprint and a PRD that'll generate a plan and start building out the application. But we'll go over a Flutter one in a second.

13:34 · If you prefer the Gemini CLI, which raise your hand if you've used the Gemini CLI before.

13:39 · Awesome.

13:41 · It's an amazing tool and you can open up the terminal and we have it pre-installed for you. All you have to do is log in. The AI rules I mentioned will work right away with Gemini CLI and I personally love using them both together as they can help in different use cases. One of the use cases I like to use Gemini CLI for in Firebase Studio is for search grounding and URL context to research topics and save them as markdown files for context in Gemini and Firebase to use.

14:11 · But what if we need a mobile application and the web will not fit the use case that we're looking for? Well, Firebase Studio has both Flutter and React Native templates that we can use to build mobile applications without having to set up any SDKs locally.

14:26 · We can go to the recently updated Flutter template and create a new project. This will launch in the same way as the Angular template and we'll now have access to the Dart MCP server that we can leverage in Gemini and Firebase.

14:39 · This makes tasks like formatting and checking for errors and debugging layout issues a lot easier with Gemini. Because the MCP server is already set up for you, you have the tools ready for you in the chat anytime with Firebase and Flutter MCP ready to go. And just like the Angular template, we can prompt Gemini to build an app and it'll create all the files that we need. One of the useful tools that I like in the Dart MCP server is searching pub.dev and asking for routing and state management packages. It will search pub.dev and then add them to the project.

15:10 · When the app is done, you will see a real Android emulator running in Firebase Studio as a second preview option.

15:22 · We want to meet you where you are and provide AI assistance, inference or agents wherever you need. Firebase is full stack Google for the AI era and we cannot wait to see what we're going to build. Thanks.

15:35 · [Applause] Thank you so much. You can stand here.

15:46 · We can make some questions.

15:48 · Sounds good.

15:48 · If you want it.

16:01 · address.

16:11 · No.

16:19 · No worries.

16:28 · Hi everybody. Uh thank you for being here. Um let's say I'm a boost trouble founder and like alone or a little team. So I want to validate a PC or MVP and let's say I want to use favor studio.

16:43 · Should I focus my energy uh to in order to do that on which skill would you say like prompt engineer, UX, UX research or should I try learning essentials to become a developer?

16:58 · You know, I would say one of the things that's really important in this AI era for building um is UX because it's the intersection between both building and UI. uh if you are generating experiences, they don't really matter if someone can't use them. So, making sure that you focus on what is the actual end user uh experiencing as they're building.

17:19 · I'm not uh I'm not a technical person.

17:23 · So, would you say like uh should I invest my energy in UX entirely?

17:29 · So, UX is in between development and just designing. So it's when you're using AI to just build prototypes, you don't have to be that technical, but rather it's about understanding the problem and what you're trying to build.

17:45 · So you'll work with PMs and teams on seeing what the customer user journeys are. And you'll work with engineering to see what is trying to be built and what needs to be tested and a and a really good UX can come up with ways that we can improve the experience uh a lot.

18:02 · Okay, got it. Thank you so much, man.

18:04 · Other questions? I want have a question and if is it possible to deploy the front and back end and database like all together with a configuration already like done with a template?

18:23 · Yes.

18:23 · So Firebase Studio like I said has dev.nix and one of the cool things about Nyx OS is it's a full Linux machine. Uh we have many things ready to get set up such as Docker which you can add with one line. You can use Kubernetes. Um something that I've recently explored and is really popular is like caddy uh like caddy files for reverse proxy as well as like traffic. Um all you have to do in Firebase Studio which we have templates for is set up your different services on different ports. Uh and in the sidebar you can even expose those for testing.

18:55 · And when you're ready to go to production, all you have to do is set up a routing template. So you can say, I want the front end to go to this URL and the back end to go to this URL. And you can deploy it to cloud run or any other places including Firebase app hosting.

19:10 · Okay. Thank you. And like if I have an already like an existed application and I want to integrate with Firebase, how we see it?

19:22 · So uh we also offer a really good import for GitHub. GitHub, Bitbucket, and GitLab. And when you import that, you can create a dev.nix file. Um, if you don't have Firebase in the source code, but you do have Firebase um, like as a service that you want to set up, you can use Gemini in Firebase to ask it. It'll have the Firebase MCPS server now, so it can help provision you and walk you through that. If you already have a Firebase project and you import it, all you have to do is Firebase login and Firebase init, and it'll show an account picker that you can choose your project.

19:55 · Okay, thank you.

19:58 · Hi, how are you? Um, I came here last year and I won a IDX t-shirt. So, it's quite unique, isn't it?

20:05 · Yeah.

20:05 · Well, the question is like um the team at Fire Race Studio was all the time making IDX or it was like a side project and that stuff and then merged into Fire Race Studio that now we know they merge. Um, as with many things at Google, you know, uh, sometimes we work on things and we're not sure how they'll manifest.

20:28 · And idx was why it was called project idx was a preview that we wanted to build out a technology to get feedback from users. You know, one of the things that idx aimed to solve was enabling computing for many people so that even if you just had a Chromebook or a web browser or a phone, you could still access a full version of VS Code and have all the services like a built-in preview for you. Um, with Firebase, we wanted to and heard from a lot of people that they wanted to have deeper integrations for um, using storage or O connecting to a database.

21:02 · And by having it all under one brand really helped unify the teams and to move quicker.

21:09 · Thank you.

21:10 · Terrific.

21:12 · Also, I understand that Firebase Studio has a lot of integrations.

21:15 · Yes, lots. Yes.

21:17 · So that makes easier to create full applications.

21:20 · Mhm.

21:22 · You have another question there.

21:26 · Hello. I have a question. Erh, what kind of things you can do with Unity?

21:35 · Uh, with Unity.

21:37 · Yes, I see Unity in the presentation.

21:41 · So, Firebase supports Unity in our SDK for Android XR and a bunch of other uh efforts around that. Firebase Studio uh doesn't support Unity um because it u just runs um uh web applications and desktop. But uh if you're wanting to use Unity, you can still do it locally.

22:01 · Okay.

22:01 · Uh with this agent, with MCP, you can create anything more different knowations or anything more. Yeah, the MCP server basically enables a bunch of features that you would have to do in the console. So like setting up a database and configuring rules, creating new resources, and now you can just stay in your favorite agent and it'll do that for you.

22:41 · Fire.

22:49 · Okay. If I raise to your support okay good any other question around hello nice what advice will you give to people to start using fire studio in projects that are start are right now in production or had so many hers um so One of the things that we're seeing a lot of people build with is uh a couple different things. One, people love to build games in Firebase Studio.

23:26 · So, if you have something that you've been wanting to try and create, it's a great spot to give a first draft. Um, people with a data science background are really liking Firebase Studio because they can upload documents and create these one-off workflow uh tasks.

23:40 · Um, and then also people are using Firebase Studio for like staging environments because you can import uh your code into this VM. You can set up Postgress. You can set up all of your features. And because of our really cool sharing and collaboration features, you can share that with other people at the company, all be connecting to it at the same time. And you can even have your mobile applications running locally connect to the the staging VM.

24:08 · I have another question if you want.

24:10 · Looking at the Firebase road map, what is the next big step of AI power experience for developers? Uh so as we shared earlier Firebase AI logic is something that uh we are investing a lot in and right now we're looking for the feedback because we are building out this SDK to make as easy as possible to bring it to as many platforms as possible like in the languages you write.

24:33 · Perfect.

24:37 · Nice there.

24:44 · Okay.

24:46 · Hello.

24:48 · Um, I want to know how you can deploy an an application because I know how this works for front end and back end. That's is clear for me. But sometime when you needs to deploy a application, maybe you need a a Google account, a account. So I don't know if exists an integration for for the deploy at production for Google Play you mean like Android?

25:20 · Yeah.

25:21 · Um so we do support uh Flutter and React Native. Um outside of like just being able to build the APK and the container and upload it to resources. You can totally sign the app bundle uh all built into the VM. Uh so you wouldn't have to do anything outside of that other than open up Google Play, open up Firebase Studio and just download and upload the files. Uh and then you can also use a variety of like thirdparty services that connect to GitHub and you can push your changes and automatically deploy through CI pipelines.

25:54 · We have another question uh in the chat. You want to read it?

26:01 · Uh you can go for it. I will get fired.

26:04 · I'm not sure.

26:06 · Being a dev, I use V0 and the versels AI SDK daily. What do you think in this ma is the main advantage of switching to Firebase Studio and Genkit?

26:19 · Um, so first of all, Firebase Studio is a VM that you own. So you can use all the things that you would normally inside of Firebase Studio. So if you connect to Verscell SDKs or you decide to deploy outside of Firebase, we just want to make it as easy as possible to integrate. Um, but one of the things that Genkit offers is the open telemetry to be able to connect to all of the monitoring. Uh, we've seen people use it a lot for evals to be able to see in production um, are my prompts working?

26:48 · And that's where things like Firebase remote config come in really handy. So you can dynamically change the model that you're using in production. You can change the prompts if you're seeing that there's like um starting to see a lot of abuse and you want to lock it down. You can do that without having to deploy an update.

27:03 · Nice.

27:04 · Yeah. And another question, do you have access to any specific models when when you use Firebase Studio? You have different quotas or tiers.

27:12 · Yeah. So, uh everybody for free gets uh three uh workstations and we have a very generous Gemini 2.5 quota u very similar to Gemini CLI.

27:22 · Okay. So if you you Okay. Do you have a question?

27:26 · Uh yeah, here. Um so I'm asking out of ignorance because I've never used Firebase before. Um is there a way to change the subdomain once you deploy an application to production? Because I'm guessing that when you deploy you get an URL with Firebase, like a subdomain. Is there a way to bring your own subdomain?

27:46 · Yep, you sure can. Uh, one of the cool things about app hosting and the regular Firebase hosting is not only can you connect any custom domain, you can also do multiple subdomains. So, you can even have different domains for preview ser uh branches or different micro apps if you have like a monolith.

28:02 · Okay, super cool. Thank you.

28:05 · Good.

28:06 · Right.

28:08 · Hi, Rodie. Very nice presentation. My question is not technical. uh the company I work for is pretty much involved or locked in I would say with uh Microsoft solutions and Ashure. What would you say I I can say to them in order to take a look on this or consider this this this solution?

28:28 · Um so one of the cool things about Firebase Studio and um the previous tool idx is we're just trying to make it as easy as possible for people to onboard.

28:37 · We hope that if you brought in your company's code and created a template that people could onboard writing code right away within minutes instead of hours or days like it normally would take. Um so right away like people getting into it are not familiar with their codebase can already start to build.

28:52 · Uh the other thing is it's really good for um ramping up to new products or like if someone wants to integrate a new feature or library or drastically change what's needed if you're going from Python 2 to 3 or completely switching to Go and a Rust backend, all they have to do is update the dev.nix file and nobody has to like install anything locally.

29:16 · Asa, hello. Thank you for the presentation.

29:19 · Uh this is regarding MCP. Yes, we support um Firebase Studio.

29:24 · I need to go again. Yeah. Hello. Thank you for the presentation. This is regarding MCP. Uh I don't want to put you on the spot. Uh but regarding the I just wanted to know which are all the native features supported by the MCP that are allowed at this point. I mean it is only tools. It supports also prompts resources or or the other ones.

29:45 · Yeah.

29:45 · So Firebase Studio uh I believe supports tools. Uh and then Gemini uh CLI inside of Firebase Studio uh supports a lot more. There's also Genkit in Firebase Studio which also can read and be an MCP server and it also supports uh a lot of the uh the different aspects of MCP2.

30:06 · Okay. Do we have any other question?

30:09 · Guess I have more questions.

30:11 · Yeah, me too.

30:13 · Yeah.

30:13 · For example, the first time I saw Firebase Studio, it was like it's a VS Code in the cloud, right? But when I saw the demo in the stand yesterday, I saw that you have like a lot of new things, integration stuff. What are like the top three things that you can do in um Firebase Studio that you can do easily on a local development?

30:33 · Yeah, I think one of the things uh like I said that people may not realize is just how easy it is to get a database up and running or get these like really weird obscure uh examples that you find on GitHub. Um you can use Gemini to help you like figure out, oh, this is not installed and it'll go and search and get it updated for you. Um, we also have some really cool things like the um setting up the Firebase services.

31:00 · Uh, because we've done the work to integrate it so deeply into Firebase, uh, we will go ahead and do like 10 steps that you would have to do by hand all just behind the scenes like clicking for you. So, if you're just in that universe and you want to use us, uh, we were going to try to make it as easy as possible. Um, and then even simple things like creating a Gemini API key usually takes like a couple clicks or if you're having to go into AI studio and grab it from different places, we keep it all in one place uh for you ready to go.

31:30 · Nice. And when you are using the MCP server for Firebase, you can also query information about your database inside. So something I usually do is go to the Firebase um like dashboard and go to the database try to query.

31:45 · You can just ask it in the chat now.

31:46 · Yeah.

31:47 · Yeah.

31:47 · how many users are in my application and you will get yeah that's quite nice perfect any other question I have the last one if you want it oh sorry hello my name is Timur I'm a data engineer and primarily firebase is a as a tool for software engineer what about uh Data engineering.

32:18 · Can we data engineers leverage uh this tool for our daily tasks?

32:24 · Oh yeah. Uh one of the cool things about Firebase Studio specifically is like you don't even have to use Firebase if you don't want to. You can open it up and create like a data lakeink with Duct DB or connect to BigQuery. Um a lot of people use it to throw in a bunch of different connections and create little dashboards to be able to visualize the data. So yeah, that's absolutely something that we saw really early.

32:45 · People are excited about it.

32:48 · Nice. And the last one if you want it.

32:51 · Sounds good.

32:51 · What is the AI power experience trend that you are most excited about right now? There are any application or features being built with Firebase that you consider revolutionary.

33:04 · I still feel like uh Gemini Nano Banana is still really popular and people building some awesome stuff with it. Yeah. And I think uh that's been an explosion of like creativity that has been really cool to see especially when it comes to AI logic or genkit. People are just asking to generate images and that seems to be something that a lot of people want to do in our products.

33:27 · I don't know if people try raise your hand if you try nanoano.

33:33 · Nice.

33:33 · We need to see a lot more hands for sure.

33:36 · Yeah.

33:36 · No, it it's really fast. I I think it's the best thing it has compared to other models. you have like flu flux context that that it's really nice but it's not as fast as another one.

33:46 · Yeah. And it's also really easy to edit images and other things too.

33:49 · Yeah.

33:50 · And the is so good.

33:51 · Yeah. Yeah. Yeah.

33:52 · Really?

33:53 · Yeah.

33:53 · Awesome. Well, [Applause] thank you. One more time. Thank you.

Building Firebase Studio Rules for Angular Live

Sat, 14 Jun 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Building Firebase Studio Rules for Angular Live

Description

Join in as Mark and Rody build rules in AI Studio to help developers build Angular Apps in the Firebase Studio IDE.

Try Firebase Studio: goo.gle/4e8748C

Transcript

0:04 · MARK THOMPSON: OK, I started my introduction-- I started my introduction and I forgot to add myself to the stage.

0:12 · [LAUGHS] Hey, everyone.

0:14 · Welcome to this very special series of live streams where we're going to be working on an interesting problem.

0:21 · We've heard from lots of developers that they want to get better output from code gen tools and things like that with Angular, so I thought it could be really interesting if we started to build some of the prompts together.

0:34 · And here's where you at home get to support this effort.

0:38 · During our time together, like, in the chat, put in your comments.

0:42 · Put in some things that you want us to try, put in some of your frustrations or wins or things that work for you.

0:48 · Because what we would love to do is create sets of prompts that can help developers everywhere build excellent apps with AI tools support.

0:56 · So this is about the code generation side of the story, and not so much about adding a feature to your application.

1:02 · We will do more of those streams.

1:04 · OK, I know you all love those streams.

1:06 · We love doing them.

1:07 · We're going to do so many more of these things.

1:09 · I'm just having a good time.

1:10 · Let's see who's in the building.

1:11 · We got people in the building.

1:13 · People have been here for a while.

1:14 · OK, Jack has pulled up.

1:16 · How are you, Lars?

1:18 · Hello, hello, hello.

1:20 · Hello, hello, hello, Kodoku169.

1:24 · What's going on?

1:25 · Dev Junior, what's up?

1:27 · Hello, friends.

1:28 · Oh, the dab.

1:28 · Brrap bap bap.

1:29 · All right, sounds good.

1:31 · Hello, RSD Journey.

1:33 · What's going on?

1:34 · Kamlesh, hello from India.

1:36 · Hey, I send lots of love your way.

1:37 · Michael Small in the building.

1:38 · What's up, Michael Small?

1:41 · Sudhansu, hello, hello, hello, hello, hello.

1:45 · Kapsel, hello.

1:45 · How are you?

1:46 · Hello, hello, hello.

1:49 · OK, let's see.

1:50 · Merhaba, from Egypt.

1:52 · OK.

1:53 · All right, let's get Rody.

1:54 · I want to make sure Rody is going to be in the building soon.

1:56 · So we got a very special guest.

1:57 · I don't know if you can tell by my attire, I am wearing a Firebase Studio shirt today, because that's the tool we're going to be using for today's session.

2:06 · So that's very, very, very good.

2:08 · Very, very, very good.

2:09 · Hello.

2:09 · Let's see who else we got.

2:10 · We got-- hello.

2:11 · All these friends.

2:12 · People are here.

2:13 · What's going on?

2:14 · Hello, hello, hello from Ukraine.

2:15 · What's up, what's up, what's up?

2:17 · Hello from Chile.

2:18 · Hello, hello, hello.

2:19 · So many people in the building.

2:21 · We're so super excited.

2:23 · All right, we're just waiting on our guest.

2:25 · Oh, can you tell my shirt?

2:26 · Let me see, let me just model my shirt off to you friends at home for a second.

2:31 · See this?

2:32 · Got my Firebase Studio shirt on.

2:35 · No, I'm not joining the Firebase Studio team.

2:37 · I just have this shirt and I thought it'd be fitting to wear this shirt today for this stream.

2:45 · So OK, as we're waiting for our guest of honor to join us today, I would love to hear in the chat, if you're watching at home in the chat, let me know about your experiences so far using tools to generate Angular code.

2:59 · What has worked for you?

3:00 · What hasn't worked for you?

3:01 · Would love to hear from that.

3:02 · All right.

3:03 · Let's see.

3:04 · We said hello to you.

3:05 · Hello, from Liechtenstein.

3:07 · Awesome, awesome.

3:08 · We got people in the building.

3:13 · All right, let me have a look here.

3:18 · All right, all right.

3:19 · As we're going, as we're going, as we're going.

3:21 · So many windows.

3:31 · All right, I'm sending Rody a message.

3:32 · Let him know we're live, and the people are ready for you to join us.

3:43 · OK awesome.

3:45 · All right.

3:46 · Let's see what people are saying.

3:47 · Oh, let's go.

3:48 · Joe in the building.

3:49 · What's up, what's up, what's up, what's up?

3:51 · Hello, veryone.

3:53 · Listen, you should start saying that.

3:54 · That should become your call sign.

3:56 · Hello, veryone.

3:57 · All right, we're doing good.

3:58 · All right, so people are coming in.

4:00 · It's great to have everybody here.

4:02 · We should be pretty good to go.

4:05 · Our guest Rody works on the Firebase Studio team, which is so exciting.

4:10 · I'm so glad that he's going to be hanging out.

4:13 · Oh, I wonder-- OK.

4:16 · This will be funny.

4:17 · Let me see something real quick.

4:19 · Is-- OK.

4:21 · Hold on one second, friends.

4:23 · One second.

4:23 · OK, this is funny.

4:24 · He is in a meeting and waiting for me.

4:27 · Give me a second.

4:50 · OK, so Rody was in the meeting waiting for me to join, so that's where he is, but he'll be right over.

4:56 · We're going to get started very, very soon.

4:57 · Very excited.

4:58 · "GitHub Copilot with Claude Sonnet 4 is pretty decent for start.

5:01 · Gemini 2.5 Pro is great for refactoring and continued development."

5:06 · Oh, I want to know more about this.

5:08 · I want to know a lot more about what you mean when you say refactoring.

5:11 · Well, I know what you mean by refactoring, but what kind of prompts are you using when you say continued development?

5:17 · That's interesting.

5:18 · Super interesting.

5:19 · Resource, HTTP Resource, why?

5:22 · I'm going to answer this question while we wait.

5:26 · Here's what's really interesting about Angular right now.

5:29 · So we have been introducing our fully fledged new reactivity system that's based on signals.

5:36 · And so when you're working with some tasks it would be really nice if you can get those values exposed as signals, because here's what signals give you.

5:46 · Here's one of the big things they give you.

5:48 · You're not having to manage the changes.

5:50 · It's reacting to changes in the data, and you get the latest value yourself.

5:54 · You're not having to dig deep into this.

5:56 · So if you think about what about an asynchronous task, like an asynchronous data fetching, and then you get the data, and then you can rerun that.

6:09 · OK.

6:10 · Let me say it a different way.

6:11 · So for resource, in the case, you can base it on a signal value, let's say a user ID.

6:15 · That user ID changes.

6:17 · You don't want to have to have an event handler that you didn't have to be responsible for.

6:21 · And then, you're like, OK, well did this value change?

6:23 · If the value changed, let me run this asynchronous event, and then let me track the value.

6:28 · You can do a different way.

6:29 · You can base your resource on a reactive value like a signal.

6:34 · And then, it'll rerun whatever asynchronous data fetching that you're doing for you.

6:39 · And then, on top of that, you get nice parts of the application working for you, meaning you get things the status of the loading, and if there's an error.

6:49 · And all this exposes the signal.

6:50 · So that's why you have these things.

6:52 · The HTTP resource is just a specialized version of resource which is focused on fetching data.

6:58 · Hopefully, that's helpful to you.

7:00 · Hopefully, that's helpful.

7:00 · "Firebase Studio is the only AI workspace that works good with Angular projects for me."

7:04 · I love hearing that.

7:05 · I love hearing that.

7:06 · All right, I think Rody loves hearing that too.

7:08 · Rody, you came right on time.

7:10 · Somebody just said the nicest thing about Firebase Studio, oh, as I'm twinning with the Firebase Studio shirt today.

7:17 · It say, "Firebase Studio is the only AI workspace that works good with Angular projects for me."

7:22 · Love to hear that.

7:24 · That's really exciting.

7:25 · RODY DAVIS: Yeah, that's awesome.

7:27 · MARK THOMPSON: All right, let's see.

7:28 · "I use cursor in my Angular app."

7:29 · All right.

7:30 · Well, I want to learn more about why you use Cursor, and what's working, what's not working for you.

7:34 · Because what we care about is that whatever you're building with, it's serving your needs.

7:39 · That's what we care about the most.

7:40 · Today, we're talking about Firebase Studio because we have some really great features there.

7:44 · But whatever you use, use what you use.

7:48 · Oh, here's a good thing.

7:50 · Joh also comments, "not all data fetching happens with the HTTP client, ie SDK's."

7:55 · That's true.

7:56 · That is very, very, very true.

7:58 · OK, let's see.

7:59 · I saw a PR about httpResource docs.

8:01 · Yes, we have more docs coming.

8:02 · OK.

8:04 · If you have more questions about Angular, go ahead and put them in the chat.

8:06 · We can answer those separately.

8:08 · But we have a very special guest in the building.

8:11 · So I've actually known our guest Rody for a long time.

8:15 · We both come from a different community before we joined Google, and we both ended up working on different products and not that thing.

8:24 · Rody, how did we meet?

8:25 · Well, first, introduce yourself.

8:26 · Tell people what you work on.

8:27 · RODY DAVIS: Yeah, so my name is Rody.

8:29 · I am one of the DevRel leads for Firebase Studio, and kind of helping people get started with templates, working with different frameworks.

8:36 · I've been pretty involved in the Flutter community and a variety of frameworks, and exploring a lot of different things.

8:42 · MARK THOMPSON: Yeah, fantastic.

8:44 · So now, people don't know this about us, Rody.

8:47 · How did we actually meet though, in real life, before Google and before what we work on now?

8:53 · RODY DAVIS: When was the first time?

8:54 · That would have been at the, Flutter Interact?

8:58 · MARK THOMPSON: Yeah, that's right.

8:59 · RODY DAVIS: Yeah.

9:00 · Yeah, 2019.

9:01 · Wow.

9:01 · MARK THOMPSON: Yeah both were Flutter developers just thriving in the Flutter community, contributing, adding lots of value.

9:07 · And I think we both actually applied for the same job at Google.

9:11 · RODY DAVIS: Yes.

9:12 · [LAUGHS] Yeah.

9:13 · Yeah, and I think it ended up being a manager role too.

9:15 · MARK THOMPSON: That's right.

9:17 · That's right, it was a manager role.

9:18 · And I remember getting interviewed and they were just like, yeah, we like you, but not for a manager.

9:23 · RODY DAVIS: Same.

9:23 · MARK THOMPSON: And I'm like, all right.

9:24 · RODY DAVIS: Exactly, same.

9:25 · MARK THOMPSON: All right, that's cool.

9:27 · I'm not offended by that.

9:28 · [LAUGHS] RODY DAVIS: Yeah.

9:30 · MARK THOMPSON: Oh, man.

9:31 · How fun, how fun.

9:32 · And now, here we are, both working on very different products but all both having a good time.

9:37 · All right, let's see.

9:38 · "I haven't tried Angular Studio yet.

9:40 · I feel a bit hesitant, but I'm planning to start using it after today."

9:44 · Angular Studio, I think you mean Firebase Studio.

9:46 · And speaking of Firebase Studio, here is Firebase Studio in the flesh.

9:50 · So I have it up on the screen.

9:53 · And we're going to do some stuff together, because Rody, here's what I would like to do today.

9:58 · I would like to use, I think we're calling it, like, the-- how do you describe the non-app prototype mode?

10:06 · What's the language that you use?

10:08 · RODY DAVIS: We've been saying code view or just the normal IDE view.

10:12 · We view when you're building with natural language, that's our prototype or app prototyping agent.

10:17 · So everything else is just the default experience, which we really think is super awesome, and I use all the time.

10:25 · So I'm excited to dive into it today.

10:27 · MARK THOMPSON: Yeah, OK.

10:28 · So one of the benefits of the IDE view or the code view is that you still have access to an AI assistant, right?

10:39 · RODY DAVIS: Yep, mhm.

10:40 · MARK THOMPSON: OK.

10:41 · RODY DAVIS: Yeah, in fact, you'll be able to choose your own model, bring your own API key.

10:44 · You can even connect to a fine tuned model too, in the picker, which is great.

10:48 · MARK THOMPSON: Oh, excellent.

10:49 · So what I would love to do is see how can we configure in Firebase Studio a way to tell it how to generate even better Angular code.

11:01 · RODY DAVIS: Awesome.

11:02 · MARK THOMPSON: All right.

11:03 · Awesome So let's do that.

11:03 · So I think the best thing I can-- or not the best thing, the first thing I can do is, so down where it says start coding an app-- I'm going to zoom in just so people can see what I'm doing down here.

11:12 · We've got a lot of options from different products.

11:16 · Let me see.

11:16 · Let me hide this little thing down here.

11:18 · OK.

11:18 · Y'all can't see it, but I can see it.

11:19 · All right.

11:20 · So I'm going to choose-- hey, Flutter.

11:21 · What's going on?

11:22 · I'm going to choose Angular from this list.

11:23 · RODY DAVIS: Cool.

11:24 · You want to also show them where the second place they can find it too?

11:28 · MARK THOMPSON: Oh, please.

11:28 · Let's go back.

11:29 · OK, show me, show me, show me, show me.

11:30 · RODY DAVIS: So click on New Workspace.

11:32 · MARK THOMPSON: OK.

11:33 · So I'm going to go down here, click on New Workspace.

11:35 · RODY DAVIS: Yeah, when people first come to Firebase Studio, they may not realize we have over 160 plus templates configured for a lot of different stacks and frameworks and languages.

11:44 · So if you come here, one of the first things you'll see is Angular.

11:47 · And you can even scroll down and there's a bunch of other templates that you might be used to or-- MARK THOMPSON: Oh, let's go.

11:53 · RODY DAVIS: --have tried out in the community.

11:54 · So there's many more that we're always building.

11:56 · And if you ever have feature requests or want an update, please let me know.

12:01 · And then also, we accept community templates too.

12:04 · So you could just make a PR and support your favorite framework.

12:08 · MARK THOMPSON: Look at this.

12:09 · This is amazing.

12:10 · OK.

12:10 · I don't know that I spent as much time.

12:13 · So before Firebase Studio and Project IDX started and became the same product, I had only used just, like, going straight into one of them.

12:22 · So I didn't even see some of these things.

12:24 · This is fantastic.

12:25 · So you can just go to the-- so let me remind people how I got here before.

12:29 · RODY DAVIS: Yup, just New Workspace.

12:30 · MARK THOMPSON: Yeah, from New Workspace right there.

12:33 · Got it.

12:33 · RODY DAVIS: That's right.

12:33 · MARK THOMPSON: Awesome.

12:34 · All right, let's pick Angular, and then let's actually get to this stuff.

12:37 · So I want to say this is-- I always call my projects-- I always just say, what we're doing today?

12:42 · We're going to say, ai-dev-xp.

12:45 · So some experiments working with AI development, because I love the idea of using-- I do accept the terms.

12:53 · I love the idea of using AI assistant to help boost my work.

12:58 · I mean, I like it.

13:00 · I know some people are kind of on the fence about it.

13:02 · I like it.

13:04 · RODY DAVIS: Oh yeah.

13:04 · So I'm curious your thoughts on how you've been able to approach using AI assistants.

13:10 · Because I definitely have thoughts too, on being an experienced developer and trying to find ways to amplify your workflow, as opposed to slowing it down.

13:19 · MARK THOMPSON: Good question.

13:22 · So recently, I just made a multiplayer web-based game app that had three different UIs, an admin view, a player view, and a spectator view.

13:35 · And for me, the way I was able to have it leverage things is when I knew exactly what I wanted to happen, I would start describing the actual code that I wanted in the comment, and then I will let Gemini fill in the gaps.

13:50 · But sometimes, I really wanted the ability to just have it like, not do anything.

13:56 · I know what I'm going to type.

13:57 · I don't even want your help right now.

13:59 · I know what I'm going to type.

14:00 · Don't suggest anything.

14:01 · All the IntelliSense Windows, the Gemini suggestions, I want everything off for a second, so that way I can actually just type what I'm going to type.

14:09 · So I've been doing some good stuff like that.

14:12 · That's been really working for me.

14:13 · What about you?

14:14 · RODY DAVIS: So I feel like I have been doing what I'm calling compressed or condensed RAG, where I'm using Gemini Deep Research or Notebook LLM to explore a body of research or something I'm trying to do.

14:30 · And my goal of that is to take a huge breadth first search.

14:35 · So I'm giving it a bunch of links to documentation, I'm using my deep research to do expanded search queries, and I'm having it generate some kind of report.

14:45 · So what I do is I take that report, convert it to markdown, and I include it in my code base, and then I generate a prompt based on that piece of research because it doesn't let the model have to guess about what it needs to explore.

15:00 · I've regularly started building with languages that is not even in the training data set, or things that are very new, because you're teaching it and guiding it.

15:10 · And the more explicit you can be about the architecture and the vision that you have for it.

15:15 · I mean, you can get really, really far.

15:17 · And one of the things that I've heard recently that I thought was really nice is when you're prompting a model, it's a reflection of what you're putting into it.

15:26 · So the higher quality input you put in, the higher quality output you're going to get out.

15:29 · As well as if we start to think about prompting image generators, you never are confused if you tell someone a dream with like, two sentences, and they didn't see exactly what you were seeing in your head.

15:43 · You have to be very descriptive and elaborate to get that point across, because communication is how we actually connect and describe our intent.

15:52 · MARK THOMPSON: Wow.

15:53 · OK, so I feel like you and I should do more streams together-- RODY DAVIS: Yeah.

15:56 · MARK THOMPSON: --because I would love to see your condensed RAG in action.

15:59 · I think the people in the community would love to see it as well-- RODY DAVIS: Awesome.

16:03 · MARK THOMPSON: --about how they can leverage this type of stuff.

16:05 · So you've already committed yourself to doing more of these with us.

16:08 · RODY DAVIS: Sounds good.

16:09 · MARK THOMPSON: [LAUGHS] All right, friends.

16:10 · So while we were describing all that stuff, the cool thing that happened so far-- RODY DAVIS: Yup.

16:15 · MARK THOMPSON: And listen, I want to be super clear, friends at home.

16:17 · Like, the Angular community, we know that you put our trust in us.

16:20 · I'm not trying to sell you on Firebase Studio.

16:22 · Let me be super clear.

16:23 · I'm just describing the things that are happening, and we're just going to work on it.

16:26 · If you like what you see, that's different.

16:28 · But this is not like a marketing pitch.

16:30 · RODY DAVIS: Yup.

16:31 · MARK THOMPSON: But I'm just going to describe what I'm seeing.

16:33 · So we start the project.

16:35 · It looks like it did the NPM install for me already, and it started the server.

16:41 · And all I did was just create the thing.

16:43 · I did have to install the extension manually, which is fine, but it prompted me, which is OK.

16:50 · RODY DAVIS: Yeah, which we can even fix that in the future too.

16:53 · One of the cool things about if you go to the dev dot next file, under idx folder, you can set the extensions that you want installed when the Workspace is created.

17:06 · Also, just wanted to say, Firebase Studio, for those on the stream that may not be familiar with it, it's not trying to really compete with local development.

17:15 · We see it as a parallel.

17:16 · One of the things we're trying to do is make it really easy to collaborate with people.

17:21 · And we all know people that we run into that are new to development or maybe have a lower spec machine, or even a Chromebook or an iPad, and want to get started with something.

17:33 · Well, now, you can share a link with someone on Firebase Studio and they can explore Angular without having anything installed.

17:41 · So it's been a really cool way to teach people how to use a certain type of framework without them having to invest, and to trying to figure out how to set up their path or get NPM or node installed locally.

17:55 · MARK THOMPSON: OK, there we go.

17:56 · So we got that working.

17:57 · RODY DAVIS: Right on.

17:58 · MARK THOMPSON: So as you were talking, I just want to see what would happen.

18:01 · Can we get some stuff working?

18:03 · All right.

18:05 · Awesome.

18:05 · All right, so let's get some community comments.

18:09 · "Still don't use much AI in my workflow, but all these streams have been tempting to see how others use it."

18:13 · Yeah, I mean that's how I started.

18:15 · I really was kind of like, eh, I don't know about it in my workflow, because I know what to do.

18:19 · Just like you, Michael, and many of you on the stream, you already know what to do.

18:22 · So that's not as interesting to you.

18:24 · But what I found is how much more I can get done.

18:28 · That's been appealing to me, the amount that I can get done.

18:32 · RODY DAVIS: Yeah, and I guess I could bring up our first thing.

18:35 · Would you want to click the Settings icon?

18:37 · MARK THOMPSON: Yeah, I do.

18:38 · RODY DAVIS: Bottom left, and let's do Settings.

18:43 · MARK THOMPSON: Mhm.

18:44 · RODY DAVIS: So for developers coming into this that may not want the full AI assistant right away, we actually offer some options that I think would be already beneficial.

18:54 · So if you type in enable inline completion-- so you can actually disable the inline autocomplete.

19:07 · I know for me personally, sometimes I like to disable that and only work with it through the chat, because I want to use the built-in LSB and stuff like that.

19:17 · MARK THOMPSON: Yeah, I just want to zoom in for a second so we can see that.

19:21 · Interesting.

19:22 · RODY DAVIS: Yeah, and another one is you can even disable code-based indexing as a global value here too.

19:29 · So just so if you're coming into Firebase Studio and you're like, I don't want the AI or I want to be very explicit about what I want to use AI for, we totally have ways to configure that.

19:41 · MARK THOMPSON: Mhm, mhm, mhm.

19:43 · So I may turn it off at some point, because-- RODY DAVIS: Yeah, it'll be fine for this video.

19:48 · But just some people may not realize that you can turn it off.

19:51 · MARK THOMPSON: Did not know you could turn it off.

19:53 · Let's go.

19:53 · OK.

19:54 · Let's see.

19:54 · Let's get some more comments.

19:55 · Got people in the streets talking to us.

19:57 · Can either-- yes, this is a good question.

20:00 · Can you do a Git repo or from a local folder?

20:03 · RODY DAVIS: Yes, you can import from GitHub, Bitbucket, GitLab.

20:06 · And if we don't support a Git provider, you can always create a blank workspace and clone it through whatever means that you connect to your source control.

20:14 · You can also download your code as a zip file or sync it back to Git.

20:18 · So your code is yours and you can always go back and forth.

20:21 · MARK THOMPSON: What about this?

20:22 · "Can I import existing projects to Firebase Studio," if I don't want to start from scratch?

20:26 · RODY DAVIS: Yep, you can import any public or private Git repository, or just upload a folder as well.

20:33 · MARK THOMPSON: Yeah.

20:34 · All right, let's see.

20:35 · "Mark, that's next level, bro.

20:37 · Don't delete this VOD.

20:38 · That sounds awesome."

20:39 · Whatever I said that sounded awesome, [LAUGHS] then yes.

20:44 · RODY DAVIS: Yes, plus one.

20:46 · [LAUGHS] MARK THOMPSON: Yeah, right.

20:46 · OK.

20:47 · We don't delete our VODs.

20:49 · So whatever it was, it should be good.

20:51 · Awesome.

20:52 · All right, let's continue.

20:54 · So here's something that I would try to figure out.

20:58 · So if I wanted to do, and I really don't like this example, but it's the most accessible example.

21:04 · It's a to do app.

21:05 · And I know that's the generic example, but it's quite accessible.

21:09 · RODY DAVIS: Mhm.

21:10 · MARK THOMPSON: So what I want to be able to do is have the assistant generate modern, like, code.

21:16 · And I have some guidelines.

21:18 · So if I were to do something like-- all right, so I'm going to have a section here.

21:25 · And then, so I'll say list of todos, right?

21:29 · RODY DAVIS: Yep.

21:30 · MARK THOMPSON: With a checkbox.

21:33 · Yeah, to mark.

21:35 · So it gave me some comments, hold on.

21:37 · You could tell me how to open up my web window again.

21:39 · RODY DAVIS: Yeah, I will.

21:40 · Yeah.

21:40 · MARK THOMPSON: OK.

21:40 · Because if I close it-- RODY DAVIS: Yeah, yeah.

21:42 · MARK THOMPSON: --the marker is done.

21:44 · All right, so I want this thing to fill in.

21:46 · So how can I prompt the model to get started right now to do it for me?

21:51 · RODY DAVIS: So this is what we usually consider is like Level 1 AI assistants, where we have autocomplete.

21:57 · And I think it is generally OK for certain types of things.

22:02 · It's way better when you have a lot of existing code.

22:05 · But this, we can now start with the Level 2 version, which is where Gemini can actually read your code and make changes.

22:16 · So if you clicked on Gemini in the bottom toolbar-- MARK THOMPSON: OK, let's see.

22:22 · Bottom toolbar.

22:23 · What am I looking-- oh, down here.

22:24 · Yep, I see it.

22:25 · RODY DAVIS: So this will open up our Gemini chat.

22:27 · MARK THOMPSON: Can people see that?

22:29 · Super small.

22:30 · I wish I could zoom in a little bit more, but I'm clicking on the Gemini.

22:33 · OK, there it is.

22:33 · RODY DAVIS: It usually will launch automatically.

22:35 · One thing that I found to work really well is to provide pseudocode.

22:40 · And you're kind of like doing this here, but we should just be able to-- MARK THOMPSON: Ohh!

22:44 · RODY DAVIS: Yeah, yeah.

22:45 · Because you're giving that abstract shape of where you want to head, is going to already get closer to what you're wanting.

22:53 · MARK THOMPSON: OK, I see.

22:54 · RODY DAVIS: So I have found that Gemini in Firebase is really good when you're explicit about the files that you want to update.

23:00 · So you could say like, create a to do component, updating both app html and app js or whatever, and allow it to know which files to be explicit about.

23:13 · MARK THOMPSON: I see app.html and app.ts.

23:18 · RODY DAVIS: Or CSS as well.

23:19 · Just like, hey, here's the files that I want you to update, and then start with the changes.

23:27 · MARK THOMPSON: OK, update both.

23:28 · And then, here's what I want.

23:30 · The component should-- because I almost get into test-driven development mode describing the task.

23:37 · Like, the component should accept an input with the label of the todo, the status of the todo.

23:53 · The component should also-- what should it also do?

23:59 · It should also display-- oh, it should also strike through the label.

24:06 · If the todo is marked as complete.

24:15 · RODY DAVIS: Yeah, and then, you can also, just for the viewer's knowledge, click the dropdown right there, built-in Gemini model.

24:23 · This is something that Súper Chat and our chat inside of Firebase Studio can do, is where you can actually talk to different models and choose the types of experiences that you're wanting.

24:34 · Sometimes people want to try out the preview models or custom fine tuned ones.

24:39 · And then also, our interactive chat allows you to have multiple chat sessions, so you can go back and see previous ones and jump back in.

24:47 · I would suggest to do a chat per task of what you're trying to do, because it allows you to go back later and to make changes in context of the stuff that you've already done.

24:57 · So we can just use the built-in model.

25:00 · We're using Gemini 2.5.

25:02 · MARK THOMPSON: Ohh!

25:03 · Uh huh.

25:04 · RODY DAVIS: And so this should just be able to work.

25:06 · And then, as we make changes, we can talk about how to even improve it even further.

25:12 · MARK THOMPSON: All right.

25:13 · But before we do that, let's see, let's see.

25:16 · "I used such a workspace for building a small project "library" like a dynamic form builder or dynamic table."

25:22 · Oh, cool.

25:23 · All right, let's see.

25:24 · "Guys, I use ChatGPT to create well-written prompts and then I paste them into Firebase Studio.

25:28 · It generates high-quality code."

25:30 · OK.

25:31 · RODY DAVIS: Yup, that's a great tip.

25:32 · I also use Gemini Deep Research and Thinking to do the same thing.

25:36 · MARK THOMPSON: Oh, fantastic.

25:37 · Oh, it was your RAG workflow, Rody.

25:39 · No, we're going to do it.

25:40 · Totally.

25:41 · RODY DAVIS: Cool.

25:41 · MARK THOMPSON: Right after this stream, I'm going to put something on the calendar for him to come back and show us this RAG workflow.

25:47 · RODY DAVIS: Awesome.

25:48 · MARK THOMPSON: Yeah, totally going to do that.

25:50 · No, and Alcatraz, do not be sorry.

25:52 · RODY DAVIS: Yeah.

25:52 · MARK THOMPSON: It's OK.

25:53 · I'm not offended that you weren't talking about something that I said.

25:56 · [LAUGHS] That doesn't matter.

25:57 · No, I think it's cool.

26:00 · "Please use Claude."

26:02 · RODY DAVIS: If you want to install anything else inside this VM, you own it.

26:07 · It's just like a Linux VM.

26:08 · So people come and add their own preferences.

26:12 · MARK THOMPSON: Yeah, use what feels right for you.

26:15 · We're just showing you-- so when you think about, again, friends, we're still engineers, all of us.

26:20 · And I mean people at home too.

26:21 · You're still an engineer.

26:22 · So if you think about the way you develop as a system of components working together, you can swap out the components that make the most sense for you at any point.

26:29 · And the way that this is working, you can choose your model.

26:33 · Totally, totally possible.

26:35 · All right.

26:37 · OK, let's do it.

26:37 · Let's do it.

26:38 · Let's do it.

26:39 · RODY DAVIS: And also, you can deploy to other places too.

26:40 · We're just trying to make it as easy as possible to deploy to Firebase.

26:44 · MARK THOMPSON: Yeah.

26:46 · RODY DAVIS: So one of the first things that's going to do is read your file.

26:50 · So if you scroll up a little bit, it'll-- well, it did right before, it showed it.

26:56 · But it'll read the files as context.

26:58 · And so now, it's going to start to make changes.

27:01 · You can review changes or add automatically-- MARK THOMPSON: Yeah, OK.

27:05 · RODY DAVIS: --but they will show the suggested change.

27:09 · So this is for todos.ts.

27:11 · MARK THOMPSON: All right, and I already see some things that I wanted to do different.

27:16 · RODY DAVIS: Cool.

27:17 · So we could follow up in the chat and you could tell it to do something different too.

27:21 · MARK THOMPSON: OK.

27:21 · And is there any way that I can do it before we get to the chat level, or-- RODY DAVIS: Yeah, we can customize the AI rules if you want.

27:29 · MARK THOMPSON: Yeah, let's do the AI rules, because I kind of wanted to always know to do a certain set of things.

27:35 · RODY DAVIS: Let's do that, yeah.

27:36 · This at least shows us that this is how you get to the generation mode.

27:40 · So let's go ahead and hit code.

27:41 · MARK THOMPSON: Yeah.

27:42 · RODY DAVIS: All right, so before I open it up, let me talk through these changes with some of our friends at home.

27:47 · RODY DAVIS: Cool.

27:47 · MARK THOMPSON: The things that we care about.

27:49 · So here's a perfect example.

27:50 · If you're generating code right now, it's kind of common that you might see something like a standalone true, which is modern Angular.

27:57 · Except for in the recent versions, we've made the standalone component declaration optional.

28:02 · RODY DAVIS: Which is awesome.

28:03 · MARK THOMPSON: So you don't even have to put it.

28:04 · Right.

28:05 · But then these, we want to use signals instead of the decorator base.

28:09 · RODY DAVIS: Got it.

28:10 · OK, cool.

28:11 · That sounds great.

28:12 · OK, one thing I would suggest is to pull up some of the code snippets that we want to use, and then we will go to the idx folder, and we're going to create a new file.

28:25 · So you can actually hit close on those changes if you want, or we can just add something new.

28:33 · MARK THOMPSON: Let me hit close on these for now.

28:35 · RODY DAVIS: Yep.

28:35 · MARK THOMPSON: All right.

28:36 · And then, do I need to do anything here with the Gemini tab?

28:39 · RODY DAVIS: You can just close the Gemini tab for right now.

28:40 · Yeah, you can actually hit Stop on the bottom right.

28:42 · MARK THOMPSON: That's what I was looking for.

28:43 · Yeah, it was like, I saw it doing something.

28:45 · I was like, what are you doing?

28:46 · Stop thinking.

28:47 · RODY DAVIS: Yeah.

28:47 · All right, let's just go ahead and close Gemini.

28:49 · Yeah.

28:50 · OK, so we're going to create a new file.

28:54 · MARK THOMPSON: All right, so in the idx folder?

28:56 · RODY DAVIS: Yep, and it's going to be .md.

29:00 · MARK THOMPSON: Oh, I did something over here.

29:02 · RODY DAVIS: All lowercase.

29:03 · MARK THOMPSON: Hold on, I am using a computer that I don't know how to use.

29:06 · Wait a minute.

29:07 · How do youl use the computer?

29:07 · See, every time I try to right click, I'm doing the wrong thing here.

29:10 · There we go.

29:11 · New file, and then airules.

29:14 · RODY DAVIS: Yeah, one word, .md.

29:16 · MARK THOMPSON: OK, Rody, tell us about this file.

29:18 · RODY DAVIS: Yeah, so AI rules, and we've even supported other formats like cursor rules and other stuff too.

29:25 · But AI rules is Firebase Studio's take on how you can customize your chat and your Workspace.

29:32 · So one of the cool things about using these rules files is it allows you to ground the model with context about your preferences and your preferences in conjunction with this project Because it's checked into version control, other people have the same rules when they load it up.

29:53 · But yeah, so that's at a high level.

29:56 · The other cool thing you can do is give it links inside of here.

30:00 · So you could give it the Google style guide on something, or giving it a context on-- MARK THOMPSON: What?

30:06 · RODY DAVIS: --how to do this.

30:06 · Yeah.

30:07 · One of the cool things about Gemini is it uses URL context.

30:10 · So you can parse URLs as more grounding.

30:17 · And so that's kind of a cool way.

30:20 · If it's not working, it's fine.

30:23 · We'll have another way to work with it.

30:24 · But at least that's what our docs talk about, and at least what we're aiming for.

30:30 · So one of the cool things that we can do is you can maybe give it a persona.

30:36 · So we'll use default markdown headings.

30:38 · So you can do basically, an H1, and you can say persona.

30:43 · And then, under that, we can write a paragraph.

30:45 · And this is where you can say-- the classic example's talk like a pirate.

30:50 · MARK THOMPSON: [LAUGHS] RODY DAVIS: But here, you want to say you are a seasoned web developer that writes modern CSS, and you prefer-- or like, we're an Angular developer that's working, using basically, the latest

31:08 · versions of the library, which include signals and blah, blah, blah, which kind of gives it a hint to the model to pick and generate something that's going to be from at least a more recent data set, or it put it into the same context space of where we're wanting to head.

31:29 · So yeah, I'll defer to you on this persona.

31:33 · MARK THOMPSON: Yeah, so while you were talking, I was trying to do what somebody in the chat said, which I thought was super cool.

31:40 · I was like, all right, can I use Gemini to help me generate the persona text?

31:45 · RODY DAVIS: Yeah, of course.

31:46 · Yeah.

31:46 · And I was like, can I do it?

31:48 · I don't know.

31:49 · OK, but first, let me see if I can-- so I'm going to grab a window that's off screen just because I don't want to show my corp tabs.

31:58 · RODY DAVIS: [LAUGHS] Yeah.

31:59 · MARK THOMPSON: Let's see.

32:01 · So I'm saying, can you help me write a persona for an Angular developer?

32:07 · RODY DAVIS: And we also have an ask mode for Gemini too.

32:10 · But yeah, I usually use the Gemini tool as well.

32:14 · MARK THOMPSON: Yeah, OK.

32:15 · So let's see.

32:16 · Can you help me write a persona for an Angular developer that uses-- OK.

32:19 · To be this persona-- oh.

32:24 · OK.

32:25 · Write persona paragraph-- you gotta be super specific.

32:28 · Because, like you said, when you mentioned the whole photo thing or the dream thing of like, you described it in two sentences and then you're surprised that it's not the output that you want, that really spoke to me.

32:39 · I can't lie to you.

32:40 · RODY DAVIS: Yeah.

32:41 · MARK THOMPSON: I was like, that's really good.

32:42 · OK.

32:42 · RODY DAVIS: Yeah.

32:43 · MARK THOMPSON: So I'm being more literal.

32:45 · Or almost like when I'm talking to my son.

32:48 · If I'm like, hey, keep your eye on the ball, and then he puts his little eye on the ball, I can't be surprised if he didn't get the full context from one sentence, right?

32:55 · RODY DAVIS: Yeah, and so the persona, along that same analogy, is like us giving a screenplay actor role to someone.

33:05 · And if you don't give any direction, a person has the freedom to do whatever.

33:12 · But if you have a very specific goal in mind for what you want the actor to do, that's what the persona is for.

33:18 · Here is what I'm deeming acceptable and how I want you to respond.

33:24 · And so when it encounters different types of things in the chat or whatever, it's going to look at this rules file and try to make a decision based on that.

33:33 · MARK THOMPSON: Oh, I love that.

33:34 · That's exactly what we want.

33:35 · All right.

33:36 · The paragraph that we link in the library, this will be used for context for prompting.

33:47 · OK.

33:48 · Let's see if it does the right thing.

33:50 · RODY DAVIS: And then also, I would suggest finding some modern snippets of the Angular, TS, CSS, and HTML files that we use-- MARK THOMPSON: Oh, sure.

34:03 · RODY DAVIS: --even as examples here too.

34:05 · MARK THOMPSON: Wow, we can get there.

34:07 · OK, so this is pretty close.

34:09 · We're going to change it a little bit.

34:10 · Meet Alex.

34:11 · You don't have to meet Alex.

34:12 · RODY DAVIS: Yeah, actually, we want to take out the name.

34:15 · We'll do-- yeah, you are a dedicated developer.

34:20 · Yeah, we can remove names.

34:24 · Sometimes, that'll kind of confuse it, but let's see.

34:30 · Is it Angular 18?

34:31 · MARK THOMPSON: No, it's not.

34:32 · But it's a 18 plus, so I'll give it a break.

34:37 · I'll say 20 plus.

34:39 · RODY DAVIS: And then, one more Alex.

34:40 · MARK THOMPSON: Ooh, I didn't even write that, "passionatly adopting signals for reactive state management, embracing standalone--" RODY DAVIS: Right on.

34:45 · Right on.

34:46 · MARK THOMPSON: Hey, listen.

34:47 · Oh!

34:47 · "New control flow for more intuitive template logic.

34:49 · Performance is paramount to-- paramount to you who constantly seeks to optimize change detection and improve-- wow.

34:56 · Uh, excuse me.

34:57 · This sounds like a great person.

34:58 · I want to hire this person.

35:00 · RODY DAVIS: Yeah, yeah.

35:01 · OK, cool.

35:01 · So let's now add a new block.

35:04 · So this is a great persona.

35:05 · MARK THOMPSON: Yeah, it's excellent.

35:07 · RODY DAVIS: Now, we're going to do another top level heading for H2 actually, for examples.

35:15 · And so we'll say-- you can do a paragraph right here, and be like, these are modern examples of how to write an Angular 20 component with signals and all the different things.

35:31 · MARK THOMPSON: Mmm.

35:32 · RODY DAVIS: And then, I would literally paste code blocks with the TS, CSS, and HTML tags.

35:38 · And then, just literally paste something from the docs, because this will help-- or I would do the triple backslash with TS.

35:47 · MARK THOMPSON: Triple backslash, like, 1, 2, 3.

35:50 · Like that?

35:51 · RODY DAVIS: Uh, backtick.

35:51 · MARK THOMPSON: Oh, OK.

35:52 · OK.

35:53 · Oh, like this.

35:54 · RODY DAVIS: Yeah, yeah.

35:55 · Mhm.

35:55 · MARK THOMPSON: OK, then we'll do one for CSS.

35:58 · RODY DAVIS: Mhm.

35:59 · And then, after we do that, we can even say when you update a component, make sure to put the styling in the CSS, the template in HTML, and the logic in TS.

36:14 · MARK THOMPSON: OK.

36:15 · RODY DAVIS: Because sometimes, I think you can do a single file Angular [? singular ?] component.

36:19 · And I think this will just like, if that's your preference, you can put that here.

36:22 · MARK THOMPSON: Yeah, I'll do separate because I want to fine tune.

36:26 · I want to improve over time, versus try to nail it on the first-- I guess I'm trying to say we don't have to zero shot these customizations.

36:34 · We can refine them and make them way better.

36:34 · RODY DAVIS: Exactly, exactly.

36:36 · Yup.

36:36 · MARK THOMPSON: When you update a component, be sure to put the logic in the TS file, the CSS-- or the styles --in the CSS file and the HTML template in the HTML file.

36:56 · Can I say here is the-- or can I say style guide?

37:02 · Can I do that?

37:02 · RODY DAVIS: Yes, of course.

37:03 · MARK THOMPSON: And then, let me see.

37:05 · I have a link to the style guide I'm going to throw in here.

37:09 · OK.

37:10 · So here is a link.

37:13 · RODY DAVIS: You could even throw in how to use signals, and maybe have your signals documentation too.

37:18 · MARK THOMPSON: What?

37:18 · Stop.

37:19 · RODY DAVIS: Oh yeah, totally Yeah, because assuming it's using the URL context correctly and our docs are up to date, it's supposed to parse the URLs as context and ground it.

37:32 · MARK THOMPSON: Will it do it every time then, or do I only do it once?

37:35 · And what's the impact of it if it has to go out and like-- you know what I'm saying?

37:39 · RODY DAVIS: It should cache it, yeah.

37:41 · I don't think it does it every time.

37:43 · MARK THOMPSON: Sure, sure, sure.

37:45 · So here is a link to the style guide, to the most recent Angular style guide.

37:58 · So then, I imagine if you are a developer looking to do something like this, so let's say you're going to use Firebase Studio at your organization, you might put your appli-- your company style guide doesn't exist.

38:13 · RODY DAVIS: Yeah, totally.

38:14 · MARK THOMPSON: Maybe that's a project you do where you define the style guide.

38:17 · So that way, your generated code can match.

38:20 · Wow, that's interesting.

38:21 · RODY DAVIS: So a tip also for people doing that.

38:24 · Even if you do have some elaborate resource somewhere, it's really important to include an NVP minimal representation of that resource in this top level file.

38:34 · Because you want the TLDR, and then a way to explore more elaborate information on it.

38:43 · That also just helps the model to not get overfitted or too confused on one direction, and usually, it's led to a lot better generation.

38:55 · MARK THOMPSON: OK, so I got a little problem here.

38:58 · Let me see.

38:58 · All right.

39:00 · All right.

39:00 · And this is not a problem, but I don't know how far the context URL reading will go.

39:08 · I don't know how deep It'll crawl.

39:10 · So what I'll do is this.

39:12 · I have some essentials guides that are the high level, get started with these technologies.

39:21 · RODY DAVIS: Yeah.

39:21 · MARK THOMPSON: And I wonder if I can throw those in here, and work with these people.

39:26 · RODY DAVIS: That's exactly how I do my Notebook LLM too.

39:29 · I do that.

39:29 · MARK THOMPSON: Is that right?

39:30 · RODY DAVIS: Yeah, mhm.

39:31 · MARK THOMPSON: Look at you, and you use Notebook LLM.

39:33 · You're from the future, Rody.

39:35 · RODY DAVIS: [LAUGHS] MARK THOMPSON: Yeah, OK.

39:37 · Let me get back to my-- OK, here we go.

39:39 · I got too many windows up.

39:40 · I'm trying to close them all because we believe, and this is a good test, we believe that if you follow our essentials guides, you will know what you need to know to get started.

39:50 · RODY DAVIS: OK, awesome.

39:52 · MARK THOMPSON: So I'm guessing we'll find out.

39:54 · If that makes sense, right?

39:56 · If it does.

39:57 · OK, cool, cool, cool.

39:59 · RODY DAVIS: So one thing.

40:00 · Yeah, let's also include the examples too.

40:02 · MARK THOMPSON: Oh, sure.

40:03 · RODY DAVIS: Yeah, yeah.

40:05 · MARK THOMPSON: Can I preface this with anything?

40:07 · Can I just say these are-- RODY DAVIS: Yeah.

40:10 · I would usually include description, yeah.

40:13 · MARK THOMPSON: Here are some links to the essentials for building Angular applications.

40:23 · Use these to get an understanding of how some of the core functionality works.

40:42 · OK, so I think we got something good.

40:45 · Let's pause for a second and answer some questions before we do the examples.

40:49 · RODY DAVIS: Sweet.

40:50 · MARK THOMPSON: OK.

40:54 · OK, right.

40:55 · So "Firebase Studio, AI understand Angular better?"

40:58 · That's kind of what we're working on because as we saw, it does generate working Angular code.

41:03 · But we know that you don't want to generate code and have to spend the whole time refactoring what's generated.

41:08 · The closest we can get to the fidelity that we're looking for is kind of our aim.

41:12 · RODY DAVIS: And also, everybody has their own preferences too.

41:14 · MARK THOMPSON: That's true.

41:15 · So this file could help you to also define your own preferences.

41:18 · Really cool.

41:19 · "I find AI too silly yet to understand the Angular concepts as simple as human beings can."

41:23 · Well, we're special, KK.

41:24 · You gotta remember that.

41:25 · This thing up here, I'm being serious, this thing is special, right?

41:30 · Your brain is an incredible part of us.

41:34 · And artificial intelligence is one thing, but you got to remember something that's even more important.

41:38 · We're always working on artificial intelligence, but you're already intelligent.

41:42 · Don't forget that.

41:43 · RODY DAVIS: Yeah.

41:43 · I also found I feel like at DevRel, it's been interesting working both in an age of targeting people and now, LLMs.

41:55 · Because now, we start to think about resources that can be consumed easier for beginners, but also find ways to have ramps to more intermediate and advanced resources.

42:06 · And the easier that you can clearly explain what you're trying to do, also helps humans read stuff too.

42:16 · So I feel like it's been cool to see the movements around people add LLMs text files or markdown links to resources on pages.

42:26 · Because humans-- markdown is a human readable format, but it's great for LLMs.

42:32 · But by doing that, we're trying to think about what is the condensed version of our docs that could fit in a markdown file.

42:39 · How do we strip out the noise?

42:40 · How do we get it there to make it super easy?

42:44 · And that actually just happens to benefit regular people too.

42:48 · MARK THOMPSON: Wow.

42:49 · "I dislike that every project that I start in Firebase Studio wants to use React and Next JS, instead of Angular and Firebase Cloud Functions."

42:56 · RODY DAVIS: So, the prototyper.

42:57 · Yeah, currently our prototyper uses Next JS and Tailwind and Genkit.

43:03 · We wanted to have an opinionated experience that made it really easy to build quickly.

43:08 · We are exploring trying to make that work for more things.

43:12 · But right now, it's not a, I want to generate this thing and it just generates it with whatever framework of your choice.

43:19 · Right now, it's very guided.

43:20 · But I would suggest, especially after we have these AI rules, that you try out Gemini in Firebase, because you can give all the custom rules that you want and how you want it to generate, and still use the super fast previewing, the updating multiple files at once, adding changes.

43:39 · This still is going to work pretty good.

43:41 · One of my favorite-- yeah, yeah.

43:43 · MARK THOMPSON: No, no, no, no, you're fine, you're fine.

43:45 · Rody, let me look at the time here, because I know we've been hanging out and doing this.

43:49 · I know that I only booked you for a certain amount of time.

43:52 · RODY DAVIS: No, I'll be good.

43:53 · Yeah.

43:53 · MARK THOMPSON: OK.

43:54 · OK.

43:55 · Yeah, you just flag me if we get out of time.

43:56 · OK, let's see.

43:56 · "Absolutely that's usually better, use the AI to tame the AI."

43:59 · Listen, we're all learning about how to do this stuff together.

44:02 · I know it seems like if you look at the news or the internet, it seems like there are an elite set of experts who know how to do everything and that represents everybody.

44:13 · That's not true.

44:13 · We're all learning how to do this stuff together.

44:15 · OK, that's enough comments for now.

44:17 · I'll come back and we'll do more content.

44:19 · But I want to get this example in here.

44:21 · So I'm trying to think of the fastest way to get the code example.

44:23 · RODY DAVIS: So where would you want people to go to when they go to the docs to find the best looking versions of modern components or HTML and stuff like that?

44:36 · MARK THOMPSON: I don't know.

44:37 · I actually don't have a good answer for that.

44:39 · I don't have a good answer.

44:40 · RODY DAVIS: OK.

44:40 · So then, let's just basically copy the example that we have in the Workspace, and maybe you could just switch it to signals and stuff like that.

44:47 · MARK THOMPSON: Yeah, I'm looking at the-- we have our tutorial.

44:53 · The tutorial is pretty good.

44:55 · So I'm trying to see if I could find like-- oh yeah.

44:57 · OK.

44:58 · Here you go.

44:59 · RODY DAVIS: The other thing that I would suggest to you for the examples is also include doc comments above-- when it's defining an input signal, be like, this is how you can bind to the template directive.

45:13 · And then, doing above the component definition or whatever.

45:17 · You could even say for the things that aren't there, standalone is already enabled true by default or something like that.

45:27 · MARK THOMPSON: Mhm.

45:28 · All right.

45:28 · So let me do this.

45:29 · Let me see if I can-- I'm going to change one of these examples, because this is an example of some of the things we want to do.

45:36 · So we'll change this to a signal.

45:39 · We'll say true.

45:40 · RODY DAVIS: And we probably want.

45:41 · Template URL, if that's your preference for this.

45:44 · MARK THOMPSON: Well, it'll be because that's what we just told it, to do everything separately.

45:48 · So we'll do template URL and we'll just call it-- [INAUDIBLE] call at the HTML now.

45:55 · Friends at home, don't get mad at us about the style guide change where we change the file names.

45:59 · Don't get mad at us about this.

46:01 · RODY DAVIS: So one thing that I like to do here too, I'm curious if you've done this as well, but I like to use a Mustache style syntax here.

46:09 · So if you go up to the app ts.

46:12 · MARK THOMPSON: Let me see.

46:13 · What can I do here?

46:14 · I don't know if that matters or not, but OK.

46:16 · RODY DAVIS: So you could, basically, where it says lowercase app, you could do double curly braces and say tag instead to hint to the model that this is the variable that you want to have updated.

46:32 · MARK THOMPSON: Oh, like this?

46:34 · RODY DAVIS: Yeah, exactly.

46:35 · And I would say tag name or whatever, and put that also for app html or-- MARK THOMPSON: What?

46:40 · RODY DAVIS: Yeah.

46:41 · RODY DAVIS: Rody, you are from a different planet.

46:42 · RODY DAVIS: [LAUGHS] Models are really good at recognizing these patterns.

46:47 · And then, I would also, for the app name, I would say class name.

46:50 · MARK THOMPSON: Yeah, like class name.

46:53 · And I'm even going to do it like-- so you can kind of get an idea.

46:56 · You know what I mean?

46:58 · RODY DAVIS: Yeah.

46:58 · MARK THOMPSON: That's like that casing I want to use.

47:01 · RODY DAVIS: Yeah, exactly.

47:01 · Yep.

47:01 · Yeah.

47:02 · Yeah, the scout case.

47:03 · And then, you could do, if you want to do path case up there, instead of a space for tag name.

47:10 · MARK THOMPSON: Oh.

47:12 · So like this, with-- RODY DAVIS: You could do path, so the hyphen and stuff.

47:17 · MARK THOMPSON: That's called path case?

47:19 · RODY DAVIS: Yeah, that's what I believe.

47:20 · Yeah.

47:20 · MARK THOMPSON: Oh no, it's fine.

47:22 · RODY DAVIS: It's the same basically underneath.

47:22 · Yeah, yeah.

47:23 · MARK THOMPSON: Oh, it's fine.

47:23 · I just want the people at home to tell me if they've seen path case before.

47:27 · Tell me if you all have known this and I just didn't know it.

47:30 · Let me know.

47:31 · You can't hurt my feelings.

47:32 · My feelings are just not at risk here.

47:34 · RODY DAVIS: And then, is there anything else you want to show off in the binding directives?

47:41 · Oh, maybe define a function in there as well.

47:46 · MARK THOMPSON: Sure, what kind of function are you thinking?

47:49 · RODY DAVIS: I don't know, like an onclick handler or something like that.

47:52 · MARK THOMPSON: Oh, sure.

47:53 · OK.

47:53 · So we could do-- RODY DAVIS: It doesn't have to match the HTML.

47:56 · It's more just an example of-- yeah, I mean, you could.

47:59 · Yeah.

48:00 · MARK THOMPSON: And so we can actually show a click here.

48:03 · RODY DAVIS: Yeah.

48:04 · MARK THOMPSON: So this is definitely the canonical example that I would always use.

48:08 · But I think for today, this is fine, right?

48:11 · RODY DAVIS: Maybe actually, a different one could be the input.

48:16 · So it would show an event type passed.

48:24 · MARK THOMPSON: You want me to pass in an input here?

48:26 · RODY DAVIS: Like an on change listener, if you're-- MARK THOMPSON: Oh, like an on change.

48:30 · You sure?

48:31 · I don't have a preference.

48:32 · RODY DAVIS: Cool.

48:34 · MARK THOMPSON: All right, but what should this be?

48:36 · So this is an input onto-- like, what type of input are you putting here?

48:39 · RODY DAVIS: Like text or something like that, yeah.

48:41 · MARK THOMPSON: Sure, we can do that.

48:43 · But then, I would normally do a NG model here though.

48:46 · RODY DAVIS: Oh, well that's good to know.

48:47 · Yeah, I didn't know what the default is here.

48:49 · MARK THOMPSON: Yeah, see, I would have-- RODY DAVIS: Usually in web components, I just bind directly.

48:55 · MARK THOMPSON: Yeah, see, I would do an NG model.

48:57 · So instead of that, let me do the button thing for now.

48:59 · RODY DAVIS: Let's do the button.

48:59 · Let's do the button then.

49:00 · Yeah, great.

49:00 · Yeah.

49:01 · MARK THOMPSON: And then, so here.

49:02 · I'm going to take this out of here.

49:04 · And I'll put it just like in a regular place so it doesn't think to do that.

49:07 · And then, we'll say-- RODY DAVIS: Cool.

49:08 · MARK THOMPSON: --toggle server.

49:10 · OK.

49:10 · RODY DAVIS: Great.

49:12 · MARK THOMPSON: Status.

49:13 · And then, inside this function-- because it doesn't have to be perfect, but this should be protected.

49:19 · RODY DAVIS: OK.

49:19 · MARK THOMPSON: Read only.

49:21 · And then, we can have our server or our function, right?

49:25 · RODY DAVIS: That allows you not to update the signal from the template, I'm assuming.

49:28 · MARK THOMPSON: No, it's just so that way, from the class protection, like class [INAUDIBLE]?

49:33 · And so then, that way, you're not sitting here doing weird stuff.

49:38 · RODY DAVIS: Gotcha.

49:38 · MARK THOMPSON: Yeah, yeah, yeah, yeah.

49:40 · It's like, you can't change the reference to this.

49:42 · And then, it's kind of immutable code but not.

49:45 · Yeah.

49:46 · So this is right.

49:48 · Even in my example, it knew what to do.

49:50 · RODY DAVIS: OK.

49:51 · And then we could just do a minimal CSS styling, but it doesn't have to be a lot.

49:57 · In the CSS, I prefer nested CSS.

50:00 · So maybe you could show an example of app route or whatever you want for your target selector.

50:07 · MARK THOMPSON: Mhm.

50:08 · RODY DAVIS: Because if you hint at modern CSS, like a where selector or has query or something like that, I think it'll help with the direction of the model, to know not to use Tailwind.

50:19 · Or if you do want to use Tailwind, to include that.

50:22 · MARK THOMPSON: Never.

50:22 · I don't know how to use it.

50:24 · Not because I don't like it.

50:25 · I don't how to use it.

50:27 · RODY DAVIS: Yeah, I currently don't use-- I use Tailwind and some stuff, but mostly in the prototyper.

50:31 · But yeah, I usually prefer just nested CSS.

50:34 · MARK THOMPSON: Sure.

50:35 · So if I do container, and you're saying like-- RODY DAVIS: One line down.

50:39 · MARK THOMPSON: --inside of here.

50:41 · RODY DAVIS: I think you're outside of the block.

50:43 · MARK THOMPSON: I am outside of the block.

50:45 · You're right.

50:45 · OK.

50:47 · So we're going to do this.

50:49 · There's a lot of pressure to put the right example, believe it or not.

50:52 · I'm feeling really tense.

50:53 · RODY DAVIS: Yeah.

50:54 · [LAUGHS] Well, I guess one of the cool things about this is you can iterate on it.

50:58 · You can check it into version control.

50:59 · MARK THOMPSON: Yeah.

50:59 · RODY DAVIS: If you find that you want to tweak it, I'll show you how to make changes.

51:03 · And once we have an example, this is another thing that I use a lot in my AI workflow, is I get the first draft out, and then I use Gemini to refine it and make future edits.

51:14 · So you may take this and have it generate more examples based on the ones that you provided.

51:19 · MARK THOMPSON: Oh yeah.

51:20 · RODY DAVIS: And it's going to be a lot closer to what you're wanting.

51:22 · MARK THOMPSON: That sounds right.

51:23 · All right.

51:24 · And then, I'm going to just say for my container style, and then I'll say, sure, all that's fine.

51:29 · I don't really care about that.

51:30 · RODY DAVIS: Perfect.

51:31 · MARK THOMPSON: Yeah, I just want to have something in there.

51:32 · All right.

51:32 · We got a question though, that I think we should answer.

51:35 · All right.

51:36 · "Since this is a web app, is it possible to do inference using a locally running LLM?

51:41 · Off a local port.

51:42 · Doing that with VS Code Continue plugin.

51:46 · I guess the actual code is remotely hosted."

51:48 · Is there a way to do this?

51:49 · RODY DAVIS: I mean, we don't have a GPU in the VM.

51:51 · So if you ran maybe the one billion model from Gemma, you probably could.

51:57 · But yeah, we have a way to do public ports.

52:00 · But because Firebase Studio runs in the browser, you would have to have that LLM running.

52:07 · But one of the cool things about the Gemini API is it includes Gemma on the URL.

52:12 · So if you did want to try out other models, you could even specify that in the chat.

52:16 · But yeah, using Continue, I don't think you'd be able to use a powerful enough LLM to make it work locally.

52:26 · MARK THOMPSON: Wait, stop for a second.

52:28 · First off, friends at home, specifically you, Alcatraz.

52:30 · I don't even know what you're talking about.

52:32 · What is Continue?

52:34 · You all are from a different universe with this cool stuff.

52:37 · I don't even know what that is.

52:38 · Now I have some more stuff I need to look up.

52:40 · Let me see if we have a-- "kebab case."

52:43 · OK, you got it.

52:43 · RODY DAVIS: That's a good one.

52:45 · Yeah, yeah.

52:45 · MARK THOMPSON: A kebab case.

52:46 · Let's see.

52:46 · "May you also use pug instead of HTML?"

52:51 · RODY DAVIS: I'm not sure.

52:52 · Is that a common thing with Angular?

52:53 · MARK THOMPSON: Well, no.

52:54 · It's more because we're using the Mustache style.

52:58 · RODY DAVIS: Oh, OK.

52:58 · MARK THOMPSON: But this is just to help the model.

53:01 · This isn't really like, syntax.

53:03 · RODY DAVIS: Yeah, it's not explicit.

53:04 · It's kind of pseudocode.

53:05 · MARK THOMPSON: Yeah, it's like pseudocode.

53:07 · Yeah, yeah, yeah, yeah.

53:09 · OK, let's see.

53:09 · Make sure we're answering questions.

53:11 · Let's see.

53:11 · "I got an error in Firebase Studio generate HTML inside the TS, also add component HTML."

53:17 · Interesting.

53:17 · OK, well, all right.

53:18 · Enough of my talking.

53:20 · Let's do this and actually try it.

53:24 · RODY DAVIS: Let's add one more line in the CSS to show the nested button selector.

53:29 · MARK THOMPSON: All right.

53:30 · You got to tell me what you mean when you say that, because I'm not sure that I'm familiar.

53:33 · RODY DAVIS: Just scroll down.

53:34 · Yeah, so add a new line.

53:35 · MARK THOMPSON: Oh, inside of here.

53:37 · Don't I need SaaS for that?

53:39 · RODY DAVIS: You just do button, and then the open and curly braces.

53:44 · MARK THOMPSON: Yeah, I understand.

53:45 · But is this a SaaS thing, or this is a native CSS thing?

53:47 · RODY DAVIS: No, this is native CSS now.

53:48 · Yeah.

53:48 · MARK THOMPSON: Oh, you can do this now?

53:50 · RODY DAVIS: Yeah, yeah, yeah.

53:51 · That's why I was wanting to show it, because it kind of hints that this is a modern approach that's supported on all the browsers.

53:56 · I use this to-- MARK THOMPSON: Stop it.

53:58 · RODY DAVIS: Yeah, it's pretty great.

53:59 · And then, we'll delete that closing brace right there.

54:02 · Yeah, cool.

54:03 · MARK THOMPSON: Stop it.

54:04 · RODY DAVIS: So this should be great.

54:05 · So now, the next thing that we're going to do.

54:07 · We have a first draft of our AI rules.

54:10 · So we're going to hit Command P, and we're going to do the triangle, or the forward carat, and we're going to do rebuild Workspace.

54:22 · MARK THOMPSON: Oh, interesting.

54:24 · So once we-- oh.

54:26 · So airules.md is loaded at build time, like when the Workspace is being built.

54:31 · RODY DAVIS: You can also load it in the chat by telling Gemini to load the AI rules md file.

54:37 · But yeah, by default, it'll run at Workspace creation.

54:41 · Because ideally, you're not changing the AI rules that much.

54:45 · MARK THOMPSON: Right.

54:46 · RODY DAVIS: You're explicit about it because everything else should be grounded in the chat.

54:50 · MARK THOMPSON: Yeah.

54:51 · OK, Friends at home who are just joining us, I'm joined by the one, the amazing Rody Davis from the Firebase Studio team.

55:00 · And we're working on the airules.md and some code generation in Firebase Studio to provide a better experience for you as an Angular developer when you're trying to get Gemini to generate code for you, or whatever model.

55:14 · So this AI rules works no matter which model, right?

55:18 · Or is it only for Gemini?

55:19 · RODY DAVIS: Correct.

55:19 · No, it's any model.

55:20 · Yeah, it's just the Gemini chat.

55:22 · MARK THOMPSON: Any-- look at that.

55:24 · [LAUGHS] Look at that.

55:26 · For instance, that's pretty amazing, right?

55:28 · That's not even like, oh, you got use, like, only for Gemini.

55:31 · This is for any model.

55:32 · We're using Gemini.

55:33 · That's the default model in here.

55:35 · But listen.

55:36 · We're trying to get something cool working, because I typed something before.

55:40 · Oh, it's not there.

55:41 · It's OK.

55:42 · RODY DAVIS: So if you click the History button.

55:43 · MARK THOMPSON: Where is it?

55:44 · Let me see.

55:44 · I don't see a History button.

55:45 · RODY DAVIS: Up by the Add button, on the top left of the-- MARK THOMPSON: Yeah.

55:48 · RODY DAVIS: You should be able to see that.

55:50 · Yeah.

55:50 · MARK THOMPSON: [LAUGHS] Let's go.

55:53 · I just want my prompt back.

55:54 · That's what I want, because I want to run it again fresh.

55:56 · RODY DAVIS: So I would copy that, and delete the chat right there.

55:59 · MARK THOMPSON: Yup, delete.

56:01 · Get out of here.

56:02 · RODY DAVIS: Yeah.

56:03 · MARK THOMPSON: All right.

56:04 · RODY DAVIS: Because it's showing the old version, yeah.

56:05 · MARK THOMPSON: OK.

56:06 · So let's go over our prompt one more time, and we'll say create a todo component, updating both app.html, app.css and app.ts.

56:14 · Now, the reason we're listening to files is that Rody was letting us know that when you're prompting, especially in this context, we're trying to generate code, giving more specifics can help to get a more accurate output that you want.

56:25 · RODY DAVIS: Also, I think some people have experienced, in Gemini with Firebase, that they asked for a change but didn't update anything.

56:32 · If you're explicit about saying I want you to update this file, it'll very likely make those changes.

56:38 · MARK THOMPSON: OK.

56:38 · So we're just trying to influence it to do more of what we want?

56:42 · RODY DAVIS: Mhm.

56:42 · MARK THOMPSON: OK, good, good, good.

56:43 · And then, the component should accept an input with the label of todo, the status of the label of the todo, and the status of the todo.

56:53 · The component should also strike through the label if the todo is marked as complete.

56:57 · So this is a good start.

56:59 · I'm going to submit it using the built-in Gemini model.

57:03 · You see that?

57:03 · So friends who are just joining, we got some options here, but we're going to use the built-in Gemini model here.

57:09 · And then, I'm going to click Submit.

57:11 · And it's thinking.

57:13 · OK, let's see, while it's thinking.

57:14 · Let's see.

57:15 · "Continue is a VS Code extension to get similar functionality to this, but it won't hit an API in the cloud."

57:22 · Oh.

57:22 · "Instead hits the LLM."

57:24 · Oh, cool.

57:25 · RODY DAVIS: Right, but you need a GPU to be able to run it, and the VM is running in your browser.

57:30 · MARK THOMPSON: Yeah.

57:31 · RODY DAVIS: Yeah, but it's super cool.

57:32 · Yeah.

57:33 · MARK THOMPSON: That is very cool.

57:34 · So I have to get a computer with a GPU because, I mean, I know my Mac has one, but you know.

57:41 · "I really like it."

57:42 · So glad that you are enjoying this.

57:44 · "Which is why I would like FB Studio to have local PC remote."

57:47 · Oh, OK.

57:47 · That's why you would like that.

57:49 · Got it.

57:49 · Got it, got it, got it.

57:50 · "Love the UX for Firebase Studios, so very interested!"

57:53 · Good, awesome.

57:54 · I'm so glad that you all are having a good time.

57:56 · Let's go!

57:59 · OK, I'm glad you're excited because I'm excited.

58:01 · Let's see.

58:02 · "Kevin reposted this stream."

58:04 · Oh, thanks, Kevin, for posting the stream.

58:07 · Let's go.

58:07 · RODY DAVIS: Nice.

58:08 · MARK THOMPSON: All right, let's see what happened.

58:10 · RODY DAVIS: OK, cool.

58:10 · Let's do Review Changes.

58:12 · Let's see if it's picked up our stuff.

58:16 · MARK THOMPSON: So I didn't tell it anything about-- it didn't do any of the stuff that I asked it to do, in this case.

58:22 · RODY DAVIS: Yeah, let's make sure that we load it in.

58:26 · MARK THOMPSON: Yeah, I never said standalone true as the default. I didn't say anything about that.

58:32 · I mean, I'm sure this code works, but it's still using the old input and the old out-- RODY DAVIS: OK.

58:38 · So now, we can do our next level of iteration on the AI rules.

58:43 · You can explicitly say, what not to do.

58:47 · MARK THOMPSON: Let's do it.

58:48 · Let's do it, because I want it to be right.

58:50 · RODY DAVIS: Yeah.

58:52 · So I would do under the HTML block.

58:57 · MARK THOMPSON: Mhm.

58:58 · RODY DAVIS: And you can also close the Gemini chat if you want.

59:01 · MARK THOMPSON: Yeah, we got it.

59:04 · We'll close the preview for right now.

59:07 · OK, so let's get to do some more stuff that we want.

59:09 · RODY DAVIS: Yeah.

59:10 · So let's do, under the TS file maybe, let's say, we'll do the negation.

59:17 · We'll do do not include standalone true because it's by default.

59:27 · MARK THOMPSON: Ugh, typing while people are watching.

59:30 · Standalone true because it is default in Angular, I think it's 19.

59:42 · Did we make standalone true default to 19, chat?

59:46 · Anybody know?

59:46 · RODY DAVIS: It might have been more recent.

59:48 · Yeah.

59:48 · MARK THOMPSON: Yeah, but let's just say 20 for that.

59:50 · Because this one is for me, so we'll [? rewrite ?] it.

59:53 · RODY DAVIS: Yeah.

59:55 · And then, we will also say like-- you could even include-- no.

1:00:04 · Yeah, that should be fine.

1:00:05 · Yeah.

1:00:05 · And then, we'll want to say, I guess you don't want to use the input and outputs-- MARK THOMPSON: Right.

1:00:12 · RODY DAVIS: --because that's the decorators.

1:00:14 · And so I would do a new line for this.

1:00:16 · MARK THOMPSON: Got it.

1:00:17 · Oh, interesting.

1:00:18 · OK.

1:00:18 · Good, good, good.

1:00:19 · RODY DAVIS: Yeah.

1:00:28 · MARK THOMPSON: Use the input signal instead.

1:00:34 · Can I say something like, learn more, and then give it a URL?

1:00:38 · RODY DAVIS: Yeah, I would.

1:00:39 · Yeah.

1:00:39 · Oh, look.

1:00:40 · Look at that.

1:00:43 · [INAUDIBLE] MARK THOMPSON: Yeah.

1:00:43 · RODY DAVIS: Yeah.

1:00:44 · MARK THOMPSON: That's what I want you to do.

1:00:45 · RODY DAVIS: And then, I'll do a period at the end of that.

1:00:47 · And then, I would also add a new space between those two rules, just to give it some separation for tokenization.

1:00:55 · And then, I would also be explicit about the output one.

1:00:59 · You can also just copy and paste that line.

1:01:01 · MARK THOMPSON: Oh, sure thing, sure thing, sure thing.

1:01:03 · RODY DAVIS: I mean, is it an output signal?

1:01:05 · MARK THOMPSON: But it's not a signal, but we will-- I would say the output is, it's syntactically similar, but not a signal.

1:01:15 · RODY DAVIS: Oh, OK.

1:01:16 · Is it a computed?

1:01:17 · MARK THOMPSON: Nope, it's just a function.

1:01:18 · RODY DAVIS: Oh, OK.

1:01:19 · Got it.

1:01:22 · MARK THOMPSON: Uh, output function instead learn more about the output function here.

1:01:34 · That's not right.

1:01:35 · RODY DAVIS: Yeah.

1:01:35 · MARK THOMPSON: That's a good guess, but that's not right.

1:01:37 · RODY DAVIS: Yeah.

1:01:38 · MARK THOMPSON: That's so funny.

1:01:39 · I don't get offended by when LLMs do stuff like that.

1:01:42 · RODY DAVIS: Yeah.

1:01:43 · MARK THOMPSON: But it's a good guess, right?

1:01:45 · And this is also why I tell people all the time, your understanding and your knowledge is super important because if you didn't know anything and it suggested that, it looks right, it looks correct.

1:02:02 · So this is why you're valuable, because you know what to do.

1:02:08 · RODY DAVIS: Totally, yeah.

1:02:10 · MARK THOMPSON: All right, let's rebuild with just these things and see what happens.

1:02:13 · RODY DAVIS: OK.

1:02:14 · So we don't have to rebuild the workstation.

1:02:16 · I'll show you the other way how to do it.

1:02:17 · MARK THOMPSON: Oh, sure.

1:02:18 · RODY DAVIS: So let's go ahead and close the diff right there, on the third tab.

1:02:21 · MARK THOMPSON: Yeah, and get my Gemini back.

1:02:23 · RODY DAVIS: Let's do new Gemini chat.

1:02:24 · You can actually do the-- in the bottom.

1:02:26 · Or you can do that too.

1:02:27 · Yeah, that's perfect.

1:02:27 · MARK THOMPSON: Oh, that's OK.

1:02:28 · I'm just clicking on stuff.

1:02:29 · RODY DAVIS: Either way.

1:02:29 · Yeah, it's good to show the different options.

1:02:31 · Let's copy our prompt and reset again.

1:02:35 · MARK THOMPSON: OK, copy this.

1:02:36 · And then, I'm going to delete.

1:02:38 · RODY DAVIS: Yeah.

1:02:38 · MARK THOMPSON: OK, confirm.

1:02:40 · RODY DAVIS: And then, we're going to, before we paste in your prompt, say load airules.md.

1:02:45 · MARK THOMPSON: Load airules.md.

1:02:48 · Just like that?

1:02:48 · RODY DAVIS: Yeah.

1:02:49 · MARK THOMPSON: Stop it.

1:02:50 · Please, stop it.

1:02:51 · RODY DAVIS: It should read the file for-- yep, perfect.

1:02:55 · MARK THOMPSON: Stop it!

1:02:56 · RODY DAVIS: Yes.

1:02:57 · OK, cool.

1:02:57 · Now, paste in your prompt.

1:02:59 · MARK THOMPSON: [LAUGHS] What?

1:03:00 · Stop it.

1:03:01 · That's so cool.

1:03:02 · Oh, man, that's so cool.

1:03:03 · All right, while it's generating, let's see.

1:03:08 · We saw that comment, make sure.

1:03:09 · RODY DAVIS: Looks like it is using the new input and output.

1:03:12 · MARK THOMPSON: Oh, let's go!

1:03:13 · It knew what to do.

1:03:15 · RODY DAVIS: Yeah.

1:03:15 · MARK THOMPSON: Ha, ha, ha, ha, ha!

1:03:16 · All right, let me get back to this window here.

1:03:18 · All right.

1:03:20 · Ah, that's amazing.

1:03:22 · Let's review our changes.

1:03:23 · And we're already getting closer.

1:03:26 · RODY DAVIS: And also, it doesn't do the input standalone.

1:03:28 · It didn't include it.

1:03:29 · MARK THOMPSON: Standalone.

1:03:30 · And it did required?

1:03:32 · RODY DAVIS: Yeah, that's cool.

1:03:33 · MARK THOMPSON: [CLAPPING] RODY DAVIS: Nice.

1:03:36 · MARK THOMPSON: Let's create this file, Rody.

1:03:38 · RODY DAVIS: All right.

1:03:39 · MARK THOMPSON: Let's create that file.

1:03:40 · RODY DAVIS: And you can even do command Enter if you want to do it automatically, but yeah.

1:03:43 · MARK THOMPSON: I'll command Enter.

1:03:45 · So anywhere?

1:03:46 · Just do it?

1:03:47 · RODY DAVIS: Yeah, you can just click Create File or hit Save, either one.

1:03:50 · MARK THOMPSON: Well, I did command Enter from the window.

1:03:53 · RODY DAVIS: Perfect.

1:03:54 · Then now, it's adding another file because this is going to do a multi-step change.

1:03:58 · MARK THOMPSON: OK.

1:03:58 · So I'm just going to let it create the file.

1:04:01 · OK, create the file.

1:04:02 · RODY DAVIS: So this is the template.

1:04:04 · And now, it's going to add the CSS.

1:04:05 · MARK THOMPSON: All right, let me be honest with you.

1:04:07 · Let me be honest with you.

1:04:08 · What you said is starting to become true to me in a new way.

1:04:16 · OK, what happened?

1:04:17 · Why are you complaining?

1:04:18 · RODY DAVIS: Now, you should try again.

1:04:18 · Yeah.

1:04:19 · MARK THOMPSON: What?

1:04:20 · It didn't like something it did?

1:04:21 · RODY DAVIS: No, I think it hit an error.

1:04:23 · It'll be an agentive loop, and it'll go past it.

1:04:25 · Yeah.

1:04:30 · MARK THOMPSON: So what I was going to say is that, so while we're still the whole prototyping thing, while that's happening, I think what's interesting is that with the sophisticated enough prompt, and a sophisticated enough AI rules, I can kind of simulate a prototyper right now.

1:04:50 · RODY DAVIS: For sure, yeah.

1:04:52 · Also, if you go to line 3, I think it updated a full path.

1:04:56 · Let's make that a relative path.

1:04:57 · MARK THOMPSON: Let's see.

1:04:59 · RODY DAVIS: Yeah, I don't know why it pulled from this report.

1:05:03 · We can just make it a todo.ts.

1:05:05 · MARK THOMPSON: Oh yeah. yeah, yeah, yeah, yeah.

1:05:07 · RODY DAVIS: Probably a sample file.

1:05:11 · MARK THOMPSON: OK, and is it ./todo?

1:05:13 · Where is it?

1:05:14 · RODY DAVIS: Todo.js, it looks like.

1:05:16 · MARK THOMPSON: Oh, that can't be right then.

1:05:18 · We gotta fix that, which we can.

1:05:19 · We can fix that.

1:05:20 · RODY DAVIS: Yup.

1:05:20 · MARK THOMPSON: There is no todo.js.

1:05:22 · RODY DAVIS: Oh.

1:05:23 · Why?

1:05:23 · Where is this file then?

1:05:26 · MARK THOMPSON: OK, so let's fix that.

1:05:28 · RODY DAVIS: OK.

1:05:29 · MARK THOMPSON: We can say-- because I don't know where-- what's going on So we should be able to just do dot slash, and then todo.

1:05:39 · Yeah, there you go.

1:05:41 · Not component.

1:05:41 · Yeah, not component.

1:05:42 · RODY DAVIS: OK.

1:05:42 · We just didn't need to include the suffix.

1:05:44 · And then, router outlet-- MARK THOMPSON: It's just not being used.

1:05:47 · RODY DAVIS: OK.

1:05:47 · MARK THOMPSON: This is a Angular language service.

1:05:49 · RODY DAVIS: OK, cool, cool.

1:05:50 · MARK THOMPSON: So we got that, and I can't wait till we get selected lists in general, so you don't have to do this.

1:05:55 · RODY DAVIS: Yeah.

1:05:56 · MARK THOMPSON: That's coming.

1:05:57 · We're working on it.

1:05:58 · RODY DAVIS: So how would that work with-- does it just bind to the root or something?

1:06:05 · MARK THOMPSON: Yeah, it's a surprisingly complex problem.

1:06:08 · RODY DAVIS: Yeah.

1:06:08 · MARK THOMPSON: That's why we haven't released it.

1:06:09 · [LAUGH] RODY DAVIS: OK, got it.

1:06:10 · [LAUGHS] MARK THOMPSON: It's surprisingly complex-- RODY DAVIS: Cool.

1:06:14 · MARK THOMPSON: --to do this, but we are working on it.

1:06:16 · Let's see.

1:06:17 · Where's my preview?

1:06:17 · RODY DAVIS: OK, so now, if you ever want to pull up your preview, I think we actually added it to the toolbar on the bottom, but you can also do it from the command block.

1:06:23 · MARK THOMPSON: Oh yeah, I see it.

1:06:24 · I see it right there.

1:06:25 · Preview, right next to Gemini.

1:06:27 · RODY DAVIS: Yeah.

1:06:29 · Perfect.

1:06:30 · MARK THOMPSON: OK, let's see.

1:06:31 · RODY DAVIS: So this is a cool-- I think we can actually show off-- is this the warning or is this an error?

1:06:37 · MARK THOMPSON: That's the error, yeah.

1:06:38 · The type of-- RODY DAVIS: OK.

1:06:40 · So we can actually copy this error into Gemini and have it help us fix it if you want.

1:06:43 · MARK THOMPSON: I'm going to copy everything, even the line number.

1:06:46 · RODY DAVIS: If you scroll down, I think there is a-- oh.

1:06:50 · If you click up on the web console, the error on the bottom-- MARK THOMPSON: Oh, up?

1:06:54 · Right here.

1:06:54 · Yes.

1:06:55 · Yes, yes, yes.

1:06:56 · RODY DAVIS: Oh, OK.

1:06:57 · That's just vite.

1:06:57 · Sometimes the error will show there, and we have a continue in Gemini there as well.

1:07:02 · So yeah, we just copy the full thing.

1:07:04 · MARK THOMPSON: Yeah, so I'm just going to-- now, we know how to fix this, chat.

1:07:09 · RODY DAVIS: What is that error, by the way?

1:07:11 · MARK THOMPSON: It looks like the type, because-- let's see.

1:07:14 · OK, this is correct.

1:07:16 · RODY DAVIS: Is it use.ts, or-- MARK THOMPSON: Yeah, so I'm looking at this to see what the types are here.

1:07:20 · So the types look correct.

1:07:21 · So if we go todo component, maybe something about the input is not right.

1:07:26 · So it has a todo.

1:07:28 · Why don't you like this?

1:07:29 · You should like this.

1:07:30 · This shouldn't be a problem.

1:07:32 · RODY DAVIS: OK.

1:07:32 · Well, maybe we could restart the web preview maybe, just as a hard restart?

1:07:36 · MARK THOMPSON: I don't know, let me see.

1:07:38 · Even though-- oh, that's not that.

1:07:40 · OK, "Here's another rule: use signalStore for state management."

1:07:44 · RODY DAVIS: Nice.

1:07:44 · MARK THOMPSON: What's up, Alex?

1:07:46 · What's up?

1:07:47 · RODY DAVIS: Nice.

1:07:48 · MARK THOMPSON: Good to see you, yeah.

1:07:49 · Oh, so the people say, yeah, we did announce it in 19.

1:07:53 · I thought it was 19.

1:07:54 · RODY DAVIS: OK.

1:07:54 · MARK THOMPSON: OK, since angular-- la, la, la, la, signal, changedection onpush still required on components-- OK, I'm going to answer this after, but Rody doesn't have as much time as I do for this today, so I don't want to lose his time.

1:08:04 · So I will answer your question after, friends.

1:08:06 · Don't you worry.

1:08:07 · RODY DAVIS: Yeah.

1:08:08 · MARK THOMPSON: All right, let me put this in the chat, and let's see if we can get it to just figure out.

1:08:13 · So do I have to type anything, or I can just [INAUDIBLE] it?

1:08:15 · RODY DAVIS: Yeah, you should just do that.

1:08:16 · Yeah, yeah, yeah.

1:08:17 · MARK THOMPSON: What?

1:08:17 · RODY DAVIS: Yeah.

1:08:18 · MARK THOMPSON: I usually want to be nice.

1:08:19 · I can't change my-- RODY DAVIS: You can.

1:08:20 · So sometimes, I put the error inside of a code block and I say fix this error or whatever.

1:08:29 · But I've also found that sometimes just pasting it works too.

1:08:32 · MARK THOMPSON: No, I don't know why I like to do it this way, but-- [LAUGHS] RODY DAVIS: No, it's a good way to kind of guide it, so you're into an active instead of a passive chat.

1:08:45 · MARK THOMPSON: Mhm.

1:08:46 · RODY DAVIS: But I do think that's a good approach.

1:08:48 · MARK THOMPSON: Now, let's see what it wants to change.

1:08:51 · Why do you want to change so much?

1:08:52 · RODY DAVIS: So you can hit Review.

1:08:53 · MARK THOMPSON: Yeah, what do you want to do?

1:08:54 · What do you want to do?

1:08:55 · Nope, I don't want you to do that.

1:08:57 · No.

1:08:58 · RODY DAVIS: Yeah, so you can hit the Undo on the left, on the diff, all the way on the left to the green.

1:09:07 · MARK THOMPSON: Oh, here.

1:09:08 · RODY DAVIS: Yeah.

1:09:08 · MARK THOMPSON: OK.

1:09:09 · RODY DAVIS: OK.

1:09:10 · MARK THOMPSON: Is that the only change you want to do, 'cause that ain't right.

1:09:12 · RODY DAVIS: And then just hit Save, I think.

1:09:14 · MARK THOMPSON: Yeah, but why does it want to do that?

1:09:17 · RODY DAVIS: And then, close out that file too.

1:09:19 · MARK THOMPSON: OK.

1:09:21 · Uh, let's see.

1:09:22 · RODY DAVIS: This is part of prompting models.

1:09:24 · If there's something that's overfitted into a training set of old versions of CSS or old versions of Angular, we have to teach it how to do the new stuff.

1:09:33 · MARK THOMPSON: So what does it think is the problem?

1:09:37 · OK, let's see.

1:09:37 · Type of todo component undefined is not accessible.

1:09:40 · Oh, why would it be the-- no, the type is wrong.

1:09:44 · RODY DAVIS: Oh.

1:09:46 · MARK THOMPSON: Why do you think you want to use todo component?

1:09:49 · Is that what happened in our app.ts?

1:09:52 · Let's look.

1:09:53 · Let's have a look.

1:09:54 · RODY DAVIS: Maybe it did an import issue.

1:09:56 · MARK THOMPSON: Yeah, OK.

1:09:57 · So we got import.

1:09:58 · So this is correct.

1:09:59 · RODY DAVIS: OK.

1:10:00 · And if we-- MARK THOMPSON: What?

1:10:03 · Oh.

1:10:04 · That's why.

1:10:06 · Wait.

1:10:07 · No, that's correct.

1:10:09 · RODY DAVIS: Do we need the router outlet or anything else here?

1:10:12 · MARK THOMPSON: OK, hold on one second.

1:10:14 · Let me-- we don't need the router outlet.

1:10:16 · But I want to say-- OK, we can get this out of here.

1:10:20 · Let me make sure, because I think it followed the style guide.

1:10:23 · RODY DAVIS: Mm.

1:10:25 · MARK THOMPSON: And so it has to do .ts.

1:10:27 · OK.

1:10:27 · I want to make sure that todo-- so this is todo component, which is what we want.

1:10:34 · So then, let me go back and let me have a look.

1:10:39 · RODY DAVIS: And also, I want to-- MARK THOMPSON: Oh, now, it's working.

1:10:43 · RODY DAVIS: OK.

1:10:43 · MARK THOMPSON: It was never broken.

1:10:44 · It just, maybe needs to be restarted, like you said a long time ago.

1:10:46 · RODY DAVIS: No worries.

1:10:47 · MARK THOMPSON: Oh, look at that.

1:10:49 · RODY DAVIS: Oh, right on.

1:10:50 · [LAUGHS] Yeah.

1:10:52 · Yeah, maybe it just had an old version of the app component and was hot reloading it, because we do try to do the hot module replacement.

1:11:00 · MARK THOMPSON: Yeah, look at that.

1:11:02 · We did it.

1:11:03 · RODY DAVIS: Right on.

1:11:04 · MARK THOMPSON: I mean-- RODY DAVIS: Yeah.

1:11:05 · MARK THOMPSON: What were you going to say?

1:11:06 · I'm sorry.

1:11:06 · RODY DAVIS: I was going to say, so one of the cool things about this is, one, like I said, you can check it into version control and you can include it.

1:11:14 · Also, I would really love to ask from your community too, if there's an amazing rules file that we can create, let's put it in the official Firebase Studio template.

1:11:24 · And then, one other thing.

1:11:26 · If you click on the Firebase Studio extension on the left sidebar-- MARK THOMPSON: OK, left sidebar.

1:11:31 · This?

1:11:32 · RODY DAVIS: The bottom icon.

1:11:33 · MARK THOMPSON: Yeah.

1:11:34 · RODY DAVIS: One of the cool things that you may run into is like, I'm wanting to work in a Workspace, but it's not in GitHub yet.

1:11:42 · Well, if you click on the Share icon, right there beside-- MARK THOMPSON: Stop it.

1:11:47 · RODY DAVIS: Yeah, you can actually add people's emails and give them a link to Firebase Studio.

1:11:52 · And you can be working in pair programming in the same machine as if you're literally right next to each other.

1:11:57 · So it's really great for synchronous programming.

1:12:01 · And then also, we have plenty of hosting and deployment options there too.

1:12:04 · So if you hit Cancel right here and scroll down as well.

1:12:08 · MARK THOMPSON: Yeah.

1:12:09 · RODY DAVIS: Even if you want a Gemini API key, we can auto provision one for you here without you having to leave Firebase Studio.

1:12:16 · And there's a bunch of other interesting stuff as well.

1:12:19 · So a lot of cool things to try out.

1:12:23 · Even if you're used to working locally, you can use this as a sidecar to develop, and sometimes when you want a different experience.

1:12:31 · And then, if you're an Angular library author or someone that's working in some type of examples and stuff, we make it really easy for you to have an open end Firebase Studio button that you can just add to your markdown docs.

1:12:46 · And so someone can open up and have this experience already without having to do anything.

1:12:50 · MARK THOMPSON: We had that for IDX on A-Dev, to open an IDX.

1:12:55 · So we're going to update it to be open in Firebase Studio, and I would love to do that.

1:13:00 · And in terms of that file.

1:13:02 · RODY DAVIS: Yep.

1:13:02 · MARK THOMPSON: Today's exercise already was to start that template file.

1:13:06 · RODY DAVIS: Sweet.

1:13:07 · MARK THOMPSON: So we want to totally get community support on this too.

1:13:11 · We're going to check this.

1:13:12 · So here's what's going to happen, friends at home, as you're watching.

1:13:15 · Like I said, as we're building, you all may have experiences and things that need to go into these AI rules that is going to benefit everybody.

1:13:22 · So our AI rules is going to end up, not only on GitHub, but we're also going to put it on A-Dev.

1:13:28 · And so you can go there and be like, hey, we need to update this.

1:13:31 · We need to add these better things.

1:13:32 · Here's some better canonical examples.

1:13:34 · Let's work together to make the prompts and the tools that we need to serve the Angular community.

1:13:40 · So we're really excited about it, because I would love to see the airules.md be able to be as effective even in an enterprise scenario.

1:13:48 · Because right now, it works in a todo app.

1:13:50 · But our community are enterprise developers, and they're building, scalable web apps that serve millions of people.

1:13:58 · And we want to make sure that when they're doing code generation, especially if they're going to use a tool like this, they get the best outcome.

1:14:03 · So I'm super excited.

1:14:04 · Rody, this has been so much fun today.

1:14:06 · RODY DAVIS: Yeah, and then one other thing on AI rules.

1:14:08 · MARK THOMPSON: Yeah, please.

1:14:09 · RODY DAVIS: Also, just for viewers, try not to think about them as a one size fits all.

1:14:15 · These are like the opposite.

1:14:17 · It's a specific context-driven way to ground the model.

1:14:22 · So if you want to have multiple AI rules at your company, you can have one for your beginners and junior developers that are getting onboarded to the code base, and you can have another one for more advanced developers that know more.

1:14:37 · So you could say for a junior developer, you could have it be like, always explain the changes and include a list of steps on how to do this.

1:14:47 · Or like, always use a chain of thought to be able to say what you're going to do before doing it.

1:14:52 · And you could have a model that's more elaborate.

1:14:56 · And then, for a senior dev, you can be like, make sure to always update tests and run the tests, and make sure that you're always doing these three things every time you make a change to a file.

1:15:07 · Or make sure the readme is always up to date or the chain of-- you can customize it, but it's not a one size fits all.

1:15:13 · You definitely want to have different experiences for different people coming to it.

1:15:17 · MARK THOMPSON: Wow, incredible.

1:15:19 · Absolutely incredible.

1:15:21 · Let's see.

1:15:22 · I think, Rody, we got a few minutes left.

1:15:24 · RODY DAVIS: I am good, yeah.

1:15:25 · MARK THOMPSON: Yeah, let me see if there are any questions or comments that-- RODY DAVIS: Oh, one-- sorry --one more thing.

1:15:32 · MARK THOMPSON: Yeah, please.

1:15:33 · RODY DAVIS: Can you click on the preview, on the top right of the web preview?

1:15:37 · MARK THOMPSON: Mhm.

1:15:38 · RODY DAVIS: We have a couple of different things, which are important to call out.

1:15:41 · One is we have Lighthouse built right in.

1:15:44 · So to the right sidebar, if you click that, you can actually run Lighthouse on your web app directly from Firebase Studio.

1:15:52 · So you can close that.

1:15:54 · The other thing that you can do is if you click on that share icon, the second link right beside that one-- MARK THOMPSON: This one?

1:16:01 · RODY DAVIS: Yeah.

1:16:03 · If you click on that, we will have a QR code where you could actually run-- so it's not public right now, so you don't have to worry about it.

1:16:10 · MARK THOMPSON: I was going to say, I'm not showing no one my QR code.

1:16:12 · No way.

1:16:13 · RODY DAVIS: Yeah, yeah, yeah.

1:16:13 · So since it's private, nobody's going to be able to connect to it.

1:16:15 · MARK THOMPSON: OK.

1:16:16 · RODY DAVIS: So essentially, this will have a QR code where people can scan and run it on their phone.

1:16:22 · MARK THOMPSON: [GASPS] RODY DAVIS: And by making preview public, you could make it available to everyone while your VM is active.

1:16:28 · But right now, you would only be able to run it because you have access to the VM.

1:16:32 · And then, the Final button is on the icon.

1:16:36 · You can actually open up the web preview into a new tab, and that should open up in this Chrome window.

1:16:43 · And so you can have a full screen version of it, which allows you to use the built-in Chrome DevTools, like you may be used to, or maybe have two tabs open.

1:16:53 · So there's a lot of flexibility even in customizing this experience too.

1:16:57 · MARK THOMPSON: Fantastic.

1:16:59 · OK, friends, let's get some questions-- RODY DAVIS: Sweet.

1:17:01 · MARK THOMPSON: --about Firebase Studio.

1:17:03 · Let's get some questions about working with LLMs in Firebase Studio.

1:17:07 · Over to Rody right now.

1:17:08 · This is a great time.

1:17:09 · We're going to answer some questions, friends, and we'll go from there.

1:17:13 · Did I see this comment?

1:17:14 · "Here's another rule: use signalStore."

1:17:16 · RODY DAVIS: Yeah, yeah, yeah.

1:17:17 · MARK THOMPSON: I think it's pretty great.

1:17:19 · "Pasting works - saves time as well."

1:17:21 · Agree to that.

1:17:21 · Let's see.

1:17:22 · "I was on Alex workshop.

1:17:23 · Nice to see all of you here."

1:17:24 · Hey, Here, Alex is awesome.

1:17:27 · I just got to see Alex at Google I/O recently, I believe.

1:17:29 · RODY DAVIS: Oh, awesome.

1:17:30 · MARK THOMPSON: Were we at Google I/O, Alex, together?

1:17:33 · Alex, yes, used to work on Firebase.

1:17:35 · Yeah.

1:17:36 · Yeah, yeah, yeah.

1:17:37 · "Don't use text decoration like triple ticks.

1:17:40 · It takes extra tokens."

1:17:42 · Should we have consideration about this?

1:17:44 · RODY DAVIS: Yeah, I guess this is a preference, but I found that Gemini is usually pretty good at encapsulating where you're defining code.

1:17:52 · If you don't want to use triple backticks, some people use XML opening and closing tags.

1:17:57 · So you could say, example open, example close.

1:18:00 · MARK THOMPSON: Oh, sure.

1:18:00 · I've seen this.

1:18:01 · RODY DAVIS: Yeah, but I do like to wrap my code, so it's very clear that this is semantically different.

1:18:08 · MARK THOMPSON: So if tokens are important, if you're trying to conserve tokens, because again, you know-- RODY DAVIS: Gemini does have a million tokens, so you do have plenty of context window here as well.

1:18:18 · MARK THOMPSON: Yeah, but it costs you money to use the tool.

1:18:20 · RODY DAVIS: Yeah, yeah.

1:18:20 · For sure.

1:18:20 · MARK THOMPSON: So I get it.

1:18:21 · I get it.

1:18:21 · Good feedback.

1:18:22 · So, let's see.

1:18:24 · "Hey--" who is this?

1:18:25 · Oh, what's up Hamza?

1:18:26 · Good to see you, as always.

1:18:28 · Nice background.

1:18:29 · Thank you.

1:18:30 · This is real, and I built this.

1:18:31 · RODY DAVIS: [LAUGHS] That's awesome.

1:18:32 · MARK THOMPSON: I always tell people that I built this.

1:18:34 · This is a real background.

1:18:36 · It's not a thing.

1:18:37 · All right, Lars, "Good stuff."

1:18:38 · I'm so glad that you're enjoying.

1:18:41 · Yeah, OK.

1:18:42 · Very cool.

1:18:43 · All right.

1:18:43 · I mean, so I think the next step, what I would love to do, like I said, we're going to develop this.

1:18:48 · Some other people on the engineering team are also working on some prompts.

1:18:51 · I would love to see if I could combine the prompts together.

1:18:57 · And I'm really interested in trying to make a prototype in Firebase Studio.

1:19:01 · RODY DAVIS: Yes.

1:19:02 · MARK THOMPSON: I e-mode just by giving it really good instructions in AI rules, and a really nice prompt.

1:19:10 · RODY DAVIS: Yeah.

1:19:10 · In fact, something kind of maybe as an experiment for viewers at home, go to Gemini and ask it to do a common Angular CLI command.

1:19:22 · Because one of the cool things about Gemini in Firebase is it can run terminal commands directly from the chat.

1:19:28 · MARK THOMPSON: Like tool calling.

1:19:29 · RODY DAVIS: Yeah, exactly like tool calling.

1:19:31 · So you could even say, when you add a new component, run Ng create the component name, to where it even is running the CLI for Angular for you.

1:19:41 · And then, you have it update the files after that.

1:19:43 · MARK THOMPSON: Which is what you kind of want in some cases.

1:19:45 · Because here's the thing that we know about LLMs.

1:19:48 · They're non-deterministic, so you might get some things that happen.

1:19:51 · RODY DAVIS: Yeah.

1:19:52 · MARK THOMPSON: But if you're able to leverage the existing deterministic tools in conjunction with some of the behavior that LLMs are really good at.

1:20:01 · Because I'm looking at LLM-- and I saw somebody say this, and I think it's really accurate.

1:20:06 · Kelsey Hightower said this once on Bluesky.

1:20:09 · He was like, LLMs are really great for cases where there would be a lot of if statements in your programming, because you have to make so many decisions.

1:20:19 · RODY DAVIS: Yeah.

1:20:19 · MARK THOMPSON: And I'm like, yeah, I want it to be able to do that.

1:20:22 · But also, I already know how to make a component.

1:20:24 · And I know how to make a component to the current guidelines that I have, to my current project setup.

1:20:30 · So like being able to do both together is really interesting.

1:20:33 · RODY DAVIS: Yeah, totally.

1:20:34 · Exactly.

1:20:35 · MARK THOMPSON: Yeah.

1:20:36 · Let's see.

1:20:36 · "This is in browser.

1:20:38 · Any performance overhead--" oh, good question.

1:20:40 · All right.

1:20:41 · "This is in browser.

1:20:42 · Any performance overhead with this?

1:20:43 · Could we see a desktop native version?

1:20:46 · A lot of interest in the Zed editor, which is Rust-based, due VSCodium derivatives, which I assume this is built on."

1:20:54 · So is there a future or any ideas around a Firebase Studio native version?

1:21:00 · RODY DAVIS: So one of the interesting things is we currently support web, and I think a lot of people ask for a native desktop version.

1:21:09 · And I think that a lot of people have really nice powerful dev machines, and I think that's really cool.

1:21:17 · But we see a lot in emerging markets or people in education or people around the world.

1:21:24 · Having access to just a web browser is already a huge benefit.

1:21:28 · So if you can go to a URL and have a full VM workstation set up every time, that's a huge deal.

1:21:35 · And the other thing with that too is, I think taking Firebase Studio out of the computer would be even more interesting too, like in XR environments, whether it be on Apple or Android.

1:21:48 · And so now, you're in VR coding, which I've done a lot of.

1:21:51 · And you can't do that with a local development, but you can with a web-based IDE.

1:21:56 · And so I think trying to get beyond the limitations of just having a really powerful CPU.

1:22:04 · Now, you can have a shareable workspace that is very collaborative and can have multiple people working in it, is an experience that's hard to do when everybody has an installed desktop version.

1:22:14 · And we're trying to get away from everybody having to set up and configure their path, because everybody has a unique version of dependencies.

1:22:23 · Not only that, we're built on top of NixOS which allows you to have your environment work every time.

1:22:28 · MARK THOMPSON: So from a-- and actually, we worked together on a project that I was doing where I was like, I have to do a class or something.

1:22:38 · I was teaching some Angular.

1:22:39 · Oh, I was teaching Angular.

1:22:40 · That's literally it.

1:22:41 · I was teaching Angular and I needed everybody to have no install time.

1:22:47 · And I was like, I don't want anybody's machine configuration, even though I did end up running into a problem.

1:22:52 · But that was a my problem, where I didn't include, I think, an NPM install in the Nix file.

1:22:59 · So then when people were trying to get started, they couldn't get started immediately.

1:23:03 · But the point being though, from an education point of view especially, a pre-configured environment that has the same capabilities regardless of the machine is really interesting.

1:23:13 · RODY DAVIS: Mhm.

1:23:13 · MARK THOMPSON: But this is a good point, because we have a range of developers out there.

1:23:17 · RODY DAVIS: Totally.

1:23:17 · MARK THOMPSON: Some folks have really powerful machines.

1:23:19 · It sounds like Alcatraz has a really powerful machine, because he's running Ollama and running VS Continue, right?

1:23:23 · RODY DAVIS: Yeah.

1:23:24 · MARK THOMPSON: So he wants to take advantage of the power locally.

1:23:27 · So that makes sense.

1:23:28 · RODY DAVIS: Yeah, totally.

1:23:29 · MARK THOMPSON: Yeah, let's see.

1:23:30 · "Good job, you learn a lot when our environment is Angular."

1:23:33 · Yeah, you do learn a lot.

1:23:35 · I love Angular, but I'm biased because I've been working on this project.

1:23:38 · Oh, friends, guess what this month is?

1:23:40 · June is five years since I joined the Angular team.

1:23:44 · RODY DAVIS: Wow, that is awesome.

1:23:46 · MARK THOMPSON: Yeah, because you and I joined Google around the same time.

1:23:49 · RODY DAVIS: Yup, it'll be five years for me at Google too.

1:23:51 · Yeah.

1:23:51 · MARK THOMPSON: Yeah, so five years at Google.

1:23:53 · Five years ago, joined the Angular team.

1:23:54 · Isn't that something?

1:23:54 · RODY DAVIS: That's wild.

1:23:55 · Yeah, congrats.

1:23:56 · RODY DAVIS: Yeah, same to you.

1:23:57 · I mean, five years is a big deal.

1:23:59 · Big deal.

1:23:59 · "Question: would Firebase Studio be able to build the Angular source repo?

1:24:04 · Bazel in WSL is really tricky."

1:24:08 · Oh, I see.

1:24:09 · RODY DAVIS: So there's a really interesting project out there that I've been exploring, which is Nix plus Bazel.

1:24:15 · So NixOS defines all the binaries, and Bazel is really good at building application modules.

1:24:24 · And there's actually a project out there that you can search that combines Nix and Bazel together.

1:24:29 · And we're trying to see if there's a possibility of using that in Firebase Studio because that could be the best of both worlds.

1:24:36 · But yeah, we see a lot of people build-- you can build pretty big code bases.

1:24:39 · I think it's 100 gigs or something like that.

1:24:42 · MARK THOMPSON: All right.

1:24:43 · OK, hold on one second.

1:24:44 · Somebody's like, hey, where's my answer?

1:24:45 · OK, let me answer your question.

1:24:47 · "Since Angular 20 implemented zoneless and signal, is changedection onpush still required on components for performance?

1:24:52 · Yes, sorry about that.

1:24:53 · You asked this question very patiently a long time ago.

1:24:56 · I did not get to it.

1:24:56 · So zoneless is in developer preview.

1:24:59 · Most of our signal APIs are in stable mode.

1:25:04 · OK.

1:25:05 · Change detection onpush, I would say this.

1:25:10 · Required for performance, I mean, I think that's just a community standard at this point, that people think this is the best way.

1:25:16 · And so yes, so you can still use it.

1:25:18 · Now, what you're really asking about is, did we get to the point of the signal component yet?

1:25:23 · Which is like, signal, fine grained reactivity, all the way down and really driving change detection.

1:25:30 · That's still on forthcoming.

1:25:33 · Let's see.

1:25:33 · "Congratulations, Mark.

1:25:34 · You've been great to this community and face of Angular resurgence."

1:25:36 · Hey, listen, I work on an amazing team with a lot of amazing people who work really hard, and I am grateful that I get to be a part of it.

1:25:43 · So really, really, really happy.

1:25:47 · Let's see.

1:25:47 · "Were you using Angular since V1?"

1:25:49 · Believe it or not, believe it or not, my career trajectory is really interesting.

1:25:53 · I was a Java developer writing JavaBeans and J2EE code.

1:25:58 · Then, I saw Angular V1, and I was like, this is the future.

1:26:01 · So I switched my whole path from a back end engineer to a front end engineer with Angular.

1:26:06 · I worked on Angular for years up until Angular 2 came out.

1:26:09 · And then, I was working at a financial org.

1:26:12 · Then, after that, I switched to React for a while, and I was actually teaching React.

1:26:17 · And then, while I was teaching React, I wanted to make a mobile app.

1:26:20 · And then, I was like, oh, what should I use?

1:26:22 · Should I use React, React Native?

1:26:26 · Should I use this other thing called Titanium, which does not exist anymore?

1:26:30 · A tool called Ruby Motion?

1:26:32 · And then, this thing called Flutter came out.

1:26:35 · And then, that's how I got into the Flutter community, was because I was building a startup and I wanted to build a mobile app.

1:26:41 · And then, when I joined Google, I ended up, like I said, not getting that manager job.

1:26:45 · [LAUGHS] RODY DAVIS: Yeah.

1:26:46 · [LAUGHS] MARK THOMPSON: Which I'm glad I didn't.

1:26:47 · RODY DAVIS: Same.

1:26:47 · MARK THOMPSON: I mean, the Flutter manager is actually excellent, and he is the right person for that job.

1:26:52 · And then, back in the Angular community.

1:26:56 · All right, let's see.

1:26:57 · "I was trying to install dotnet SDK in IDX through Nix, but it doesn't allow it."

1:27:02 · Do you know anything about this?

1:27:03 · RODY DAVIS: You should check out our-- we have a .net template.

1:27:06 · So you can-- MARK THOMPSON: Oh yeah, I recall that.

1:27:08 · RODY DAVIS: --try it out, and that should have all the configuration right in these clips.

1:27:12 · MARK THOMPSON: Mm!

1:27:12 · RODY DAVIS: Yeah.

1:27:13 · MARK THOMPSON: Wait, OK.

1:27:14 · Can I just say what I love about this idea of Firebase Studio?

1:27:18 · OK, I'm going to go back real quick.

1:27:19 · So we did our project.

1:27:20 · I'm going to save this.

1:27:21 · It's not going to go anywhere.

1:27:23 · If I were to look down here, here's what I really love.

1:27:27 · You see all these things down here?

1:27:29 · RODY DAVIS: Mhm.

1:27:30 · MARK THOMPSON: There's Java, Python, .NET, Android Studio, so you can do some mobile development, Flutter.

1:27:35 · OK, next.

1:27:36 · Node, Genkit, Astro, all this stuff.

1:27:39 · Here's why this got me really excited, friends.

1:27:41 · Again, let's get back to our engineering brains.

1:27:43 · If you want to learn something new that you've been trying, you've been really interested in, and you're like, ah, but I don't really have-- I don't want to do the setup.

1:27:50 · I don't want to do the setup.

1:27:51 · I never want to do the setup.

1:27:52 · RODY DAVIS: Exactly.

1:27:52 · MARK THOMPSON: Like, jump in right now.

1:27:54 · That's why I go to firebase.studio, and just start coding in that with one of these.

1:28:01 · That's wild to think about you could do that.

1:28:03 · RODY DAVIS: Yeah, it's like try before you buy.

1:28:04 · You want to see if you're going to love it before you set it up locally.

1:28:07 · MARK THOMPSON: And wait.

1:28:08 · And then, you can even get some templates too.

1:28:11 · There's .NET template.

1:28:12 · I can click on this.

1:28:13 · Let me just click on this.

1:28:13 · Let me see what happens.

1:28:14 · RODY DAVIS: We even have a lot of people using the Laravel template as well.

1:28:17 · That's been cool to see.

1:28:18 · MARK THOMPSON: Ooh, I don't know what any of this means.

1:28:20 · I'm just going to click Blazor App.

1:28:22 · RODY DAVIS: Yeah, this should use the WASM build.

1:28:24 · MARK THOMPSON: OK, sure.

1:28:25 · Because I'm like, I don't know what any of that means.

1:28:26 · You can't get me to-- I don't really know.

1:28:28 · But this is interesting.

1:28:29 · RODY DAVIS: Yeah, I would definitely suggest if there is a stack you're trying to use and trying to import your existing projects, go to one of our templates that usually matches it and see if you can copy over the Nix files.

1:28:40 · If you're running into issues of something that doesn't exist, reach out and we can see if we can make a new template or guide you through that.

1:28:46 · Our forums are really popular.

1:28:48 · And then, also, we're in the Firebase community.

1:28:51 · MARK THOMPSON: Yeah, no.

1:28:52 · Amazing.

1:28:53 · Amazing.

1:28:54 · Again, I know it sounds like, well, of course you think It's amazing, Mark.

1:28:57 · You work at Google.

1:28:58 · But-- RODY DAVIS: It's nice.

1:29:00 · MARK THOMPSON: --I wouldn't have invited Rody if I didn't like think that this was awesome.

1:29:03 · I think this is beneficial and it's interesting to our community.

1:29:06 · So, look at all this.

1:29:08 · So now, if I knew how to write some .NET, which I used to know-- RODY DAVIS: Yep, same.

1:29:13 · MARK THOMPSON: --I would like-- oh, look at that.

1:29:15 · And you can install this right off the bat.

1:29:16 · OK, cool.

1:29:18 · All right.

1:29:18 · RODY DAVIS: Sometimes you'll see that pop up if there's a race condition of installing the extensions, but yeah.

1:29:24 · MARK THOMPSON: All right, so my app can run.

1:29:26 · How do I preview this, in the terminal?

1:29:29 · RODY DAVIS: You can do the IDX, dev.next.

1:29:31 · It should show if the preview is selected.

1:29:37 · Let's move that over to-- yeah.

1:29:40 · MARK THOMPSON: Oh, something's on the web.

1:29:41 · Something's happening.

1:29:42 · RODY DAVIS: Yeah, OK.

1:29:42 · It is going to be web preview.

1:29:43 · So you can just close it, yeah.

1:29:44 · MARK THOMPSON: Oh, right.

1:29:45 · OK.

1:29:46 · Something on the web is about to happen.

1:29:47 · Pretty cool.

1:29:49 · But yeah, so if you want to try this, this is just something available to you.

1:29:53 · But I'm super, super excited about all of this stuff.

1:29:58 · I just think there's just so much cool stuff happening.

1:30:01 · Let's see.

1:30:02 · "Good thing Mark found Flutter and didn't run into Xamarin."

1:30:05 · Hey, listen, Xamarin was on my list.

1:30:07 · RODY DAVIS: Same.

1:30:08 · MARK THOMPSON: The only reason I didn't try Xamarin at the time, # is that I think .NET and C#, they also had an interesting conflict of people were trying to figure out what's the right version of this, what's the right tool to put it all together?

1:30:22 · And it was a little confusing for me at the time, but I still think it's cool.

1:30:25 · I just didn't get to start it.

1:30:26 · RODY DAVIS: For me, I was working at a .NET shop when I found out about Flutter, and the first thing was like, well, why not Xamarin?

1:30:32 · And for me, it was actually, I don't think our server could have handled all the mobile apps versus the few amount of web apps that they had.

1:30:44 · So they were expecting a certain amount of scale.

1:30:46 · So that's actually how I found out about Firebase.

1:30:48 · So we could store a lot of our collections in Firestore, scale out, and then basically, just sync with the API server on .NET.

1:30:57 · So yeah, obviously, there's different tools for different things, but yeah.

1:31:02 · MARK THOMPSON: Yeah.

1:31:03 · Oh wait.

1:31:03 · OK.

1:31:03 · So we're out of time with our show, but this actually worked though.

1:31:07 · RODY DAVIS: Yeah, there it is.

1:31:08 · MARK THOMPSON: There it is.

1:31:10 · They got a Hello World app here.

1:31:11 · I'm going to close this down for a second.

1:31:13 · Yeah, so there you go.

1:31:14 · So, I mean, sure, there's some things that we can do.

1:31:17 · I don't know if this is required, asset to build and debug.

1:31:19 · OK.

1:31:20 · I'm not going to do that because I don't know what I'm doing.

1:31:22 · But the idea that this exists, and in our conversation, I'm able to boot up a .NET.

1:31:26 · I can go to a tutorial in a different tab right now-- RODY DAVIS: Yep.

1:31:29 · MARK THOMPSON: --and then, I can just start learning.

1:31:31 · That's just pretty rad.

1:31:32 · This is pretty rad.

1:31:34 · OK, last question, and then I think we're going to call it for today.

1:31:38 · And this is not the last time we're going to have Rody on, because this has been amazing.

1:31:41 · RODY DAVIS: Yeah.

1:31:41 · MARK THOMPSON: "Mark, I've been using GitHub Copilot in VS Code since sometime.

1:31:44 · This is really promising."

1:31:46 · Yeah, Ravi Kumar, I'm so glad that you are finding some opportunities here.

1:31:53 · Again, what we care about is that you build great applications.

1:31:56 · That's what we care about.

1:31:57 · RODY DAVIS: Totally.

1:31:57 · MARK THOMPSON: How you do it is up to you.

1:31:59 · OK?

1:31:59 · Build cool stuff.

1:32:01 · I'm glad that this looks cool to you.

1:32:03 · All right, friends.

1:32:04 · Definitely, let's show a lot of love to Rody in the chat, because if you do, maybe he'll come back and show us that compressed RAG thing, workflow he was talking about.

1:32:13 · I would love to see that.

1:32:14 · I would love to have a stream where you just show them-- RODY DAVIS: Right on.

1:32:16 · MARK THOMPSON: --how to use it.

1:32:18 · So show a lot of love in the chat so he'll come back.

1:32:20 · Rody, thank you for hanging out with us.

1:32:21 · It has been a blast.

1:32:22 · RODY DAVIS: Yeah, thanks for having me.

1:32:23 · This was awesome.

1:32:24 · MARK THOMPSON: Yeah, all right.

1:32:25 · All right, friends at home, thank you for being you, thank you for being part of Angular community.

1:32:29 · # And listen, whether you use Angular, React, Vue, C#, whatever it is, it's OK, because all I care about, all we care about, is that you get out there and you build great apps.

1:32:38 · RODY DAVIS: Yeah, and it's firebase.studio for the URL.

1:32:41 · And then, we even have an Angular template that you can share with your friends too.

1:32:45 · MARK THOMPSON: And the Angular template.

1:32:46 · You know what?

1:32:47 · Before I forget, let me put the firebase.studio in the chat.

1:32:50 · OK, firebase.studio.

1:32:51 · RODY DAVIS: And then, the Angular template's studio.firebase. google.com/news/angular.

1:32:57 · MARK THOMPSON: Let's go.

1:32:58 · Let's go.

1:32:59 · Everything's there.

1:33:00 · All right, friends, we'll catch you the next time.

1:33:02 · RODY DAVIS: Awesome.

1:33:03 · MARK THOMPSON: Be awesome.

1:33:04 · RODY DAVIS: Bye.

Compile SQLite from source to WASM in Firebase Studio

Wed, 14 May 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Compile SQLite from source to WASM in Firebase Studio

Description

Rody, a Developer Relations Engineer for Firebase Studio shares how easy it is to get started with a blank template in Firebase Studio. In this video, he shows how to clone your code inside a workstation and use nix to install dependencies. Watch a step by step tutorial on cloning code, setting dev.nix, web preview, and leverage Gemini in Firebase Studio.

Chapters: 0:00 - Get started 1:16 - Cloning SQLite and Emscripten 1:42 - Set up the VM 3:47 - Configure web preview 5:15 - Leverage Gemini 5:47 - Recap

Firebase Studio → https://goo.gle/firebasestudio

#Firebase #SQLite #WASM #NixOS

Speaker: Rody Davis Products Mentioned:, Firebase,

Transcript

Get started

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi, my name is Rody, DevRel for Firebase Studio.

0:07 · And today, I want to show you how easy it is to get started with our blank template, where you can clone your code and get started with Nix.

0:14 · The first step is to go to studio.firebase.google.com, and then click on New Workspace.

0:20 · On the top right, you'll see Add New Empty Workspace.

0:23 · And when we click that, we're brought to our new workspace creation page.

0:26 · Here you can add any name for your workspace and not having to worry about name collisions.

0:31 · In this case, we'll just do App, and then hit Create.

0:37 · After our workspace is created, you will see the readme, dev.nix, and Gemini Chat all come up at the same time.

0:44 · Inside of dev.nix, this is where we can define all of our dependencies for our code.

0:49 · This is something that is configured at the OS level using NixOS.

0:54 · We take advantage of Nix packages, which you can find on NixOS packages.

0:59 · We can have custom hooks to set up the web previews, as well as the onCreate and onStart hooks, which get run when the workspace is first created and every time that you reload the page.

1:09 · Today, we're going to be compiling SQLite from source, compiling it to WASM, and setting it up with the web preview.

1:15 · So the first step is to go ahead and clone SQLite.

Cloning SQLite and Emscripten

1:19 · We can open up the terminal and then clone SQLite from the Git mirror.

1:25 · The next step is we need to clone Emscripten so we can compile SQLite to WASM.

1:31 · So we can do that by running the following command.

1:34 · Once that's done, we will have both SQLite and Emscripten cloned inside of our workspace.

1:41 · Next, we need to set up our VM so that it has all the required dependencies so that we can compile SQLite and use both Python and C toolchains.

Set up the VM

1:50 · So here we can go to dev.nix and then uncomment the Python packages because that's actually what we need.

1:58 · Here, above packages, you'll see this Add Packages button.

2:01 · This will open up the NixOS package registry, which we can use to search for packages.

2:07 · In this case, we need GCC.

2:09 · And in just a second, we'll see that it pulls all of the packages related to that name.

2:14 · We can go ahead and add that to our packages array.

2:17 · We also need to add gnumake, which we can also do by searching for gnumake and then clicking on the first one in the list.

2:24 · After that's done, we will see that this button on the bottom right says Rebuild Environment.

2:29 · This is what Firebase Studio has to do every time that we update dev.nix.

2:34 · Since it's an immutable way to specify our dependencies, it'll create a new snapshot that will rebuild the new environment.

2:41 · And if there's any errors, we can roll back to the previous version.

2:46 · This usually just takes a couple seconds, so we can wait for that to complete.

2:49 · After that's done, we now have Python, GCC, and gnumake all set up and registered in our VM.

2:57 · This means that it's available both in the terminal and in the web previews.

3:01 · Let's first go ahead and build Emscripten from source, which we can do so by navigating to the directory and then running the following command.

3:10 · After Emscripten finishes installing, we now can activate it, which we can do so by modifying the command.

3:18 · Next, we can copy this line, which we will paste into the terminal, which will make it available for the current terminal session.

3:24 · Next, we need to compile SQLite.

3:27 · So we can do that by navigating up and into the SQLite directory.

3:31 · The first step is to configure and enable all the files.

3:38 · Next, we need to create the SQLite C file, which we can do by running make sqllite3.c.

3:46 · After that's done, it's time to configure the web preview to use the JSFiddle that is included inside the SQLite source code.

Configure web preview

3:54 · To do so, head over to the dev.nix, and navigate down to the Preview section.

3:59 · We can go ahead and uncomment this preview block, but we need to change it for our settings.

4:07 · First, we need to add a change working directory so that the preview is actually started in the correct subfolder.

4:13 · Everything in Nix requires a semicolon to be at the end, so make sure not to forget that.

4:18 · And since we already have Python installed on our VM, we can actually take advantage of the Python static HTTP server.

4:24 · In Firebase Studio, all previews run on a specific port, so make sure to pass that in with an uppercase PORT to your server command.

4:33 · And after we do that, we just have to rebuild our environment one more time.

4:38 · After our IDE rebuilds, we can then go to the Web tab, after which we'll see this JSFiddle up and running.

4:45 · What's really cool about this is it's using the SQLite WASM build that we just compiled, which also depended on Emscripten, all with their own local environment.

4:55 · To verify that this is working, we can just write a simple SQL query.

5:08 · After we do it, we can hit Run, and we can see Hello Firebase.

5:12 · All right, this is awesome.

5:14 · Now let's use Gemini to update files in our project.

Leverage Gemini

5:17 · When you click over on the Gemini tab, you'll see that there is a model picker where you can choose anything from Gemini 2.5 Pro to Flash and other models, even specifying a custom model ID.

5:27 · We can also include attachments here with the bottom left icon.

5:31 · But in this case, we want to update our readme with the current state of our project, so we can just ask Gemini to do this.

5:38 · We can go ahead and give it a simple prompt.

5:40 · And after it's done, it's going to suggest an edit, which we then can review or just accept.

5:46 · So it looks like everything's coming together.

Recap

5:48 · We cloned both Emscripten and SQLite from source and compiled them.

5:52 · We then set up our dev.nix to have all of the dependencies for our NixOS environment set up, which we can then go and review in dev.nix.

6:01 · We also set up the web preview to be able to run the actual SQLite WASM file inside of the web preview using that special port.

6:10 · And then we leveraged Gemini to be able to read our files and run terminal commands.

6:15 · I hope this gives you a brief overview of the capabilities of Firebase Studio and how easy it is to get started with a blank template.

6:22 · If you have any questions, make sure to reach out and let us know down in the comments if you have anything that you'd like to see next.

6:28 · Thanks for watching.

Explore all the official templates for Firebase Studio

Fri, 09 May 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Explore all the official templates for Firebase Studio

Description

Check out and learn how to use one of our many templates for Firebase Studio covering lots of popular frameworks and languages.

Firebase Studio → https://goo.gle/firebasestudio

#Firebase

Speaker: Rody Davis Products Mentioned: Firebase,

Transcript

0:00 · RODY DAVIS: Hi, my name is Rody, devro for Firebase Studio.

0:03 · And we have a really big template library for you to check out.

0:05 · To get started, go to studio.firebase.google.com and then click on Add Workspace.

0:11 · Our template library includes a lot of different options for you, whether you work on the web, backend, frontend, or mobile.

0:19 · Web, for example, we have Angular, React, Next.JS, Astro, Svelte, and many other templates that you may be familiar with.

0:27 · If you're looking for something on the backend, we support Go, Python, Java, .NET, Node, Laravel, and so many more.

0:34 · If you're looking for mobile, we have Flutter, React Native, and even Android Studio on the Cloud.

0:40 · If you're an ML developer, we also support the Gemini API and Genkit, as well as LangChain.

0:46 · And of course, if you're working with databases, we have Postgres, MongoDB, MySQL, Prisma, and even Data Connect.

0:53 · And if you don't find what you're looking for, you can actually get started with an Empty Workspace, which is powered by NixOS.

0:58 · And you can configure everything based on your current project requirements.

1:02 · To check out all the templates, you can check it out at studio.firebase. google.com/templates.

Firebase Studio now supports Gemma 3 image inputs on the Gemini Developer API 🔥🪄🚀

Fri, 09 May 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Firebase Studio now supports Gemma 3 image inputs on the Gemini Developer API 🔥🪄🚀

Description

Try it out on the Gemini template and switch to the gemma-27b-it model! https://studio.firebase.google.com/new/gemini

Learn more about Gemma 3: https://ai.google.dev/gemma/docs/core

Website: https://rodydavis.com Twitter: @rodydavis Github: @rodydavis Patreon: https://www.patreon.com/rodydavis Buy Me A Coffee: https://www.buymeacoffee.com/3mgFNYd

Transcript

0:00 · Did you know that Firebase Studio now supports Gemma 3 with image input? You can get started by going to Firebase Studio and then going to new workspace AI and ML and get started with the Gemini API. Make sure to select JavaScript web app with V. Give a name for your workspace and hit create. Once the workspace is loaded, you can create an API key by opening up the Firebase Studio extension and then clicking on the Gemini integration.

0:29 · You can generate an API key and you don't even have to leave Firebase Studio. Once it's generated, you can copy it and paste it inside of the code.

0:38 · By default, the template uses Gemini 1.5 Flash. And we can test that it's working by clicking on an image and hitting go. This will create a recipe based on the image and generate a markdown version of that recipe. But we can easily swap this out for Gemma. So go ahead to the model string and replace it with Gemma 327B instruction tuned. We can verify this is working by selecting an image and then hitting go.

1:13 · Try it out for yourself at studio.firebase.google.com/new/jgemini.

Firebase After Hours #14: Live Vibe Coding with Firebase Studio

Thu, 31 Jul 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Firebase After Hours #14: Live Vibe Coding with Firebase Studio

Description

Join @PeterFriese and @NoheDev on Firebase After Hours as they vibe code an app (or two) using Firebase Studio. @RodyDavis (Developer Relations Engineer on Firebase Studio) will be their guest. Bring your questions about Firebase Studio, and they'll answer them live!

Resources: From vibe to reality: Integrating Firebase in Firebase Studio → https://goo.gle/4lWAXf8 Forum: → https://community.firebasestudio.dev/

#Firebase #FirebaseAfterHours #FirebaseStudio #Streaming #GoogleCloud #LiveStream #DeveloperCommunity

Transcript

0:00 · [MUSIC PLAYING]

0:59 · PETER FRIESE: Hello, everybody and welcome to "Firebase After Hours," number 14.

1:06 · Can you believe it?

1:07 · Number 14.

1:08 · When we started doing this, I had no idea that we would end up at a number like that.

1:14 · And we have no intention of stopping there.

1:17 · So welcome to the stream.

1:20 · We've got something really exciting for you today.

1:22 · But before we can get started, let's do the housekeeping.

1:27 · So I want to remind everybody to be nice to each other.

1:31 · We have a live stream going and a live chat.

1:34 · So you can use the live chat to communicate with us.

1:37 · We want you to send us your questions.

1:40 · So please send questions that you want us to answer.

1:43 · And we will take the ones that make sense in the context of this live stream, which will be about Firebase Studio.

1:51 · And if there are any other ones that we can also answer and which we think might be interesting for folks on stream.

1:59 · But in the interest of everybody, let's be polite.

2:05 · And if you hate something, then maybe not say it here, but say it into your pillow or into a bucket and say the nice things to us and be constructive.

2:19 · With that out of the way-- oh, and I also see people are using the emojis.

2:25 · So please use the emojis if you like something.

2:27 · Press the heart emoji or the party popper.

2:31 · That's always great.

2:32 · All right, so with that out of the way, let me bring on my most favorite co-host, Nohe.

2:41 · Here he is.

2:42 · Nohe, how's it going?

2:43 · ALEXANDER NOHE: It's good.

2:44 · I'm glad I made it to the most favorite ranking.

2:47 · PETER FRIESE: [LAUGHS] You are my most favorite.

2:49 · ALEXANDER NOHE: Well, you have so many to pick from.

2:51 · PETER FRIESE: [LAUGHS] Man, I haven't seen you for such a long time.

2:56 · What's happening?

2:58 · ALEXANDER NOHE: Have you?

3:00 · PETER FRIESE: Have you-- I mean, I saw you five minutes ago.

3:04 · ALEXANDER NOHE: OK.

3:05 · Well, I mean-- well, weren't you also on vacation?

3:08 · I did a vacation last year.

3:10 · PETER FRIESE: Yeah, but we were on different vacations, so I was on an island in the north of Germany.

3:16 · And you probably-- I didn't see you there.

3:18 · So I assumed you were somewhere else.

3:18 · ALEXANDER NOHE: That's the most details you gave me.

3:20 · So I think I went to a different island.

3:22 · PETER FRIESE: Yeah.

3:23 · That's why I think.

3:24 · [LAUGHS] Which island did you go to?

3:28 · ALEXANDER NOHE: No, I went to Wyoming.

3:33 · I went to Yellowstone.

3:35 · It's one of the national parks.

3:36 · Do you know why they call it Yellowstone?

3:40 · PETER FRIESE: I haven't been there, but I hear great things.

3:42 · So next time I come, maybe we can go together.

3:46 · ALEXANDER NOHE: Yeah, yeah, we'll take a little road trip.

3:49 · I saw a bear, some moose, some elk.

3:53 · PETER FRIESE: OK, wow.

3:53 · That sounds exciting.

3:55 · How far away were you from the bear?

3:58 · ALEXANDER NOHE: So the bear was the closest.

4:00 · I got maybe 10 feet away.

4:02 · It was a brown baby bear.

4:05 · PETER FRIESE: Oh, OK.

4:06 · ALEXANDER NOHE: It was not-- the bear walked up to me.

4:09 · I didn't walk up to it.

4:11 · Yeah.

4:13 · But we were just hiking along.

4:14 · PETER FRIESE: Now it sounds a little bit more scary.

4:17 · 10 feet, that's not very far.

4:18 · ALEXANDER NOHE: Yeah.

4:19 · And then we had to climb over rocks.

4:21 · I dropped a camera lens that I was borrowing.

4:23 · So I actually broke the lens.

4:25 · PETER FRIESE: Oh, no.

4:26 · That sounds like an expensive vacation.

4:28 · ALEXANDER NOHE: Yeah.

4:29 · Well, it turned out to be one.

4:32 · Yeah, but it was good.

4:34 · How about-- how was your island vacation in the north of Germany?

4:37 · PETER FRIESE: Yeah, it was really good.

4:38 · So we were on an island called Used, and it was absolutely fantastic weather.

4:45 · So we had sunshine.

4:46 · We were hanging around on the beach, doing bicycle rides.

4:52 · So yeah, it was a great time.

4:55 · Very relaxing.

4:57 · No bears, but we had a seagull.

4:59 · So the seagulls.

5:01 · Man, I tell you, we only had a jar of marmalade on our balcony.

5:06 · And then, next thing you know, this giant seagull lands on the balcony, trying to peck on the marmalade.

5:14 · [LAUGHTER] Well-- all right, so we're not here to talk about vacation.

5:22 · We're here to talk about Firebase Studio.

5:26 · And we have a guest that knows everything about Firebase Studio, at least I hope.

5:34 · So here he is.

5:36 · RODY DAVIS: Hey.

5:36 · PETER FRIESE: Rody, hey.

5:38 · How is it going?

5:39 · RODY DAVIS: Going good.

5:40 · Yeah, super excited to come and code with y'all.

5:43 · And I feel like this will be a really fun stream.

5:46 · PETER FRIESE: Yeah, absolutely.

5:48 · So maybe we can start, and you can tell us what you do, what's your role, and maybe a fun fact about you that you're happy to share.

5:58 · RODY DAVIS: Yeah, so-- yeah.

6:01 · My name is Rody.

6:02 · I am a DevRel on Firebase Studio, so helping people get access to our huge selection of templates, but also working across teams to make sure that everybody has a good experience there.

6:17 · And it's been interesting with the advent of vibe coding, where now the audience is changing, too.

6:24 · You have people that have no experience with coding at all, all the way up to super experienced devs.

6:30 · And, more recently, I feel like I've been seeing a lot of people come back into coding later in their career.

6:36 · And now you have people that, oh, I used to do it, like, 15, 20 years ago, and I'm getting back into building.

6:42 · So yeah.

6:43 · And then a fun fact, I used to be an audio engineer before I was a software engineer.

6:48 · PETER FRIESE: Oh, is that why your audio signal sounds so good?

6:53 · RODY DAVIS: Yes, that's why I have a proper mixing board to the left of me.

6:57 · PETER FRIESE: Nice, nice.

6:58 · I feel I need to spend some quality time with you so you can help me fix the audio on my stream.

7:04 · RODY DAVIS: Yeah, yeah.

7:05 · For sure.

7:07 · PETER FRIESE: All right, cool.

7:08 · So usually we do a game of what is your favorite indentation method, but before we started the stream, we were talking about food or vacation.

7:20 · So how about we take a new question, and instead of doing tabs versus spaces, how about we do, what is your favorite food?

7:30 · And why is it pasta?

7:31 · No, sorry.

7:32 · So what's your favorite food?

7:33 · [LAUGHS] RODY DAVIS: Yeah, I think one of my favorite ones is sushi.

7:39 · But if I had to pick a specific thing inside there, probably, like, takoyaki from Japan, like the little octopus balls they fry.

7:46 · Those are pretty good.

7:48 · PETER FRIESE: Nice.

7:49 · Nohe, what about you?

7:51 · ALEXANDER NOHE: I really like Chicken Chesapeake.

7:54 · PETER FRIESE: What's the second part?

7:56 · Chesapeake?

7:57 · ALEXANDER NOHE: Yeah, Chesapeake.

7:58 · It's like a giant bay in North America.

8:02 · There's like crabs that come out of the bay.

8:04 · RODY DAVIS: Nice.

8:04 · ALEXANDER NOHE: Then we eat the crabs.

8:06 · So Chicken Chesapeake is chicken, and it's layered on top with a crab dip or other crab meat items.

8:17 · It's pretty good.

8:18 · PETER FRIESE: Nice.

8:18 · RODY DAVIS: Is it a full on boil, like a normal seafood boil?

8:22 · ALEXANDER NOHE: You're thinking of like a low country boil.

8:24 · That's something different.

8:26 · Well, I assume you're thinking of a low country boil, where you have the giant thing.

8:30 · You throw in the crawfish and the corn and the potatoes.

8:33 · RODY DAVIS: Yeah.

8:34 · So you just cook the crabs and get them out.

8:37 · ALEXANDER NOHE: Well, yeah.

8:38 · So you make the crab dip first, where it's-- it's not really crab dip.

8:43 · It's like a little bit of a crab cake blended with chicken on top.

8:48 · So you get the very filling chicken and then however much crab you picked off-- RODY DAVIS: That's nice.

8:55 · ALEXANDER NOHE: --or gotten from the jar or your cousin that runs the crab shack.

9:01 · Yeah.

9:02 · RODY DAVIS: Nice.

9:03 · How about you, Peter?

9:04 · PETER FRIESE: So if you've watched our last, most recent video, you might know that one of my favorite dishes is parmigiana.

9:15 · And usually you make it with aubergine.

9:18 · But my favorite is zucchini.

9:20 · So that would be my go-to.

9:23 · And anything that has tomato sauce in it, you can't go wrong with it, I think.

9:28 · It just is perfect.

9:30 · RODY DAVIS: That's awesome.

9:31 · PETER FRIESE: So everybody on the stream, tell us what you think.

9:35 · What's your favorite dish?

9:36 · I already saw that people mentioned chimichurri and stuff.

9:41 · So feel free to let us know what you like.

9:45 · So let's talk about Firebase Studio.

9:49 · So one of the first questions that we should probably talk about is, what is it?

9:56 · And how is it different from Firebase?

10:01 · RODY DAVIS: Yeah, that's a good question.

10:04 · Yeah, and also people may be wondering, well, how is this different than just VS Code on my computer too?

10:10 · So Firebase Studio is, at its core, a computing platform that we enable and unlock people to use in the browser.

10:19 · So we're built on top of NixOS, which is a VM that has a huge amount of packages in the Linux ecosystem.

10:27 · And because of that, we are able to support full server side, client side stacks, all running together.

10:36 · You can run Kubernetes or full Docker containers, all the way down to just a simple Go server.

10:44 · Really, it's about-- as long as you can configure it in Nix, you can usually get the template running.

10:49 · So Firebase Studio, which was previously Project IDX, wraps up all of that into a nice feature suite.

10:57 · But then, now part of Firebase, we are able to deeper integrate into creating Firebase services, like projects and API keys for Firebase AI Logic, and have deep relationships across Google to try to make that development experience better.

11:16 · And then, of course, at Google Cloud Next, when we launched, we also supported this new kind of natural language prompting.

11:24 · And that is kind of a new way for us to get into the space of helping people get past that blank canvas problem.

11:32 · So I have something I want to build.

11:34 · I'm not sure where to start.

11:35 · There's a lot of templates.

11:37 · Might as well just throw it into the prompt to see what you can get.

11:40 · And one of the cool things about that is, even if you're a really experienced dev and maybe mobile is like your wheelhouse, we still offer this prototyper because you could use it for your marketing site.

11:53 · You could use it for the things that you don't want to build, but then focus your development time on something else.

11:59 · And because we run on top of these VMs, unlike a lot of the other tools, we have that experience wherever you go into any browser.

12:09 · And so I think that's been fun.

12:11 · One of the things I like to show off at the booth is running Firebase Studio on my Google Pixel Fold.

12:18 · PETER FRIESE: Yeah, how is the development experience on a small device like that?

12:21 · RODY DAVIS: It's interesting, especially if you have a keyboard and stuff like that.

12:25 · But, I mean, I think it's just really awesome to be able to-- oh, I just need to get access to that.

12:30 · I just need to make this one change.

12:32 · And one of my favorite things that we can do in Firebase Studio is-- everybody likes to joke on Twitter and other places that, oh, here's my new startup.

12:43 · It's localhost blah blah blah.

12:46 · But with Firebase Studio, we launch public ports, so you can actually share localhost on Twitter, which is fun.

12:51 · PETER FRIESE: Yeah, yeah.

12:52 · Yeah, it's really good fun.

12:54 · And what I really like is that you have this feature where you can display QR code and then show it on your phone.

13:01 · And that's pretty cool.

13:03 · RODY DAVIS: And it's getting into your actual VM too.

13:05 · Yeah.

13:06 · PETER FRIESE: Yeah, yeah.

13:06 · Exactly.

13:06 · So why don't we take a look at how it works, and then we can look into some of the features, and maybe you can show us some of the stuff that you're particularly excited about.

13:18 · And then maybe we can take some audience questions as well.

13:22 · And maybe-- I don't know-- you have an idea what we can vibe code or the audience wants to come up with something.

13:29 · So I will bring on your screen, and then we can take it from there.

13:35 · RODY DAVIS: Awesome.

13:35 · So when you are first brought into Firebase Studio, you won't have any projects yet.

13:43 · So this is going to be the screen that you have.

13:45 · It's very similar to any other of the AI tools, but we offer a way to easily get started.

13:53 · One of the cool things that we launched recently is when you add a prompt, we can now suggest an improvement to that prompt.

14:01 · So it'll already start to normalize the type of input that people are bringing, which is pretty cool in itself.

14:10 · And then, of course, if you want, you can click on Full Dashboard and get access to our templates.

14:17 · We have a huge variety of templates.

14:19 · There's almost certainly a framework or a stack that you're using that we have here.

14:26 · We have both mobile, web, and front end.

14:30 · Mobile is especially really popular.

14:33 · Our AI templates-- people actually really like our databases inside of Firebase Studio because, notoriously, Postgres and these other ones can be tricky to get installed.

14:42 · And so now you can have a running Postgres instance running in the browser that you can connect to by public port.

14:49 · So you can kind of-- what I like to do is create really nice staging environments and then connect to them from other places.

14:56 · And then we also have this new What's New section that we launched just last week.

15:01 · And these are updates to these five templates that support our new agentive AI layout.

15:09 · And it kind of makes-- one, we've updated the base system instructions, so you can have a more prototyper-esque type of experience, where you can just jump into the chat and say, change this, do this, do whatever.

15:23 · PETER FRIESE: OK.

15:25 · All right.

15:25 · That's really interesting because when-- that sounds a little bit like on [INAUDIBLE]-- so we've got the prototyper that you showed in the beginning, where you have this box that you can use to kickstart your application from zero, essentially.

15:40 · And what you just said sounds a little bit like you would be in the IDE part of the IDE, and then you'd have another window that you could use to continue prototyping in there.

15:51 · Is that about correct?

15:52 · RODY DAVIS: Yeah, and we're also just starting with these.

15:55 · But the goal is to try to bring this to more that makes sense.

15:57 · And so if there's a popular framework, and you're like, oh, I have to use Laravel for my-- let's see, where is it-- for my entire application.

16:08 · That's the only thing I use.

16:10 · Well, you could take what we're doing here and apply that to your favorite template and already start to have this more agentive experience.

16:19 · PETER FRIESE: OK, that's cool.

16:20 · So what I think we should be doing-- so when I was at Cloud Summit in London, I had 15 minutes to vibe code an application.

16:31 · And because I know that it takes a while for the prototyper to do its work, I vibe coded two applications at the same time.

16:39 · One was a "Flappy Bird" clone.

16:43 · And the other one was an expense tracker.

16:46 · So it sounds like we might want to do the same.

16:50 · So I'm thinking one of the things that we should do is demonstrate how the initial prototyper works, like where you can put your prompt.

16:58 · And then I am super curious about the agentic experience in those templates here.

17:03 · So I want to see those two things.

17:06 · Can you make that work?

17:08 · RODY DAVIS: Sure, and what template do you prefer we start with?

17:11 · Because this would also be a-- PETER FRIESE: I don't know.

17:14 · Nohe, do you have any preference?

17:16 · ALEXANDER NOHE: Let's go Flutter.

17:18 · RODY DAVIS: Nice.

17:18 · OK, cool.

17:19 · PETER FRIESE: Let's do it.

17:21 · Oh, yeah, and then the other app should be a bird-themed app as well.

17:26 · [LAUGHTER] RODY DAVIS: Let's see.

17:34 · And I will have you hide my screen in a second when I paste in an API key.

17:40 · PETER FRIESE: OK.

17:41 · Fair enough.

17:47 · ALEXANDER NOHE: Building environment.

17:48 · RODY DAVIS: Yeah, no, this is pretty exciting.

17:51 · I've been really pumped for this new type of experience that we've launched.

17:57 · One, it kind of just really highlights how flexible and powerful our templates are because the prototyper is great if you're using Next.js and Tailwind and all the things that we've set up for you.

18:11 · But a lot of people have been asking, I wanted to use my favorite framework, Vue or Svelte.

18:16 · And it's always giving me Next.js.

18:18 · So this is kind of like a step in that direction.

18:21 · PETER FRIESE: Yeah, absolutely.

18:25 · RODY DAVIS: So yeah, this is the new template layout.

18:28 · As you can see, by default, the chat's on the right, and the previews are on the left.

18:34 · And then, of course, you still have access to all the code here too.

18:38 · And we also launched this new feature recently called Auto-Run, where it essentially-- except for terminal commands, it will automatically add all the files without having to have you approve each one.

18:49 · PETER FRIESE: Nice RODY DAVIS: OK, let me go ahead and grab that API key real quick.

18:58 · ALEXANDER NOHE: I think this might be where we want to turn off Rody's screen?

19:00 · RODY DAVIS: Yeah, go ahead.

19:01 · PETER FRIESE: OK, so I'll target just you.

19:05 · RODY DAVIS: Just in case.

19:09 · I'm sure there's eager viewers that are ready to screenshot.

19:12 · PETER FRIESE: Oh, yeah, yeah.

19:13 · So I had one video where I had an API key visible for literally two frames.

19:18 · And then somebody posted a comment in the video that pointed exactly to that thing.

19:24 · So we had to swap it out.

19:27 · RODY DAVIS: Amazing.

19:29 · OK, almost there.

19:32 · Sweet.

19:34 · Let me just put this.

19:37 · ALEXANDER NOHE: So while we wait for Rody to fetch the API key, can we see if he can pat his head and rub his belly at the same time?

19:45 · [LAUGHTER] RODY DAVIS: All right, now we're good.

19:49 · ALEXANDER NOHE: Oh, we're all good?

19:51 · All right.

19:52 · PETER FRIESE: [LAUGHS] RODY DAVIS: OK, so one of the cool things when you enter into this Auto-Run is, obviously, it's very destructive in terms of it's going to be just adding a bunch of files.

20:04 · So we will commit all of your changes to a local Git repo.

20:07 · So right here, you can see we generate a commit message.

20:11 · And we do that.

20:12 · And so if you do a whole session, and you really hate it, you can always right-click and restore.

20:19 · The other thing that you can do is built into the core Code OSS.

20:24 · You can also use your timeline and restore there as well, so already kind of nice ways to get around that.

20:32 · PETER FRIESE: Nice.

20:33 · RODY DAVIS: Awesome.

20:34 · And let's see.

20:35 · Another fun thing we could do, too, is we recently launched support for Firebase MCP.

20:42 · So we can also add that as well.

20:45 · I can go ahead and log in.

20:50 · PETER FRIESE: So that would enable you to have the IDE remotely control your Firebase project and do things like create a project in the first place or create new accounts, list what's in the database, and stuff like that?

21:08 · RODY DAVIS: Yeah.

21:09 · Go ahead and hide my screen one more time, too.

21:11 · PETER FRIESE: Yep, sure.

21:12 · RODY DAVIS: Thanks.

21:15 · Just realized it'd show the authorization code.

21:22 · OK.

21:22 · ALEXANDER NOHE: So a few questions came in on chat.

21:28 · And I'm trying to find them so that we can show them on the screen.

21:31 · But one of them was, are we planning to make it easy to integrate auth, database, storage, and other Firebase services easily with Studio projects?

21:42 · RODY DAVIS: Yeah, that's a good question.

21:44 · And you can share my screen again.

21:46 · The goal is to make all the integrations as seamless as possible.

21:51 · I think you can already, right now, go to the Firebase Console and set up the authorized domains and some of the other redirects to get that working.

22:02 · One of the cool things about the Firebase MCP server-- and you guys can fact check me if I'm wrong on this.

22:07 · But it can already do a lot of things like create Firebase projects and databases and configure a lot of the settings for you.

22:17 · ALEXANDER NOHE: Cool.

22:18 · RODY DAVIS: And then, so one of the cool things is we have this MCP JSON file that is blank.

22:24 · We have a code lab, where I'm just going to paste in the code snippet.

22:27 · And this enables the Firebase MCP server.

22:32 · And the way that you'll know it's running is, if you go into your logs-- ALEXANDER NOHE: Hey, Rody, just to interrupt you, I think it's about time I say my catchphrase.

22:43 · And I know you can read the screen, but I cannot read the screen.

22:48 · Could you make it just a little bit bigger?

22:50 · RODY DAVIS: Yeah, you got it.

22:51 · Let's see.

22:57 · ALEXANDER NOHE: Thank you.

22:58 · Yeah, it should be uncomfortably large for you.

23:01 · RODY DAVIS: Yeah.

23:03 · Let's see.

23:03 · OK.

23:04 · So when I went to the Gemini logs here in the output console, you'll see that it'll show all the tools that it has available.

23:13 · Sometimes it'll take a second.

23:15 · And then as you make changes to the MCP JSON, it'll also change what's available there too.

23:20 · Like, for example, Flutter and Dart has an MCP server that you can also use on the beta channel, I believe.

23:27 · And so you could have multiple MCPs here, and they'd all be available in chat.

23:32 · PETER FRIESE: I love the fact that it adds 42 tools, but it also means we can't add any more tools.

23:38 · RODY DAVIS: That's right.

23:39 · Yeah, it's the meaning of life.

23:41 · ALEXANDER NOHE: I did see one tool in there called Consult Assistant.

23:44 · Have you tried that tool yet?

23:46 · RODY DAVIS: I have not.

23:51 · ALEXANDER NOHE: It's like third line, maybe.

23:54 · Oh, no, no, second line.

23:55 · You literally just highlighted it.

23:58 · That way, to the right.

23:59 · Yeah, that one.

24:00 · RODY DAVIS: Yeah, so any idea what we should prompt there to try to get it?

24:04 · We can also switch it to Ask mode, by the way.

24:06 · This is so you can interact but not make changes.

24:11 · ALEXANDER NOHE: Can you ask the Firebase Assistant, how do I add FlutterFire to this app?

24:26 · RODY DAVIS: OK, let's see if it'll come back.

24:28 · I'm also using Gemini 2.5 Pro here.

24:36 · Beginning Firebase setup.

24:37 · It's just like it's thinking, mapping out Firebase tasks.

24:44 · ALEXANDER NOHE: And then while we wait for this to respond, somebody mentioned that they are designing a web app.

24:51 · And is it always going to be slow?

24:55 · Or when they go live, will it be faster?

24:58 · RODY DAVIS: Slow as in building?

25:03 · ALEXANDER NOHE: This is the text that I have, my friend.

25:06 · PETER FRIESE: It runs very slowly.

25:09 · RODY DAVIS: It might be debug mode that's slowing it down for the app.

25:12 · ALEXANDER NOHE: Ah, OK.

25:17 · RODY DAVIS: Let's see if we can-- I'm not sure if it actually used the tool or not.

25:21 · Let's see if we can use the tool.

25:25 · It did give a correct set of instructions, though.

25:29 · ALEXANDER NOHE: How do you know when a tool is run in Ask mode?

25:31 · RODY DAVIS: It should prompt or show a little thing that says, using X tool.

25:38 · So it also might not work in Ask mode.

25:46 · Let me try it again in Agent.

25:51 · And you can always start a new chat, which is nice because you can actually have multiple histories of various chats going.

25:57 · So let's try it again.

26:00 · Yeah, it totally could have just not worked in Ask mode.

26:10 · Let's try my terminal command, but yeah.

26:11 · PETER FRIESE: But that's a little bit more straightforward, right?

26:14 · RODY DAVIS: Yeah, let's see.

26:17 · Just try one more before giving up.

26:21 · ALEXANDER NOHE: Maybe like, when should I use Firestore versus Firebase Data Connect?

26:29 · RODY DAVIS: Yeah, I think the issue is it's trying to just use the raw model stuff.

26:43 · Let's see.

26:45 · Here we go.

26:45 · Clarifying.

26:46 · OK.

26:46 · That's what you're supposed to see, though.

26:48 · That's it actually talking to the tool.

26:53 · No active project was found.

26:55 · So that one, that may need a set for that.

27:00 · That's good.

27:01 · I haven't heard that before.

27:02 · PETER FRIESE: Can you ask the MCP server to give you the tool definition so that you can understand what the tool is good for?

27:10 · RODY DAVIS: Yeah.

27:19 · Let's see.

27:28 · There we go.

27:34 · Pretty cool.

27:35 · PETER FRIESE: OK, so the Firebase AI-- Firebase Assistant is basically Gemini in Firebase, right?

27:43 · RODY DAVIS: Yeah, is that the-- nice, yeah.

27:46 · That's cool.

27:48 · PETER FRIESE: Yeah, that's pretty cool.

27:50 · RODY DAVIS: Right on.

27:52 · PETER FRIESE: All right.

27:53 · So what should we do with this application here?

27:55 · So it's a basic application.

27:58 · But can we add a feature?

28:03 · RODY DAVIS: Let's see if we can first switch to Agent Auto-Run.

28:09 · Let's build a fun-- here we go.

28:13 · Let's do, build a-- this is always one I like to try, just because it requires state, logic, and layout.

28:23 · And I usually like to do, build me a retro-themed calculator because it usually-- depending on the luck of the draw, it'll have a nice segmented display with the nice green.

28:36 · PETER FRIESE: Nice.

28:38 · ALEXANDER NOHE: Are these solar powered too?

28:40 · RODY DAVIS: Yeah.

28:40 · [LAUGHTER] That would be awesome.

28:45 · It'd be cool if you could have the effects of motion on it too.

28:50 · ALEXANDER NOHE: Oh, yeah.

28:56 · RODY DAVIS: Let's see.

28:57 · Yeah, let's just start with that.

28:58 · So I want to start with a prompt that someone might put into the normal prototyper that's just asking for something, but not really specific on the type of change.

29:10 · If you go into our IDX/AI rules, these are the new rules that we launched.

29:16 · And so you can see that there's a lot of opinions in here.

29:19 · But that's the best part about rules is they are opinionated.

29:22 · You can go and change these.

29:24 · And it will have your opinions baked into those rules.

29:27 · PETER FRIESE: Oh, so they're in your project?

29:29 · RODY DAVIS: Yes, yeah.

29:30 · So if you completely hate what we put together, please change it.

29:35 · And then just restart the chat.

29:36 · And you will have it use your favorite state management, your favorite routing framework, your database, you name it.

29:42 · PETER FRIESE: Nice.

29:43 · Yeah, good stuff.

29:43 · ALEXANDER NOHE: Could we have it for every text string that it shows prefix it with a Z?

29:51 · RODY DAVIS: I guess.

29:52 · Yeah, you could.

29:53 · I mean, I think, obviously, the longer the rules, the less it may pay attention to any specific rule.

30:01 · ALEXANDER NOHE: Oh.

30:02 · RODY DAVIS: And so-- yeah, yeah.

30:03 · So one of the first steps it's supposed to do is come up with a blueprint and a plan, but we'll see if it actually does that here.

30:11 · PETER FRIESE: Yeah.

30:12 · So that was actually a question from someone on the chat who said, quick question, Rody, I noticed the more messages and prompts sent in the chat directly affects the responsiveness of the model.

30:24 · Perhaps Firebase Studio can develop a way to clear workspace data.

30:28 · RODY DAVIS: So you can do slash clear to remove all the chats in a session.

30:34 · And that's a way to really speed it up already.

30:38 · And then there's some other techniques we can do.

30:41 · Like, if it's really slow, you can go to your workspace list and click Restart.

30:45 · And that will provision a new one for you as well.

30:48 · PETER FRIESE: Is there also a way to summarize the previous conversation and roll it down.

30:54 · RODY DAVIS: You can with Gemini CLI, which we have pre-installed now.

30:58 · You can just go to terminal and type Gemini and have all those features.

31:02 · PETER FRIESE: OK.

31:03 · RODY DAVIS: Also, here's the blueprint that it generated, which is cool.

31:05 · It's similar to the prototyper.

31:07 · Like, it describes the UI, the design features, and the structure.

31:11 · And let's do a restart to make sure.

31:17 · It did not set it up in the-- let me do a full restart.

31:23 · PETER FRIESE: Maybe it's on the Plus button.

31:28 · RODY DAVIS: I think it needs to be fully reloaded.

31:30 · Let's see.

31:34 · ALEXANDER NOHE: Yeah, hot reload is not-- no, that did just come out to the web, right, because I saw something-- RODY DAVIS: For Flutter, it came out for Chrome, but not web server, which is what we use.

31:44 · ALEXANDER NOHE: Oh, OK.

31:45 · RODY DAVIS: Yeah, there's plans to support it in the future.

31:46 · ALEXANDER NOHE: Can we get to the Android preview?

31:48 · RODY DAVIS: Yeah, it's also restarting.

31:50 · ALEXANDER NOHE: Ah.

31:52 · RODY DAVIS: It just installed Google Fonts, so it's probably installing that package.

31:56 · ALEXANDER NOHE: While we wait for a hot reload, there was a question about the Attachment button.

32:02 · And clicking on the Attachment button-- ooh, look at that.

32:06 · RODY DAVIS: Yeah.

32:07 · ALEXANDER NOHE: It allows you to upload images, but not-- RODY DAVIS: Yeah, you can-- ALEXANDER NOHE: --not files.

32:12 · RODY DAVIS: --upload drawings, images, or even files from the workspace.

32:17 · ALEXANDER NOHE: Sorry, it looks like the question was in the overview in the base window.

32:25 · Do you know what I'm talking about, where you launch Studio, the prompting?

32:28 · RODY DAVIS: Oh, that one only supports images, I believe, or only-- yeah, only images, yeah.

32:34 · ALEXANDER NOHE: Yeah, so I think there's a feature request to support markdown there.

32:39 · RODY DAVIS: Yep.

32:40 · I also have that feature request out.

32:42 · PETER FRIESE: Oh, to input markdown right in the initial prompt?

32:46 · RODY DAVIS: Yeah.

32:47 · I will say that we support-- if you go to the open in Firebase Studio docs for a button, it supports sending stuff to the prototyper, which I have not found a limit to the amount of text you can provide there.

33:01 · So I have submitted full docs created with Gemini Deep Research to there.

33:05 · And it'll just-- like, you can add it as context inside of there.

33:08 · PETER FRIESE: Yeah.

33:09 · What I did found is that once you have the blueprint, you can say, let me edit the blueprint, and that's a markdown file as well, and then do whatever you want.

33:19 · But yeah, obviously, you'd want to also start out from a markdown file.

33:24 · RODY DAVIS: I was just about to code like a normal person.

33:27 · So let me use AI to make that [INAUDIBLE].

33:30 · PETER FRIESE: Like a savage.

33:31 · RODY DAVIS: Yeah.

33:33 · Remove the debug banner.

33:37 · So, as you can see, it came with a pretty cool UI already with a nice retro font and already with some animations.

33:45 · And that kind of shows you that we just gave it-- it generated a retro-themed themed calculator, but it did the work of creating a plan.

33:54 · The nice thing about the blueprint is it really makes an elaborate expansion on top of your prompt, and then also your intention.

34:02 · It's almost like a PRD.

34:03 · And then we generated all those files at once.

34:08 · So that was 1, 2, 3-- three files with a pubspec change.

34:12 · And this is something that's in the rules, too, is instead of updating the pubspec manually, it uses the CLI, which we prompted it to, so it always knows the correct way to do it.

34:23 · So for our Angular template, when you add a new component, it uses the Angular CLI to generate the new components and routes.

34:30 · So I think doing it this way lets the model do what it's best at, and then, also, what the tools are do what they're best at as well.

34:42 · ALEXANDER NOHE: So one thing that I've noticed using Gemini CLI is that when I have a really targeted fix, it tends to be really good at that.

34:55 · Whereas, when I vibe code with Firebase Studio, sometimes I want to have a targeted fix.

34:59 · I'm like, change this thing to do this, or the math is not exactly mathing correctly.

35:05 · RODY DAVIS: Yeah.

35:06 · ALEXANDER NOHE: Is there a way to go-- ooh, is there a way to figure out where in my project this button is?

35:14 · Like the 9 button, is this a single button on a screen that's reused for all the number buttons?

35:19 · Because all the operations are one shade.

35:21 · All the number buttons are another shade.

35:22 · Is there a way for me to figure that out by prompting Gemini in Studio, or is there something, maybe, else going on?

35:29 · RODY DAVIS: So I think one of the ways-- like, that's what you would use the Ask mode for.

35:34 · You could ask those type of questions.

35:37 · And then we've indexed all the files, and so it would know which file is where, and then, also, the context and state dynamically of what you've just added and updated.

35:48 · Is that similar to what you're asking?

35:51 · ALEXANDER NOHE: Maybe.

35:53 · I was working on something recently where I knew that I wanted it to have a certain behavior.

36:00 · And rather than just ask Gemini for the entire app, I said, in this file, change this thing.

36:06 · Is there a way to figure out from this which file that would be so that I could take a look myself?

36:13 · Do you know what I'm trying to ask?

36:14 · RODY DAVIS: I think so.

36:16 · I think you're asking-- so I guess the way I would do that is if I know the file ahead of time, I usually tell Gemini directly in the chat, update or read this file, describe this file to me, or, what do I need to do to make this file better?

36:33 · Something like that.

36:33 · And then I'm having a conversation with that file.

36:37 · With the file from the workspace, you can even add it there too if it's like a deeply nested one too.

36:43 · ALEXANDER NOHE: What if I don't know the file?

36:45 · RODY DAVIS: So I would actually just start by asking, because Gemini CLI is really good at this.

36:51 · And even in this mode too, we have an index list of all the stuff in your workspace.

36:55 · So you can say, I'm trying to find out where this is in the code base.

37:01 · And it could search stuff like that.

37:04 · ALEXANDER NOHE: Oh, OK.

37:05 · RODY DAVIS: Yeah.

37:06 · Because we've actually sent the list of the files and the recent stuff and everything like that.

37:11 · Gemini CLI will actually run regex queries and other stuff too.

37:16 · ALEXANDER NOHE: And figure out exactly-- RODY DAVIS: Mm-hmm.

37:19 · ALEXANDER NOHE: Oh, OK.

37:20 · RODY DAVIS: Yeah.

37:22 · ALEXANDER NOHE: Neat.

37:23 · RODY DAVIS: So there's different goals and different trade-offs, for sure.

37:27 · But yeah, I think sometimes you're like, this is a new code base.

37:31 · I'm explorative, trying to figure out where everything is and how it's working.

37:37 · One of the things I've done usually, either with CLI or regular, is just try to generate markdown files of what it thinks the app architecture is and try to have it go through and scan and create state and build it up.

37:53 · Or even like for these files, generate a series of tests, then run them, because then that kind of also generates a contract of what it thinks that the correct output should be.

38:05 · And then, as I'm going too, I like to have it generate documentation comments in the code too.

38:12 · So it's kind of just leaving it better as it goes.

38:16 · ALEXANDER NOHE: Oh, OK.

38:17 · Yeah, yeah, yeah.

38:19 · RODY DAVIS: Because also, it's natural language text, so it's great for context when it loads in the file too.

38:25 · ALEXANDER NOHE: Speaking of context, is there a limit to the number of tokens we can use in Firebase Studio?

38:32 · RODY DAVIS: So we're using Gemini 2.5 Pro here.

38:34 · We switched.

38:35 · So Gemini supports up to a million.

38:40 · Obviously, it's less than that with the context that we send in.

38:44 · But I think context is one thing, but usable context is different, right?

38:50 · When you're working with code, I think it's a lot different than just chatting with a PDF.

38:55 · And the more that you give it, the harder it is to find the exact things that you're looking for and to have meaningful change output.

39:04 · I've noticed that my best performance is when I'm-- even in CLI, I'm hitting like 75%, 80% context window.

39:13 · I feel it's like the sweet spot for-- I have a lot of context in there, but then I still have a lot of performance, because the performance will go down the more you fill it.

39:24 · Even with caching, it still takes a while to load it in.

39:28 · It still takes a while to parse and run inference on that too.

39:33 · So it's just definitely a trade-off.

39:36 · But there are times when you want to fill it up and do Ask questions like that.

39:43 · ALEXANDER NOHE: Cool.

39:47 · Peter looks like he's dying to ask a question.

39:49 · PETER FRIESE: [LAUGHS] Yeah, so you mentioned that you can ask it to generate documentation.

40:01 · So why don't we ask it to generate a diagram of this calculator for us?

40:06 · RODY DAVIS: Yeah, let's do it.

40:07 · OK.

40:10 · Let's do, in the blueprint.md, generate a diagram of the application features and state.

40:28 · Let's see if we can do that.

40:34 · So we can see it reads, and then we'll make the changes, and then also apply the edit out.

40:40 · We did switch to Auto-Run here.

40:43 · Doing a nice mermaid diagram-- nice.

40:47 · So let's go ahead and-- hey.

40:53 · PETER FRIESE: All right.

40:54 · ALEXANDER NOHE: Ooh.

40:57 · Wow.

40:57 · PETER FRIESE: Can we preview the diagram somehow?

41:00 · RODY DAVIS: Preview.

41:03 · ALEXANDER NOHE: I think you want markdown preview, which might be an extension.

41:07 · Or if you do Command-Shift-P too, open up the command palette.

41:10 · RODY DAVIS: Yeah.

41:11 · I think we-- ALEXANDER NOHE: Would that work?

41:12 · No.

41:12 · RODY DAVIS: I wonder if we render it in our-- I don't know if the built-in-- PETER FRIESE: Oh, can you go-- so I see the button, so right next to the diamond icon, yeah.

41:21 · RODY DAVIS: Yeah, that's the one I just did, yeah.

41:23 · I don't think we render mermaid diagrams in here.

41:27 · PETER FRIESE: Oh, OK.

41:28 · ALEXANDER NOHE: Not yet.

41:29 · RODY DAVIS: Yeah, not yet.

41:32 · PETER FRIESE: OK, feature request.

41:34 · ALEXANDER NOHE: Yeah.

41:34 · RODY DAVIS: Yeah.

41:35 · I'm trying to figure out-- I mean, I know GitHub will render it and other places, but yeah, I mean, at least it rendered the diagram, which is cool.

41:46 · Let's see.

41:47 · It has the list of operations, the different states, subgraph.

41:55 · Yeah, this is a calculator in state diagram.

41:58 · That's cool.

42:00 · Nice.

42:02 · Yeah.

42:03 · And then the other thing too, we could take this further and be like, OK, great, update the code you generated to have documentation comments, and write some unit and widget tests, and run the test, checking for errors and fixing any issues.

42:45 · OK.

42:46 · And then we'll do, create plan and get started.

42:54 · See if we can try this out.

42:55 · So this is a relatively complex question with a series of compound things that I'm wanting it to do.

43:03 · So obviously, I want it to do a chain of thought first and then-- all right, we'll go ahead, and it looks like it's refactoring it.

43:13 · It's moving things around to a more layered architecture, which is cool.

43:22 · Oh, it looks like the calculator is responsive.

43:24 · Nice.

43:25 · ALEXANDER NOHE: Well, you can't see the results at the top, though, right?

43:31 · RODY DAVIS: Yeah, I mean, if you don't show the answer, it could be correct, so TBD.

43:36 · ALEXANDER NOHE: We just hope.

43:38 · [LAUGHTER] RODY DAVIS: Go ahead and move this down.

43:45 · If you add the results but never look at it, is it correct?

43:48 · Is it a superposition of what you've added?

43:54 · All right.

43:55 · So it generated the test.

43:56 · Let's go ahead and run them.

43:57 · It's probably going to fail on the default one.

44:00 · I think we've already removed it.

44:01 · We'll see.

44:03 · But one of the nice things about having Gemini run the commands here is it will return all the standard error and standard out.

44:12 · So it can fix screens and fix any issues.

44:20 · Yeah, it looks like there's some errors that are going to return.

44:26 · ALEXANDER NOHE: So while this is running, we have a few more questions.

44:30 · RODY DAVIS: Sounds good.

44:32 · ALEXANDER NOHE: It's hard to keep up with all of them.

44:34 · So why isn't Android-native development not supported by Firebase Studio yet?

44:39 · RODY DAVIS: So we do support it.

44:40 · It's on pause right now.

44:41 · But we do have Android Studio Cloud, where you can go onto the mobile one and launch an Android Studio workspace.

44:50 · ALEXANDER NOHE: Nice.

44:52 · Chrome extensions-- can we use Studio to build those?

44:56 · RODY DAVIS: Yeah, I mean, you can.

44:58 · I think, Nohe, you've explored this a little bit too.

45:00 · I think you can build the extension and download and pull out the bundle.

45:05 · I mean, I don't think you could run a debug version of the Chrome extension because it needs the Chrome APIs, and we're running in an iframe.

45:13 · But you can literally do whatever you're going to do inside of Code OSS.

45:18 · ALEXANDER NOHE: Cool.

45:19 · And then, what's this going to cost me, Rody?

45:24 · RODY DAVIS: Yeah, so we have our pricing page, but everybody gets three free workspaces and then one free Flutter and React Native space.

45:33 · And then you can join the GDP program to get more workspaces.

45:38 · ALEXANDER NOHE: GDP-- Gross Domestic Product program?

45:41 · RODY DAVIS: That is correct-- no, Google Developer Program.

45:44 · ALEXANDER NOHE: Oh, OK, gotcha.

45:45 · I get those mixed up all the time.

45:47 · And then what about tagging or editing individual files?

45:51 · Why can't we?

45:52 · RODY DAVIS: You can.

45:53 · You can just reference it by name.

45:56 · We have an index of the entire file list that you have.

46:00 · Like as you saw earlier, I just said, update blueprint.md, and it knew because of the ones in my file list.

46:11 · In Gemini CLI, you can tag it with an at symbol.

46:14 · And we have Gemini CLI right here.

46:15 · ALEXANDER NOHE: You can also do that here, right, in the Attachment button, if you go down there?

46:20 · RODY DAVIS: So yeah, you can attach it, but it would load it as a context file as opposed to a file path.

46:28 · So it's less prescriptive on, I want you to update this file.

46:33 · It's more like, here's a file its context is in.

46:36 · PETER FRIESE: So I think one of the advantages of being able to tag a file is that you can be sure that you're talking about the right file.

46:43 · Specifically, if you are in a project that has a large folder structure, and you might have a list of those files with the same name, right?

46:52 · RODY DAVIS: I literally just go copy relative path, and I paste it in, and just do it that way.

46:56 · PETER FRIESE: Yeah.

46:57 · OK.

46:58 · So while that works, I think this sounds like a feature request.

47:02 · This is something that the team is looking into or people should be going on UserVoice to request.

47:11 · RODY DAVIS: Yeah, or you can use Gemini CLI right now and tag those by name as well too, yeah.

47:16 · PETER FRIESE: Yeah.

47:18 · So if I do something with the Gemini CLI, will it take the blueprint into consideration?

47:26 · RODY DAVIS: Yep, because it also has context of the same folder structure that you've launched.

47:32 · And so one of the things we've done is make sure that these rules files work for both.

47:37 · Like, we generated a Gemini.md for the same thing that we have for the AI rules.

47:41 · So it's going to have the same context there for this type of prototyping experience.

47:46 · PETER FRIESE: So the only difference would be that if I have a chat conversation going in the prototyping chat UI, and then I go into the CLI, it wouldn't have the chat context, right?

47:59 · RODY DAVIS: Yeah.

48:00 · PETER FRIESE: Except if I asked, can you please summarize this conversation for me?

48:03 · And then typed it into a CLI.

48:06 · RODY DAVIS: Or write it to a markdown file.

48:08 · I think that's the blueprint-- a good way to do that, yeah.

48:10 · PETER FRIESE: Yeah, exactly.

48:13 · ALEXANDER NOHE: Can we actually look at the test that it wrote?

48:16 · RODY DAVIS: Yeah.

48:17 · And yeah, it went through the tests, caught errors, and even fixed the other ones.

48:22 · So let's go in here.

48:23 · ALEXANDER NOHE: So whenever I fail a test, I usually just delete the test and move on with my life.

48:28 · RODY DAVIS: Nice.

48:29 · It did delete the default widget test.

48:31 · That was for the Hello World project that it generates the counter.

48:36 · ALEXANDER NOHE: Oh, how'd it fail that one?

48:40 · RODY DAVIS: Because when we-- yeah.

48:42 · Oh, yeah.

48:43 · ALEXANDER NOHE: No, I'm making a joke.

48:44 · RODY DAVIS: So what's cool is it generated a unit test like I asked it to.

48:50 · So that was the domain.

48:52 · And then it also generated a widget test, which is for the UI testing, so that's cool.

48:58 · ALEXANDER NOHE: OK.

49:01 · RODY DAVIS: Which I always forget the correct way to write widget test.

49:04 · So it's always great that Gemini can write these as well.

49:09 · ALEXANDER NOHE: I used to write a lot of test files.

49:11 · Like, how creative at doing the wrong thing can it get with test files, do you think?

49:17 · RODY DAVIS: I think-- ALEXANDER NOHE: Oh, hold on, there's a division by 0 there, right, towards the bottom?

49:24 · RODY DAVIS: Yeah.

49:25 · Let's see.

49:26 · Division by 0, yeah.

49:28 · ALEXANDER NOHE: Oh, look at that.

49:30 · RODY DAVIS: I've actually found with Gemini 2.5 Pro, natural language to unit test is actually pretty great if you know the-- well, one, it can just kind of generate whatever.

49:41 · But if you have a very guided series of things you want to test, what I usually do is I provide it a couple pseudocode examples.

49:48 · And then it will stamp out and continue the pattern.

49:52 · I've had pretty good luck with that.

49:54 · ALEXANDER NOHE: So Rody, I want to ask you about your intentions.

49:59 · Is it intentional that Firebase Studio don't handle the database provisioning like Firestore?

50:04 · In most docs, it's just a prompt.

50:06 · But one has to go to Firestore to provision it.

50:08 · Otherwise, it fails.

50:09 · Can you talk about that?

50:13 · RODY DAVIS: Doesn't the Firebase MCP server now support generating Firestore?

50:19 · ALEXANDER NOHE: I believe you might be right.

50:21 · RODY DAVIS: It might be one of the new tools.

50:23 · So one of the things that the Firebase MCP that we're investing in is the fact that it can generate a lot of these things from the console that you would have had to do otherwise.

50:36 · So ideally, the Firebase MCP just gets ultra powerful over time.

50:42 · And then we're just able to integrate with that and then use that as like a connection point.

50:48 · ALEXANDER NOHE: So I was definitely paying attention.

50:50 · But for Peter, who wasn't, does the Firebase MCP come already set up out of the box when you launch Studio?

50:57 · RODY DAVIS: It does not, but you can follow our codelab or any of the other docs on how to-- it's just literally a one-line copy into this.

51:06 · Like, you just paste in this one section, and then it installs the Firebase tools.

51:11 · The Firebase tools are pre-installed on the machine.

51:13 · But this just allows you to connect it.

51:16 · And you can also do dot Gemini slash MCP, if you want, in the Gemini CLI as well.

51:24 · ALEXANDER NOHE: Very cool.

51:25 · RODY DAVIS: Yeah.

51:30 · Yeah, so let's have it to do another change.

51:32 · Let's do, make the calculator have a nice color gradient with animated borders.

51:49 · This is a more complex UI thing, but it might be cool to see what it comes back with.

51:55 · I found the iteration to be really nice to be able to try out different ideas, especially knowing that it's going to be inside of a Git repo.

52:05 · I can just restore it anytime.

52:08 · ALEXANDER NOHE: How do you go about restoring it if you are running something, and you're like, oh, gosh, that-- RODY DAVIS: Yeah.

52:14 · ALEXANDER NOHE: Oh, right there.

52:15 · RODY DAVIS: So you can literally just go in here, and you can-- I believe it's-- yeah, Checkout or Cherry Pick.

52:21 · And you can also even do revert changes, I believe.

52:25 · And yeah, if you have a staged one, you can always discard all those as well.

52:29 · But like I said, VS Code also has this feature.

52:32 · I don't know why it's not showing up, but the timeline also will usually show changes as well.

52:38 · ALEXANDER NOHE: OK.

52:40 · RODY DAVIS: Let's do-- but yeah, it's already like we're trying to bring the best of what people love about the prototyper into Firebase Studio.

52:56 · And I think this kind of makes it a nice way to start with whatever framework.

53:03 · I think we started with web and React and Next.js and Angular and Flutter because those are the most visual ones that we had.

53:12 · But there's nothing stopping you from setting up the Go template or setting up, like I said, Vue or Svelte or something like that.

53:20 · So we actually encourage the community to try it out and share their own rules files and their own MCP server setups and stuff like that, because I also played around with Astro and getting this working too.

53:33 · And it's kind of cool to just vibe code a content-generated site.

53:38 · So yeah, it's fun.

53:40 · PETER FRIESE: So does that mean if I have any kind of workspace-- so let's say I have a project that has been sitting around somewhere in GitHub.

53:52 · And it uses some sort of technology stack that might not even be supported.

53:59 · Can I import it into Firebase Studio and then use the prototyper to start working on my project again?

54:10 · RODY DAVIS: So you can follow the files here.

54:13 · You just have to, in VS Code settings, make sure that agentic workspace is true, and make sure that you have a rules file there.

54:23 · You can copy it and customize it to whatever your project is specific.

54:28 · But then you just literally go into import repo.

54:30 · And as long as those files are there-- oh, and then dev.nix.

54:34 · You would definitely need that if you don't have one already.

54:37 · But as long as-- ALEXANDER NOHE: Like, Peter's looking for Vapor and Swift, if I had to guess.

54:43 · RODY DAVIS: Nice, yeah.

54:44 · You could use server-side Swift here.

54:45 · Yeah, for sure.

54:46 · And you could run it.

54:48 · PETER FRIESE: Yeah, I was looking into that.

54:50 · And I hit a wall because I wanted to use the latest version of Swift, Swift 6.

54:56 · And apparently, that is not supported on Nix.

54:59 · Somebody seems to be working on that.

55:01 · RODY DAVIS: Yeah, you can do unstable.

55:04 · So if something isn't supported, you can also, in the packages, you can-- there's a way in Nix to actually just install the binary directly from a GitHub release.

55:16 · And so, with that SHA, you could literally install the binary and do all the different kind of stuff.

55:23 · So there's definitely escape hatches for that.

55:25 · But yeah, I agree that sometimes if there's a version that's just slightly too new or just whatever, it can be annoying.

55:32 · But one of the whole core tenets of Nix is all of the packages get updated together with the channel, so everything's guaranteed to work.

55:41 · And so all 120,000 packages will compile because of the way that they do like their monorepo and stuff.

55:51 · PETER FRIESE: Interesting.

55:52 · OK.

55:53 · But coming back to my original question, so if I add those three lines to my pre-existing repository, I could somehow make that agentive enabled?

56:07 · RODY DAVIS: Yep, exactly.

56:08 · PETER FRIESE: Is that correct?

56:08 · RODY DAVIS: Yep.

56:09 · Mm-hmm.

56:10 · PETER FRIESE: Nice.

56:11 · RODY DAVIS: Looks like it generated a nice animated calculator that's showing up.

56:18 · PETER FRIESE: We should make the color change in response to the value.

56:23 · RODY DAVIS: Yeah, let's see.

56:25 · To the numbers?

56:26 · PETER FRIESE: Yeah.

56:27 · ALEXANDER NOHE: Yeah.

56:28 · PETER FRIESE: In response to the result. The higher the result, the hotter the number, the hotter the color.

56:34 · ALEXANDER NOHE: More neon.

56:36 · RODY DAVIS: Like real-life conditional formatting.

56:37 · PETER FRIESE: [LAUGHS] Exactly.

56:51 · RODY DAVIS: Yeah, this will be cool.

56:54 · Yeah, it's also just kind of fun to-- like, you could build this in a period of time.

57:02 · But while it was generating, we were having discussions about other stuff.

57:06 · It lets you focus on the things that you as a developer enjoy, which is thinking about the abstract of the application.

57:13 · And also, at any point, you just can go into the code and do it a different way.

57:19 · There's many times where Gemini will take it a wrong direction.

57:23 · And I'm like, OK, let me give it a better stub to start from.

57:26 · And then from that stub, you will have a way more high-quality result because AI generation's kind of like image generation, where if you try to generate an image with five words, it's going to not be what you probably had in mind for what you're trying to generate.

57:45 · And so if you think about project and code generation the same way, be very descriptive, or at least like, this is the things that I want you to do, avoid the things that I don't want you to do, but also just kind of guiding it and growing it into the direction you're wanting as well.

58:02 · PETER FRIESE: Yeah, that was a question around an aspect of vibe coding.

58:10 · You have the tool generate code.

58:13 · And then, even if you are a seasoned developer, and you might be an expert in the framework that it's using, sometimes it's hard to spot mistakes in the code.

58:23 · So here, a user asked, if the AI makes a mistake in the code that's hard to spot, like a hidden bug or security problem, how does the tool help me find and fix it, even if I don't notice right away?

58:37 · RODY DAVIS: So one of the things about being a developer is you should view AI-generated code as untrusted legacy code too because it is code that you didn't write or code that is immediately stale.

58:51 · And what do you do with untrusted code?

58:54 · You write unit tests.

58:56 · You run fuzzing.

58:59 · You do pen testing.

59:00 · All these approaches still apply to vibe coding.

59:03 · So that's why I had it generate a series of tests, like you said, Peter.

59:08 · It even tested for-- or Nohe, it divided by 0.

59:11 · Like, you want to cover all of your cases.

59:15 · And the more that you can generate unit tests and widget tests of being-- even if it's three more times tests than it is actual code, or even simulation testing, or anything, you want to get to a point where you're covering at least a sufficient amount of the code paths.

59:33 · And you can get closer by-- different tools used, like code coverage.

59:38 · And I've been like, OK, run code coverage, check which files still need coverage, try to write new unit tests, and go through a loop and have it try to check for all the branches because, usually, you'll uncover different errors there.

59:53 · I think the less tests and the less reviewing that you've done in a code base, the more likely it is to have a subtle off-by-one error or a subtle security issue.

1:00:04 · But we also have tools that will help you as well.

1:00:06 · We have Firebase App Check, which will make sure that the correct users are there.

1:00:10 · We have Firebase Auth, which will make sure that your application is protected and locked down to only authorized users.

1:00:18 · We have ways to do Firebase security rules to make sure that only the correct data is done.

1:00:23 · So even outside of your application, you can still sandbox it to a certain degree.

1:00:27 · But yeah, at the end of the day, you still need to write tests and have it generate the types of things that you would do even if you were another developer on the team reviewing code from someone else that's working on some new feature.

1:00:41 · ALEXANDER NOHE: Are you saying I can't just say, hey, there's a bug in here, go find it, even if I don't know whether or not there's a bug in there?

1:00:48 · RODY DAVIS: You can, but it might generate a new bug while it fixes the old one.

1:00:52 · One of the things about programming is, oftentimes, a fix for one thing will uncover two different things.

1:01:00 · ALEXANDER NOHE: Yeah.

1:01:01 · And then you have that load-bearing bug that's rooted into the application.

1:01:05 · Everybody's like, oh, no, you just have to save, close, save, close, and then you can add a new layer in.

1:01:10 · Yeah.

1:01:10 · RODY DAVIS: It becomes a feature at that point, yeah.

1:01:12 · ALEXANDER NOHE: Yeah.

1:01:13 · PETER FRIESE: Yeah.

1:01:14 · So adding on to my previous question, here is a user who said they have been using Firebase Studio successfully as someone with zero knowledge about coding.

1:01:27 · And they're struggling to get their app into the Google Play store.

1:01:31 · So let's talk about that part of the question next.

1:01:35 · But first, coming back to what you said, Rody, which I totally agree with, you have to review the code.

1:01:45 · You have to treat it as something that you didn't write yourself.

1:01:48 · You need to test it.

1:01:49 · You need to know how to make it secure.

1:01:53 · So that requires lots of knowledge that for us is second nature.

1:01:58 · But for somebody who is completely new to coding, they might not even know that there are security risks and how to deal with them.

1:02:11 · So what should people that come from a completely different field do in order to not get caught out?

1:02:19 · RODY DAVIS: So one of the things that I would suggest is if you're coming into this with not a lot of experience, or maybe you did it a long time ago, or just changing industries or whatever, that's where our other Gemini tools are really useful.

1:02:34 · So Gemini Deep Research is a great way to get answers and more questions to the things that you don't even know to ask.

1:02:44 · So if you literally put in there, How do I get my app into the Google Play Store?

1:02:50 · What are the list of things I need to do?

1:02:52 · It would do a full research page on exactly, step by step, on the ways you get your metadata done for the screenshots, ways to do your review, how to upload the Play Store, step by step, often tutorials.

1:03:09 · So use tools like that to really help you get around the knowledge gaps, because you'll be surprised at how straightforward that is.

1:03:20 · Firebase Studio is just a development platform, an IDE, so we're just one part of the puzzle.

1:03:26 · But I would definitely suggest Gemini and Gemini Deep Research for that kind of stuff.

1:03:32 · PETER FRIESE: Yeah, I remember we had this discussion when we were at Google I/O Connect in Berlin.

1:03:39 · And you told me about how you do research with the tool.

1:03:43 · And then I tried it out and asked it to research restaurants near where I live.

1:03:48 · And it was really great.

1:03:49 · So it came out with this really nicely written article that almost was like something that you would read in a restaurant review magazine.

1:03:58 · And I was like, oh, you should totally check out this one here.

1:04:01 · RODY DAVIS: Exactly.

1:04:02 · PETER FRIESE: So yeah.

1:04:02 · RODY DAVIS: And also, NotebookLM is great too.

1:04:04 · Yeah, you can basically take the research docs and then put them in a NotebookLM and ask more directed questions there too.

1:04:10 · PETER FRIESE: Yeah.

1:04:11 · ALEXANDER NOHE: I've been putting in my financial statements into NotebookLM because I saw a guide on this online.

1:04:17 · I was like, oh, I'll just try it.

1:04:18 · And then I was like, wow, you're really good at doing this thing, like paying your bills on time.

1:04:22 · And I was like, oh, thanks.

1:04:24 · RODY DAVIS: Yeah, I uploaded 62 PDFs for me and my wife for getting a house.

1:04:29 · And so we had all of the disclosures that they gave us.

1:04:33 · And tools like this make it so easy to scan and parse long documents of structured texts.

1:04:40 · As a human, it's really hard to read that in a quick manner.

1:04:45 · But yeah, use these tools for what they're good at because there's a lot of tutorials out there on how to publish your app on the App Store.

1:04:51 · But usually, there's a ton of information.

1:04:55 · It's spread across Stack Overflow and Stack Exchange and Reddit and search.

1:05:00 · But Gemini Deep Research basically takes all that and normalizes it into one place and has a series of steps that are often going to be pretty good.

1:05:09 · PETER FRIESE: Yeah.

1:05:10 · ALEXANDER NOHE: If you ever need an ego boost, like you just wake up one day, and you're like, man, I'm not feeling it, put your resume into NotebookLM, and have it generate a podcast.

1:05:20 · It'll be like, this guy-- PETER FRIESE: Oh, yeah, that's fantastic.

1:05:22 · RODY DAVIS: Oh, I thought you were going to say, have it roast you.

1:05:25 · ALEXANDER NOHE: Oh.

1:05:26 · Ooh, that actually might be fun too.

1:05:28 · Can you guide it like that and be like, roast this guy?

1:05:30 · RODY DAVIS: I'm sure it can.

1:05:31 · There is a system prompt setting for it.

1:05:36 · PETER FRIESE: Nice.

1:05:37 · ALEXANDER NOHE: Definitely going to be looking this up.

1:05:38 · PETER FRIESE: All right.

1:05:39 · So I know that lots of people asked about how they can get their feature requests to the team.

1:05:47 · So I wanted to show this here, which is the UserVoice that the Firebase team is using.

1:05:53 · So this is a site that's public, you can go to, and you can search for anything.

1:06:00 · And I did a quick search for Studio.

1:06:02 · And you can see that there's already a couple of people who asked about Flutter and Android Studio in Firebase Studio.

1:06:14 · And you can submit your own feature request.

1:06:19 · But chances are that there already are people who are interested in the same thing.

1:06:24 · So you can sign in and upvote the thing.

1:06:27 · And then, eventually, we'll have the resources and time to work on these.

1:06:33 · And you can go through all of these, and you'll see that there are a bunch of those feature requests that are actually implemented in the product.

1:06:45 · So that is one way to reach out to the team.

1:06:50 · Rody, is there any other way how people could get in touch with the Firestore team and say, hey, I have this really fantastic idea?

1:06:59 · Here it is.

1:06:59 · Here is the prototype or whatever.

1:07:01 · How can they do that?

1:07:02 · RODY DAVIS: Yeah.

1:07:03 · For the Studio team, I think the best place would be-- the forum is great.

1:07:08 · So we also have a forum.

1:07:10 · We check Reddit.

1:07:11 · We check Twitter and LinkedIn.

1:07:15 · The best place would be to have official place, like on the forum or tools like that, because that's where we can easily close out things when they're resolved, point people to the correct resources.

1:07:28 · And then we also have the Firebase community that we're also a part of as well.

1:07:34 · Yeah, if you have any issues, we are happy to answer them and help them.

1:07:40 · One of the interesting things about Firebase Studio is people will come with Firebase issues or Gemini issues or app issues.

1:07:49 · And it's literally infinite the amount of things that could be.

1:07:54 · So yeah, but we'll easily be able to direct you to the right people.

1:07:58 · PETER FRIESE: Yeah.

1:07:59 · And we'll put links to all those resources in the video description so people can find it after this live stream ends.

1:08:08 · Nohe, did we cover most questions on the live stream?

1:08:12 · ALEXANDER NOHE: I think so.

1:08:14 · There was a question about Data Connect that I saw come through.

1:08:18 · Maybe we should do another Data Connect live stream eventually?

1:08:21 · PETER FRIESE: Yeah.

1:08:22 · ALEXANDER NOHE: Yeah.

1:08:22 · PETER FRIESE: Yeah.

1:08:24 · We should do one where we have people from all those teams and then make them work together and implement an application.

1:08:31 · ALEXANDER NOHE: We should do it like the holiday special that we planned last year.

1:08:34 · PETER FRIESE: Yeah, I know.

1:08:35 · I know.

1:08:36 · And maybe we could reuse-- ALEXANDER NOHE: That would have saved the year.

1:08:38 · PETER FRIESE: Maybe we could reuse that really funny skit that we did.

1:08:42 · ALEXANDER NOHE: Yeah, yeah.

1:08:43 · Rody, were you in on the holiday special that we talked about?

1:08:47 · RODY DAVIS: I know what you're talking about, but I wasn't in on it.

1:08:49 · ALEXANDER NOHE: OK, great, great, great.

1:08:50 · Yeah, yeah, yeah.

1:08:51 · OK.

1:08:52 · Ah, that would be fun to do on a live stream.

1:08:56 · PETER FRIESE: Yeah, absolutely.

1:08:58 · Yeah.

1:08:59 · And then, because it's a live stream, it's a live stream, right?

1:09:03 · Just saying.

1:09:05 · All right, Rody, we're almost at time.

1:09:09 · Is there anything that we didn't discuss that you are dying to tell people about?

1:09:15 · RODY DAVIS: I think the biggest thing would be, just come try it out.

1:09:19 · If you haven't used Firebase Studio recently, it's probably changed in the last week.

1:09:24 · So we're always working on shipping updates and making it better and rapidly improving it.

1:09:31 · And even down to the day, if you're having issues with Gemini, the issue might get resolved the next day.

1:09:38 · And so if anybody is having issues opening workspaces, definitely let us know on the forums, and we'll see if we can get that resolved pretty quickly.

1:09:47 · But I'll just say, also, I really like using Gemini CLI inside Firebase Studio.

1:09:52 · It is super underrated how powerful it is to have a full VM that you can just ask and iterate on questions.

1:09:59 · And even running Gemini CLI alongside the regular Gemini chat and having it update our previews, it's kind of a magical experience.

1:10:09 · We can have them all running task in different threads.

1:10:12 · So yeah, no, it's a fun time.

1:10:14 · PETER FRIESE: Is there a place where people can go and see the release notes?

1:10:20 · RODY DAVIS: Yeah, I think that we have the main Firebase release notes.

1:10:24 · We probably most often put it on the blog and then share it on social channels and things like that.

1:10:31 · We're usually pretty good about making little short snippets.

1:10:33 · PETER FRIESE: Yeah, I was thinking about Firebase Studio.

1:10:36 · Is there a place where I can go and say, OK, so what has changed in the last week?

1:10:41 · RODY DAVIS: Yeah, we have a general roadmap and some other things that I've shown.

1:10:46 · But I'm not aware of anything other than just updating our docs and releasing social posts.

1:10:53 · PETER FRIESE: OK.

1:10:54 · Cool.

1:10:54 · All right.

1:10:55 · Yeah, we'll post all the links in the description.

1:10:59 · RODY DAVIS: Awesome.

1:11:00 · PETER FRIESE: And I think, with that, it is time to say thank you, Rody.

1:11:05 · Thanks for coming on.

1:11:07 · Thanks for showing us some of the cool new features and taking questions from Nohe and me and the audience.

1:11:15 · RODY DAVIS: Thanks for having me.

1:11:16 · PETER FRIESE: Yeah, we'll bring you back for the grand thing that we'll roast the entire team.

1:11:24 · RODY DAVIS: Nice.

1:11:25 · PETER FRIESE: All right.

1:11:26 · RODY DAVIS: That's great, yeah.

1:11:28 · PETER FRIESE: Cool.

1:11:28 · Nohe, do you have any final words before I click the button to send everybody back home?

1:11:35 · ALEXANDER NOHE: No, click the button, Peter.

1:11:37 · PETER FRIESE: All right.

1:11:38 · RODY DAVIS: All right.

1:11:38 · PETER FRIESE: Thanks for tuning in, everybody.

1:11:40 · Thanks for joining us.

1:11:41 · And go try it out.

1:11:43 · Let us know what you think.

1:11:45 · And we'll post all the links so you can send your feedback.

1:11:47 · Thanks, and see you in the next one.

1:11:50 · RODY DAVIS: All right.

1:11:51 · Bye.

1:11:54 · [MUSIC PLAYING]

From prototype to IDE in Firebase Studio

Thu, 08 May 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

From prototype to IDE in Firebase Studio

Description

Take advantage of Firebase Studios IDE and VM features! Rody, a Developer Relations Engineer for Firebase Studio shares how you can customize code and use Gemini to make edits.

Firebase Studio → https://goo.gle/firebasestudio

#Firebase #NixOS

Speaker: Rody Davis Products Mentioned:, Firebase,

Transcript

0:00 · SPEAKER: If you're new to Firebase Studio, you may not realize that you have a full IDE and VM at your fingertips.

0:07 · To take advantage of this, we can just go up here to the top right and click Switch to Code.

0:13 · This allows us to have full access to the code that the prototyper generates and lets you customize it any way you see fit, including custom integrations or working with external data sources.

0:25 · The file that the prototyper uses for editing is the page.tsx inside the App Directory.

0:31 · And you can see that we have the code for React here.

0:34 · We can go to the preview and see the same preview that I was showing in the prototyper, but now we have it inside of the IDE.

0:41 · We can also still take full advantage of Gemini in Firebase to make changes and edits to our files.

0:47 · For example, we can add a table under the calculator to show a list of possible tip options.

0:54 · We can see that Gemini picked up the file that we are currently editing, and we'll soon suggest an edit which we can then commit and save.

1:03 · Next, we can hit Reload if it hasn't already.

1:06 · And now we'll see the table at the bottom of our web preview.

1:10 · We can verify it's working by entering an amount, updating some values-- and awesome!

1:16 · We can see that the table is functional.

1:19 · Gemini inside of Firebase has full control of your project, so it can read and write files that you give it access to and run terminal commands.

Import existing projects into Firebase Studio

Tue, 13 May 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Import existing projects into Firebase Studio

Description

Get started with your own codebase in Firebase Studio. Rody, a Developer Relations Engineer for Firebase Studio shares how you can import your project from a variety of sources such as Github, GitLab, and more!

Firebase Studio → https://goo.gle/firebasestudio

#Firebase #Git

Speaker: Rody Davis Products Mentioned:, Firebase

Transcript

0:00 · SPEAKER: If you just heard about Firebase Studio and you want to get started with your own code base, well, we have you covered.

0:04 · Go ahead and go to studio.firebase.google.com and then click on Import Repo.

0:10 · This screen allows you to pull in your project from a variety of public and private sources.

0:14 · We support GitHub, Bitbucket, GitLab, or even uploading your project from a zip file.

0:20 · In this case, we can upload the quickstart.js Firebase sample.

0:24 · By default, when you enter the URL, it'll give you a default name for your workspace, which you can change to whatever you want.

0:30 · When we click on Import, it's going to go ahead and build our VM for us.

0:36 · Once that's done, it's going to launch the IDE that we can see our code that was downloaded from the source.

0:44 · If you don't already have one, it will create a dev.nix for you on the first launch of your workspace, which you can use to customize the specific dependencies for this project.

0:55 · Gemini will also appear.

0:56 · And, by default, if you don't have a dev.nix, you're not going to see any web previews.

1:01 · But we have documentation on how to get that set up for you to get started.

How Firebase Studio accelerates development

Tue, 29 Apr 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

How Firebase Studio accelerates development

Description

Get an exciting first look at Firebase Studio—a powerful new tool designed for interactive prototyping with Next.js and Genkit. In this video, Rody from the Firebase team shows just how quickly you can kickstart a project, using AI to instantly generate a blueprint for a tipping calculator app. With fast customization, one-click deployment, and auto-provisioning of Firebase projects and Gemini API keys, it’s never been easier to go from idea to working prototype.

Try it for yourself → https://studio.firebase.google.com

#GoogleCloudNext #Firebase

Speaker: Rody Davis Products Mentioned: Firebase Studio

Transcript

0:00 · Hi, I'm Rodie. I'm a senior developer relations engineer on the Firebase Studio team. And I'm going to give you an first look at Firebase Studio. One of the cool things that we're launching is a way to do interactive prototyping for Nex.js and Genkit. We can go in and simply say, I want to build a tipping app calculator. When we hit prototype with AI, it's going to give us a nice blueprint. This is all ready for you to try out now at studio.firebase.google.com. Check out this awesome blueprint. We can modify our features if we want. Then we can go ahead and hit prototype.

0:30 · This is one of the things that we're really excited for you to try out. Please reach out to us if you have any feedback.

0:38 · Super easy to share. You can have some awesome ways to get into the code. We have oneclick publish to even Firebase app hosting. If there's any features that need a Gemini API key, we'll even autoprovision a Firebase project and Gemini API key for you. So it looks like we just generated really quickly. This is all live and no edits. Say God.

1:00 · Thanks for watching.

1:02 · [Music]

Introducing Firebase Studio

Fri, 30 May 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Introducing Firebase Studio

Description

Discover Firebase Studio, an AI-powered agentive development environment that helps developers build and ship production quality full stack AI apps. From APIs to backends, frontends, mobile, and more, Firebase Studio is the tool you need to bring your ideas to life faster than ever.

Chapters: 0:00 - Firebase Studio overview 0:30 - Prototyping with AI 2:08 - Code mode and customization 2:36 - Preview and deploy 3:06 - Recap

Resources: Check out the docs → https://goo.gle/4micjGg

Subscribe to Firebase → https://goo.gle/Firebase

#Firebase

Speaker: Rody Davis Products Mentioned: Firebase,

Transcript

Firebase Studio overview

0:00 · [MUSIC PLAYING] RODY DAVIS: Hey, Firebase developers.

0:06 · Are you're ready to build full stack web apps faster than ever?

0:09 · We're excited to introduce Firebase Studio, your AI-powered development environment now available in preview.

0:17 · Firebase Studio not only helps you go from idea to fully functional app in record time by leveraging the power of generative AI, it also is a fully fledged development environment accessible from anywhere.

0:28 · Let's dive in.

Prototyping with AI

0:31 · Let's start with the App Prototyping agent.

0:33 · Imagine you have an idea for an app that generates an inspirational quote and then an image based on that quote.

0:39 · Instead of starting from scratch, we can just describe our idea into Firebase Studio.

0:43 · Log in to your Google account and then open up Firebase Studio to get started.

0:48 · Enter a description of the app that you want to build.

0:51 · In this case, we'll use the prompt to prototype an app that will generate images and texts with generative AI.

0:57 · Click on Prototype with AI.

0:59 · Firebase Studio generates an app blueprint based on your prompt, returning a proposed app name, required features, and style guidelines.

1:08 · This is the stage where you can really start to think about what you want your app to do.

1:11 · You can suggest new features or UI themes, and it will generate a new blueprint for you.

1:16 · If you do not want an AI feature or want something completely different, edit the PRD and remove it.

1:22 · For example, let's change the app name and color scheme.

1:25 · Make sure to be as detailed as possible if you have something specific in mind.

1:33 · Click Prototype this App and watch the magic happen as Firebase Studio App Prototyping agent scaffolds and builds out your app.

1:40 · Because we asked for an AI feature, Firebase Studio prompts us for a Gemini API key.

1:45 · We can then click Auto Generate to get a key and a brand new Firebase project.

1:49 · Now let's take a look at what we got.

1:55 · Click on Generate to create a new image and quote.

2:01 · If you want to check out the Firebase project it just created, click on the New name in the app header.

2:07 · Now let's take a look at the code.

Code mode and customization

2:09 · Firebase Studio gives you a fully functional code editor powered by Code OSS, the open source fork of VS Code.

2:15 · You have full control over the generated code.

2:18 · Want to tweak the UI, add a new feature, or debug the code?

2:21 · No problem, we have covered.

2:24 · You can use the built-in chat functionality to ask questions and get suggestions from our AI Assistant.

2:29 · You can even change the built-in model if you have a preferred one or want to try out an experimental one from the Google AI API.

Preview and deploy

2:37 · You can see your changes in real time with the built-in preview.

2:41 · And when you're ready to share your app with the world, you can publish it with Firebase App Posting.

2:48 · After publishing, you can continue to make changes and roll them out when you're ready.

2:53 · Now, while we showed off the App Prototyping agent flow, that's not all you can do with Firebase Studio.

2:58 · You can import existing projects from a zip file or source control, or start with one of our many Firebase Studio templates.

3:05 · Firebase Studio is an agentic cloud-based development environment that helps you build and ship production quality full stack AI apps, including APIs, back-ends, front-ends, mobile, and so much more.

Recap

3:16 · From AI-powered prototyping to an all-in-one, cloud-based development environment accessible from anywhere, it has everything you need to help make your app idea a reality.

3:24 · If you have an idea for an app that you've been wanting to build, try it out now with the App Prototyping agent with Firebase Studio and share with us how it went.

3:32 · We cannot wait to see what you're going to build.

3:34 · Happy coding!

3:36 · [MUSIC PLAYING]

Start prototyping with Firebase Studio

Wed, 07 May 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Start prototyping with Firebase Studio

Description

Did you know you can build an app with Firebase Studio? Rody, a Developer Relations Engineer for Firebase Studio shares how to build and deploy an app using the prototype feature.

Firebase Studio → https://studio.firebase.google.com

#Firebase #VibeCoding #AI

Speaker: Rody Davis Products Mentioned:, Firebase

Transcript

0:00 · SPEAKER: Have you ever wanted to build an app but wasn't quite sure where to start?

0:03 · Well, Firebase Studio has you covered.

0:05 · With Firebase Studio, you can get started with a natural language prompt that generates a full application backed by Next.js and Genkit that you can deploy with one click.

0:14 · Let's get started.

0:15 · Head over to studio.firebase.google.com.

0:18 · And let's enter a natural prompt such as "build an interactive canvas drawing application."

0:28 · And then once you're done with the prompt, you can go ahead and hit Prototype with AI.

0:33 · The first thing that it's going to do is generate a blueprint.

0:36 · This blueprint is an overview of your application and all the features that are going to be included.

0:41 · Make sure to edit it if there's anything that you want to remove such as AI features or something else that you didn't intend.

0:46 · Once you're happy with the blueprint, you can go ahead and hit Prototype This App.

0:57 · Once that's done, you'll see the preview become live with the app that we just asked it to generate.

1:03 · In this case, since it's a Canvas application, we can go ahead and draw.

Create simple, beautiful UI with Flutter

Wed, 11 May 2022 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Create simple, beautiful UI with Flutter

Description

Beautiful experiences and great UI don't happen by themselves, but that doesn't mean they have to be difficult! Watch two design experts apply simple, straightforward, incremental techniques to take a well-built but boring-looking app and turn it into something memorable.

Resources: Codelab → https://goo.gle/3Mn16SF

Speakers: Khanh Nguyen, Rody Davis

Watch more: All Google I/O 2022 Sessions → https://goo.gle/IO22_AllSessions Flutter at I/O 2022 playlist → https://goo.gle/IO22_Flutter All Google I/O 2022 workshops → https://goo.gle/IO22_Workshops

Subscribe to Flutter! → https://goo.gle/FlutterYT

#GoogleIO

Transcript

0:00 · [MUSIC PLAYING] RODY DAVIS: Hi, and welcome to our workshop about taking your app from boring to beautiful.

0:08 · My name is Rody, and I'm a Developer Relations Engineer on the Material Design team at Google.

0:13 · KHANH NGUYEN: And hi, I'm Khanh, a Developer Relations Engineer on the Flutter team at Google.

0:18 · In this workshop, we'll be walking through a codelab discussing a few tips and tricks that you can integrate into a Flutter app to take it from boring to beautiful.

0:25 · Now, Rody, why are we doing this?

0:26 · RODY DAVIS: When you're building with Flutter, one of the things that you may be facing is the app will feel very generic when you get done.

0:33 · Material provides some beautiful widgets that we can build with, but we have a lot more to do to make it feel like it's our own personal brand and customizing the theme.

0:41 · So today, we're going to be going over a lot of things that can really add that extra polish, such as typography, color, motion, animation, and overall responsiveness that we can make our app feel home at all the platforms that Flutter supports.

0:56 · So, Khanh, what kind of app are we going to be building today?

0:59 · KHANH NGUYEN: That's a great question, Rody.

1:01 · So once you have your Flutter environment set up, and you clone the codelab repo, and go ahead and run the starter app, you'll see that, for this workshop, we'll be working on an app that we like to call myartist.

1:14 · And we'll be implementing the changes here in order to make it beautiful.

1:18 · So myartist is a social music app that lets fans keep up to date with their favorite artists.

1:22 · So while we're here, let's go ahead and take a quick tour through myartist and see what we're going to be working with today.

1:30 · Here, we see the home screen for myartist.

1:32 · And so, at the top, you have a nice, little banner, updates from your favorite artists.

1:37 · You have the recently played playlists tiles, as well as the top songs for today, new releases.

1:44 · On the side, there is a navigation rail that has your Home screen, which we're currently on, Playlists, which has a grid of playlists, as well as the bright blue app bar that we know and love, as well as an Artists screen, which has a grid of your favorite artists.

2:01 · And so this is what it looks like on desktop.

2:03 · Let's scale this app down to be, say, mobile size.

2:08 · So when we scale it down, you'll see that it doesn't look really great.

2:12 · It's the same layout as before, but now everything is just kind of squeezed together.

2:18 · It doesn't look super great and, I mean, not to mention, the navigation rail-- the text is now gone, and these icons are identical, so you don't even know what you're getting when you tap on an icon.

2:29 · So don't worry.

2:31 · This doesn't look super great, but we'll spend time today making it look better for mobile and on desktop.

2:37 · So with that said, Rody, what's one of the first things that we should do here?

2:42 · RODY DAVIS: So I think one of the first things that we can do is start with our typography.

Google Fonts To Import the Material Icons

2:46 · We can use Google Fonts to import the Material icons, as well as a custom font.

2:51 · Now, the Material icons are included as part of the Flutter SDK, so we can actually choose some new icons that make sense for our navigation rail.

2:59 · KHANH NGUYEN: Yeah, so let's go ahead and do that.

3:02 · And so, in the first step of our codelab here, it just tells us to replace the icons to be icons that give the user a little bit more information on the tab that they're clicking on.

3:13 · So for those of you at home, you can just replace the icon itself, but for us here, I'm just going to replace the entire destinations list.

3:20 · It's going to look exactly the same.

3:22 · But for the sake of the screencast, this makes it a little bit easier than copying and pasting each icon individually.

3:28 · So jumping into lib/src/shared/router.dart, I'm just going to replace the entire destinations list, but you can just replace the icons themselves individually.

3:39 · So I'll just save that there and go ahead and hot reload our app, and we can jump over to our app and see what that looks like.

3:49 · All right, so now the icons are no longer the same.

3:52 · Let's see.

3:52 · Let's go down to the mobile view.

3:54 · Even though it's not ideal to have the navigation rail on the side like that, you now at least get icons that give more detail than identical icons that we had before.

4:04 · All right, so that does that for that first step of the codelab.

4:10 · So next up of this workshop is to talk about choosing fonts and how we can choose fonts thoughtfully.

Choosing Fonts

4:15 · So fonts will set the personality of your application, and that's why it's so crucial to pick the right font.

4:21 · So when selecting a font, here are a few things to consider, number one being serif versus sans serif.

4:28 · So serif fonts are this decorative sort of-- they have these strokes and tails at the end of the letters and tends to be perceived as more formal, whereas sans-serif fonts don't have those decorative strokes at the end, or those tails, and can be perceived as more informal.

4:45 · And for long blocks of text, generally, we'll see more of those serif fonts, but it can be a mixture, especially on the web and depending on the personality of your application.

4:56 · However, in this case, we'll probably want a sans-serif font because we're a social music app, and we want some fun.

5:02 · We want some personality, some more excitement, energetic, and playful sort of emotion to be tied to our fonts.

5:10 · In addition to that, when picking an all-caps font, consider this very carefully because using all-caps font can be useful for calling attention to small amounts of text, like, for example, headlines.

5:22 · But when it's overused, it can be perceived as you're shouting at the user, and they might just completely ignore that headline entirely.

5:32 · Another thing to think about is using title case versus sentence case.

Title Case versus Sentence Case

5:36 · So title case is when the first letter of each word is capitalized, whereas sentence cases when you only capitalize the first letter of the word, as well as proper nouns.

5:46 · So with title casing, that's considered more formal, whereas sentence casing is considered more conversational and informal.

5:53 · Other things I want to think about is kerning, which is that spacing between each letter, the line length, which is how long your lines run across the screen, and line height, so how tall the lines of your text are.

Kerning

6:06 · So too much or too little of any of these things can make the app less readable.

6:11 · So, for example, if you've ever read a very long string of text and lost your place when you jumped to the next line, that's probably because the line length was a little too long.

6:19 · So that's when you know you should cut down that line length.

6:23 · And so, for our app today, we've decided on a font called Montserrat.

6:28 · So let's go ahead and jump over to the Google Fonts page for it and take a look at it.

6:33 · So like we mentioned before, Rody and I went with Montserrat because we wanted a sans-serif font, and there's just a lot of styles available for Montserrat.

6:41 · So, essentially, we knew that if we picked this font, there would be a lot of variety, and we could use it for a lot of different use cases within the app, and not have to worry about picking a different font to go along with the one that we had already picked.

6:55 · So that's the font that we're going to use today, and how are we going to add it to our app?

7:00 · So we can add to our app by using the Google Fonts package for Flutter.

7:05 · So what we want to do is first go ahead and add the google_fonts package.

7:09 · And we can do that by running Flutter pub add google_fonts.

7:12 · So jumping over to VS Code now, let's go here and add our google_fonts package.

7:20 · So while that's adding there, let me jump back to the codelab and touch on this piece here.

7:25 · So for those of you who are building for macOS, do make sure that your entitlements files allow for network fetching.

7:32 · So we've already handled this for you in the codelab starter code, so you don't have to worry about it.

7:37 · But if you want to use your Google Fonts with your own apps, do make sure you have these lines added to your entitlements files.

7:44 · So, by the way, macOS is now in stable, so that's super exciting.

7:49 · All right, let's go ahead and jump back to VS Code and double-check.

7:53 · All right, so that's been added.

7:56 · All right, we should be good there.

7:57 · So now let's actually make use of the package itself.

8:01 · So we want to add the google_fonts package to our app.

8:04 · We want to import it into lib/src/shared/extensions.dart.

8:08 · All right, so we can jump in here.

8:10 · Conveniently, extensions.dart is already open here, so we'll go up to the top and import the google_fonts package.

8:18 · All right, so we'll save that.

8:19 · And what do we do next?

Code Lab

8:20 · Let's check the codelab.

8:22 · All right, so we just pull in that Montserrat TextTheme and wrap it around our existing TextTheme.

8:27 · All right, copy and paste it here into our-- whoop, I did not want to go to myartist.

8:34 · So go ahead and paste this here.

8:36 · So, Rody, looking at the file here, there's a lot of different TextStyles.

Text Styles

8:43 · Like, what are these?

8:44 · Like, textTheme.textLarge, text-- titleMedium?

8:48 · RODY DAVIS: Yeah, so these are the new Material 3 typography tokens.

8:52 · This should make it a lot easier to build with typography values and apply them to specific widgets throughout your Flutter application.

9:00 · These are just different semantic meanings, such as headlineLarge, Small, Medium, and they should match up pretty well with the type of content that you're trying to present.

9:08 · You can also, in addition to this, use opacity to help reduce emphasis of text that you don't want to be screaming at the user and to kind of fade into the background.

9:16 · As well as a quick note on the google_fonts package, when you import it, you can import anything from Google Fonts.

Google Fonts

9:21 · And you can optimize it at build time for production by including the font in your asset directory.

9:27 · KHANH NGUYEN: Yes, and the reason why I love the google_fonts package is because sometimes I want to try a variety of different fonts, and I don't need to download the individual fonts individually before I've already settled on one.

9:39 · So that's a great call-out there, Rody.

9:42 · All right, so that takes us to the end of typography.

9:44 · Let's jump to the next step in our codelab here and talk about setting the theme.

Setting the Theme

9:49 · So, Rody, take us away on this one.

9:51 · RODY DAVIS: Of course.

9:52 · So I'm not a designer, and one of the things that building with Flutter is you're dropped with a color theme that's blue on blue.

10:00 · Now, this is great for most applications, but we can do better.

10:03 · We can choose a color scheme that makes sense for our brand and our personal app.

10:07 · So we need to first start off with a ThemeProvider class.

Theme Provider

10:11 · This is the foundation for applying a theme to our application, and it wraps up all the different ThemeData widgets for, let's say, Navigation Rail, the Drawer and Scaffold.

10:23 · And this allows you to change all of that at once without having to customize that on every screen that you use.

10:29 · It also provides a color scheme, which is the basis for these new Material 3 tokens and can provide those fonts directly into that ThemeData object, which is the root of all your themes.

10:39 · KHANH NGUYEN: All right, so let's go ahead and create an instance of that ThemeProvider and pass it to the scoped theme object in MaterialApp.

10:47 · So let's go ahead and jump to lib/src/shared/app.dart and see what's up there.

10:53 · All right, so app.dart conveniently available here.

10:56 · All right, so this here says, "Create a theme instance."

Create a Theme Instance

10:59 · Let's go back to our codelab and copy that code to create our theme instance here and plop it in right here.

11:10 · All right, and then for the next step, we'll jump to this line here.

11:14 · Go ahead and copy that again.

11:15 · So here, we're just passing it the light theme from our ThemeProvider.

11:19 · So we can paste this here and save.

11:25 · All right, and I'm just going to jump over here and hot reload our app.

11:34 · I am just realizing now, Rody, we had never shown the new text, [LAUGHS] the new font that we updated.

11:42 · So let's jump back and take a look at that real fast while this is happening.

11:48 · All right, so let's jump back over here.

11:52 · There you go.

11:53 · So the thing that we forgot to show you earlier was the "Good morning" here.

11:57 · So because we went from one sans-serif font, like Roboto, to Montserrat, it's not very super obvious, but if you look at the shape of the text itself, for example, like this G here in "Good morning," you'll see that it's swapped now to the Montserrat font instead of the Roboto that we saw earlier-- just jumping quickly back to typography there.

12:18 · So next part that we were talking about was going to be the theme.

Theme

12:21 · So you'll see now here on the side's navigation rail is now a pink color instead of the Flutter blue that we saw before.

12:28 · It's just a little bit more subtle here.

12:30 · And so, as you can see on Playlist and the Artist page as well, we don't have the bright blue app bar any longer here.

12:38 · All right, so let's jump back to the codelab and take a look at our next step.

12:43 · OK, so this next step here talks about the Material Theme Builder, which Rody was telling me about not too long ago, and it feels like, well, just yesterday, Rody.

The Material Theme Builder

12:51 · So why don't you tell us a little bit more about the Material Theme Builder here?

12:55 · RODY DAVIS: Of course.

12:56 · Yeah, I'm not a designer, and picking color schemes for my Flutter apps has always been a challenge.

13:01 · But, thankfully, we've created a tool to help with this.

13:03 · It's called the Material Theme Builder.

13:05 · We can jump over and play around with some different colors that can be used as a source input for the new Material 3 algorithm, which will generate all of our colors, our light and our dark theme, based on that single source of truth.

13:17 · So once we do that, we can play around and see what looks good.

13:22 · You can override the different roles if you need to, but really, just need that one value.

13:28 · KHANH NGUYEN: So I get an entire theme for free just by giving it the primary color.

13:32 · RODY DAVIS: That's right.

13:34 · KHANH NGUYEN: Cool.

13:35 · All right, so what color are we feeling today?

13:38 · RODY DAVIS: I think it may be like a blue or a green.

13:42 · KHANH NGUYEN: All right, let's go-- how do you feel about seafoam green for today?

13:46 · RODY DAVIS: That looks great.

13:48 · KHANH NGUYEN: All right, let's take that.

13:49 · Look at that.

13:50 · That's a good color scheme, right?

13:52 · RODY DAVIS: Yeah.

13:54 · KHANH NGUYEN: All right, so let me go ahead and right-click on Primary and just copy that color value for that seafoam green right there.

14:02 · All right, so the next step is we need to add it to our ThemeProvider.

14:07 · OK.

14:08 · All right, let's jump back to VS Code, and we'll replace it in our app.dart file.

14:14 · So here, it says, "Replace this color."

14:16 · We'll go ahead and replace it here.

14:20 · Hm, we need to replace that pound sign with 0xff to make it a hexadecimal value.

14:27 · Let's add a const while we're at it.

14:28 · RODY DAVIS: And also another thing to keep note of is, if you see the DynamicColorBuilder, this is a widget that we can use to grab the dynamic theme from the wallpaper when a user is running this on Android that is running the latest version.

Dynamic Color Builder

14:43 · What's really cool about this is they can pick the colors from the wallpaper, and this theme will be now reflected in your applications.

14:49 · But Flutter runs on all the other platforms, so we'll need to fall back to this custom theme that we just defined.

14:55 · KHANH NGUYEN: Cool.

14:55 · Actually, this will need a hot restart.

15:04 · All right, there you go, performing a hot restart, and let's jump over and take a look.

15:16 · The we go.

15:17 · So now we see the navigation rail is using that nice seafoam green right there that we talked about earlier.

15:25 · Cool.

15:25 · All right, and so, so far, Rody, you've mentioned this color scheme, right?

15:31 · But so far, I'm only seeing this seafoam green that we picked out in the Material Theme Builder.

15:37 · And here, the next step in the codelab is telling us to add a box decoration to our OutlinedCard.

Box Decoration

15:43 · And I can see that, for the color, it's getting the colorScheme.outline.

15:48 · What are these different color roles that are available with the color scheme?

15:53 · RODY DAVIS: Of course.

15:54 · Yes, so the Material 3 system now includes these new color tokens that you can use for your applications, such as Primary, Secondary, and Tertiary, and Container colors and On Container colors.

Color Tokens

16:07 · And these are values that you can build with that are the same on light and dark theme.

16:13 · These values are meant to change at runtime, but give you the flexibility of choosing things that are going to be accessible, but where you don't know the value.

16:23 · And that lets you update your application and change your color without having to update any of the widgets.

16:29 · KHANH NGUYEN: Gotcha, OK.

16:30 · So I'm not checking if it's Dark mode or if it's Light mode and then returning a different color.

16:34 · I'm just telling you, OK, just use the outline color, whatever that is, based on the light theme or the dark theme.

16:40 · That's awesome.

16:41 · I love that.

16:42 · [LAUGHS] All right, let's go ahead and add the box decoration to our OutlinedCard, which is available in lib/src/shared/views/ and outlined_card.

16:52 · So let's jump over to our VS Code here, and let's scroll down.

16:58 · All right, so there's a nice comment here that tells us exactly where to add our BoxDecoration() code.

17:03 · And let's go ahead and save that and do a hot reload.

17:08 · All right, and jump over to myartist again.

17:10 · So now you'll see that the app is now-- these tiles in the app have an outline on each of the cards.

17:19 · So this is going to be in the color that is the outline color from our color scheme.

17:25 · So that's really nice because it adds just a little bit more separation between the cards themselves and the background as well.

17:33 · Neat.

17:33 · All right, let's jump back here and scroll down a little bit.

17:37 · So we keep talking about this dark theme, Rody.

17:40 · We don't even have a dark theme, so why worry about it, right?

17:44 · But, whoa, wait a second here.

17:46 · What is this?

Adding a Dark Theme

17:48 · Oh, we're adding a dark theme to our app.

17:50 · How do we just add a dark theme to our app?

17:52 · RODY DAVIS: Yeah, so thankfully, the ThemeProvider already takes care of the Dark theme for us.

17:56 · We just need to add it to our MaterialApp.

17:58 · Important note is this Dark theme is generated from that same color, so it's not just a monochrome scheme, and it'll look really great on both light and dark theme.

18:07 · In addition, we're also checking to see if the user has Dark mode selected on their system.

18:12 · And if they are, we're going to go ahead and show it, but allow them to change it at runtime if needed.

18:16 · KHANH NGUYEN: All right, that's awesome.

18:18 · So if we scroll down here, there's a nice comment again, two nice comments, to tell us exactly where to add the Dark theme and adding the themeMode to be passed through to the MaterialApp.

18:29 · All right, so I saved that there in app.dart.

18:32 · Let's go ahead and hot reload again and jump over to myartist.

18:43 · All right, so like Rody mentioned before, now we have a Dark theme.

18:47 · But we're basing it based on system settings right now.

18:52 · So I have Light theme enabled for my computer, but I can manually enable Dark mode for my myartist app by clicking this moon up here, and there you go.

19:03 · You see now we have myartist in a Dark theme mode, but it's still using that same seafoam green that we picked out earlier to seed the theme with.

19:13 · So that's super awesome.

19:15 · That's super nice.

19:16 · I loved it when Rody introduced me to it just because, usually, when I pick colors for my apps, I'll pick the first color.

19:22 · I'll know what this first color is, but then the secondary color, the tertiary color-- I tend to go by the philosophy of, I'll pick a color and hope that it works out.

19:33 · So having the Material Theme Builder to help me get to a nice color scheme was super useful, and I'm super excited about it.

19:41 · So that's it for theming.

19:43 · Let's go ahead and jump over to the next step of the workshop, which is making the app adaptive.

Making the App Adaptive

19:49 · Rody, want to take us away?

19:50 · RODY DAVIS: Yep, so when building with Flutter, you're going to come across a lot of new platforms that you may not be familiar with.

19:56 · For example, when targeting desktop, this is a keyboard-and-mouse-only kind of mode.

20:02 · There are some form factors out there that even support touch, but then your app can be running on mobile, where it's only going to be touch and gestures, and sometimes a keyboard, as well as maybe a TV or some other kind of form factor that's a gamepad.

20:16 · And so, when building with this, you're going to-- adaptive means taking these different forms of input as stylistic choices when you're building for your widgets.

20:26 · You can adapt each widget based on not only the screen resolution but the type of input that you're going to be receiving.

20:34 · So one of the first things that we can do is actually change the navigation to help the user change targets a little bit easier.

20:42 · When building with a bottom navigation, it allows the user to tap it with their thumb as opposed hard-to-reach places like the navigation rail.

20:50 · KHANH NGUYEN: All right, so let's go ahead and make that change.

20:53 · So like Rody mentioned, let's go ahead and add the mobile layout for our bottomNavigationBar.

Bottom Navigation Bar

21:01 · And we can do that in lib/src/shared/views/adaptive navigation.

21:05 · And, conveniently, we have that in our VS Code.

21:09 · So let's go ahead and look at adaptive_navigation here.

Adaptive Navigation

21:12 · And here, there's a comment that tells us exactly where to add the bottomNavigationBar code.

21:19 · However, we're never going to get to that code because, well, we're returning the Scaffold at the top.

21:24 · So let's add the conditional check to make sure that we return the Tablet layout only when it's actually tablet size or larger.

21:33 · Otherwise, we're going to return the bottomNavigationBar for mobile.

21:38 · And so we can add that here by checking the dimensions that's being passed through to the LayoutBuilder.

21:44 · So we'll go here.

21:47 · We'll add this if statement up top and then add a closing bracket.

21:52 · All right, there we go.

21:54 · We save this.

21:56 · And, whoop, we did not want to do that.

21:58 · We do this.

22:04 · All right, it's hot reloaded, and we'll jump back over to myartist, and voila, you see now there's a bottom navigation bar on mobile when you're in mobile size.

22:13 · But if you scale it up a little bit more, we get back to the navigation rail that's still there.

22:19 · So adding this navigation bar at the bottom now just makes it a little bit easier to access the various navigation menus when you're on mobile.

22:28 · All right, and jumping back to our codelab, we'll go down a little bit more here.

22:32 · And, Rody, do you want to talk a little bit more about the layout for the home screen and how we can improve that a little bit more?

22:40 · RODY DAVIS: Yeah, so when building with Responsive, you need to operate off of things like a column grid, as well as a set of break points.

22:49 · We have added these here on the extension method under the BoxConstraint.

22:54 · So we can check to see if we're on these different devices.

22:56 · Now, on the home screen, there's different things that we can do to take advantage of the screen real estate, such as we can use a DataTable versus a ListView on tablets and desktops, where the user is operating it with a mouse, and they want to see more dense information.

23:13 · Another thing that we can do on the home screen is actually change this content into a TabBar and a TabBarView.

23:18 · Now, there's many reasons to do this, but one of them being that the content is related, and we can let the user just not overload them with a bunch of information all at once.

23:28 · And this also is easy for them to change between the content by swiping between it with their thumb.

23:34 · KHANH NGUYEN: OK, so the next step in the codelab seems to be breaking up that content into the TabBarView by checking if it's a mobile device.

23:42 · And if it is, it returns that TabBarView that Rody just mentioned.

23:45 · So we'll go ahead and add that TabBarView to our home screen by copying this chunk of text here within that if constraints.isMobile.

23:54 · And we'll go ahead back into our VS Code.

23:59 · Let's X out of adaptive_navigation here.

24:01 · Whoop, let's make sure I save this to make sure I have everything I want there.

24:06 · Let's get out there and jump over to home_screen.dart.

24:11 · So that will be lib/src/features/home/view/home screen.dart.

24:16 · And wow, just have that conveniently open.

24:19 · So we'll go ahead and add that at the very top here of the build() method, which says, "Add conditional mobile layout."

24:27 · So easily just paste that in there, and we'll go and hot reload.

24:37 · All right, that's running.

24:39 · While we do that, let me jump over here.

24:42 · And so there we are.

24:44 · So you can see that layout just quickly changed from that layout we had on mobile but just squeezed together in a smaller screen, now to the TabBarView, which breaks all of the content on that home screen now into a separate tab so that it doesn't feel as scrunched up into one screen.

25:02 · So that looks a lot better already.

25:05 · All right.

25:06 · Whoop, I did not mean to open that directory.

25:09 · All right, OK, cool.

25:11 · So now that we have the mobile layout on mobile devices, we'll want to jump back to the desktop and make a few modifications there.

25:22 · So if I go back to desktop-- there we go.

25:26 · We want to open myartist again and scale that open to, say, desktop size.

25:32 · All right, that's what we want.

25:34 · It looks a bit better.

25:35 · All right, so from here, let's talk about white space.

White Space

25:40 · So with white space, it's an important visual tool to use for your app, using it as an organizational tool to break up sections and pieces of content.

25:51 · So, personally, I find that it's better to have too much white space than not enough because when I add too much white space, I notice that it's too much white space and that I will have to remove white space.

26:04 · However, when I don't have enough white space, I have a tendency of saying, oh, no, I think that looks fine, or I'll reduce the size of the font, or reducing the size of an image when I really should be doing that for readability and just for visibility purposes.

26:19 · And so, for me, the process with adding white space is, I'll go too much.

Adding White Space

26:23 · I'll add too much.

26:24 · I'll be very heavy-handed with adding my white space.

26:26 · And then we'll go back and iteratively tweak that a little bit more to our liking so that there's just the right amount of white space.

26:34 · And so here in the codelab, there's a great example with myartist of not having enough white space and having too much white space.

26:40 · The too much white space, I think, is a little bit more obvious in that there's way too much white space, whereas the first image is-- well, it's tolerable.

26:49 · There's not a great amount of white space, but it's fine, right?

26:53 · So let's go ahead and update the padding on our home screen.

26:57 · So there is a few lines here that tell us to modify the padding values to 35.

27:02 · So let's go ahead and do that.

27:05 · And while I know I could probably just go through and do a find and replace for all of the EdgeInsets.all() value, I'm going to go through it and update it manually because I find that this keeps me aware of where I'm changing the values, and it gives me a better idea of what to iterate-- what number I should use next when I'm going back and forth and trying to find the right amount of white space.

27:28 · So we'll update this to 35, maybe this 35 as well.

27:33 · Let's update this here and here.

27:37 · And that should be it.

27:39 · That is all that we're going to update for now.

27:42 · So, with that, we'll save this file and go ahead and hot reload.

27:50 · All right, and so we'll jump back to myartist.

27:54 · And you can see that white space just changed there.

27:56 · There's a lot more space available now, a lot of room to breathe for all the content.

28:01 · But this banner at the top here still does not have enough padding on it.

28:06 · It does not have enough white space around it.

28:08 · So let's go ahead and fix that as well.

28:11 · And that just happens to be the next step of this codelab.

28:14 · So we'll jump into the lib/src/features/home/view/home highlight and update that to be a 35 padding as well.

28:23 · So here, we'll go to home_highlight and change this to a 35.

28:31 · All right, we'll save that and hot reload again, then jump back into the app.

28:35 · OK, there's a little bit more white space now.

28:39 · All right, and you can see the edges came in just a tad bit more.

28:43 · All right, and so if we jump over here, let's look at the next step.

28:48 · So this here calls out the two playlists at the bottom.

28:51 · Let's look at the live app and take a look here.

28:54 · So these two tables don't necessarily have anything in common.

28:58 · They're two separate entities.

29:00 · But, when you look at this table, you think, oh, these two tables are related because, well, they're connected.

29:05 · They're one table.

29:06 · So what's the relation?

29:07 · An easy solution here is to just add some space in between so that we can separate the entities that they were meant to be.

29:14 · So if the Top Songs Today was separate from New Releases, people wouldn't be thinking, hey, what do these playlists have in common?

29:21 · So with that, the next step is just add a SizedBox() in between those two playlists.

29:28 · So let's go ahead and jump over here and add the SizedBox() in home_screen.dart.

29:36 · So if we scroll down a little bit here, we can add that SizedBox().

29:40 · But, Rody, do you want to tell everyone why we are using a SizedBox() here instead of, say, a Container?

Why We Are Using a Size Box

29:45 · RODY DAVIS: Yeah, so you want to use a SizedBox() anytime you're only changing layout because a Container can actually have a performance penalty if you're just using it as your default. And there's a lot of other things that can use.

29:58 · Like, you can just use padding as opposed to adding padding into Container and a bunch of other animations and decorations.

30:03 · You can use DecoratedBox() and so on.

30:05 · So try to use SizedBox() when possible.

30:07 · KHANH NGUYEN: Exactly.

30:08 · All right, so here, we jump back into the playlists, and we see now there's just a little bit of space, and they both look like they're separate tables now as opposed to one connected table that could have some relation to each other.

30:23 · Right there.

30:24 · All right, and let's go to the next step in our codelab.

30:29 · All right, so from here, we're going to continue refining our white space.

30:33 · So we talked about earlier that we have a lot of space to breathe, but this is probably too much.

30:39 · So you can fine-tune those padding values a little bit more.

30:42 · So while I go ahead and input the new padding values that we want here, Rody, can you share a little bit about the different EdgeInsets methods that you can use?

Edge and Sets Methods

30:51 · RODY DAVIS: Yeah, of course.

30:52 · So there's a bunch of new EdgeInsets things that you can use that are constructor values.

30:59 · And these are part ones that you can apply to set it differently and asymmetrically.

31:06 · So first off, you got left, right, top, bottom, which does exactly that.

31:10 · It lets you apply it in that order.

31:12 · There's also symmetric(), which allows you to apply padding just on the vertical or horizontal part of it.

31:18 · And then we also have only(), which lets you choose a specific side and add that padding, which is useful for just nudging it a little bit into the place that you want it to be.

31:28 · So, especially when you're building with a 12-column grid, this allows you to align those things just right.

31:35 · KHANH NGUYEN: All right, so Rody was just a tad faster than me there, so I'm still making these changes here.

31:39 · So let's go ahead and put in the final changes.

Final Changes

31:43 · So these last two, Top Songs Today and New Releases, will have the same EdgeInsets value.

31:50 · So I'll save this here, and we should be good to go.

31:53 · So let's go ahead, and we'll hot reload again.

31:58 · All right, and jump over to app.

32:01 · All right, that's looking a lot better already.

32:04 · There is some white space.

32:05 · There's room to breathe, but not too much.

32:07 · But right now, there's still a little bit too much white space on the banner.

32:11 · So, of course, conveniently, that's also the next step of the codelab.

32:15 · So we're just to update the home_highlights.dart padding again just one more time to get it just where we want it to be.

32:24 · So jumping back to home_highlight, we'll replace this file, this padding value here, and jump over to-- actually, we're going to want to hot reload and jump over to [INAUDIBLE].

32:40 · There you go.

32:41 · All right, that's looking a lot better.

32:43 · We added more white space so that there's room to breathe, but everything looks a lot more cohesive now than before.

32:51 · All right, so let's jump over to Chrome again.

32:54 · All right, and so that's it for adaptive design.

32:59 · Lastly, we want to talk about motion and animation.

Motion and Animation

Animating between Screens

33:03 · Rody, do you want to talk about animating between screens?

33:05 · RODY DAVIS: Yeah, of course.

33:07 · So, on desktop, users expect things to be a little bit more precise and snappy.

33:12 · So one of the ways that we can help with this is taking out the animation completely when you're on Linux, macOS, or Windows.

33:19 · We want to keep those animations for mobile, however, because it provides that sense that something is happening, and the users are expecting it.

33:27 · It may also cause jank if everything is just jumping around, and they don't know why it's happening.

33:32 · So you can go ahead and add those into the ThemeProvider and apply it easily.

33:36 · KHANH NGUYEN: Awesome.

33:37 · So the pageTransitionsTheme here, where we define the transition for Android, iOS, Linux, macOS, and Windows-- that's already provided in the theme.dart file.

33:48 · So all you have to do is use it.

33:49 · And you can use it by adding just these two lines here, passing in the pageTransitionsTheme to the Light and Dark theme, as Rody mentioned.

33:58 · So let's jump into VS Code and make those changes.

34:01 · So if we go to lib/src/shared/providers/ and theme.dart, we can add the page transitions here.

34:12 · All right, I will make sure we add a comma here and at the top.

34:18 · RODY DAVIS: So how does this look on a simulator?

34:20 · KHANH NGUYEN: So how does it look on a simulator?

34:22 · That's a good question, Rody.

34:23 · So there are screenshots.

34:25 · Well, not screenshots.

34:26 · There are screencasts.

34:27 · There's GIFs right here, which show us exactly what it looks like.

34:30 · So you can see, with that animation on iOS, it looks very choppy.

34:35 · It looks like there's a delay when the screen is loading, whereas with the animation, it looks very smooth and looks native to mobile.

34:44 · So that's exactly what it looks like, whereas on desktop, as we can see in myartist right here, there is no transition, and that looks much better on desktop.

34:54 · And it's much more of what users expect for a desktop app.

35:00 · Cool.

35:01 · And last but not least are hover states.

Hover States

35:03 · Rody, why do we want hover states?

35:06 · And what's so important about it?

35:09 · RODY DAVIS: Yeah, so when you're on desktop, one of the things that you want to do is provide additional feedback that you don't get on other devices where it's touch only.

35:18 · For example, when you're hovering over something, if something's clickable, you want to maybe change the border radius or the color to just provide that extra feedback to show that you can click on something.

35:29 · And then, in addition, you can even change the mouse cursor on desktop that you can't on mobile.

35:35 · KHANH NGUYEN: All right, so now we're going to add the hover state to our OutlinedCard.

35:41 · And here, for the codelab instructions-- tells us we're just going to replace the entire OutlinedCard code.

35:46 · So I'll go ahead and copy this huge chunk of code here and go ahead back into VS Code.

35:53 · If you go into lib/src/shared/views, and then we jump into outlined_card.

36:01 · We were just in this file a few steps ago, so we can just select all, delete that, and paste this here, and save.

36:11 · All right, and we'll go ahead and hot reload that and jump back into myartist.

36:19 · All right, so once that's hot reloaded, you'll see just there, the corners now are a little bit more rounded, but when you hover over top of it, the opacity animates.

36:27 · It changes, as well as the border radius on the cards.

36:31 · So that gives users just a little bit more feedback when they're hovering over things that are clickable, like these cards.

36:38 · All right, and so jumping back to the codelab, we have just one more step to go here, and that is-- well, this entire time, we've been talking about a music app, but we haven't played any songs because we haven't come across any Play button.

36:53 · So what we could do here is add a hoverableSongPlayButton widget that we've defined for this app in particular.

Hoverable Song Play Button Widget

37:01 · So what we'll do is we'll add this hoverableSongPlayButton widget.

37:05 · We'll wrap it around our song rankings for our playlist.

37:10 · So that way, when you hover over the numbers, the number-- that animates into a Play button that you can hit play on.

37:16 · So I'll copy this chunk of text here and jump into playlists and playlist_songs.

37:23 · So let's give the VS Code a moment here and jump into playlist_songs.

37:28 · So that's under lib/src/features/playlists/view/ and playlist_songs.

37:34 · So here, there is a nice, little comment to tell us that we want to wrap it in the hoverableSongPlayButton.

37:40 · Don't forget to close the parentheses here and save.

37:46 · All right, and so we'll jump down here, give it a hot reload, and check out the app.

37:55 · All right, so it hot reloaded.

37:56 · And so now, when we hover over the top songs, you'll see it animates into the blue-- into the Play button here.

38:04 · And here, you'll see the bottom bar is a blue color.

38:09 · And so that is a tertiary color that will go along with the seafoam green that we had picked earlier but so that the entire app is not just the green color that we picked for the primary value.

38:22 · So with the Material Theme Builder and the sea color, the color scheme that comes back-- you'll get a variety of colors so that you're not stuck with just your primary theme color.

38:33 · All right, and so that just about does it, and that brings us to the end of this codelab.

38:40 · And that's it.

38:41 · That takes us to the end of our workshop.

38:43 · Rody, what did we do today?

38:45 · RODY DAVIS: So today, if you remember, when we started, we had a very generic app that had the blue-on-blue theme and the Roboto font.

38:52 · But by using a Montserrat, a custom theme that we pull from Google Fonts, we were able to make our typography feel very personal to our brand.

38:59 · We picked out a color.

39:00 · We're using the Material Theme Builder, and we're able to generate a Light and a Dark theme that looks beautiful in both contexts.

39:06 · We made our app adaptive for mouse and touch input, so it feels good.

39:10 · And we made it responsive on all the break points that Flutter is going to be running, as well as adding white space for making it dense and comfortable in the various modes, and motion and animation for those little bit of extra-polish features that the users expect.

39:24 · KHANH NGUYEN: Even with everything that we've just touched on, as Rody just mentioned, this is really just a starting point.

39:30 · Design can vary in everything specific to a particular project.

39:33 · Hopefully, you're able to take some of these tips and tricks and implement it into your own app.

39:38 · So it's our first codelab, and it was a lot of fun to work on, but we'd like to know from you, how can we improve on this codelab?

39:44 · Do you have design tricks that you like integrating into your own apps?

39:48 · Please do let us know.

39:49 · If you're interested in learning more, check out the next steps and related content on the codelab.

39:53 · As always, Flutter.dev and Material.io will be the place to find more information on Flutter and Material.

39:59 · So thanks for joining us on our journey in making this app beautiful, and we'll see you next time.

40:04 · Bye.

40:04 · RODY DAVIS: Bye.

40:05 · [MUSIC PLAYING]

Flutter Plugin - Live Coding - Native Color Picker

Wed, 01 Apr 2020 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Flutter Plugin - Live Coding - Native Color Picker

Description

In this video I walk through my debugging and plugin creation process!

Source: https://github.com/rodydavis/native_color_picker

Transcript

0:00 · hey guys my name is ready today we're gonna be building a native color picker for the web maybe later on we're gonna add iOS and Android but at least right now we're gonna focus on the web so first of all what you're gonna go ahead and do is create a folder and then open up that folder in vs code let's go ahead and create the default package so flutter create - package and then we're

Create the Default Package

0:28 · just use dot I so as we know we're already in the folder let's also create the example perfect now to get this

0:50 · registered let's go ahead and reload the window once this finishes and let's go ahead and remove all the comments if you're curious about some of the extensions I'll be using I have removed all comments right here and we also have

1:15 · I'll be using remove blank lines right here as well as the flutter plug-in so here we have this this is deprecated so we can remove this let's go ahead and add our URL

1:42 · and our SDK level is good you can go ahead and update the description

2:07 · perfect and let's go in and remove this of test for now so what we're gonna do first is we're going to be creating a federated plugin that only works on the web at the moment so let's create a source folder and a native color picker

Creating a Federated Plugin

2:43 · let's go ahead and export that this is useful for the way dart deals with files and we can also give it a version that people care about it okay

3:12 · now we want to have a couple different files in here we're gonna have a web dart a impl dot dart and you will add a

3:33 · a mobile tart and a desktop pop tart since all these could be done in different ways and it should be it so now this file is going to use conditional importing and we actually need to add a unsupported

Conditional Importing

4:05 · this will be our fallback on the puffiness we don't support so to start off since we're only supporting and actually we can remove this I can put this here this will make sense in a

4:22 · minute so we can go and delete that all right so we have these files right here we're gonna start off with the impl because this will allow us to implementation as well short for it but it allows us to define our interface at the other classes are going to override so we're going to do abstract class let's call it color thicker feel perfect

4:50 · and then we're gonna have a let's just give it a generic class of a function I mean sorry color this method will be let's do pick color and we can update

5:11 · this as we go to so one of the nice things about this is that it's flexible okay perfect actually we want to declare this without a function body since we want it to be overridden okay so let's go over to web this will be the one we start on recall color let's do native color picker native color picker extends color pickle on

5:45 · implementation let's go ahead and import that and we see we need to override it so in this case we're also going to be importing HTML we can do this because we don't have to worry about dart i/o or anything else in the native side since we're conditionally importing it right here so let's look at this API so this

6:16 · is the API that I found what's cool about it is it offers a native functionality so like if you click a color on Chrome for example it'll pop up the Mac OS color picker which is super cool giving you also the option for an eyedropper and then on Safari and mobile

6:35 · it'll even have a special array type and then you can click show colors and also show this too I just thought this was super neat and it even shows a special keyboard on mobile so something the browser supports so we need to look up this API so we have a lot of the ways I find the documentation for some of this stuff for dart and the web is from angular dart and dart just being used all the web so we can try searching for

7:09 · actually we need elements so let's go ahead and and look at this and see what it provides

7:30 · okay you got this is some of the default ones I've used the file upload one before let's see if it's already defined so let's go back to our web and we can go ahead and close these out so let's see what we got color and put element let's see we have

8:15 · a couple different types but we need specifically the input one so

8:35 · it's actually open back up the API documentation so it's type of color you can give it a

8:53 · name let's also give it a value so this will be you can also pass in that default value so let's go ahead and add this this we need to put it into a hexadecimal form and I'll show you guys how to do that so let's go back to here I'm going to do color color default or

9:19 · let's do value this way if the colors user selects a color the next time they go to select it though so it'll pre fill it with that correct color so let's go ahead and add nothing here you can do right here if it's not equal to null you're doing I'll go duplicate it all right let's see we can do let's see how

9:57 · we can convert to hexadecimal together pulled up three here

10:24 · I have this function let's go ahead and drop it in we need color package so let's go ahead and then pour top

10:49 · so we're curious let's go ahead and import this here it's around packages get awesome so now this will take our color value and return a hexadecimal CSS string which is what we need so here C

11:15 · does that we're gonna put the pound sign for us see what provides yes it does provide it perfect so we can do color implementation cutter string and can put our color right there awesome sweet so

11:42 · that should be good to go now we just need to return the color once they select it so let's first of all just test to see if this works let's open up error example do the same thing as earlier remove all comments you can format it lets depend on our current package so you select it is just saying

12:08 · to look up one root look up one directory so we can import it we're gonna have about there so we're just testing this out let's do let's just make the increment counter call this function so you called native color picker

12:38 · make sure it's imported current packages kit oh we need a sorry we need to add one more thing let's go down to unsupported we always have to have this just do class here extends just like before whoops Collin in here we're gonna do something

13:11 · a little bit different but it's still fine import it and override perfect if you just hover i'm unimplemented error you can say not supported and let's go back here subscribe this perfect that's what we wanted and you change this to a a

13:50 · singleton so it looks a little bit better you can say here this is just for example but see right now it's just grabbing it let's go ahead and run it on the web we can also create a launch file

14:16 · just for simplicity okay perfect let's go ahead and move this to the left it's a cool application by the way it's called Divi allows you to kind of put things side by side this is a really awesome API suite so we can also do some autocomplete as well it's pretty good listing

14:51 · we'll also need this is where we're going to do next is we're going to have the the callbacks for the color awesome okay let's see what happens if everything goes well let's just show the native color picker

15:28 · and did not do we either provide a color to begin with let's see let's try giving it a face one so stop let's do red

15:57 · interesting let's check the console let's go ahead and print out just to make sure that we're not crazy

16:22 · ah there we go oh this is a hot rail oh dear and we need to reload from the beginning for missing anything okay let's try that

17:00 · again it is saying picking color so there's something else going on okay I'm gonna look up my image picker that I made just real quick

18:01 · let's see file access

18:23 · but this the class let's see what we need to do

18:57 · hmm interesting file upload input element we did this with the color but this is different let's see if we're doing the wrong type hidden' input let's try that one hope

19:34 · let's go to the definition

20:03 · let's go back to that go ahead and stop the application to oh because she's in input element of type oh here we go let's try that

20:58 · that's what we want let's try that it's going around again

21:23 · does not support Internet Explorer useful hmm see if we're doing anything wrong

22:07 · yeah I think it might be quick instead of so large

22:31 · okay let's see what happens awesome hey there we go so that's perfect so now you need to take the callbacks so let's look at this again so we got a couple

Callbacks

23:02 · different listeners we got input listener oh this is a different one sorry it's our load let's give it a fallback color - it looks like people are early looks like that's a thing so

23:48 · awesome are we gonna fall back to white and let's do our callback

24:07 · mm-hm Justin uptick first is

24:28 · mm-hmm so we called for every value and then this one is called for glass value interesting so we probably would like to

24:46 · do this in a strange kind of based but we still want to have the option to pick the first one let's build it with this first so let's go ahead and create this into a future st. for the implementation

25:12 · and same for the web person for the yeah you know I mean okay let's do take first

25:34 · so when you add an event listener input see if there's a different way let's call back nope okay plus to our value

Event Listener

26:09 · which is Hopi a string

26:28 · selected color is not equal to null we're going to kind of wait for this we're gonna also break it out when they cancel so you can set that here see it does do select right here which is weird but it's fine

27:00 · use capture also let's go ahead and do that

27:42 · it's definitely the target value how we may need to cast it

28:10 · okay perfect let's do this one right here and now we want to return the color and we have a function for that too because now we want to convert it back to a flutter color so color from string

28:38 · there we go let's use our same implementation turn color from string awesome now this may go into an infinite loop on the first time but let's go ahead and just make sure we print out these two different listeners

29:24 · okay let's go insert application

29:46 · and you do air handling next to so we have our debug window select it interesting okay it closed still receiving them see if we can print this out

30:37 · okay let's try that again so we immediately returned a big thing how's it equal to null that's what we need

31:07 · oh look at that there is our color that is perfect now what we could do well say we need to do in a functional way I just have a call back it might be better in this approach let's do this

31:49 · we're going to do function color [Music] and value there we go let's go ahead and add that to our unsupported and let's

32:14 · add to the web because in actuality I mean they can pick multiple colors not just at one time and the user could just stop listening once they get the first one but I mean in theory they could just have this thing up to their side doing whatever just go ahead and choose huh now we can remove our while loop and put this here

32:56 · okay perfect perfect and now we need up this ooh yeah change that does not look good too [Music]

33:33 · see I was fine I can actually make this there we go since it could be optional so you get optional here let's go back to our example gonna have a color so this is

34:08 · gonna be our value each time that we want to kind of pass it in and you do if on to set state color is equal to color and we can also print it out just so we can see what it is

34:33 · and for to be fun let's go ahead and set this as the background color run the example

35:02 · Paul goes well we should be able to change the background-color each time there you go oh look at that that is sweet that is really cool and what's crazy is we can actually do an eyedropper to itself that is wicked cool

35:39 · interesting it stops listening for that let's try to you oh that's awesome cool wow that is so cool alright let's go ahead and quit that now let's go ahead and handle edge cases

36:08 · okay this looks really good so you gotta remove that old code probably want to this could be null so we can actually wrap this as a callback so date color

36:55 · okay and then we can do try-catch right here for the edge case that it's over null and then right here we can try to see if it's not null okay let's go ahead and print this here

37:27 · perfect cool we have a way to do this on desktop too but I'm just trying to debate if we want to or not they can do desktop and mobile

37:54 · at the moment but web would be the one that we get Smith the one point out with yeah that'll be good so let's after you query package you need to update the change log so here to added color for a web change the version here so let's update the example so let's

38:33 · create an icon button here whoops what I do there done this one Oh

38:57 · too many yeah that's weird no I love let's try that again oh here we go perfect do the pallet okay select that I

39:21 · like to add it here usually you can do the three back ticks with dart to have the syntax highlighting I'm going to copy this add this here and then I like to usually copy the function so we can kind of get a call back directly

40:25 · since that's by default we go cool you

40:55 · and I spelled that all right um yeah that looks good now we just need to publish first this

41:19 · is another thing that I like to do this allows you to do demos so let's go ahead and CD into the example its to flutter build web so we can give a release build and while we're doing that we need to update let's go ahead and add it to God

41:53 · let's do add existing packages go right at the top perfect create a positive it is perfect

42:22 · so either both the thing here let's go ahead and open this up and finder actually I created a git repository inside of the example so you go ahead and delete that awesome I think base project make it public for all you guys let's go and publish that I

43:06 · build is done so we're going to go in and copy to build web folder copy all the contents and paste it inside Docs to adding demo I do the same process on all

43:30 · my packages so if anyone's curious just go ahead and add github pages and the docs folder copy that URL

43:52 · going at it here it's always nice to have topics and let's go back to a

44:07 · project and right here I want to do online demo suite and since I have other packages to I like to add the banner for what I have on most of my stuff so here we can go to plugins

44:39 · let's do flutter MIDI yeah now let's do something else oh I need to add one there student

44:56 · master crunch well we need to add these anyway so go ahead and add these at the top oh it is there okay so now we can swap this out perfect and less time to

45:22 · publish you gonna do flutter back let's go ahead and clear this flutter let's go back up one directory widget flutter package is published we might get an error that's okay yep there's a there's a weird issue on the master branch right now flutter but that's okay we can do public trees publish that'll force it

46:00 · interesting what are we missing your author

46:31 · perfect that's what we want click yes and we are good to go so now if we update this and then view this one your hope

47:02 · and this should work make sure that's correct give color picker you've got a bigger little calibrator I just probably cuz that's new

47:30 · very fresh weekend all right let's try the demo perfect we need to fix that so also show you how to send update

48:05 · you sure we called it correctly yeah I come increment looks good to me let's try it again let's just make sure our example works [Music]

48:51 · okay so it is still working we need to also disable that for here flutter or debug check one painter falls oh of course we need to also add a dark theme for the demo all right let's go ahead and build it again and we'll just copy those files up

Dark Theme

49:55 · let's go ahead and copy those it's good I thought just go ahead and see if it's building occupied just first before we publish

50:33 · interesting is only working on Chrome

50:50 · okay so probably have an edge case for that but that'll be another video all right thanks for watching if you want to see more like this be sure to subscribe just thought it would be cool for anybody that's curious about package and plug-in development for flutter reach out to me I can follow me on github and Twitter and everywhere else yeah thanks again

Introducing the signals_hooks package for Flutter hooks and signals

Sat, 01 Feb 2025 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Introducing the signals_hooks package for Flutter hooks and signals

Description

Website: https://rodydavis.com Twitter: @rodydavis BlueSky: @rodydavis.com Github: @rodydavis Patreon: https://www.patreon.com/rodydavis Buy Me A Coffee: https://www.buymeacoffee.com/3mgFNYd

Transcript

0:00 · hi my name is Roy so today I released a new package called signals Hooks and you may be wondering how that might work or how you can use it in your flutter apps so today I'm going to create a quick example on how you normally would work with variables and flutter how we migrate it to signals and how signals hooks can make it even easier when working with the flutter hooks package all right let's get started so first I'm going to go to my flutter idx instance

0:30 · and I just have a default counter example this example does nothing more than you set State and this is probably something you're very familiar with in fact we can go in here and create this a value Notifier and this should already start to add some ergonomic benefits we can remove the if state

0:57 · check here and we want to to wrap this one with a value listenable Builder so usually I wrap it with Builder value listenable Builder we're going to do count and we can get out the value

1:17 · and the child awesome so now when we restart we get a count update as normal so this is already really really cool and offers a unique advantage over set state but let's take it further with signals so let's go ahead to your terminal and do flutter Pub add signals this will update your Pub spec yaml and allow us to import it inside of

1:48 · um here so we can change this to Signal importing the signal flutter package and everything else stays the same and because signals created after 6.0 are value listables and value notifiers we don't have to change any code which is really cool if we wanted to be uh use more functions out of the modern signals package we can do the new signals mix in

2:18 · which allows us to change this up a bit and do create signal and we can remove this unneeded Builder since this will automatically get rebuilt every time that we change our

2:39 · value so here as we expect count increments so I think this is already really cool offers a lot of advantages over just defaults at State uh the more we chain computed the better our performance will get but one thing that has been a challenge when working with signals and flutter is you still want to be able to create reusable logic

3:02 · with signals and I think this is actually where um hooks is actually going to help so we can go to our terminal and do flutter Pub add flutter Hooks and the new package called signals

3:22 · hooks so for those that are probably not used to hooks in flutter this hook books is a kind of replacement for State full widget which allows you to bind to the life cycles of disposing en knitting and having logic that's collocated with that

3:43 · single widget but to be able to be shared across multiple stateful widgets and it's actually really easy to migrate so we can just go in here and call hook widget as our new extension we can go and delete all this

4:05 · perfect and we going to remove this remove this because now this is going to go inside of the build method U I'm going to use the default um hooks implementation so we're going to do use

4:26 · State and for the on press call back we're going to do value Plus+ under the hood this is actually a value Notifier which is very similar to what we just talked about and because signals automatically does a two string method that's reactive we have to explicitly declare it here awesome really cool so now how do

4:54 · we use the new signals hooks package well we can go in here and instead of you State we can do use signal and we can import it and now remove that unnecessary

5:11 · call and one final time it rebuilds as expected what's really cool about this is we Define this logic inside of our build method and it doesn't matter how many times we call the build method this signal only be called once based on how normal hook are created and we can go in here and do other cool things like count Str Str which is a use computed that we will explicitly call

5:42 · count value to string and when we grab this we can add it into

5:57 · here I'm going to rebuild this this is now pulling from the computed value which is then pulling from the The Source signal and we can also even add effects right inside of the build method so we're going to do use signal effect which is different than the use effect in hooks which allows you to react only when specific signals change so we can go in here and do print

6:27 · count value [Applause] and hit save and now in our terminal right here we can see through our log messages if I pull it up there we go it's only being called

6:51 · one time you don't get the exponentially increasing number of listeners every time that it calls so this makes it really awesome to be able to take this logic put it inside of this build method and then be able to share it with other components not only that you can then share these signals um across multiple places and even create sub classes uh one final thing I will show you is this

7:16 · new function that I added for defining Global signals and to be able to bind to them they don't have to be Global but um I just wanted to show how this would look like so we can say like save state would be signal

7:33 · zero and we can swap out instead of use signal we can do use existing signal and instead of a value we can pass in our existing signal this will mean that we can have multiple widgets all bound to the same Source signal and it still works as expected because this will actually update its parent signal so yeah I think that's it for this video uh please let me know if you have any questions and I will try to

8:02 · respond to them reach out to me on Blue Sky and Twitter as well as GitHub thanks for watching bye

IDX & Flutter by Rody Davis, Senior Developer Advocate - Google

Tue, 29 Oct 2024 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

IDX & Flutter by Rody Davis, Senior Developer Advocate - Google

Description

@RodyDavis spoke about IDX and Flutter and demonstrated how much easier life becomes for a developer when using IDX

#flutter #idx #dart #developer #google #fluttersiliconvalley

Transcript

0:05 · okay awesome uh so cool to see everybody thanks for um be able to uh show up to this awesome Silicon Valley Meetup uh my name is roie and I am super excited to talk about how idx and flutter uh work good together I recently joined idx and

0:21 · I'm a senior developer relations engineer on the deil team but I've been at Google for a while been using uh flutter uh for quite a bit and also contributing as well um if you don't take anything else away from today's session I want you to go to this URL and try out flutter in idx uh We've

0:40 · uh implemented a lot of stuff to make it a lot better have some exciting new features that we've been uh prototyping and uh just make sure you take a screenshot and uh and and a photo of that also if you have any questions that I don't cover or if you want to talk to me after um or even want to reach out on GitHub LinkedIn or Twitter you can just find me ready Davis

1:01 · so today we have a lot to cover but I think it's going to be worth it uh first off we're going to start with uh local versus remote development environments then we're going to move on to Nyx and Docker finally talk about flutter and idx and then hopefully end on some cool use cases with Native tooling uh but first let's start off with a question how many people have used idx raise your hand awesome how many people have used idx in the last month awesome sweet yeah

1:29 · if you haven't checked it out recently I highly suggest you to check it out again we have some uh like I said a lot of really cool stuff coming so the first question you might be thinking is like why would I want to use idx or NYX if I already have flutter set up locally so this is a valid uh

1:47 · question that we we can explore one feature requests we get a lot is with idx is we want to be able to support offline in a local version but first we really need to take a step back and think about what the actual problem we're trying to solve here is you know we what we're exchanging for a local setup and when it makes sense to do so I want you to think back to the first time that you're installing any SDK at all

2:13 · usually there's a lot of uh trouble getting started not necessarily because of the install guide but because of you are a day one developer exploring this new framework you don't know what the happy path is other than the documentation that you usually find and uh so it's important to remember

2:33 · that that happens for every user every new time they visit a framework it also happens when you revisit a project after two years of not opening it you are crushed to it again the point is that there's a lot of unknown and error States you can end up in and you can easily fall into and everything's fine

2:51 · and still it's not but if you've been working with flutter for longer than uh for a longer period of time then you've sure run into the problem where you've had multiple flut version conflicts uh if you have production apps this problem is worse because sometimes you may need to pin onto a specific version this is not unique to flutter this exists for every framework out there there's many people stuck on angularjs or angular one

3:16 · because they've launched into production and there's some maybe reasons why dependencies are holding you back and this problem is even compounded when you bring in external dependencies like whether it be cocoa pods uh xcode Max versions local clis any additional native tooling rust C++ and go all this

3:33 · compounds together to have a specific version that you're tied to and a lot of these things have workarounds but they're usually specific to the development environment and the Machine and the intersection of these dependencies so if you work on multiple text Stacks Beyond just flutter you'll see that this problem gets expanded for example if you have uh we're working on python there's a really big migration to Python 3 and a lot of people ran into

4:00 · cases where you needed to either install both versions and then now have to deal with these conflicts I remember when I first got my M1 Mac um MacBook there's a lot of issues where you had to compile both the arm and the x86 versions and a lot of times they were conflicting you had now had up aliases duplicates of most binaries so you can see how this uh gets expanded out and if you've used PHP you know there's virtual environments and so on and this problem gets worse over time

4:27 · when you get a new machine or you're trying to set up or even come back back to it and right now when you deploy your code to GitHub or other gith hosta providers it's really specific to what you need to use to install the app but not necessarily opinionated on where you need to run it GitHub actions can specify what's needed to build parts of it but not necessarily what you need for developing it so this is all just for your current

4:54 · projects but what about what happens when you want to explore something new if you're start developer and you want to try out rust or a PHP framework or even running a native tool chain like C or C++ then exploring new projects becomes really difficult because you need to install it before you try it

5:12 · there's also some tools and web Frameworks out there that let you run them in a browser but these are mostly for JavaScript only kind of applications the goal is to try out the framework to see if you like it before taking the leap and installing it locally but what about Docker you might be thinking I think uh everybody's seen the where where U you know if it works on my machine well then let's ship your machine that's literally how Docker was born but Docker only solves the problem

5:40 · of the environment for building it it and also sometimes running it self-contained this this deployment can be gigabytes on this container image because you're literally com putting it all together and if you have multiple versions you need to have multiple containers of them it also doesn't make a lot of sense to use a Docker file for your local development setup although there are some cases out there with Dev containers and some other stuff that try to make a um a leap into this but the problem is

6:07 · it's also gigabytes it can be very slow but so this is just taking a look at like um a Docker for development Docker files are a way to describe everything you need to build and run an application but really it's a great way to deploy an application the problem that we have with this file is that everything is imperative and not de ative it requires you to specify all the

6:32 · commands that will be run on the VM but there's no promise about version conflicts that they there's no promises about directory clashes or even cashing of true dependencies because if you run two commands that both intersect in the same directory they're going to overlap and you can have conflicts that's not docker's fault that's just a you know one of the natures of how you're running you're literally just getting a VM and running commands but I think we're on to something here

7:01 · what we want to do is declaratively set up the operating system and everything we need to get started so introducing NYX raise your hand if you've heard of Nyx before hey there's some people uh NYX is

7:16 · a functional package man manager that lets you deterministically build dependencies that do not conflict NYX is declarative where Docker is imperative in fact NYX can build layered Docker images better than even Docker can and this is because NYX can specify all the

7:34 · caching and the dependencies separated so that you can deploy without ever having to worry about them conflicting but before we look at NYX and idx I want to briefly go over what idx looks like and what it can do so first of all it's entirely web based you just need to visit a URL and you can start coding right away it's also built on vs code so it's incredibly familiar to most steps you can bring most of what you use uh in

8:03 · your local environments your preferences and your extensions in your muscle memory right to the browser it's important to note that this is a full Cloud VM this is not limited to things that only run in the browser this is a real Linux machine behind the scenes that runs NYX and you have access to this in the full NYX workspace one of the major challenges When developing on the web for mobile apps is actually testing out your application so with idx we have a built-in Android

8:36 · emulator and we've also got several Google Integrations which make it easier to add apis like gemini or even deploy to Cloud run or Firebase hosting and just about every Google surface in 2024 Gemini is built on and

8:51 · you can get help in understanding generating and improving your code right inside idx there's also Integrations that help it make you trouble shoot errors with AI and so much more in fact we just launched a feature that's in preview where you can use Gemini to read and write files and run terminal commands some very exciting stuff and finally the team is actively working on realtime multiplayer collaboration getting this right has been tricky but the team is working really hard on it so now let's take a look at nxs in idx we use a file called dev.

9:24 · NX this is what you share across team and it saves inside of your get repo David East puts it in a great way def. n is like a package Json for your entire development environment or in this case pups Cel and a way another way to think about it is where terraform is infrastructure as code this is for your production environment dev.

9:49 · NX is a Dev environment as codee for a development environment de. next Define just about everything you need to work and run your app in the cloud from system packages and services to compiler tool trains and local database and providers to Ida extensions and also language support and debugging to the specific wiring needed to boot up your front end and backend service automatically so you can preview your app this is all defined in one file and

10:23 · one thing to important to note here is dev. Nix is built on the open source Nick ecosystem so there's already an exist in deep Community to pull from that we can run the world software in this kind of environment so let's take a look at this example this is from our official data connect template it starts by specifying the Nyx Channel which is 23. uh 11 in

10:45 · this case it uses a specific version here so we can have reproducibility this is your so your Dev environment work the same two years later one thing about NYX is we have NYX channels and so anytime you want to upgrade and you maybe want to check and see if like you're using Deno and you want to make sure it's using the right version you can go update your channel and all your dependencies will work better

11:09 · together next this is where all the system packages you want are installed and are available here we're specifying that we want no js20 installed but you could also add Java python Ruby go and Russ and any other compiler tool chain out there usually just with one line next we have a lot of common services that we want to make sure that we install in Buddha when our workspace starts so we can do this with just one line of code or you could also ensure that you have maybe PG Vector installed

11:37 · and enabled and even pre-seeding your database we could even load Docker and Rus and have this all seated right into an our application next we have IDE extensions now because ID idx is built on top of vs code we support most of the extensions that people are going to want one of the caveats though is that idx and any other for CVS code relies on open vsx for the published extensions these usually not a problem because most extensions are duly

12:07 · published now we have two life cycle Hooks oncreate and onart oncreate is when the user first creates their workspace template and it's the first time that they're booting it inside of idx it lets you do a one-time setup like running or installing or CD your database and the second is a life life cycle hook called on start this is not here but it's particularly useful for every time that your application starts and you boot up your workspace again in this case uh

12:37 · since we're not we're using the data connect template we only use the install scripts in the mpm1 and so we just Boot It Up Inside the preview section and speaking of which so we have a preview section and this is where you can Define the Android and uh web

12:54 · previews the web preview boots up your app on an HTTP server and shows it inside of an embedded browser inside the IDE and there's also an Android preview which runs inside of an Android emulator and it is a full Android emulator that you can do anything you would do locally you're what you're seeing here is a data connects template called npm runev on the command line it'll ensure that you run the preview server on a specific Port but that's about the only restriction now there's so much more to dev.

13:26 · NX and if you want to learn more I highly suggest you check out the idx blog uh and David just did a really awesome video recently about it as well so next let's learn about idx and flutter you can get started today with flutter and idx using our default flutter template or you can clone any flutter repo as long as you add the correct dev. n file but first I want to quickly demo a fun use case that should apply to a lot of you you can enable flutter or Dart uh

13:58 · for Developers right away on any Pub package right in the browser without installing anything so I am going to share this real quick

14:32 · okay awesome so what I have here is just a blank uh idx workspace with the um the default flutter uh dev. next already installed I removed the default flutter app just uh to show it here so what I'm going to do is do uh flutter create SLT template plugin

14:57 · ffi platforms Android and we'll install it locally uh actually we'll do examp okay that that's creating um what we're going to do is uh we're creating an ffi template if I don't know if you've ever used this before but what's cool is it uses uh C to be able to

15:26 · create your application uh plugin and call into it but what's important about that is flutter needs to use and compile the C uh the C ffi plugin to load into inside your app so here we have the example and we need c the

15:45 · important thing about this is you know we need c on the machine to install but here's a typical setup that most people are usually familiar with we have a flutter app or a flutter plugin with a example subdirectory so with idx it's actually really easy to support this use case um

16:02 · what we do is we have this dev. next which is the default one you get with the template and we come down to the previews um one of the cool things about the preview section is you can comment out things that don't make sense so for the ffi plugin since it's only running on uh only supports native platforms we can common out um the web one and then

16:22 · the other thing we want to do is we actually want to run the subdirectory as opposed to parents so we can do is change working directory here we can do example and once we hit save we have this option to rebuild our environment this is what uh allows idx and Nyx to

16:42 · rebuild our OS declaratively and to be able to roll back if there's any changes uh what's really cool is it's kind of almost like get uh if you ever use NYX you can literally roll back to snapshot so you're always guaranteed to be in a working state or get back to one so here because we have uh the Android One open we noticed that it didn't launch the web which is fine it is exactly what we want and um now it's just compiling and running our application so it should just take a

17:14 · second and let me open up the examples well raise a hand if you've used the ffi plug-in template yet and flutter awesome should just be a second I also have a video demo just in

17:55 · case if it literally doesn't start in the next 30 seconds oh the drys of live

18:27 · demos oh all right let me go forward but anyways what it does is it launches the uh flutter application on the example subdirectory and I'm just going to reload it just one more time just to make

18:53 · sure there we go awesome so this is uh when the app boots up we actually installing and running the application but this required compiling the package which then compiled the native C tool train so uh super exciting but it's kind of showing that you can use native dependencies already out of the box but also be able to support uh your flutter

19:22 · package let me show the tab again okay cool um so with idx we can

19:39 · also add an open and idx button directly on your read me which will open up your idx workspace the important thing here is that you as a library author can set up the de development environment because you know what Native tooling is needed to get the set up we can also use this online configurator which makes it super easy to build an add the button into your docs to find this you can go to the idx documentation on developers.google.com idxg openin idx uh this will also work

20:09 · in both light mode and dark mode so uh uh I I use it all the time to to make these quickly next I want to talk about Native tools and flutter when you're building production applications sometimes you need native tool chains that exist beyond what flutter and dart provide this could be rust plugins or even build ffi plugins with C so I have one last demo and I think that this will also be a cool one to show uh let me pull this over

20:43 · here who you has used a SQL light before or even Vector databases awesome Okay cool so uh this next demo is uh if anybody's heard of sqlite V

21:00 · um yes cool uh sqlite VC is a a really cool way how you can uh do Vector embeddings directly in sqlite and what I have here is not only uh sqlite working in flutter but it's sqlite working in flutter through an ffi plugin built in C

21:18 · which is then compiled from a rust host so you have a rust project compiling a c project compiling all the way down to ffi plugin but what's cool is this is fully extensible so here we have a really uh large amount of dependencies that we need to bring in but NYX makes it super uh Compact and easy to include these we even can specify custom subdirectories We Can Vendor and have all of our hooks so this is just I wanted to show kind of like a more complete example of uh idx and Native

21:49 · tool chains but what's awesome is like this is something I actually needed to use because I ran into trying to get rust installed also working with SQL light on my local machine while working with Homebrew and I'm like on a Mac but I needed an environment that compiled this with Linux because the library author is using Linux to build the application so what was cool is I was able to basically specify all the L uh

22:13 · Linux dependencies and then now I can be building and testing it running it right in the browser so uh all that to say is uh there are so many really cool things that you can do uh when you have one file to configure

22:35 · everything stop this and show here so that's um pretty much everything I wanted to uh cover today if you um didn't see it already make sure you go to ID ex. google.com new flutter and I I'm also happy to answer a couple questions about idx but uh thanks so much for having me I can't wait to uh talk more about

23:07 · it all right any questions yeah because last time with short with chrome short and that you mean opening up idx but sshing into another workspace yeah just like

23:33 · yeah I would love to explore that option I don't think the de team is explore sshing from another machine with that but yeah I think that's it should be possible now with a lot of the things we got it with the host layer so yeah comp with shortcuts yeah that they've also been improving the shortcuts a lot yeah any other questions yeah how well paid or not well paid we develop really want my locals code I also find super

24:05 · cool yeah so uh one of the cool things about the dev. NX is you just check it into GitHub so there's a world in which you have your project checked out both locally and in in idx you can commit and pull changes all right like with GitHub so uh it's actually what I use for a lot of my flow is I'll I'll like to test my app like in a Linux environment make sure it's building and then that also helps with GitHub access and other stuff too and then I have my local environment for a snapshot or branches that I'm working on yeah other questions follow

24:37 · to that so do you have a giup plugin sorry is it a giup sorry G plugin in the idx directly yeah you can just yeah we we support GitHub bitbucket and um gitlab yeah you can also do any public get repo but those are the ones that support authentication and committing back yeah it is just an kind of opinion on how what do you think this with workflow for cross platform and being B in use

25:09 · IX same thing with the B code and you have to go back to the X code but if you want to build on an iOS you have to use xcode anyway what do you think is the best best workflow would be to use idx and again use

25:24 · x yeah I think if you're um if you're building any kind of a solution that need needs to use like you know Mac OS and iOS um then you're probably going to want be wanting to use a native tool chain right now um otherwise you can always do things like xcode Cloud build if you want to deploy it uh remotely and there's like code magic too any other questions cool uh well definitely come find me after if you have any other questions that weren't covered but uh yeah thank you so much

Material 3 from design to deployment

Wed, 25 Jan 2023 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Material 3 from design to deployment

Description

Learn how to build the basil material study in Flutter with advanced theming techniques that support multiple device contexts.

Speakers: Rody Davis, Liam Spradlin

Watch more: Watch all the sessions → https://goo.gle/FlutterForwardYT

Subscribe to Flutter → http://goo.gle/FlutterYT

#FlutterForward

Transcript

0:00 · [MUSIC PLAYING] LIAM SPRADLIN: Hi, my name is Liam.

0:09 · I'm a senior design advocate at Google on Material Design.

0:11 · RODY DAVIS: And my name is Rody.

0:13 · A senior developer advocate at Google.

0:15 · LIAM SPRADLIN: Today, we'll be talking about translating a design into code.

0:20 · We'll be breaking down how to take a design from a Figma file to creating adaptive reusable components for Flutter that target all six supported platforms.

0:29 · An important thing to remember is that adaptive design is not just about the breakpoint and device target.

0:34 · When building a truly adaptive experience, there's a whole matrix of options to consider.

0:38 · For example, a tablet with a keyboard but no mouse, a desktop with only a touch screen, or a mobile version that's running on a desktop in free form.

0:46 · With Flutter, it's easy to create platform adaptations and build a flexible UI that's capable of targeting the correct platform and input method.

Pesto - Case Study

0:54 · To illustrate what this means, particularly as you build adaptive apps with Flutter, we've made a sample study.

0:59 · A recipe discovery app called Pesto.

1:02 · It's an app that has several different user journeys that can take place across different device types, input modalities, and contexts.

1:08 · For example, you might enter and manage your recipes on a computer screen, browse for inspiration on your tablet, and carry out the recipe on an ambient device like a Nest Hub.

1:18 · From a designer's perspective, we build layouts and experiences for apps like Pesto with a ton of contextual information in mind, meaning that our intention for the experience, how it works, how it feels, the character of the design is embedded deeply into the artifacts of our work, often without explicit markers for the people we're working with to bring it to life.

Design Rationale

1:38 · Things like the grid structures that underlie our layouts, the navigation interactions we intend, theming and visual customization, and the motion and transitions that link everything together are just a few of the key aspects that we need to accurately and reliably convey to developers.

1:54 · In this talk, we'll walk through some of these key elements in reference to our example app and talk about how Flutter can preserve and convey your design intent.

2:02 · RODY DAVIS: From a developer's perspective, we tend to think about designs as a set of components that we can post together in higher order UIs. Flutter gives us the ability to build declaratively on every frame and any size.

Developer Rationale

2:14 · When targeting six platforms, there's a lot of things we need to consider such as input methods, touch targets, keyboard events, native menus, file handlers and more.

2:23 · We also need a translated design in Figma with dummy data into a working demo using mock data.

2:29 · This may be a tempting step to skip when building with Flutter.

2:32 · But by starting with dummy data, you can decouple your UI from the business logic and start working off of a few model style presentation.

2:39 · And finally, we need to think about all the animations not shown in Figma or even implicit ones for transitions throughout the app.

2:46 · Having a way to quickly test various animations is critical.

Material Design in Flutter

2:50 · One exciting update is the new Material 3 widgets for Flutter.

2:53 · There are multiple widgets that are included.

2:55 · And we'll be going over how to use them today.

2:58 · As we go through this talk, we're going to be building the Basil Theme together.

Building the Basil Theme

3:02 · This will cover theme extensions, custom fonts, dynamic color, and widget themes.

3:07 · First, let's create the Material 3 Theme class.

3:12 · Here, we're creating a immutable class with some brand colors that the design defines for us in a simple constructor.

3:18 · Brand colors, if you're not familiar with, are colors associated with the company and colors that make up the logo or related assets.

3:25 · For Google, this is the four colors that make up the G logo.

3:29 · Next, we create a callback for creating the theme data object.

3:32 · And we'll use that to pass to the theme for the Material app later.

3:36 · Available in the current version of Flutter, we can enable the use Material 3 theme override, which we will use for the new color system and update any supported widgets.

3:46 · After we have defined the class, we can then import it at the entry point of our application and instantiate the class.

3:52 · We then just call the two-theme data method and build the Basil theme, which we then provide to the widget tree.

3:58 · Later, we're going to be talking about ways in which we can theme the application with just the default widgets and theme overrides which allow for better reuse and extensibility.

4:07 · Next, we can take advantage of the theme data feature called Theme Extensions released in Flutter 3.0.

4:13 · To create a theme extension, simply extend the class we just created with the theme extension class and the type of our theme.

4:20 · This is required for when we pass it to the theme data class later and for providing it to the widget tree.

4:26 · We only need to override two methods.

4:28 · The first being the copyWith method.

4:30 · This is for when you're inside a widget and you want to override a single property and get a new theme back.

4:37 · Next, we can just override the alert method, which is used for animation.

4:40 · Just check to see if the type coming in is the class we're expecting and work through all the inputs.

4:45 · Now, back to Liam on typography.

4:47 · LIAM SPRADLIN: Speaking as an interface designer who's also a type designer, it's important to me to note that type or text in all its expression is interface.

4:57 · It serves so many purposes in an interface from delivering content to aiding in navigation, all the way to elements that are nontextual but still typographic, like icons.

5:06 · One big consideration is how you choose the type styles that best serve your content and layout.

5:12 · In space-constrained places, like navigation components, the right type style can allow you to communicate more clearly with users.

5:19 · Other type styles, like those found in materials type scale, can help you create and maintain consistent information hierarchies throughout your app and across devices.

5:28 · Titles, captions, body text, even inline links can instantly be recognized by users if your type scale carefully considers their styles.

5:36 · Making more nuanced choices about baseline grids, columns, spacing, and alignment can also contribute to the overall character of your experience, making it strict, geometric, and modern, or allowing it to be loose, free flowing, or even playful.

5:50 · RODY DAVIS: From a developer's perspective when translating a design, it is important to preserve the semantics around typography, emphasize, spacing, and type scale.

5:59 · It can be easy just to stick with the default textile in Flutter and just change the font size or alignment as needed.

6:05 · But there's a lot we can do to really polish UI.

6:08 · For most cases, you can get away with using the text widget in Flutter.

6:11 · But sometimes, a design will have a bolded word in the middle of a sentence.

6:15 · And for that, we can use the rich text widget.

6:17 · Also, in text-heavy apps, there's a dynamic list and styles such as in a markdown source.

6:22 · And for that, we can use the Flutter markdown package which will convert our inputs into widgets and rich text.

6:28 · Both of these are reasons why we want to have great custom text themes.

6:33 · Often, a design will have multiple font pairings that corresponds to titles and headlines or body and text.

6:39 · Flutter gives us the text theme class, which we can then use to define our type scale.

6:43 · And we can include any number of font families for the levels.

6:48 · To actually load the font, we can either include the font assets directly in our app and define them in the pubs of a Caml or use the Google Fonts Pub package and dynamically load them in.

6:58 · Using the Google Fonts package allows us to test different font pairings before optimizing for production build.

7:04 · First, we need to import the Google Fonts package in the file where we defined our theme.

7:09 · Next, we can create a new method, which returns the base theme data class, which we will then use for other contexts such as light and dark later.

7:16 · We can then import these two fonts defined in the design spec and create a merged theme, which we will then use to pass to the text theme class.

7:25 · Note that it is possible to override just a single level or groups of styles depending on the design intent.

7:30 · This package just requires internet access.

7:32 · So make sure to give the mac OS target if running the correct entitlements defining the package.

7:37 · That's it for typography.

7:39 · Next time we run the app, we will see Roboto updated with the new correct default textiles.

7:44 · LIAM SPRADLIN: One thing that we really focused on in the design updates for Material 3 is color.

7:49 · And a lot of the changes and improvements made to the material color system were motivated by creating and preserving design intent.

7:56 · Rather than defining each individual color for each individual visual element, we established a system that generates a comprehensive and cohesive color scheme based on the relationships between colors.

Design Color + Dynamic Color

8:08 · This way, design intent for the meaning and function of different elements that can be communicated through color can be preserved throughout the process of building an interface.

8:17 · In Pesto, a recipe screen can even be themed based on the image associated with the recipe.

8:22 · In this case, the creamy pesto pasta translating the users or the recipe writer's unique intent into a cohesive version of the design intent that you've established and implemented.

8:32 · RODY DAVIS: From developer's perspective, Flutter makes working with dynamic color easy thanks to a great pub package called Material Color Utilities and the extensible theme data class.

8:41 · Lets build a custom color scheme together.

8:45 · Let's add the Material Color Utilities import above our theme to get access to the HCT color system.

8:50 · The Flutter SDK already depends on this package.

8:53 · But you will still want to add this to your pub spec dependencies.

8:57 · Let's create a method that returns a scheme that we can use to create a custom color scheme class.

9:01 · Sometimes, a design is only based on a single color.

9:04 · And for those instances, we can use a color scheme from seed, which gives us a beautiful generated color scheme using the ACT color space.

9:12 · For Basil, we have multiple brand colors that we need to use to create custom tonal groups from.

9:18 · First define a base palette that all tokens can inherit from if not overridden.

9:23 · Next, create the tertiary tonal group and note that the palette is returning the primary palette to provide the chromatic tonal group that the design was intending.

9:32 · Finally, create the neutral palette, which will also be used to override tokens.

9:37 · The color palette class comes from the Material Color Utilities and is a group of palettes that are derived from a single source color.

9:44 · Next, we will be adding tokens to the scheme class.

9:47 · You may not be familiar with the scheme class or the concept of design tokens.

9:51 · But the scheme class is a class in Material Color Utilities that has a one-to-one relationship with the color scheme class in Flutter.

9:58 · All these parameters are designed tokens, which are theme values that can be passed down and inherit from in subthemes.

10:04 · Here, we're just going to go quickly through the scheme and define the tokens from those palettes.

10:09 · For each of these tokens, we pulled them from the tonal palette and get a color based on a given tone of brightness.

10:14 · To learn more about the new token's material design, you can go to m3.material.io.

10:20 · Next, add the overrides for background, error group, outlines, and surfaces.

10:25 · Finally, add the overrides for surface variant and inverted colors.

10:28 · Note that for the dark theme, there needs to be different tones use for these tokens.

10:33 · For most cases, you will not need to create a custom color scheme.

10:36 · But this is an example of all the things done for you when you use the color scheme from seed method.

10:41 · We can also create an extension method on the scheme class to return a color scheme that the theme data class expects with a given brightness.

10:49 · Now, we can add the color scheme parameter to our base method and pass the color scheme to the theme data class.

10:55 · When overriding a token such as scaffold background, sometimes, the design will use a brand color instead of a derived token in the scheme.

11:02 · For this token, we're checking to see if its light, brightness, and returning the brand color defined earlier.

11:09 · Finally, we can compose the complete color scheme and the theme data class in two-theme data method while making sure to pass the brightness.

11:17 · Sometimes, we want to pull a theme from an image and have it match the main theme.

11:21 · For example, a music player app can pull from the album art and change the background to match.

11:28 · This color could be anything.

11:29 · But thanks to the Material Color Utilities, we can make sure that the color will meet contrast requirements and have a color scheme that will work with our app.

11:37 · In Pesto, we can use the image on the detail screen to create a content-based theme that matches the top level theme.

11:45 · To do this, we can create an image theme class, import Material Color Utilities, and the image package.

11:51 · Next, we create a method to take the image defined at the path, get the bytes, and convert them to an RGB pixel array with the image package.

11:59 · We can then implement some basic error handling.

12:03 · Then we can implement the source colors from image method that takes the pixel data, quantitizes the result, and returns them to the ranked pixels in the image.

12:11 · Now, we can create a color scheme from image method that takes the current color scheme and blends it with the primary of the top color in the image.

12:18 · We then can use that seed to generate another color scheme which we then return.

12:23 · This blend method is important because otherwise, the color could potentially clash with the main theme.

12:29 · Finally, we can use the method just to find to create a build method, which returns a FutureBuilder and creates a color scheme from the image.

12:36 · It then passes it to the theme widget, which will override the theme data in the widget subtree.

12:42 · Once we have defined all the colors and typography, we need to create individual widget theme overrides.

12:48 · This will help reduce the need for custom components or theming in the build method.

12:53 · Learning how to define these overrides properly will help the application have an experience that properly reflects the design intent.

13:00 · First, let's create the TabBarTheme-- then the FloatingActionButton override.

13:05 · Next, the NavigationRailThemeData.

13:07 · Note that these are just applying color overrides based on the design.

13:12 · Finally, override the AppBar and ChipTheme.

13:15 · There are many widgets that we did not override.

13:17 · But it's because we're not using them yet or the default to Material 3 appear correct.

13:21 · LIAM SPRADLIN: Of course, the ways that people can use your app will depend on where, when, and how they're using it.

13:27 · This is where it becomes really important to account for different input modalities.

13:31 · If a user has a keyboard, switch, mouse, touch, or even voice to interact with your app, it should be accounted for in the way your design is structured.

13:40 · The way your layout is structured, specifically how users traverse both visually and physically from one item to the next is crucial information that's not captured in one static mockup and requires extra documentation to successfully translate into implementation.

13:54 · And this might change based on what device your app is running on.

13:58 · Layout density might be lower on an ambient device that's viewed from far away and has less need for touch input.

14:04 · This will mean quicker traversal through fewer onscreen elements.

14:07 · On a phone, the density may increase.

14:09 · But things like touch targets become more important to consider.

14:12 · Across devices, the navigation structure may change as you gain or lose screen space.

14:17 · RODY DAVIS: From a developer's perspective, we should be mindful about where the application is intended to be deployed.

14:23 · In Flutter, you can define multiple entry points depending on the target you're building for.

14:27 · Rather than building a single UI package in binary that's meant to run in all these contexts, you can compose the UI and functionality depending on which top-level app you pass to runApp.

14:37 · In your theme data class, you can pass adaptive platform density Enum to the visual density override to create a more compact UI in these contexts where input is more precise.

14:48 · And when it comes to traversal and touch targets, it is important to remember that building a great accessible app is good for keyboard navigation and accessible touch targets.

14:57 · Flutter has a good focus traversal.

14:59 · And if you're using the default focus nodes defined in most widgets, you can test them by using the Tab and Shift Tab keys to navigate.

15:06 · Make sure to define tool tips and meaningful semantics where possible throughout the widget tree.

15:11 · For navigation, you can use the go router package to split up the routes into files and have fine-grained control with the new Navigator 2.0 class.

15:19 · This is what the Flutter app looks like running without our theme applied.

15:23 · But when passing the theme to the Material app, we get a beautiful Basil Material 3 theme in Flutter.

15:28 · The theme data class is very powerful and allows us to create truly custom themes that match the brand or design spec handed off to the developer.

15:36 · Sometimes, a theme for a widget is not available.

15:39 · And for that, we can use extensions and custom widgets.

15:42 · LIAM SPRADLIN: If you still find the concept of building a custom theme challenging or just need somewhere to get started with your design, check out the Material Theme Builder and export your theme for Flutter.

15:52 · You can also learn more about Material 3 and Material.io.

15:55 · Thanks for watching.

15:57 · [MUSIC PLAYING]

Flutter as a Service (Webinar)

Tue, 22 Sep 2020 00:00:00 GMT

import SocialEmbed from "../../../../components/SocialEmbed.astro";

Flutter as a Service (Webinar)

Description

Rody Davis and Frederik Schweiger speak as part of an online webinar for making money with Flutter as a service.

Transcript

0:00 · thank you everybody for signing up today this is made possible thanks to code magic Thank You Marie and Martin both in the chat we are excited about taking on this subject as flutters of service and I thought like who better to do it with and Frederick so this is going to be a quite fun yeah it's gonna be pretty

0:22 · interesting to say the least we have some really exciting topics plan so just like a general overview of what we're going to be doing today and going over we have we're gonna talk about our backgrounds first to kind of get some credibility for those that doubt and then we're gonna have we're gonna start with Frederick's talk we'll have a short Q&A after that and then we'll jump into my talk we'll have another Q&A and then for those that are around we'll have some drawing and prizes for those that are asking good questions so both me and

0:52 · Frederick have have some special stuff to give away I will be giving out some promo codes of the widget studio for both Android iOS and Mac OS and I think Frederick don't you have some stuff too yeah I will have I will also send out basically I think Marie will send out some emails after this event to everyone who attended and they will also contain some kind of promo codes and other maybe smaller gifts so yeah stay tuned it's kind of a surprise yeah yeah yeah I

1:23 · think it's really good for everyone who's attending and yeah lazy to recording right yeah exactly all right so so Frederick can you tell me a little bit about yourself yeah sure first of all things also from my side and thanks for having me yeah my name is Frederick I've been six

1:49 · six years do something like what while I was attending high school I got into mobile development and then had my first job also developing Android apps basically after I finished University I was employed for exactly half a year or something and then I realized I become a fluttered freelancer and probably was one of the first in Germany in the European area with that yeah and

2:15 · then since then I just what self-employed basically building a flutter it's yeah awesome really enjoy it so yeah so what I guess we can just go ahead and jump into it but so like well what are you gonna be talking about and then whenever it whenever you're ready you can definitely go ahead and start and you go ahead and give you controls as well yeah maybe yeah we just have like a short overview

2:41 · I think yeah the topic I'm going to cover is building products your users actually one I think that's kind of a broad topic it could mean for those who've been around for some time maybe you follow the discussion and yeah it's

3:03 · more covering the whole area of building side projects many profitable profitable side projects and maybe turning them later into their own into your own business having something like solo founded or founded with two people like an indie business something I think this is like the bigger picture for today so

3:24 · yeah that's that's my kind of talk and I just try to explain it a little bit just give you some hints I mean I also just started out I've been on a few smaller projects myself like also side projects and then small startups which then at some point failed some were successful with like small things and I just try to put in some insights that I have gained

3:46 · and also please don't take them that serious because it's just like my my only based on my own experience I think everyone has to make their own you know but if you can get yeah it would be great right okay yeah yeah cool maybe row do you want to already say something what yeah I'll give a quick snippet and

4:08 · then cuz it's gonna be related to yours but then you can go ahead and start yours just so so what I'm going to be talking about in mind is basically a follow up to kind of flutters of service in general whereas yours is a case study I want to be like be able to like mirror a lot of that kind of stuff I want to show like examples on how can take an idea or a future idea and be

4:28 · able to monetize and create money in the future I want to show everyone that like how many you know options are possible and some things that you may not think about when creating applications and like you know if you're someone who is a UI designer for example like oh you can make money too and I can show you ways that you no matter your skill set where you can find your niche and fit right in so yeah but I'm really looking forward to giving more about wire - nice

4:57 · ok then I would say I would just I just it's just an invitation that popped up that some people are in the waiting room I just yeah you should see admit the only one person can be the host so ok should I admit all of them that 3x yeah you can you can you can click it admit all and mutes by default so ok until until you share with me again ok ok let

5:28 · me just share my screen see you and make sure to check the chat too because you can um show a portion of it - yeah because currently I'm just I think I'm just sharing my doors all right you got it ok so everyone should just see the big slide right right thumbs up yep see you're good good nice cool yes

5:54 · as I already said my talk for today this called building products your users actually want or yeah what I learned while building why - I own for those who don't know what Wireless IO currently is it's like a feedback tool for flutter reps and interactive feedback to flutter reps where your users can give in that

6:17 · feedback without leaving the app and basically it just captures your screen has like a very not very but like kind of fancy you write with so it's hopefully it's fun for the user as well to engage with the developers or with

6:32 · with the team behind there and then give you productive feedback on how to improve yeah so that's what we're issues but first of all I want to again emphasize this is my disclaimer everything I'm telling right now if you follow this advice and whatever your house catches fire or something it's not my responsibility it's just like for entertainment purposes and for you too many you know

7:00 · get some more insights from someone who did something similar right okay so you're probably here because you're interested in starting a business or starting a side project in the flutter space right so everything here usually it starts with an idea like every business idea whatever however I don't really like the word

7:24 · idea here because it doesn't really resonate with me I always have to think about those big Silicon Valley kind of startups which have like a lot of money and funding as well and that's actually what I don't want to target in this talk especially like target for developers or solopreneurs people just want to get out there idea because there was also when I

7:47 · was attending university they were and I was younger I had like also an Android sticker on my laptop as I said I was an Android developer break them and then also two students approached me to Business Economics students and saying yeah we have like the biggest idea right and we want to share with you that's always like this kind of high gear that will change the world and they said you have to sign an NDA and stuff in order to know the ideas said okay as some

8:13 · experiences there was a gap signing there just let me know what it is they're like we're going to go to the group owning it and as you might know component games they were like a huge deal they then Groupon was huge and they were probably in there at the market like four years right and Google offered them I think a few million make sure you get the whole product and they did kinda know those guys they they just saw they can copy the idea and and the end I

8:37 · should just get like 10% of shares for basically building the whole text second building their app rain which was not a good offer so what I'd like to you to do here is nothing of an idea but think of kind of a pain point right the pain point that you as a developer or or maybe even an entrepreneur or as someone in everyday life experiences yeah

9:02 · because if you were having this kind of problem at least one person yeah actually has this problem and that's already a huge plus because then you're you're kind of solving a real-world problem so that's also already a check mark they're also the probability of other others having the same problem that is kind of high because there are a lot of other developers around here basically everyone probably in this meeting and if

9:28 · you have a specific problem regarding flutter that's very likely that if you share it with others they would really appreciate it or maybe even pay money for it if you would save them some time right and since flutter is kind of neat as well yeah there's still a big you

9:45 · know piece of the cake untouched and so that's why we're actually having this webinar right now and I think rody will also elaborate on that further so I want to make a short discretion here and you know talk to you about how to make 1 million this is not like some kind of con series I want to you know make your CFD traders and let's join the whatsapp group no it's not it's just like showing

10:11 · you actually what you would need to do in order to make 1 million revenue in a year so it's basically five thousand people buying a two hundred dollar product for 1,000 people 1k product and so on right so basically you would just

10:27 · need ten people paying you 20 pane and you would have like a 1 million 50 people paying 20k and you would have 1 million dollar revenue right the thing is we're talking about software here and usually in the software as a service space it's fine you know it's quite usual to to have sell something like subscriptions so if we turn the page around and have a look at systems in prices it would just take 5,000 people who subscribe for 17 dollars a

10:59 · month to actually make 1 million revenue I mean take those please go on and take this numbers with a grain of salt here because there's like all happy day cases when we're thinking about those people being subscribed for a year right in order to hit this million and then you have to probably also pay taxes and stuff so the whole mini an idea is kind of just to change your mindset right or to line your mindset and yeah in the end you could also just have let's say 500 people paying 107 60 $70 per month to

11:32 · also make this million or ten people a day whatever and that's actually not too far away from b2b prices right if you if you actually delivering a high quality service that's very niche for a company that saves a lot of money well you know they're using your service or in the end you can also just have one person Y in your startup so Martin if you're in this call and you're listening to this please make sure to stay in its call so we can discuss the details you know the quiet

12:02 · but you know whatever also a very interesting fact here is that there are two million active cutter developers right now probably even more at this very moment and that would mean you only need 0.0025 percent who would actually

12:20 · subscribe to your product again for a year right to make this 1 million and even if you would say double this number and say this 0.05 percent it's still not very high so coming back to the pain point I was talking about was I usually

12:38 · this is something that my users don't want I don't know about you but I'm a developer I like playing around with new kind of type stuff so you know i when i finished uni i just still things that i enjoyed you know building would you lead no one else would pay any of any cent

12:54 · for like where using control level an app or something or I once build an app which you could stick them to the Nylund my sister's night lamp and if you would go to sleep like a mosquito sound would start to play and if you would like turn on the lights to search for the mosquito which is stopped right I mean this is the those are things that that are fun but usually if you have this kind of market market groups you market for let's say underaged people like you know

13:23 · buying this mosquito noise or sound net usually they also don't have that much money to pay for you hurry up so you want to target other developers or especially I included in the b2b market in which we are right now so the idea behind I'm building something that my users don't really want was user

13:46 · feedback tool that doesn't suck so that was the idea I came up for myself and so yeah I just went out and basically build the prototype for it and on the 25th October 2009 you can see the Treaty here and I just put it out I just want to check how is the resonance and what people like it or not and I actually got a really positive feedback and from from

14:12 · the community as you can see it's like nearly four hundred four hundred likes and one hundred retweets and even tim smith from from clutter from the PM pro flutter at Google right he replied when I said that he's loving it so I mean what kind of verification

14:27 · can you get like if it's not the product measure of the product itself saying that it's actually quite good so yeah I think I found my niche and I also verified we are here and I got in touch with the committee so that was actually pretty great and I got kind of excited a little bit overexcited so I started building the first MVP I don't know if

14:48 · everyone knows what an MVP is sends usually for a Minimum Viable Product and that's a product that just offers enough features that people would actually start using it right and that that you can try out the idea behind it and that it just works that it barely works there's no like fancy features around maybe not even the sophisticate design so yeah I went out and started

15:12 · building it came up with this I don't know some people still remember it it was called snap feed it wasn't even called a wire - thank them and as you can see it was kind of super euphoric because as you can see everyone who wanted to implement it a thousand of the projects so you had this beautiful project chooser because you would have thousands of maps obviously and yeah

15:36 · this was basically the 2d detailed view of the whole product so if someone sent the feedback it would come into into the into the yet do this list and then you can see the date you can set the status if it was new plan the progress closer was basically like you know yeah planning solution yeah right internal to focus customer management and yeah back

16:03 · then I actually put out a landing page what you always read on on the Internet and I collected email addresses and I actually had quite a lot of email addresses but actual users of this app have been like 15 to 20 only 15 to 20 years it's and all those 50 to 20 years is no one really needed the status no

16:22 · one needed like the sorting functionality no one used the owner which it could assign so you could even invite people to your project but no one would use it so all the stuff was actually not really used by those people but this doesn't stop here I got so excited building my empathy that I even added this beautiful setting screen with all the integrations you could even like choose a branding upload the logo one and change the phone remotely obviously right so you didn't have to do it on the client side you could change it remotely and even integrate edit integrations

16:53 · email slack and for sure test magic coming soon and secure so not many people were actually using slack back then although this is like right off my best feature and only one person you see here and that was me in my example project in order to set up the Xavier API so yeah

17:15 · that was me being done building the MVP which I call the maximum viable product because it was basically a full-blown product already and not something very simple that I could just test and throw into the market right so please if I learned something don't build a maximum buy a good product and also don't spend more than this initial

17:39 · phase right and also please please go ahead and talk to your users that's actually a very very important thing which I will also liberate later on this talk the next step for me in this in the

17:54 · whole journey was actually to rebuild the whole MVP with all the feedback I got from the community again here you know sometimes my developer and OCD kicks them you know I just have to rewrite the code I think we all know that so you wrote write some code and it's actually not as great as you thought like half a year later right I'm one of those guys yeah

18:22 · please don't do that don't don't ever rewrite your whole project after you got a product which actually works so however the good thing about snappy was that I was building the whole sniffing SDK and the public so as you can see that it was public and open source project on on github and you can see

18:43 · like some open issues some closed issues they're not bad many because it wasn't actually used by so many people but as you can see they're already like a lot of interesting features right there was a question how to handle localization as an example someone wanted to cut some strings someone what wanted to support like more theming or more customization options so all of those feature requests they had nothing to do with the front and then I was building right so even continuing that having a different channel this is basically my email my inbox for wire - and there's

19:16 · only a few of the things that that reach me over a few different channels and as you can see you here people are super eager to actually give you feedback if they if you build something that like easier so if you've come up with a problem that you think is is a good good

19:34 · idea to be solved then just go out and try it out and people will reach out to you and they will come up with cool ideas you would never thought of that you wants to integrate into this platform right so I came and I took all those ideas and which I collected over all the different the different

19:53 · platforms and channels and then I put them onto a yet Trello board and I came up with some yeah smaller ideas and and put some my tears in the backlog and stuff like that the usual way you do when you doing like to start right so I can't collected them here and then I started working on them so what I've learned from this phase was actually it's super important always get in touch with the users and then trying to only build requested features or features that are requested by someone from the community also which thing that I

20:26 · learned I think a very important and essential part is ask for help and also help others so that's that's one of the most important things you can do if you if you start building your own business is get in touch with your community as early as possible try to solve really solve someone's problem because then it's not your problem because it's the form of two people already and this is how it grows again again you want to get this inside swirl rain and then again

20:55 · please don't rewrite your entire code base so in the end Wireless was born and as some of you may know this is how it currently looks this is this is the website how it looks today and this is a picture of the current console and the interesting thing about the console here is that it looks completely different than the console on snap bean and that's

21:20 · actually because I just build the features committee retrogressive because if you can see this year this is like a github kind of search I would have never built this if no one asked me to write so I build this because it was an issue on github action and then someone asked for having labels to organize the stuff because labels are when sophisticated than just having those predefined statuses and that you can set but nobody used because do you want to search their own like create their own workflow and they don't want to adapt your workflow and then there's a close

21:53 · button way you can just close today if it's done so it's not shown on the on the initial page load and then you have an options button we can actually delete stuff there was also a request I got from from a small start-up in Europe and because in order to be compliant with GTR they also hinted me and said okay we have to be able to actually delete feedback and even if you're not from Europe or if you from from like us or Africa or wherever you don't have to deal with GPRS at first class citizen

22:22 · right you get this feedback and you want to support it and that's what your users actually tell you and even going on on integrations and members if you have a quick look at you at the new member section and that's also something that completely changed although you didn't see the old member section of snappy but there's something that changed because people wanted to have different roles like administrator's attitudes viewers I just build up because people asked with you and then also the possibility to edit or remove members with those kind of rules also the feature that you can remove yourself also having something

22:55 · like pending invites that you can revoke invites that you accidentally sent to the wrong email stuff like that you can do now and that's just like because someone because of this feature so again we drone them start small and let your users guide you always get to know your users and please keep iterating and ship

23:15 · features this is also something that I learned be Hardware the hard way because people always say you have to ship you have to ship you have to ship it sounds so silly but it's actually true because also what I've learned about entrepreneurship the hard way is everyone talks about an exciting way if you see healing must beg you launching SpaceX Rockets you know - Tamar's whatever right all the kind of stuff it looks so exciting but it's actually not that exciting in everyday life it's still like a tough job to do it it's it's a decision you have to have every day and that's why I asked me to just

23:47 · keep iterating on small features so you can ship something then you get feedback from users again and that motivates you a lot when I build the feature like the github search feature and and then the labels I did this like in one in one thing right and one more flow the problem there was while doing doing this big search and doing this kind of like complicated or big feature labels I had to deal with so

24:15 · many things that I took me like three or four weeks or something nearly until I basically shipped a new feature until I get a new feedback from my customers regarding those features and it's also like kind of demotivating if you don't get updates or if you don't share stuff or if you don't have any visible progress so please go on and ship small features and then ask to use what do they think you can improve all the stuff the next thing I would want to shortly talk about is actually doing things that don't scale and I think I've stolen that from a lot of other people or already

24:47 · like doing building startups and and so on just my experience here it's super important or valuable if you if you do things like sending out stickers to people Rodya look love letter that is this on the way currently to the USA right and yeah just send out stickers

25:09 · start with something like that say thank you to those people that actually supported you try to get in contact with them right and for that I'm saying put yourself out there go on Twitter it's a huge community it's it's a nice community you can learn so much from so

25:26 · many talented people like I can learn from roadie like it can learn from I don't know like a lot of talented people out there they're way more talented in a lot of areas than I am if you just go out there and talk to them and ask them what you can do better they most likely will help you if you're if you're asking a nice way then for sure print stickers and send letters right I mean you can

25:48 · discuss that kind of thing but also very important is yeah building relationships that you're actively it can be taking part in and what we do right now like webinars asking people for help maybe even write writing long emails there was one timed putting

26:05 · two clients I wrote like two or three denied four-page long emails back and forth and they were so excited about the product because they're the clients loving it so much and this is actually what you want you want to being in touch with your first ten users and who everything what they want because if you do that if you saw those ten problems you're solving probably a lot of problems more like many many more people will like likely use you as your product and then there's one thing I just wanted to mention on the side like before you know I wrap up the whole thing is also

26:38 · go on an automate and what we discussed before I actually started this talk there are so many already tools out there like code magic as a CI rank it can make your life so much easier it's already been there you don't have to prove yourself especially if you start your solo business that you can build your own CI why would you it just takes take your time if there's like a tool for automating I don't know like getting user feedback right and then maybe use that one because in the end it's just like you just trade your time or Y and

27:10 · the end your money for a product and if you think about if I would build a feature or something or a service that would actually help me like a customer relations tool or a CI tool or something if you think about how much work you can get done on your own product or on your own project if you think about how much it would cost you like let's say 50 years or 100 bucks a month and if this feature would take you ten hours to implement then probably those ten hours or like even 20 hours for something right you could use this time your time

27:43 · is probably more valuable than those one hard of 50 bucks right a month so if you're like thinking that way it most of the time makes sense to especially in the early stage use cloud providers use third-party services just get your thing out there and that's yeah basically it already that was my short like intro on what I can tell you if you have any questions or specific questions feel free to ask now I would have to check actually and

28:12 · arrange the the whole shet thing here there's a lot of questions made but yeah that that was it for now from my side and I think I'm going to switch it over back to roadie so you can maybe handle people who want to join and I just saw on certain questions is already sounds good ok cool so let me check how can how can

28:49 · I make you actually the host again roadie ah I think you should be the host no all right thank you okay hear me yes

29:06 · cool well thank you so much yeah that was a that was a really exciting take on wire - like I've been you know I've been following you know this Snapseed and stuff like that it's been it's been interesting to see it like evolve and kind of like grow into like you're

29:23 · finding your audience you're reacting you're evolving and it's just like that cycle you just keep you keep cycling it up because like you're never gonna be like in a perfect state you're not gonna have ever arrived with wire - and so I think it's really cool to to see the journey and also like a tangible journey for people to see like it's not so like cut and dry it's not like okay if I do this this this and this then I'm gonna have a perfect product and then just now I get money from here on out it's like it's a it's all about the vision and the

29:52 · the the passion that takes you know as an entrepreneur we're also like you know supporting an application and releasing it so we had some pretty interesting questions in the chat so first of all what is your take on like flutter web like how do you feel as if for maybe either using it as a you know something

30:12 · for this product or just in general flutter web for applications because I think originally it wasn't snap see like view yeah yeah yeah actually stem feed was you and also the current console is building to be honest just because of

30:29 · the reason that when I actually tried it out a month or two or three months ago you have to think about that right when I started implementing this stuff flutter web still have some kind of issues with actually you know selecting text and all that kind of stuff what I thought is kind of interesting if you just want to copy the contents of a feedback or share stuff or copy an ID because I don't know if you know you can also send user IDs or emails and stuff

30:58 · right or touch some info to white-ish and then you can basically assign this or see what kind of user basically is sound what kind of feedback and to make this just better handleable right or yeah I don't know yeah yeah I

31:17 · decided to actually go with who also because there's like a lot of images for sure and the image performance was not that great when I actually tried it out right I mean it gets better and better yes I mean maybe if I would start now

31:33 · maybe I'm gonna do it if I'm surely targeting web though that's the thing is like like I feel like if you're targeting multiple platforms across platform first that's a way different question than if you're only building web application and functions as a service and ever since it goes around there like that actually the SDK is

31:55 · written in Dart right so you could basically write so it may would make some sense for sure but also the fact that the navigator is not that great yet right with sending and sharing Lee playing with this hashtag and since you can basically invite people as well I mean they're workarounds so you can make your basically write web service acting the URL and then doing the redirects and stuff like that so you can hack it but I thought for for a sophisticated platform was good to go yeah and they're also

32:28 · like great CSS frameworks out there that's better support and supporting you doing a good UI especially for dashboards and stuff of course yeah and that's the thing is you're leveraging what's available which is kind of a maybe a predecessor to what

32:46 · we're gonna be talking about later or a foreshadowing but you know it's like you know this is where the developers can step in you know flutter web is a new platform like you may think it's not ready but this is also where you can come and say okay here's a need in the market let me find a way to provide for that market so just an example of just a

33:05 · real-world example if you know there's flutter web there's many things needed right now on the web in regards to you know dashboards for different kind of charting libraries you need layout libraries for things like you know something as simple as like layout grids and stuff that people are used to on the web things like templates like you know

33:23 · something as simple as like a wordpress template but the same kind of idea for flutter web applications you want to have like this kind of theming that goes beyond material for some applications or just pre-built kind of things so this is all places that developers can step in and be like okay I'm gonna actually offer this because it's not gonna be there until we create it sure and I think that there could be I think you

33:47 · you're also liberating on this in your talk right but I mean I think when we were when we met in New York we said in this co-working coffee and I think within 10 minutes that's actually a good

34:04 · idea and this is definitely a market for this in the future so in the end it's just up to the people to see what actually also is a bit of fun for them to implement and also like a pain point because I think especially what I can't emphasize it enough it's a it's a tough road right if you start start building

34:22 · something yourself it's going to be you will you know will have like dip or something low and you just like no one's going to use that I always have I'll have that all the time right or you think okay this is why it is you just can't give user feedback is this like so good you know and then I need someone from outside Emma's so cool like when I show it to my

34:42 · clients they're always like they can't grasp you know because it's like so crazy when it like makes the app small that stuff and then those are the moments but you're like sure like yeah that's really cool and and actually making someone else happy or making their life easier is also a big part at least for me to to build something so don't underestimate that that you should always you know go with small steps and

35:04 · rollout stuff and just keep going yeah I also don't believe in the overnight like kind of success right so it's oh it doesn't exist yeah yeah yeah it's a lot of work behind the scenes literally all the time right yeah well and also we had a good question to check the chat how are you finding maintaining your sdk like what

35:26 · kind of issues have you ran into not specifically but like how are you dealing with like maintaining this as a small team / one person yeah actually n so that's a really good that's a really good question because I think they're also like to people who really helped me a lot and with wire - recently it was Dominic and Nash from from the community because I actually started the whole thing by myself but as you can imagine building an sdk then building a back-end

35:53 · and building it from then as one person is kind of tough that sometimes right and you just move slower than you might want to write so actually I just delivered the whole SDK upfront and then I just basically asked two people those

36:10 · two people to help me and they did a really great job until now right and chrony I'm also looking forward to actually rewrite some parts of of the SDK to make it more sophisticated again because some people told me things that aren't currently possible although I already tried to to make work in in most scenarios but yeah I'm just trying to

36:34 · build the stuff in the public there as well so if you're on github make it open source sometimes you people are so so interested in your project even if it's like open source but you know yes it's like a paper I mean there's a feed free plan as well feel free to go and check it's free for developers and it will always will be but even then there are people who are excited because they really like this idea and and how it

37:02 · works and it actually does the job so well so they would even come in their time and help you out with that that's what I was saying and referring to build your community and you know just be nice to the people and they would be nice to you it's always like that kind of stuff right and so yeah it's just like an open-source project I'm working on it if I have time for it or you know then I just hired two freelancers like Dominic

37:28 · and ash to help out at some time at some point to just get out new features yeah I hope I can find more time actually in the future and I I think I will to add some really really cool new features that I that I think are yet worth implementing and adding like details so yeah it's a lot work wait yeah so as we

37:53 · asked most people what's your work-life balance like how do you manage like being like entrepreneur but also you know staying productive and being on the never-ending Twitter I think that's a good question I could ask you because I think you're

38:10 · you're pushing out way more that I do I feel like a slow slow torches you know just like very slowly and then you come up with like this widget builder you come up with like thousands new libraries and so that's actually a good question because sometimes you go on Twitter and you see so many people building so many things and that I also

38:33 · say I just I'm I'm for sometimes I'm just not active on Twitter I just don't check it at all because you know you just somehow kind of get demotivated right at some point because you're like I'm still working on this feature for like two weeks and there's like two guys coming up with like a whole new state for the German solution right that time yeah yeah I don't know so that's

38:55 · actually a tough question to ask and I think everyone has to deal with it in their own way all right I have usually tried to do also some sports and don't put too much myself definitely tried to go the way of also having it as a side project right so I also have another business actually where I'm rebuilding an app right for for some telecom so that's where I

39:20 · actually make money because I right now I don't make any one little wire dish because I just want to build it and get it out and get it in people's hands so we're sure people though I'm I don't have that pressure and I think that's an important part of not burning out too fast right to have this pressure to deliver something because I think also good stuff takes some time especially if you want to involve the community and actually get those ideas and yeah for

39:49 · sure I mean I know for me like I have plenty of things that like I keep busy with outside of development like I also was a musician so it's like you know music is such a big part of my life I go hiking and I do a lot of VR so it's like but I also do a lot of procrastination so like yeah I may be really busy but it's like I'll wait really long and

40:11 · tilde do it a project and I'll get it done in like 20 minutes but it's like it seems impressive but I'm also like mulling it over in the back of my head creating these things and they're all like kind of forming and then yeah just do it like the implementation is easy part it's the it's the edge cases that keep me up at night and I'm most a big procrastinator here so what also helped

40:35 · a lot was actually to not put too much pressure on yourself right that's what I said well it's then like I don't have to ship this like tomorrow right I mean it's um you have to have some soft deadlines for sure otherwise you never you never sure for sure but you also even artificial ones yes you shouldn't you shouldn't like rely on this or there

40:56 · would be the best way not to rely on this every day if your everyday job and you have to succeed because in the end right you know the one who is deciding if the market actually wants this idea or not but if you're like very niche or very special it's just your your problem right and then you can storm something and until let's say you realize that the idea has no potential you should discard everything like weeks right so you have to invest three months four months into actually developing and putting it out and I

41:27 · think this can be kind of tiring as well if you do this like multiple times up region offer each other right so if you fail once everyone's just said I just keep on iterating and failing but they don't take into account that it actually also tires your right maybe you can't have like this high a motivation which I

41:45 · actually have which I am yeah which I would like to have right for new projects and then it's more like it becomes a strain of I have to do this now and if it becomes turns into this I have to do this the procrastination wants to gets also bigger and you're like yeah no so Before we jump into my

42:12 · talk I wanted to real quick take a photo of everyone so if you are on the call please go ahead and like you know activate your video let's all get a screen shot Before we jump in just in case we can see like you know who's on before we transition because you know people drop off and then while we're doing that Frederick can answer for me real quick what do you think about firebase is a back-end yeah for everybody I actually

42:37 · think this is a great solution if you're yeah if you're building just like a flood maybe yeah flutter old me up I think it depends right if your ends on your you want to let's say like don't want to build a back end if you just want to rely on firebase and firebase functions to handle some kind of micro transactions or whatever I think it's definitely fine but also think about that you somehow lock yourself in a bit although I think the services they are offering are great but if you want to do

43:08 · some more let's say sophisticated things some it's a fine like having naoki I mean we're just running all the time I mean cron jobs all that kind of stuff you can do it up to a specific degree right and but we all know at one point it just gets a bit happy right I think yeah definitely for sure you can always start with firebase when you're starting out in that because you can always migrate the data right it's exactly if you structure the layers

43:35 · exactly right so you can always move the day I don't think it's that big of a problem and given if you use firebase health education you can even export all the data as well or just keep on using firebase off I actually also use five it off because I think it's it's great yeah a good abstraction layer - yeah exactly right and yeah so I think it really depends on your needs if it's just basically if you're just using the standard functionality and especially firestore office you're in I'm great

44:06 · like search then it's then it's great but if you need to have like a more sophisticated search right like let's say something with geo geo stuff like yeah yeah yeah points I mean you can use geo hatches and stuff but they're like they have the limits right so it's all about the data yeah I think it depends and then there's

44:30 · also different different technologies for that right some some things there there's the real-time database that would make more sense because I think they just bill you for for the transportation storage and the firestore

44:45 · actually counts reads and writes so it's also different product so you have to think about is it more do I store like a little bit of data so the trends very fair rate would be low and yeah I have a lot of like real times yeah probably go with real-time database instead of the firestore right but if I also got all of GCP - so it's like you can do whatever you want which by the way there's plenty of shy people so go ahead and turn your videos for all the introverts as well so okay and we'll have another Q&A at the

45:24 · end too as well so don't feel like if you if you need to ask your question again you can alright so I think this is everyone last chance if you want to be making history so go ahead all right let's see that's it all right redo it all right we're gonna count down on ten ten nine eight seven six five four three two

45:50 · one nice thank you everyone okay so yeah sweet yeah I just it's good to get a kind of a good vibe Before we jump her in because um usually the people at the n are everyone that was here so let's go ahead and I'm gonna go

46:09 · into mind but um so I just wanted to kind of reiterate like a transition to be what I'll be talking about so whereas yours was more of a case study mine is gonna be more talking about like you know kind of examples on how to approach these situations because I know that it can be really daunting especially as a junior developer when you're like trying to make your place in the developer community it can be kind of scary to be like okay well these are the things I'm good at these are the things I want to do and sometimes they don't overlap and also like oh I'm good at building apps

46:42 · but I don't know where to build them you know it's like it's like you know I remember when I was first starting like I was like oh great I can't build an app but I don't know who to build it for you know it was like that you know you can do something on dribble or you can do something whatever it's like then it's just like taking that too like okay well how do I actually make money on this how do I take this from a hobby to a full-time job how do I change careers you know there's the whole like transitionary period that you face as a junior developer or even just for an

47:10 · experienced developer changing fields into a new technology so but today we're gonna be talking about specifically flutter as a service and how to do it in regards to you know making money you know full-time so I'm gonna go ahead and start my presentation I'm sorry for the people that will not be able to be admitted at the time so let's go ahead and do this and I will answer that question at the end let's go ahead and jump in you share my screen

47:50 · okay all right can you see my screen Fredrik yes okay cool all right and thanks again to everyone joining this is really exciting this is kind of a topic I've wanted to talk about for a while but you know you kind

48:07 · of got away from flutter to kind of become more popular he had to like a catch-22 but yeah I'm really excited because there's a lot of things that I've been implementing on my own and things that you can as well and I know Fredrik has that it's an untapped market

48:23 · and we were just dipping our toes in and there's a lot of room for everyone so as you saw like in Frederick's talk about how how much it takes to get a million like I mean that is just right on the nail and a lot of people don't realize that you don't have to have well yeah if you're only doing ads you need a millions of people but if you are willing to you know do paid upfront or subscription or anything like that you can easily like you know make it with

48:49 · just like maybe less than 3,000 people I think when I build my Tesla app even though it wasn't approved for iOS when I was waiting for like some of the numbers I was targeting that I could have like only need to sell like I think it was like 1500 subscriptions and then I would

49:06 · have been able to do it as my full-time like only doing that one application but then I had like 12 other applications so that's like you know my approach has always been like having multiple apps that you're working on so that they all can help each other so like you one will inspire the other one and then one will also help lift the other one because some apps are paid up front some are ad summer subscription some are free and they all like kind of promote each other in our complementary so some will have dry seasons and you know yeah it's just

49:37 · a approach I take so yeah we'll talk about footer as a service by developers for developers so yeah like as Frederick said there's over two million flower developers it's an exponential growth and these are active flutter developers a lot are out in China a lot of them are here in the US and it's rapidly growing and cool too about this is there's a lot of new developers and you may be wondering like isn't that a problem but it actually is a pretty nice thing in

2M+ Active Flutter Developers

50:08 · disguise because what's cool about there the great turnover or not this is a turnover but there's a lot of new developers every year is new developers and developers in general are lazy so like you know when you're first starting you have the least amount of knowledge and when you're an expert you have the most amount amount of knowledge and the least like you know wanting to actually do it so you you have these two groups of people that you can if you have a solution that they can buy a solution

50:35 · that's off the shelf and plug-and-play you can actually offer this to them and then they can take that on and your that abstraction layer which is really cool because people are willing to pay for things that save time or things that they may not have to do yet this could be as something as simple as on the you know like something like unity for example the marketplace like you as a VR

50:59 · AR developer may be really good at writing the code and doing a bunch of the other stuff but you may be like super slow at building models but so something that I like to do is like you know I don't have to spend you know ten hours learning how to build leaves on a tree and how did like shade bark and do

51:16 · all this stuff and then I have to think about all the other bazillion assets I have to add into the scene you you take that abstraction be like okay well I'm going to buy this bottle I'm going to just implement and that you could take the same approach for applications where you can build you know forms for business applications where they can be used in a nice way you can have layers

51:36 · of authentication protocols that they can just plug and say I want to offer Google Apple and Twitter and then kind of similar to like the firebase off you life and vice familiar but you can you provide one level abstraction higher so let's go ahead and just jump right in so first of all the market is quite large there is whoops there we go the market is quite large you have a bunch of cross-platform devs looking to save time multi-platform is a

52:08 · you know just say sorry let me hide this real quick you know you multi flat you have multi platform issues because you have you have to deal with you know iOS Android Windows Linux web and all these things that are all happening at the same time if you have a bug on one you're gonna have to have to like figure out how to solve which platforms are facing what like you have Play services you have iOS SDK is you have web SDKs

Current Market Cross-platform devs looking to save time

52:38 · and you have to you have to write all that code it's a lot platform code but it's a great place to step in as an independent developer there's things like web deployment you know when you when you have built your application like how do you release it into the wild and this is a great place where a lot of tools especially code

52:55 · magic is a great tool that's popped up and you know been targeting just flutter and be able to and many other platforms for that matter but you know be able to say that okay we'll we have web and desktop and mobile and so you can just use this and then we'll take care of all the hard stuff for you you know so a lot of developers like don't have Apple devices and this is a great place where you can step in and be like okay we'll handle the iOS signing but this goes so much further so there's things like sparkle it's open source framework that allows you to release your applications

53:22 · on the open web but then you have auto updating features to where you can get notified when it update is available look and install in the background this is a framework that's used by vs code and slack and any other tool that says like an update is available with that like very generic message that's actually using the sparkle framework which is really cool and then you also got things like application application assets so just as before with unity flutter has many assets that can be used you have app icons you have screenshots you have landing screens you have so

53:56 · many other host of like widgets that go with the application that go so much more like beyond like just the application itself so you have things like deeming we have material theming and flutter and Cupertino but you could build like that your own custom theme libraries you know you really target your your

54:18 · specific product your brand and like you can do something as simple as like on WordPress does this we can have a wordpress theme and then you install it and then all of a sudden you have your own look and feel that makes it feel personal and of course you can do this from trail design but you can also do this with just generic widgets as well and I think this is a really cool place where people can step in if you are a UI developer and you're great at designs but you're really suck at like releasing applications this is a great place for use happen because you can build all the

54:46 · UI component libraries you want and not have to worry about the logic and then you know the same thing goes for if you're a person that just likes doing backends and oh just love backends and I hate UI there's always a market for you too because you can be building these SDKs and command-line tools you can build scaffolding libraries and you can build there's so much that goes with the application process that you can step in and have a market for and as with any

55:12 · does you know you're gonna be juggling all these different platforms at once so it's like you have to choose what it's important to you and how you can step in so what are the current market needs well it is niche I display at this time

Market Needs Serving the niche

55:28 · but I don't know if you can call 2 million developers a niche it's a niche when compared to you know probably the total developer market but it's rapidly growing and it's I know flutters already past react native which is huge but there there is a market right now and you know we have things like developer tools anything that's relating to

55:48 · complementing the application process you have things such as CI CD platforms such as code magic you have templating engines which is like which needs to exist but there's a couple different ones that have kind of popped up I don't think any of them really stuck or like have gotten super popular training resources or things like if you wanted to create a udemy course or YouTube or video training series this is a great place if you're great at training people

56:14 · on how to do stuff this is a wonderful place where you can step in as a developer to be able to train the new developers coming in and you could charge for it I mean you can charge anywhere from you know ten bucks all the way up to you know hundred dollars or more for a course and you make that money every time that a new developer comes on so I think this is a great place for content anywhere anything

56:36 · relating to dynamic content so if you have a back-end in front-end sdk where you can you know manage like showing new updated information something like a dynamically generated you know widget that is running from a back-end service you know just something simple where someone has a need they want to be able to update their app without having to send a new update to the app store you can fulfill that need and then things like I mentioned earlier premium widgets so this goes for anything like paid

57:06 · charting libraries or paid templates that you know have built-in login screens and signup screens or something that I really like doing is like startup templates so you can say okay what is the minimal Viable flauta project that gets any login flow a you know going to

57:24 · the home screen and having a settings pop-up that I can change the dark mode and it seems so simple but they're like there's such a big need for it and there's not a lot of people that are making it right now so the more that you can build that and then release it and sell it this will help people to and of course there's always going to be free content like don't get me wrong free is very important but you can also

57:47 · make the distinction between having free content and paid content and be able to upsell on things that target businesses so whereas you know the developers that you're working with you know may not always be your market you can have it open sourced or whatever but you also want to add like premium templates so like a team like you know if slack all of a sudden decided tomorrow they wanted to use flutter then you would have to you would want to be able to have a solution that said like okay here's our

58:11 · different widgets and then you can buy them and you know it's this kind of a transactional marketplace that you you don't have to worry about who's using them you know very permissible licensing and you know you get the idea and the biggest thing here is to your developer helping other developers because at the end you guys both succeed there's gonna be things that you're developing that other developers need whereas like you know Fredrik for example may have like a

58:38 · supporting library like wire - that really helps my applications but I could have something that could really help his applications and because we're not having to both build the same things we both can focus on our own things and then also help each other in the end so I wanted to go over some like example applications of things that I've done tools that have approached and some kind of successes that I've experienced so far so flutter storyboard was one of my very first developer tools I built for developers like from the day one I wanted to I I started with iOS so I was

59:10 · very much you know using storyboard to lay out all my native iOS applications I was really pleased with it and so when I came to flutter that was one of the biggest things I missed so I released the MVP version of storyboard and it is far from finished I have tons of cool updates coming out but it allows you to with just simple wrapping your flutter widget your main app with storyboard it

59:35 · will actually take all of your screens and your routes and lay them out on a canvas that you can see and update all at once so if you wanted to test your login screen beside your home screen beside your detail screen beside your setting screen you can and you can just just like you would hot reload and then all of a sudden you have you can update the change and see it live on all your screen so you don't have to navigate to the app what's really cool about this is when it's combined with flutter desktop you get some really cool stuff because I allow

1:00:06 · you to choose a device frame on the storyboard so you can say oh you can make it like a mock-up like an iPhone or Android iPad and it'll layout everything for you but what's neat about that is you can have your desktop resize the

1:00:21 · window however you want zoom out the canvas to how it fits but then you're developing you know in your IDE and you don't have to have like be running on a device and flutter desktop is way faster for hot reload and of course there's things are not going to work you know if there's an SDK that's not available on desktop and it is on iOS you're still gonna have to test on a real device but I think it really gets you really far you also have the ability to yeah set

1:00:45 · dummy data as well as you know just having like various things like screenshots which I know people are using it with and for those that haven't seen it before this is a storyboard it allows you to have all the frames and one screen really smooth it's really high performance you could have like a hundred screens on or more and it doesn't affect it's only rendering what's on the actual visible window at any given time you can fully interact

1:01:11 · with every single screen that's shown and yeah like I said this is the MVP there's a lot of really cool updates planned and could including you know panning and zooming and a bunch of other stuff with multi-touch gestures on the iPad yeah it's just a simple you know is an idea probably had and just like a weekend and really wanted to implement so next I want to talk about widget studio and if you haven't seen already I release widget studio about a week and

1:01:41 · a half ago and it is actually been trending on the iOS Mac OS and iPad OS App Store in the top 25 to the upper tools what's really cool about this application is it allows you to you know

1:01:57 · develop these multiple widgets all at once but in a standalone kind of a way you you know whereas you know with a flutter editor you're you know with yes code or something you're building an application and you're building a material app with multiple screens and then I wanted to create that abstraction of okay I want to create a login screen I want to create a home screen I want to create a material app and then everything's a

1:02:21 · widget so then you can copy the individual widget out and then use it wherever you want or you can reference multiple widgets like on the last update which I'll show after our presentation you can actually reference other widgets on the canvas and it exports everything for you all at once and from day one I built this to export code that you can use in your application today and I know

1:02:46 · Adobe XD and some other tools have come out but they are exporting code that's really not meant to be used it's like okay using a bunch of transforms and burnt a bunch of like you know verbose kind of things whereas mine is you know doing it the fluttery way so like you know when you have a scaffold in that bar and a floating action button and a center and a text it'll do it just like

1:03:09 · you would if you were building a flutter application yourself writing code the nice advantage of that is because I'm building it for developers and I use it myself if any time you used property is like in the constructor it'll automatically Adam as debug outputs you automatically get it to JSON you know constructor method in your widget and there's a bunch of other stuff that I've added which is like you know a lot of sugar but what's really cool is you can

1:03:37 · then have the advantage of having a color picker or playing around with widgets I love developing these widgets on like an iPad because I could be on an airplane and you know be laying out these different widgets and really start to like get to know every single widget because it exposes you every single

1:03:56 · property that the widget has at one time I've learned so much about the flutter widgets just unlike the past like two weeks even after been using flutter for over two and a half years so for me that's like wow like I didn't know that textile had this one property and because of that because it's exposed out in front and center you can really play around with it and not have to worry about it messing up your project because it's isolated and it has full undo/redo so then you can just remove anything that you mess up and and of

1:04:23 · course that has drag-and-drop and stuff like that but it's just an example of me building a tool that is made for developers that can be used in a real world way and another thing to kind of preface this with too is you know there's many tools like this that need to be made for flutter you know there's you know anything that's relating to networking or things that you know

1:04:48 · relate to templates just like I brought up earlier these all these kind of tools need to exist because for developers wanting to save time you can help step in and be like okay I can provide this and then people will use it and not everybody's gonna use it that's not the goal you'd like it like we said earlier you only need like zero point zero zero to five percent and because of that you will be very happy with you know the

1:05:14 · kind of adoption you get it's not about making thousands of people happy millions of people happy it's just like worrying about maybe a thousand maybe a couple thousand and that's a whole lot easier to manage when you approach it from that perspective choose your pricing options to where you have a market that's at a price point that makes sense for you and what you can actually manage and you know things that you want to get up for and be able to do so here's a quick demo of the

1:05:40 · widget studio where I'm just taking these different elements and I'm dragging them down the canvas and what's cool is like it it's very flutter ease so like you know if you have a preferred size widget like an app bar you can't drop it on to a container like a container child or anything like that you have a full widget tree that you can inspect and edit every single property that the widget has you can then use even since just making this gift I've added like 20 more widgets so we're

1:06:13 · adding ton of widgets every single day and we're targeting the end of the material catalog very soon but you know it's just you know it's just a simple tool that allows you to that solves the need of you know exporting for flutter so as you see here I do two brackets and

1:06:29 · then I say count something very simple but when you go to the export code it'll automatically give you a constructor option that says count so then when you're using this widget from other places you have that option that you can then send on so it's kind of like a almost like a view model in that aspect so there's also things in regards to application support so I'm working on some applications that help you design icons for your your iPad Mac OS and

1:06:59 · Android applications you know easy like be able to upload and download an icon resize it things on you know that also should exist and that I've kind of taken stabs up but if kind of like in the open source level right now but PWA manifest generator privacy policy generator these are two things that like are needed in every application and photo right now but there's not like a good you know

1:07:23 · tool that's you know there's tools that generate it but like being like the owner of that and being like ok I'm gonna do this better than anyone and we do it right and I'm just gonna nail it to where it's like people like oh yes like I'm gonna go to that tool every time that's like where you want to be and that's how you serve the niche and just as a side note just because there's

1:07:42 · many apps that exist in a market that doesn't mean that you can't enter the market if nobody is really serving it well that's probably the reason why there's so many competitors or so many tools available for example when not one

1:07:57 · of my very first photo applications which I originally built native was a pitch pipe and when I originally built it there was plenty of pitch pipes on the app store I mean there was at least just in the one category alone there was probably over 100 but I decided to take

1:08:12 · an approach on the pitch pipe that was completely different and made it super clean professional like you know very modern and because of that like mine like reached like it's now the number one and has been the number one for over a year and much longer than a year but in the last year like nobody's come close but the purpose of that is because all the other people have just built it

1:08:34 · in a way that didn't solve what people are actually warning and so when you find and you serve that niche you really can help developers and anyone for that matter really take a problem solve it and then they'll be your brand champion so other things to real quick you can also build screenshot editors so you know every App Store Google Play and Mac OS Windows Linux all need screenshots

1:08:58 · and it's something that see really simple but can be a pain in the butt and what's really cool about flutter and the ability to override your target platform you can actually generate the screenshots without running on an emulator as long as you run it in the specific dimensions you can they're valid to be exported and then other simple things like a splash screen editor because this is something that's often forgot about but I know on lower-end devices this could be a real pain so

1:09:26 · here's just a quick example of me building an icon generator it allows you to you know upload any icon you want and what's cool is when you download it downloads an archive that you can literally drop directly into your applications so it creates all the folders for you

1:09:43 · in here I'm going to show the individual ones but what's cool is like you have the icons in the correct format in the correct folder structure and you literally it's a plug-and-play kind of system and then you as a developer just worry about creating your your one icon what's cool on the new WBC announced that we can now support SVG icons which is going really great for iOS and Mac OS but still paying the button on web and and Android at the moment and Windows for that matter so some other things

1:10:13 · that I've been doing that also need tons more tools built with is CLI tools not every developer love CLI in fact a lot of people that like no code tools H CLI or anybody that's like a designer usually doesn't want to do CLI but for developers and back-end developers this is like bread and butter like I'll choose a CLI any day because I can build

1:10:37 · my own tool around it so things like app scaffolding templates app clones just really easily be able to say like you know whatever generate this and then it just generates it to where you can have it exactly how you need always in the way you need it this can also be just as

1:10:54 · simple as like no angular has this generate system where you can say ìokay generate this component generate this service generate this and once you introduce structure you can go so much faster every single one of my applications follows the same folder structure the same pretty close to the same state management but I have the same structure in every single one of them and because of that I can copy and paste between projects I can jump into any project no matter if it's like a year ago and know where everything is I'm never confused and it's because you have that structure and it's ok if the

1:11:24 · structure of vols but you got to evolve with it so it's like you know if you do a new practice you got to make sure to implement it in all the places to where it's consistent when you don't have consistency that's when you're going to really bite yourself later so other things like reducing boilerplate so anytime you have the successive amount of stuff to do a quick example is I took

1:11:43 · I made easy web view which is all the boilerplate for regular web view in just simple tools like that where you're handling that abstraction layer of doing all this complicated unnecessary stuff but then the developer just gets to have like a cup align implementation that is prefaced with the fact that if they want total control they're not going to be using anything if a person needs all the fancy

1:12:06 · callbacks and you know whatever they want they're gonna have to do the regular implementation just as what you're trying to do your goal where you're stepping in is for the lazy person that doesn't want to do all that stuff and just says like I want it like in five minutes be able to build this application and I just need a webview or whatever insert widget here other thing too is

1:12:27 · code generation I think Remy has done a wonderful job with freezed and a bunch of his other packages that relate to code generation where you can say okay here's a specific need Dart where we needed immutability and json serialization and copy with constructors and stuff like that and you can be like okay well i can build a package and you know a set of tools that will do all this for you another area where you can do is localization I know there's

1:12:55 · localized e and some other ones have targeted flutter but it allows you to say okay well we have this this problem which is internationalization and flutter applications and we have a solution which is building your your JSON files of your or your AAB files for all your translation files like I said earlier dynamic content and also just a service abstraction of insert whatever service you're using you can then be the abstraction for the person that's using it so um another big thing is you got to

1:13:25 · find your market because not every you know market is the best one and a lot of it takes like I know Frederic talked about it a little bit but you know you gotta see what the markets gonna be first you gotta put something out there let it bite and see okay actually that's

1:13:41 · way different than what I was expecting or oh wow people really love this and that's the thing I was carrying the least about so it's like you know it's a it's about tailoring your your applications over time and being flexible to say okay well the markets kind of taking this shift I'm gonna see where it takes me and one of the things I've learned in my

1:13:59 · life too is being ready for when that wave happens like you don't need to go buy a surfboard when the wave has already started you want to have the surfboard and be ready way before the wave is you know come to you because one you're there and ready you get to you get to experience all the joys of being the first mover and having the great

1:14:18 · market of you know being with others but if you're always playing catch-up like you're never going to get ahead or it'll be really really difficult you want to find people that are highly motivated and willing to pay and funny enough developers are one of the people that love and know what it's worth to pay for applications not every developer but I would say most developers understand that like if an application is $10 or $5

1:14:45 · or even $1 like a developer with would probably not think twice about buying something whereas a person that is not a developer would be like oh I'll never pay over XML and in fact I buy so many applications just because I want to support the developers regardless if I use them myself we also have you know like I said you want to make sure you evolve over time and then support the new developers coming in this is kind of a unique field where flutter is for better for worse

1:15:16 · targeting cross-platform development in a both complex and super easy way so like you can use flutter and not know about Swift C++ Linux or you know c-sharp or whatever you need or Java even for that matter or Kotlin but and you can only use Dart and then you can build all your applications it's great but there's also the developers where as like myself if you know how to write the platform code then you're in like a

1:15:44 · really good position because you can be building these really custom tailored experiences but because flutter tailors to both you have a lot of new people coming in that's like this is the probably their first introduction into app development so they're gonna be only knowing Dart and they're gonna need some tools they're gonna step in so maybe you're just a developer that knows how to write Swift and and Kotlin just a

1:16:06 · simple example well you can then be a contractor for writing plug-ins so if they say okay well we need X Y & Z you can step in and be like oh yeah I'll build a plugin for whatever your company is needing so you get to build plugins and then they get to just build the applications just another quick example so yeah it's really exciting stuff and it's all about being ready for when the market comes and then lastly too we want

1:16:31 · to talk about like pricing options because you want to make it worth your time you don't want to be like spending all this time developing and creating this stuff to like have like like it all fall on your face because like nobody wants to pay for it or it's free and then like or like maybe you only have like one user and you know it's like there's so many areas in which you just got to be so careful so some things that

1:16:53 · that I kind of take it approach is like there's there's a couple different models you can take which is like subscription which i think is really good of course people will have subscription fatigue but it's about offering it at a price that makes sense to you and your users paid upfront applications are one of my favorite type of applications you there are disadvantages of course as always but for me the trade-offs are really nice so first of all with paid upfront applications at least on iOS and Mac OS is I can I don't have to deal with the

1:17:25 · in-app purchases which I have many applications and I've done it for but all that abstraction is just like okay well if they want it it's gonna be like you know they're gonna see the reviews and it's up to them to whether they get it what's nice about that is apple offers search ads which is really cool where you can actually price your your application at a certain level you say I want to spend X amount on search ads and you only pay for when the application is installed so you're not having to pay for general marketing and you can never

1:17:56 · lose money on marketing which i think is a great place for paid up front applications like I said there's other disadvantages people like Oh what about a free trial and stuff like that and this is where what I approach I've been taking recently is offering the web version as the free version I totally believe in the open web I think web has been the best thing that has ever happened for mobile development and I love how powerful you can make

1:18:22 · things on the web flutter is a great example where you can release something on the web and all these native platforms and offer these experiences to where if they want to try and do whatever they want they could do it on the web but if they want like a higher quality experience that's a you know multi-touch gestures and doing all the like the native offline sync and the high performance rendering and 120fps all that kind of stuff happens on the native applications but you still get to

1:18:48 · offer your product for the people that want like a PWA and to be installed on their home screen for example on the web and they don't have to be the same experience it can be when I think it's great when it is flutter uses a skia as an optional flag which makes it really good and performant and actually it's really hard to tell the difference between native and web but other things

1:19:10 · too is you know you can offer courses on you know for flutter and any other frameworks another nice thing too is support so for example like if Frederick wanted to hire a team to do support he could then target you know really big businesses and be able to charge tons of money for support because businesses are willing to pay for that you don't even have to be the one supporting them and I think that's great for even other applications too because it's something

1:19:39 · that you don't realize how much people value at big businesses just by having a 24/7 access to a support line they will pay you just paid name the price and they will pay it like they will choose your tool over other ones based on the support and then in tying in with that having teams to be able to just support ok collaboration on your tool and be able to working with other people and just like having the options for you

1:20:05 · know who can pay for what so what are some future ideas that you can do as you know flutter developer general developer or someone just looking in to get into the market well like I said earlier I think app translations are another thing that I don't think it's completely served yet I think there's still room for a really

1:20:25 · good or maybe a couple people to build an app translation service that's not only easy to use it works way better with flutter something that you could like literally extract stuff and have ability to change on the back end and I know localize II has done a lot of it but I still feel like there's some more that can be done there database tooling so anything relating to like sequel Lite or the persistence options this is still something that's an open question realm is really flirting with flutter at the

1:20:53 · moment so it's a it's getting close but not quite there yet other dev tools just because flutter releases dev tools doesn't mean that you can't release your own there's been some other examples of people on Twitter that have announced different dev tools that they've made or examples and I think that's really cool a marketplace this is still yet to be made with flutter you know a place that where people can go and and buy these resources just and

1:21:19 · then I just like to say on that one people have built marketplaces but it's important to take this from a perspective of collaborating with other creators building in a way that the developers and the creators that are creating want to be on this marketplace so whatever whoever builds it it needs

1:21:37 · to be something that people want to use and it's not like it's not about like whatever the prettiest tool wins because that's not the case it's not about whatever usable tool wins its it's about whichever tool solves the need the best in a way that helps everyone because it

1:21:57 · may not be the best tool but if it if it solves the purpose really really well doesn't have a lot of issues with bugs and stuff like that that usually is the one that wins out and then like I said earlier other resources that relates to flutter applications you know whether it's like I mean something even if you're just really good at writing a book something I think would be really cool that rest is done is building a dart book you know or a flutter book and just have like a really simple like interactive like from here you know zero to hero you

1:22:25 · know just say like okay here's how to do this this and this and this and you know stuff like that I think is really good so a conclusion you want to build and develop for other developers anytime you were saving time that is an opportunity cost for someone else that is going to be doing the same thing so that's where you can step in and be like okay well actually we can save a lot of money if

1:22:49 · we don't have to do this and I'll be willing to pay XML so anytime you see that and you're like wow this took a lot of effort you're like huh I wonder if I could actually just build this as a package and you know sell it for someone else or give it away but and even if you just as a side note even if you don't want to charge for anything there's other options out there you can also do like patreon and have like buy me a coffee and PayPal donation links to where if you there's plenty of people that just do that and then of course

1:23:17 · having YouTube channels and whatnot so keep that in mind too that you can still do this and still have support but I do believe that you want to make it worth your time regardless of what you're doing charge when it makes sense just like I said and then also something should remain example it's not every product that you're gonna make should become a product it's sometimes just be better just released as an example and be like okay you know this is great but like you know I think I'm gonna defer to other people like for example like I built a podcast player and it's like I I'm crazy

1:23:50 · about music applications I build them all the time but you know there's so many podcast players I don't want to compete in the market so I just made it open-source and released it for others so just a simple example you know there's a growing market and new developers keep that in mind because you're gonna be targeting people that never coded this is the first thing they're coding with or people that are very experienced and don't want to do anything at all so build for both those

1:24:16 · audiences serve the underserved if you were finding people that you know are frustrated you know those are great people that would love to find this kind of service if people's every if everyone's happy then there's not really a market for you to have and then like I said earlier support is worth paying for and way more

1:24:35 · than you actually think yeah just look up some of like your favorite your favorite tools and just look how much like support cost for 24/7 it would be pretty surprised like we can be sometimes talking about like triple digit so yeah we're gonna jump into questions real quick but just wanted to say thank you so much for listening to this I I've been working on this for a while I just wanted to you know talk about some of these things that I've been going through and experiencing personally and really excited to kind of hear you guys feedback

1:25:06 · you all right so let's go into the questions yeah first of all Rory I think this was a really dense and interesting we have a few like participants here and I think you dropped so many ideas there should be at least one for everyone and I am I

1:25:36 · can't emphasize I emphasize more the fact that young people should just bill something that actually fixes the problem or fixes for them and to emphasize the fact that you just need to find like something like this very small

1:25:52 · thing what you was referring to her service or maybe underserved search is like a few well maybe it just thousand one thousand developers right and you could live up that that's that's something else and don't always approach stuff with this you know shoot for well the moon kind of mindset although this is great and I like this as well but you know don't burn your your fingers right like with those big ideas just start small try to

1:26:20 · get your food into the door with a small idea that you may be charlie to flutter only and then you can evolve out of it like you just you just build a flutter event at some point maybe you see oh there's meat for it like fellow developer have this neat or maybe even multi-platform developers have this need and then you report it over to react as well and then you grow and then you become at one point like after a few years you become the market leader and this is in my opinion how you grow a sustainable business plan out of like parting with a niche and then having this organic growth and I think even the

1:26:52 · big players very like Google Facebook all of them they started actually very small and never thought that they would be multi-billion companies so yeah I think that's very very important and a powerful message as well for people no thank you so I'm just gonna jump into some of the questions so I'm sorry I'm not gonna pronounce any of your names I don't want to get them wrong so we're gonna go with how do you manage learning new things and prioritize so for me I I'm really

1:27:26 · big on creativity and passion but those inter you know mingle all the time so it's like one thing that you stay you know keep from burning out two is you stay up on different things that are unrelated to what you're doing so this means like you know doing stuff in VR and doing stuff outside like coding and music and performing and sports and

1:27:49 · everything that's unrelated helps you with coding like if you're only doing coding you're only gonna be good at coding but if you learn these other ideas then you're gonna be like oh you know what I actually did think of that from over here and you know creativity is just innovation you know regurgitating different ideas and that you know outputting different ones I'm just gonna kind of do just a quick a couple other ones real quick how many I

1:28:15 · can elaborate on this yeah yeah of course yeah I think it was a quite a long question as well because it was all saying there's a lot to learn and I end up not doing much Q the procrastination overhead right I think most importantly

1:28:30 · is not to think about doing stuff but just doing you know this is this is a very important thing you know just start with something small if you think about something like I want to build a smart home application right just start with something small start with an app that has it has a button that turns on a light right that does like some kind of memory quest and then from there you will go from there because you will get motivated on the way it don't over think this is like literally the worst thing you can do that I always do myself if you think too much about a possible solution like even our database schemers

1:29:02 · how you use factory data all that kind of stuff you know be assured you can always change the stuff later on if it gets but just get started don't let this well if you're saving and if you're saving into version control like yeah I know like people they're always scared it's like well they never saved and it's like yeah of course you can't be able to refactor you know

1:29:26 · sometimes I keep myself like just overthinking we all know this phenomenon where we think about name right which is just like you can rename it at any time if you come up with a better name in some point right so just don't look with a better name you're never gonna get to right the first time babies you know just continue a little work with what you have this is a very important thing otherwise you will always like over things stuff yeah and

1:29:52 · the idea of like incremental improvement like you know it doesn't have to be like a version 1 version 2 version 3 every time like you know it can be very much like okay all I did on this update was just you know choose a new font and but or maybe I just like changed a couple things but you know like I've more recently switched the idea just like okay you know what I'm just gonna release things as I add them and stop like trying to be like this wave of pressure of just like okay well 2.0 is

1:30:23 · out and it has this isn't this in this and now it's time to jump on because then all you're doing is creating people that just are waiting for the next version versus like if you're outputting all the time in which by the way we talked about this before anyone joined or as a couple were but you know this is a great idea for like a Twitter account and when you have a Twitter account for your application you're allowing you to generate hype over time and you're destroying the barrier of one version 2

1:30:48 · version 3 version you're just saying here's some exciting updates here's some discussion about it and you get to really connect with your users on an individual level and see like what is actually they're wanting because if like my choir - is a perfect example you don't want to build something that nobody wants and you want that feedback you want to be like ok well I really love it and know what everybody else hates it you know that's not where you want to be and you will be surprised

1:31:19 · that people know that you're building this they're also like they don't care something's not working you know if they know it's basically developer you know roadie build this and I I don't expect some people rodeo that I would expect on the big corporation I would just a project only differently and you really notice that in the community as well so people like yeah you know I just promise but if you can you know check it out in the upcoming days that's fine it's not like I fold this but I don't uses em anymore it's like how dare ya

1:31:51 · play right you stop working most of the users are like Anya you know this is the shitty app you know I just like uninstall and your gum they will never download it again but if you if you're building something for a community which you're a part of and people know that that's like way they're way more forgiving and they they like to this is very well I would like to say though like don't feel nervous like you can

1:32:17 · bill apprehensive but like like don't feel like you're being judged in the community by it either like just because you're creating this like this is not like a oh well Fredrik really sucks at doing this kind of X development and it's like you know it's like you know it's it's a your product can live outside of yourself as well like you know like your product can be bad and you can still be a good developer you

1:32:40 · I've made plenty of bad products it's like you know it's like they don't define you and I would just say like because when I was first starting out with coding and development that was my problem is I took everything way too personally I'd be like oh they hate this like oh this is they just hate my design and so it's like you know you second-guess everything but yeah I think it's really important to remember that there is that distinction so when you're doing this you know you know develop it for the community and for yourself first because if you want to be using it all the times and there's a chance that the other developers in the same technology do too so I'm gonna also talk about so

1:33:16 · the free trial i talked about my talk but yes you can offer free trials for paid applications you can do this on both Apple and Google Play however I like to have the web version as the free trial because it's an unlimited free trial they can do it as long as they want and whenever they're ready to upsell they can just install it my kiss transactions you do it good for interrupting I think there's actually a really interesting question as well that you might have missed this yeah I think

1:33:50 · it's actually interesting question so maybe you have yeah yeah I think it's a huge domain right now currently there's a couple different players in the space there is a charting library I cannot think of their name at the moment but they they have like oh is it called sink fusion yeah sink fusion charts they offer paid flutter widgets for these really complex like charting kind of stuff I think this is a great place a package that I'm

1:34:15 · working on that is released but like far from like the level of where I want it to be is called data tables there is a great data tables library that exists for the web and there's nothing like that for footer yet where is like you're taking like a material design implementation of a data table and you're adding all the other features like download is Excel searching and reget reject search and be able to have

1:34:37 · column sorting and all the kind stuff be able to step in and be like okay I'm going to provide that best experience you just give me the JSON data or c.coli data and I can handle it from there so that's another great place premium widgets also a great for anything relating to firebase or AWS or you know

1:34:53 · insert your you know whatever cloud back in here you know you get to provide widgets of like okay here's a login button the login button does all the abstraction layer for doing you know showing up the pop-up screen showing up this and then all you have to do is a flutter developer as you customize what you say on the button making sure you have the correct files installed and it does everything for you something super

1:35:15 · simple you know if you're I'm a huge fan of block specifically flutter block and some other state management tools but I built block libraries that allow you to just have a drop-in solution for authentication to where it handles all the logins sign out sign up change email change you know whatever you as a

1:35:32 · developer just make sure you call these specific methods I think this is a great place for premium widgets and it's a huge market and not everybody's gonna pay for them if you don't want to pay for something you're more than welcome to build it yourself keep in mind the you know the theme of this talk is you are trading off the opportunity cost if you're saving time that's where someone is willing to pay not everybody is willing to do that they're willing to put in the time to build it themselves that's okay you are targeting the people that just are wanting that convenience

1:36:07 · I want to also related to that I only talk about the micro transactions and the unlock features with in-app purchase and yeah I have an application that's completely built around you know and I purchases for unlocking stuff and

1:36:26 · subscriptions and stuff like that that's another place I think the tool needs to step in revenue cat exists but it's currently a pain in the butt on both on clutter to be able to like both test iOS and Android there iOS is announcing some new SDK is there gonna make it a lot easier but Android and iOS at the moment

1:36:44 · are really hard to test to see like you know making sure the payments went through testing the devices and what it counts but yeah and then yeah the development online compiler I'm online compiler I've actually made a ton of progress I'm actually did it rebuilt it in aqueduct which is really cool so you can build run and update any file remotely which is really cool

1:37:11 · do you see any other questions who made target Fredrik you can just call him out if you want me to ask tomorrow maybe yeah what is your current opinion about

1:37:33 · yeah yeah yeah I can talk about it so rephrase that it all depends on the application itself I think widget studio and some of my other applications are great used for flutter web because it's like very like

1:37:50 · it's an editor you know it's a bunch of like components and things you know all clicking and you have the state management and there's so many like little nuances that like I think flutter does great because you're not how to do CSS you're not having to do anything you're just literally paying to a canvas in handling at all things that aren't

1:38:07 · great for flutter web and I built my website and flutter web and some other things and recently change them back to Jekyll because it's not great for start static content or server-side rendering content right now so anytime you have like a post or things that are just like you know dumb websites that have no application state and they're just literally HTML files yeah flutter web is not the solution it doesn't mean it won't be the solution in the future but right now I think anything that's static

1:38:35 · should probably stay static and honestly hTML is not bad it's gotten a lot better and with web components and a bunch of other things that have been added recently to the web it makes it pretty easy to do that so yeah yeah for me I'm

1:39:06 · a huge fan of firebase and GCP back in so I make sure to have Google Analytics and all my applications or most applications I track events for a different kind of stuff I can really easily measure like kind of a general Apps vibe on like okay people are using

1:39:22 · this screen way more than I thought or just simple things of like if Anapolis crashing or not I kind of get like a barometer of all my applications to see which ones are you know good what's the general feedback and I also measure my analytics on Google Play and Appstore for seeing like okay it is like a trending upwards downwards as a scale is nobody buying it so based on that it

1:39:45 · really kind of dictates when I do updates for apps I try to only do an update for an app when it comes down off the bell curve just a little bit because there's somewhat of like a and this is not for new apps this is for like existing apps but when your app is starting to go down that's a great place to step up because otherwise few too many updates in a row like you kind of like are competing with your own updates so it's like you know you may make an update and then like someone like only sees the latest update and doesn't realize that these X features were in there because you just overshadowed it so giving space to have the updates has

1:40:17 · really helped me so it's like you know I may only have to update like an ass like three times a year but as long as there's a really solid updates usually that can be really useful and then it's also about managing you know like for maybe testing for example I love to use the web for my my beta play

1:40:34 · so it's like I'll just change do crazy you eyes and do whatever and then I consider my iOS applications and my Android applications as the stable branch so it's like it it'll it'll update way slower but it'll have the refined almost no bugs you know stuff like that so I think that's a really cool distinction to like be crazy on the web be stable on the App Store's and then you get people that are really solid and want the applications and and the support and the you know just like I never want this to fail but then you also get the people that want to try out all the crazy crazy new features to do

1:41:05 · you have one or two like favorite kind of side projects you're working on which you give priority to probably maybe it's like yeah so for me right now I have two projects that are taking the most of my time which is widget studio which is still been trending and top 25 of the App Store so that takes a lot of my attention right now and then also hymns for worship as another app I've built which is cool because it's a globally distributed sheet music and presentation creator so it's used by over 3,000

1:41:36 · people like almost every day so it's like very popular and because of that you know there's a lot of issues that come when you when you have a popular application so support and bugs and things aren't working so yeah those are the two that probably take the most of my time of the 12 apps that's awesome I'm just skipping through the questions yeah you mentioned solution what is your

1:42:09 · view on using Dart generally on the backhand side yeah so it's always my first solution but there are solutions that I think it's great if honestly if you're using something like protobufs or anything that's related to G RPC it doesn't matter what you're using on the back end but with that all being said I built backends using C sharp net I built backends using you know just straight-up you know general nodejs or something as

1:42:33 · simple you know I've also played around with rust and all these kind of things I think dart is really cool especially with the asterisks of like you know dart compiling to native like dark to native because it allows you to really just submit a by and run it wherever you want I think dart is really great for that a cool thing about aqueducts and the reason I chose it is it allows you to run on multiple isolates so you can have a

1:42:58 · basically however many cores your computer has that's how many cores the the HTTP server can run on so I think that's really cool do you think it's ready for primetime like would you buy it yeah they're big scale production yeah I definitely would okay

1:43:27 · yeah that's my current weakness I like documentation slows me down and I know I have to do it and I know it's important but yeah that's something that yeah that's something I struggle with is having the time and writing out the documentation because for me I feel like the second I write the documentation I'm stuck to it because it might might have changed so much but it may be also a

1:43:50 · good thing as well to kind of have some stability but yeah I really like so if you're building an HTTP server I really like auto generate documentation so things like open API is really cool I know I think it's called um

1:44:07 · not swashbuckle but uh there's a there's some kind of framework where you can use this with opening api standard it'll generate your api documentation the same goes for flutter applications you can actually generate and annotate your classes to where can actually swagger thank you and you can generate your your

1:44:25 · documentation using dart doc so it can actually you know give you stuff like that but i kind of like to take a different approach to like making youtube videos and blog posts and as well as i like to have it dynamic so things like you know in-app workflows to where it's targeting specific widget keys that way no matter if i refactor the app it still you know is always up to date because like ii you take a screenshot it's already outdated you know that's that's always a pain yeah

1:44:54 · because it's very much of a dynamic thing cool yeah maybe I can also add one point to that I for why - I'm currently using issue through press so it's basically all that exciting writer which is kind of good I mean it's it's free and open source you can also go with something like get booked but then it's already paid from the first second on yeah thing about if you go with something like blue press is that you can just have you read me files right and then maybe basically deploy on on a committee

1:45:23 · or something to notify it just you know push your documentation life and basically also running for free if you're like having small product so or small documentation so that's yeah yeah I think another interesting question which I think you more or less already answered it is how would you approach

1:45:44 · server-side rendering on full web for CEO purposes right like I mean I think that's a very important question especially for like federal replacing web development right because obviously you want search engines to index your site especially if you're building like a meta search engine or whatever or something where the condom is very important to be in that frame so do you think there will be a solution in the future or what are the current views from your on this hoping and regatta

1:46:17 · flow yeah yeah so there's a couple different ways I can answer that I will answer it with the first of all the floater team is working on solutions to make your websites more SEO in fact since flutter web is launched it is way better than it was things like generating a virtual semantic tree things like generating virtual site maps and stuff like that so those do exist PWA manifest is really

1:46:43 · helpful for your application you know there's a lot of things that go around that taking one step further you know optimizing for SEO amp store was a footer application on the web we built that needs to be very SEO dependent so things like your URL routing is really

1:46:59 · important you can actually Simon has done a really good PR to the flutter thing that's not quite merged yet but it removes the hash so there's things like just disabling the hash can fix most the issues there but just having URLs that are you know static and changed and have the same content as long as you keep using them Google will pick them up and then start to serve them as well this also

1:47:23 · you know taking it further things that I've done in the past to kind of get around some of the limitations is using firebase redirects I can actually redirect to firebase functions that then return static content so then like let's say I have a blog post for example I can link to that URL and it returns the markdown in HTML form or whatever I want

1:47:45 · and that's indexable on the web that's copyable and whatever but you also have a flutter web application so you can build these like kind of a hybrid approach which I think honestly is going to be the first approach yeah I think that's the biggest thing it's just like you making these trade-offs but that being said nowadays it's like there's a

1:48:09 · lot of people that care about SEO I'm one of them but it's also apparently not as a big deal as a lot of people are making it out to be like if you're a small business SEO is really important but if you're an application your your URL is the important thing so if you can be getting people to go to whatever app that's way more important than making sure your your blog post three pages down it's always linked yeah I also totally agree with that it depends on what you use is for for the kind of app

1:48:39 · right if it's like really like an app that you would run in your browser or you would want to rap yeah then I think it totally makes sense to think about using clutter but if you still want to do something like which you can involves also a lot of text and then all stuff like that then it needs to be indexed I I don't think that it's quite ready yet yeah yeah I think yeah so I think

1:49:04 · there's just like some kind of questions even rolling in so there's for internet what is your approach to integrate for UI into a big existing code base rewrite from scratch and arm or try to reuse the Oh Jake intrepid and a son of us my talents yes one of the fruits one of the

1:49:24 · first applications I built was a native application on Android and iOS and the first thing I did was rebuilt the flutter UI and communicate through platform channels it works great it has a binary messenger you can do a lot what's even cool is that confusing Kotlin on Android you can actually use Kotlin native and then call into it with FFI so you can actually take your existing Kotlin code deployed as a module in a library and then import that inside of flutter and then just call into it just like that but for me honestly I don't know if a

1:49:55 · lot of people know this but if you D compile it into Java you can literally copy most dart objects directly from whatever and convert it to Kotlin and that's really close to dart so you can yeah there's some really cool things there where you can you can actually migrate your cloak code really fast and some things that you don't think about when building on Android is lot of things that's like very verbose in Java or Kotlin or maybe not calling as much but you can do it and just like half as many lines in dart and then also like

1:50:25 · things are just way easier I think in a lot of cases like with networking you just do HTTP GET and then like it does everything versus like you know having to set up some different stuff but yeah I would say it's up to you depends on if you're on a huge team if you're in a big team then obviously add app is the solution and then you're gonna migrate slowly otherwise if it's just yourself then you could probably knock it out in a week I also I also would add that it really depends on how big your code base

1:50:54 · is and what kind of you're dealing with I can just add from not from like my experience but maybe you know Pascal Pascal she's also like a flutter Gigi and has been working on like some agency stuff recently and converting exactly existing Android apps into clutter or like bringing iOS and Android apps into the fodder kind of ecosystem and you say

1:51:17 · like for most of the time this experience is wave types of actually rewriting at the flutter then dealing with you know at web and all this stuff that you know comes with it so most of times since flutter also reduces your code too let's say around 20% or something of what you have in Android and iOS it's

1:51:39 · most of the time it's faster to just like it started raw and just try using that and then maybe use the functionality that means hardware components and create a channel for that I think this is still the way to go to be honest yeah yeah what is your approach for project management especially having multiple projects I started using Trello yeah I think yeah you know I still like to use fellow but roadie maybe you want to add something to that what do you use how do you organize your projects so the way I

1:52:15 · archive my brain is I use bear it's a really cool application that allows you to have one too many notes it's the meaning that you can have a note that it can exist in multiple folders just by using tags I think it's really great I store all of my information there for my ideas by I scratch off terrible ideas my things I don't want to forget and so from there then I generate like MVPs and

1:52:39 · examples which I will do github I like to keep all my project boards I use Trello for some stuff but I actually use the repos themselves to have the individual project boards and I have like one global when I get up so that that way like it's very scoped not gonna be okay this project this is this state at this time and for me I like to use that for that and then also for me like

1:53:04 · I use github issues so if something's high-priority like I kind of I use the github mobile app as which is really nice to be able to like keep track of like okay what are the issues that are the the most important right now so that's not like Anna keep and kind of prioritize stuff but yeah I would say note-taking on bear is one of my secret weapons so nice yeah I also think it

1:53:26 · depends on what kind of team you have to manage behind all the stuff right yeah what other tools you're you're using and I mean we recently also started notion problem you know notion as well so you can advise if you've dropped notions great and yeah just organize everything inside one singer project basically gets rid of you know Trello and all be all the different channels like ever know whatever you use before so I think it's just like a personal choice as well and we're sure yeah best

1:54:00 · to get along with so just how you organize yourself best but I think it's always great to hear what other people look people are using currently by the way real quick before we move on I just wanted to if you're in the video call right now please put your email down below with your name and we are going to after the call is finish like send out all but like will draw from the prizes and stuff like that so only people that are on the call itself are eligible for any rewards so just want to thank

1:54:31 · everyone for joining so far but yeah if you're on the call we're gonna save the chat so we can do the drawing from there so make sure you just put your your name and email and thank you for registering it was awesome yeah I think there's one less question which as how how do you handle studying flutter to reach this kind of how do you handle study

1:54:56 · yeah ride the wave I mean you know it's a I didn't become an expert day one you know it's you know joining and you know having to learn all the wrong ways to do something in flutter you know I you know

1:55:15 · you have to be I was always learning I never I wanted to try to come up with a new exciting thing like almost every day or every week and flutter and you know it's a challenge that you know you're always outdoing yourself and for me it was also just kind of like discovering you know what I didn't know and that you

1:55:33 · know okay you know it's like I jumped into rust like I didn't know rust I didn't know how to do FFI I didn't know how to do web assembly I didn't know how to do VR and all these things are things I took on because I wanted to learn how to do them and so yeah I would say if

1:55:49 · there's something you want to learn how to do just do it like you know just like find a way find the resources if you care enough you will fight like you will find the knowledge you will find people that are doing it you'll find podcasts you'll find documentation seek it out and you will you'll be surprised that we can come up with yeah I economy more actually and I also have to say that if what you've seen wired Edition stuff and snuffy those are actually my first web from connect so I've never written a web project before so I can just agree with that and I think most importantly is

1:56:21 · most important is that you have something to work on that you have some kind of motivation I'm not talking about like deviation it lasts all week or something because I don't think this exists except if you have like really like like an idea that you want to push out but I think also always understand

1:56:40 · that your you will never be the all-knowing expert you know because if you want we have that never you know try to do new things that learn new things because you will have this kind of feeling of you know being embarrassed to just go out and maybe I have something that is wrong you know you never want to get there it's just like you always want to go out and and accept that you maybe

1:57:03 · be wrong right and just like go out try out new things and learn new stuff then I think it's also very important I mean this is a good I think closing thought from the very beginning that we have yeah it was at the beginning we said you always should also try out new things so not only try to become the very like specialized whatever fluttered deaf but also try out look around maybe there's like even other technologies that are interesting as well right so check out new things and then maybe maybe it's something else that gets you interested in yes you hope them I think this is the

1:57:34 · only way to go to always you know keep on trying out new stuff and keep this yeah yeah always be a learner cuz I think I think a mistake a lot devs make as they stop learning once they get their first job you know that's like oh well I learned everything in college to get to this point I learn the algorithms and now I'm good so it's like yeah you can you can make a career only using one technology I met many people that have but I think if you want to truly excel as a developer and as a human I think

1:58:05 · always learning your entire life will youwill you'll discover things about yourself he didn't know we're possible yeah and except that you're pulling up the best you start something new I mean you won't be the best that's for sure [Laughter]

1:58:32 · there's so much stuff out there in the internet if you just go ahead let's go ahead and real quick before we we close up which we're about to do let's go ahead and take one more photo so if you want to go ahead and turn on your video we'll make sure to get that before we leave and thank you so much for everybody putting your emails in the chat like we said earlier if you case you missed it me and Fredrik are gonna be sending out some promo codes for both widget studio and wire - and maybe some

1:59:04 · other interesting things so stay tuned but yeah we just want to thank you so much for you know coming with us today and this Meetup this was a really fun for us I know it was really fun for me and I'm pretty sure Frederic can say the same but you know we were really passionate in the community and we really enjoyed being able to be a part of it and just hopefully you know we can give you a pathway and a story on how you can also build tools for the community specifically yeah I really

1:59:46 · enjoyed it as well I think it was a great evening as well I really liked also listening to your ideas and you of course I mean it was also the first time I you know we didn't rehearse interaction so it was super interesting and yeah let's see where this goes and yeah absolutely all right come on all

2:00:09 · you shy people do it just turn it on high you taking the picture now I'm waiting I'm waiting for some of these stragglers there we go come on a couple will provide a photo for you okay right all

2:00:36 · right count down from seven seven six five four three two one so much everyone yeah this was a really really impactful and I'm really glad we got to talk so much and thank you so much for your questions of course as always you know you can you can follow us on Twitter we

2:01:01 · both you know we'll make sure it's linked and you'll see it on stuff but we want to say thanks again to code magic because they you know they're kind of the reason why this is all possible and make sure to check them out they they're like one of the only solutions for flutter that are completely targeted to you know allow you know releasing from an independent solution so yeah okay

2:01:27 · yeah and thank you so much and we hope to see you guys soon - thank you so much for joining us have a great night yep have a great night everybody thank you so much bye-bye talk to you soon

Rody Davis

About Me

About Me

🗺️ Chronological Journey: Career & Personal

🛠️ Technical Competency Matrix

📣 Public Speaking & Presentations

Home

Featured Apps

Current Work

Ecosystem & Technical Foundations

Focus Areas & Creations

Previous Projects

How to Deploy PocketBase to Cloud Run

How to Deploy PocketBase to Cloud Run

Features

Prerequisites

Getting Started

Steps

Create a new service

Google Cloud Build

General Settings

Container(s), Volumes, Networking, Security

Volumes

Container(s)

Add Health Checks

Deploy and Wait

FAQ

What if I have local files that I want to use?

Can I use a custom domain?

Migrating my Blog to PocketBase

Migrating my Blog to PocketBase

Context

PocketBase

Coolify

Conclusion

Privacy Policy

Privacy Policy

Website Visitors

Gathering of Personally-Identifying Information

Security

Advertisements

Links To External Sites

Protection of Certain Personally-Identifying Information

Aggregated Statistics

Cookies

Credit & Contact Information

How to do Offline Recommendations with SQLite and Gemini

How to do Offline Recommendations with SQLite and Gemini

Text Embeddings

Storing the Vectors

Generate the Recommendation

Conclusion

How To Host Your Podcast For Free On Github Pages

How To Host Your Podcast For Free On Github Pages

Create New Repo

Clone the Repo

Create the Website

Setting up Github Actions

Custom Domain

Releasing new Content

Publishing

Conclusion

Live Example

How to do Bitwise operations in Dart

How to do Bitwise operations in Dart

AND

OR

Inclusive

Exclusive

NAND

NOR

XNOR

How to Run Astro SSR and PocketBase on the Same Server

How to Run Astro SSR and PocketBase on the Same Server

Getting started

Setting up the server

Collections

Creating the client

UI

Layouts