# Grayhat Blog Tag: Flutter

> Expanded public blog context for posts tagged Flutter.

## Page

- [Flutter Tag](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/flutter)
- [Flutter Tag LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/flutter/llms.txt)
- [Root LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms.txt)
- [Root Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms-full.txt)
- [Tag API](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/api/public/v1/tags/flutter)

## Tag Details

- Slug: `flutter`
- Description: Not provided
- Post count in current snapshot: 3

## Current Posts

- [Our struggles (and minor wins) with Rive for character animation in 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/our-struggles-and-wins-with-rive-2025) - Inspired by Duolingo, we also gave the beta Rive Editor a try to make our AI virtual friends in MindChat come alive. TLDR; It didn't go too well.
- [Building Blazingly Fast with Material Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-blazingly-fast-with-material-design) - In our fast-evolving world of web and mobile design, it's essential to stay in sync with cutting-edge design ideas. At the forefront of this design revolution lies Google's Material Design – a beautiful blend of precision, functionality, and visual charm. But what's the magic behind it for developers and designers? Beyond its eye-catching visuals, Material Design gives your projects wings, propelling them into captivating user experiences.

I’ve been recently working on a project that, for some 
- [Will Google Material withstand XR?](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/will-google-material-withstand-xr) - How to Material You.

## Child Route Content

### [Our struggles (and minor wins) with Rive for character animation in 2025](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/our-struggles-and-wins-with-rive-2025)

- Slug: `our-struggles-and-wins-with-rive-2025`
- Published: 2025-11-06T14:00:03.000+05:00
- Updated: 2025-11-19T23:03:41.000+05:00
- Reading time: 5 min
- Tags: Animation, Design, AI, Artificial Intelligence, Flutter, Developer Tools, Design Tools
- Authors: Saad Bazaz, Abdurrehman Subhani, Aniqa Sadaf, Talal Ahmed Khan, Wasif Sadiq, Muhammad Usama Rashid
- Visibility: public

Grayhat first met the Rive team at GDC 2024. Early startup energy, cool booth, tons of hype. At the time, we already knew about Rive, but we hadn’t actually battle-tested it in any real production scenario. It looked promising, and we filed it away as a “maybe one day” tool.

*Fast forward to this year... We finally decided to give it a real shot.

## **Solly, Our First Rive Experiment**

Our first test was simple. We built an animated mascot named **Solly** for MindChat. Just a cute, lively animation. It turned out pretty solid.

*An animated Solly, the mascot for MindChat.In our hubris, we decided to go big. Not just animated characters. We wanted **full lip-sync and animated avatars reacting in real-time during video calls**.

That’s when our rabbit hole journey began.

## **Research and Learnings**

To understand what “good” looks like, we researched teams already doing this at scale.

We studied Duolingo’s approach to visemes and character speech, which instantly made them our north star. We also pored over Guido Rosso's breakdown of how Duolingo uses GenAI and Rive for more technical insight. It's an excellent blend of art and tech, I highly recommend watching it:

*For character structure and workflow inspiration, we found Tolan’s process incredibly useful, detailed in their post on designing their character.

We also dove into the broader concepts of phonemes and visemes, looking at established solutions in the 3D space like Reallusion's iClone for AI-powered lip-sync.

Enough theory, let's build.

## **Intersecting art and tech (Rive + Flutter)**

To get hands-on, we learned the basics through foundational tutorials like this Rive in Flutter video and this more advanced follow-up. Community tips, like this Reddit thread on a better way to animate, and the official Rive best practices guide were essential reading.

Then we got our hands dirty by running our first interactive test. We replaced the Interacting Bear Demo from GitHub with the Monster Mouth (found on the Rive Marketplace), and lipsynced it.

*At this point, we were feeling pretty confident. We started exploring Rive's marketplace for rigs, especially mouth rigs and lip-sync templates:

- Mouth Movement Rig
- Custom Talking Avatar Lip Sync
- Karaoke with Zari
- Monster Mouth
- Wave, Hear and Talk
- Mouth Rig

We built our own character in a flat, simple style so iteration would be fast.

## **Nested Artboard Hell**

