Awesome UI Labs

In my free time, I enjoy exploring UI/UX innovations by couple of design engineers on Twitter. As weekend or lab-style projects, I often challenge myself to recreate their stunning components in Flutter — pushing the boundaries of interactivity and polish on mobile.

While I plan to eventually bundle these into a full Awesome UI package, here are two published components that are already available for use.

🟠 HoldToActionButton

Based on Emil Kowalski’s “Hold to Delete” button

This component is a press-and-hold button that executes an action after a hold duration completes — perfect for preventing accidental taps in destructive actions.

🔧 Features

  • Press-and-hold gesture with progress animation
  • Callback triggered on hold completion (onHoldComplete)
  • Fully customizable: colors, hold duration, icons, etc.

🔍 Live Preview

👉 Try it Live

🔁 AnimatedRotateButton

Inspired by a UI component shared by Jakub Krehel

This Flutter widget recreates a rotating toggle button with animated transitions between multiple states. I’ve enhanced the concept to support multiple configurations beyond a binary toggle.

🔧 Features

  • Smooth rotation animation with state cycling
  • Supports multiple icon states and callbacks
  • Great for toggling settings, views, or modes

🔍 Live Preview

👉 Try it Live

📦 How to Use

You can easily use these components by copying the source code into your project:

  1. Create a folder: lib/external_components/
  2. Add the component file (e.g. hold_to_action_button.dart)
  3. Import and use the widget in your Flutter app
import 'external_components/hold_to_action_button.dart';

HoldToActionButton(
  onHoldComplete: () {
    // Your action here
  },
)

These UI experiments are open to feedback and contributions — and will eventually be bundled into a reusable Flutter package for the community.