I’m Tired Of Build Flutter UI

This is how I’m trying to solve this problem

Dane Mackier

Mar 22, 2024

I’m currently on a mission to find a fun, and better way to build Flutter UI.

My first technical MVP is building Flutter UI using animation software.

I’m currently building an open-source example to understand the code and limitations before I build the actual package.

I call it ExpressionUI, please star the repo to support the project (GitHub Repo)

What have I done

I’ve made 2 tweets about my progress so far:

I’m not building this as a “solution for everyone”, I’m doing some exploration into something I think would be fun, and beneficial for the entire mobile app building community.

This is a framework, that will work, cross-framework, meaning it will work on Flutter, React-Native, Android Native, iOS Native, Kotlin, and any major JS framework.

If you’d like to translate the work I’m doing into the other frameworks, or help with the Flutter research please reply to this email and I’ll add you to the discord.

Thoughts on the progress

What I have now is already enough for one specific UI building task that should be common for all mobile apps, onboarding flows.

That means that even with the 8 lines of code I’ve written this is a viable approach for building introductory UI for your app or game.

The rest of the research will see if we can apply it to building other basic UI’s like listing items, bottom nav, and forms.

I don’t have high hopes, but this is a damn fun project and I like how it feels working on it.

What’s next

There are 3 categories that I’ll be doing work in.

Technical UI Research

This is where I’ll be trying to implement what I want by hand in the example app.

When I get something working I can analyze it and see how I can create an API around it and hide the details inside a Flutter package.

Here’s some of my research tasks left:

Managing text input
Building responsive UI's
Works with a screen reader
Creating dynamic list views
Performing interactive gestures (Swipes)
Building a design system and composing

Developer Experience Research

If you look at the example code you’ll see I use a lot of strings and manual wiring to get everything working.

It’s only ~15 lines of code so definitely worth the result so far, but I don’t like the use of strings and manual event listening.

So to improve that I have the following DX tasks:

Automatic binding of click events and callbacks
Type safe referencing of all states, animations, events and artboards

This will greatly improve the use of animations as UI

Package Development

Last, but most importantly, I’ll be taking the code I can get working in the example app and create wrapper widgets for the rive package.

I can see this working really well with just a few adjustments.

If you’re interested in the project, using what we’re doing, or helping build it, reply to this email and I’ll add you to the discord.

I think it’s worth exploring together as a community.

Hope to chat soon.

Dane