Then came the pain. Nested artboards. Calling inputs inside nested rigs from the parent board. This should have been trivial, as most of our designers came from an Adobe After Effects and Sony Vegas background. Instead it became a multi-day excavation.

We even built a minimal reproducible Rive file just to understand the problem first, with data binding and nested artboards.

We searched everywhere for answers. We scoured Stack Overflow for solutions, read through Reddit threads where users lamented broken nested animations, and followed a critical GitHub issue in the rive-flutter repository that highlighted our exact problem. The Rive community forum had a thread on passing input values that never got a definitive answer.

Finally, we found a random deep-internet video that solved it. From Rive, but not on the surface. Not from official docs. Just some obscure YouTube video that succeeded where the actual product failed to explain itself.

*And that’s when it hit me.

Rive is not designed for professionals yet.

Rive is built for early adopters, vibers, Behance-Dribbble motion designers, landing page razzle dazzle, and social media loops. Not structured engineering-grade animation pipelines.

Anyone doing real character systems will eventually hit architecture problems. Rive isn’t there yet.

But we were too deep in this to give up.

## **Building Our Own Playground**

Once we finally got our rig working, we wanted to test it with our custom lip-sync algorithm.

We tried using the third-party playground, rive.rip. Cool idea, but feature-limited. Not useful for live algorithmic testing.

So we built our own playground in Flutter, specifically for real-time lip-sync with AI voices and Rive characters. You can find the source code for our Rive Playground on GitHub.

And here is the deployed version you can play with:

  *
  Drag to resize ⤡

  Open in new tab

(function(){
  var box = document.getElementById('rive-resize');
  var iframe = box.querySelector('iframe');
  var handle = document.getElementById('rive-resize-handle');
  var minW = 200, minH = 200;

  // If Ghost gives width:100% (or if you want it to *look* full-width initially),
  // set a pixel width equal to the parent's computed width so the element can be resized.
  function setInitialWidth() {
    try {
      var pw = box.parentElement.clientWidth || document.documentElement.clientWidth;
      // Use parent's width but not less than minW
      box.style.width = Math.max(minW, Math.min(pw, 700)) + 'px';
    } catch(e) { /* ignore */ }
  }

  // Initialize
  setInitialWidth();

  // Recompute if window changes (keeps sensible starting width)
  window.addEventListener('resize', setInitialWidth);

  var dragging = false;

  function startDrag(e) {
    e.preventDefault();
    dragging = true;
    // allow mouse events to reach document while still interacting with iframe
    iframe.style.pointerEvents = 'none';
    window.addEventListener('mousemove', onDrag);
    window.addEventListener('mouseup', stopDrag);
    window.addEventListener('touchmove', onDrag, { passive: false });
    window.addEventListener('touchend', stopDrag);
  }

  function onDrag(e) {
    if (!dragging) return;
    e.preventDefault();
    var clientX = (e.touches && e.touches[0]) ? e.touches[0].clientX : e.clientX;
    var clientY = (e.touches && e.touches[0]) ? e.touches[0].clientY : e.clientY;
    var rect = box.getBoundingClientRect();
    var newW = Math.max(minW, clientX - rect.left);
    var newH = Math.max(minH, clientY - rect.top);
    box.style.width = newW + 'px';
    box.style.height = newH + 'px';
  }

  function stopDrag() {
    dragging = false;
    iframe.style.pointerEvents = '';
    window.removeEventListener('mousemove', onDrag);
    window.removeEventListener('mouseup', stopDrag);
    window.removeEventListener('touchmove', onDrag);
    window.removeEventListener('touchend', stopDrag);
  }

  handle.addEventListener('mousedown', startDrag);
  handle.addEventListener('touchstart', startDrag, { passive: false });

  // optional: double-click handle to snap back to parent's width
  handle.addEventListener('dblclick', setInitialWidth);
})();

## **Final Result**

We managed to make our animation work, with nested artboards and lip-sync. Check it out here:

*It's still a work-in-progress, but we continue to learn and improve.

## **The Rive Reality Check**

After this entire journey, here’s the honest breakdown.

### **The Cons**

- The interface is unintuitive and tries too hard to cosplay as Figma without earning it.
- Features like components and preview mode feel half-baked.
- Pricing is preposterous, especially when they suddenly made exports paid mid-project.
- Performance is unoptimized and multiplayer is buggy.
- Browser sync pauses make it feel clunky instead of modern.

### **The Pros**

- It works, at least in Beta terms.
- Web-based.
- Collaborative.
- Fun for simple animation use cases.

### **My Verdict**

If you already have working pipelines in Blender, After Effects, Spline, or your own tooling, stick with them. Rive is cool, but it is not ready for serious production beyond funky assets, splash animations, and loading screens.

I still believe Rive should eventually be acquired by Figma and merged into a full pipeline. But if I see them pull a “we’ll stay independent forever” move like Figma did with Adobe, my remaining hope will evaporate.

To anyone from the Rive team: If you're reading this, I'd love to talk and have a feedback session on our team's experience on the Paid plan. Maybe we can find a better way out!

Peace ✌️

*Credits to:*

- Umayma binte Saleem, our Web, Interactions and Graphics intern, for the first Solly animation
- Ayesha Aamir (UI/UX Designer) for her research, character design and animation implementation
- AbdurRehman Subhani (Lead Engineer) for building the open source Playground, and developing the lip sync algorithm with AI
- Aniqa Sadaf (Product Designer) for world-building

### [Building Blazingly Fast with Material Design](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/building-blazingly-fast-with-material-design)

- Slug: `building-blazingly-fast-with-material-design`
- Published: 2023-10-13T16:01:00.000+05:00
- Updated: 2024-05-09T16:23:02.000+05:00
- Reading time: 5 min
- Tags: Material UI, Flutter, UI, UX, Design
- Authors: Wasif Sadiq
- Visibility: public

*Build fast and stable, and get MVPs done faster.In our fast-evolving world of web and mobile design, it's essential to stay in sync with cutting-edge design ideas. At the forefront of this design revolution lies Google's Material Design – a beautiful blend of precision, functionality, and visual charm. But what's the magic behind it for developers and designers? Beyond its eye-catching visuals, Material Design gives your projects wings, propelling them into captivating user experiences.

I’ve been recently working on a project that, for some reason, started off with a totally custom UI. It was quite painstaking, trying to nail down multiple screen sizes, ensuring consistency, etcetera. That’s when our team brainstormed and decided to redesign the entire app, Figma and Flutter both, in Material UI. That's when I decided to delve into the world of Material Design. Using it immediately gave the app a fresh and engaging user interface. The client was passionate about creating an application that not only served a purpose but also left users with a memorable experience, so Material UI fit perfectly into the users’ native systems, Android, and gave them a seamless experience.

*Let's take a deeper dive into Material Design, shall we?*

Back in 2014, Google unveiled its masterpiece - Material Design. It's like a special design guide for making digital interfaces look and work better. It uses grids, smooth movements, and cool lighting and shadows. It's all about grid-centric layouts, fluid animations, and those subtle yet striking lighting and shadow effects – all coming together to create a user experience that feels as intuitive as a well-worn path.

As I delved deeper into Material Design's guidelines and principles, I could immediately sense the attention-to-detail the designers at Google had. They’ve worked on almost every aspect of the design system, and made it super general so it can adapt to almost any system. It wasn't just about making things look beautiful; it was about making them work seamlessly too.

You can learn more about the design side of Material in our previous article.

*Now, **why** did Material Design supercharge our process?*

***A Unified Visual Language. ***Embracing Material Design means joining a conversation that Google has been perfecting for years. It's like speaking the same language as Android enthusiasts – a familiar, comforting dialogue. Since most of our users were on Android, it was a no-brainer to use Material to make our app blend in with the OS. Our designers made sure to take hints from Google’s own Drive and Mail app, and from the native Dialer app. We had to bring in a Pixel 4 specially for this (thanks to our team member, Syed Abdullah Nasir, for his phone 😅)

***Ready-Made Building Blocks.*** Material Design gives developers a treasure trove of premade UI components. No need to start from scratch; these elements are like LEGO blocks that speed up your prototyping and development process. Both design and development teams were super happy with this; the designers used the Material 3 Design Kit, and used the standard Android frame in Figma, to design the base screens. Then, all the Flutter team had to do was see the name of the components in the design, go to the Flutter Material 3 Docs, look up the same names of components, and simply use them in our code.

***Seamless Across Platforms.*** As we embrace cross-platform tools, Material Design shines as a beacon of consistency. It ensures your design looks and feels the same, no matter where it's experienced. This was super important for the folks at the development team; our client wanted a consistent look across all Android screens, from Pixels, to Samsungs. The best part of Material was that it was consistent; Heading1 was Heading1, in Figma, in a Samsung phone, in an iPhone, and almost any device. So we were never worried that something might look odd according to screen size.

***Engaging User Experiences.*** Material Design puts user interactions front and centre. It's all about giving users immediate feedback, creating interfaces that feel like second nature, and ultimately, making users smile with delight. We were just glad we got the ripple animation out-of-box. It brought a hint of professionality and polish to our work.

***Continuous Evolution and Community Support.** *With Google's watchful eye, Material Design keeps evolving to stay in tune with the latest UI/UX trends. Plus, there's a vibrant community out there, offering plugins, extensions, and wisdom in forums. The transition from Material 2 to 3, and from color themes, is pretty seamless.

*But… I’m not a Flutter guy 😞 How can I use Material?*

Here, let's talk about *how *to incorporate Material Design into your projects with frameworks and libraries that make it a breeze:

**For the Web.**

- If you're a React enthusiast, MUI is your go-to choice.
- Vue.js lovers can embrace Vuetify for a rich suite of Material components.
- Angular devotees are in luck. Since Angular is also maintained by Google, it has pretty much the best Material library possible, Angular Material! Best docs ever.

**For Flutter (Google's darling).**

Google's Flutter inherently champions Material Design. Just tap into package:flutter/material.dart to unlock a world of Material widgets.

**For Android.**

If you want a true Material experience on Android, look no further than AndroidX's Material Components. They're tailor-made to adhere to Google's Material guidelines.

**For iOS.**

Even in the Apple ecosystem, Material Design has a presence. Material Components for iOS gracefully bridges the gap, ensuring a consistent experience, however, they are entering maintenance mode and recommend shifting to native iOS components, SwiftUI and even Flutter.

*I’m pumped! 🤩 Now what?*

Leveraging these frameworks and libraries not only streamlines your development process but also guarantees an authentic Material Design experience, staying true to its core principles.

I recommend you to read its principles and familiarize yourself with the concepts. That way, you won’t always have to rely on a designer to tell you exactly what to do; you can use your own Material-intuition to solve things yourself, along the way.

Therefore, as you embark on your Material Design journey…

**Dive into the Guidelines. **Immerse yourself in Google's official guidelines. They're like your North Star, guiding you through the vast sea of typography, motion, and more.

**Harness Material Components. **Whether it's web development with Material Components for Web or conquering the mobile realm with iOS and Android versions, Material Components are your trusty companions.

**Designer's Arsenal. **Prototype in style with design tools like Sketch, Figma, and Adobe XD. They offer Material Design kits that'll make your designs sing.

**Stay Ahead.** Engage with Material Design-focused communities or forums. It's how you ensure you're always at the forefront of design evolution.

In closing, remember that Material Design is more than just a pretty face. It's a catalyst for efficiency and aesthetic brilliance. By embracing its philosophy, you're not just hopping on a design bandwagon – you're supercharging your journey in the world of development. Whether you're a developer, designer, or a visionary crafting digital experiences, Material Design is your indispensable ally in shaping the future of the digital landscape. It certainly was mine, and it might just be yours too.

**Author: **Wasif Sadiq

**Editor:** Fatima Majid

### [Will Google Material withstand XR?](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/will-google-material-withstand-xr)

- Slug: `will-google-material-withstand-xr`
- Published: 2023-07-20T16:55:00.000+05:00
- Updated: 2024-05-09T18:32:34.000+05:00
- Reading time: 4 min
- Tags: Design, VR, AR, UI, Flutter
- Authors: Muhammad Munaf Ul Hassan
- Visibility: public

It goes by many names.

Material, Google Material, M3, Material You, the Worst Design Library Ever As Per Every Posh Designer.

Unveiling Material You - Material DesignThe next stage for Material Design*Material Design*You may know it after Google announced Material 3 as the successor of the widely known, boring Material 2. Perhaps you heard how Material 3 supports super cool widgets on the home screen. Or, you randomly woke up one night to find your Google Pixel looking completely different than it did at the party last night.

The real deal, however, is how Google is shifting the Material mindset to capture a larger range of devices; from watches, to TVs, and even car dashboards.

It's 2023. Why are we writing about M3 now? We're working on building native-like Flutter apps, and have discovered that the latest versions of Flutter are now shipping with M3 beta, as the out-of-box UI solution.

Flutter – Material Design 3Start building with Flutter*Material Design*### UI/UX is changing

For the past two decades, UI/UX was synonymous with "design for screens". A few years up until Apple's sudden announcement of the VisionPro, we've seen a dynamic shift to extend UI/UX beyond the pixels of a screen; it's gone back to its native definition of "how to make people a part of the things they do".

*The official demo of how the "apps" menu would look like in the Apple VisionProApple, as always, went pretty hard on designers.

A complete guideline, along with some great tips, is available on Apple's Design section to build interfaces the "right way" for XR.

This isn't the first time; Apple is notorious for being pretty strict and demanding on designers, and has released guidelines for every single interface they support, each with their bespoke environments, inputs, and dos-and-donts, be it for watches, phones, tablets, and even cars.

### Material 3+ as a competitor

We've discovered that in the world where we're constantly surrounded by digital interfaces, Google's Material Design M3 offers a more powerful blueprint than its predecessors and competitors, for creating a user-friendly UI. Clear, user-focused language is at its heart, ready to transform your platform's user experience across the board.

### How to Material You

**1. Clear Communication is Key**

The hallmark of M3 is direct, user-centric language. Replace ambiguous prompts such as "Are you sure you want to move to trash?" with the more direct "Move to trash?"

**2. Titles Matter**

Avoid all caps in your titles. M3 advocates for sentence case, creating a softer and more welcoming interface.

**3. Make Every Word Count**

Abbreviations can be useful, but clarity is king. Unless you're short on space, full terms outperform abbreviations in ensuring your message reaches every user.

**4. The 'You' Factor**

M3 recommends the use of "you" to create a personal touch. It's about keeping the conversation between the UI and the user, so refrain from mixing "you" or "your" with "me" or "my".

**5. Punctuation Perfection**

Less is more when it comes to punctuation. Avoid periods in short texts and opt for contractions - "can't" is easier on the eyes than "cannot". Oxford commas are endorsed, unless there's an ampersand in play. Remember, commas always live inside quotation marks.

**6. Exclaim with Caution**

While exclamation points aren't banned, they should be used sparingly. Exceptions are allowed for greetings and congratulatory messages.

**7. The Role of Parentheses**

Parentheses are handy for defining acronyms or citing sources, but skip them for side notes or afterthoughts.

**8. The Ampersand Rule**

The '&' symbol is a bit of a diva. It’s acceptable in headings, but best avoided in body text.

Google's Material Design M3 is more than just a style guide - it's a strategic tool for enhancing user experience and making that said experience consistent across multiple interactions. The official Material website does not delve into tiny specifics by mentioning screen sizes, device types, etcetera. I take that as a good sign. That means they design beyond the boundaries and restrictions of mere devices. They design for humans.

However, going through the Foundations section of Material design's official website, it specifically covers touch devices, but not hand gestures through vision cameras. That kind of threw me off. Also, the layouts aren't really capturing the Z-depth factor in XR. This definitely needs some updating and some language change to make the system more inclusive to XR.

There's a world beyond 3-pane layouts and 2-dimensional interfaces: Get going with the times, Google! ;)

They're not too behind in the game though. Apple still uses iPad layouts and interfaces for the VisionPro. Smart or lazy? I'll leave that to you to decide.

### Parting words

A clear, engaging UI built for the right platform, can be a pivotal factor in product adoption and user satisfaction, laying the groundwork for robust business growth. Stay tuned to our newsletter for more updates and insights on enhancing your digital interfaces.

Now, it's over to you: Do you think Material will survive?

Guest Author: Muhammad Munaf

Edited by: Saad Bazaz