2
2 Comments

I'm building a set of beautiful, native Flutter UI widgets

What's up Hackers,

I'm currently developing a set of beautiful, hand-crafted, native Flutter UI components. Many of you probably know Tailwind UI, a set of UI components for Tailwind CSS, which I bought by the time it came out and have been in love with ever since. I'm building something similar for Flutter!

The idea is to have a comprehensive set of beautifully designed widgets, which you can copy & paste into your projects and adapt as necessary to bootstrap ideas quickly. I'd like to divide the widgets into two types.

Type 1: Primitive widgets to use individually (Buttons, Badges, ...)
Type 2: Pre-built views that make use of said widgets (Login, Home, ...)

Widgets I have built so far:

Type 1

  • Buttons
  • Inputs
  • Dropdowns
  • Badges
  • Cards
  • Alerts
  • Modals
  • Navbars
  • Drawers

Type 2

  • Login
  • Empty state
  • Home

Here's an example of the first button in the first attached screenshot.

return FlatButton(
  disabledColor: Colors.grey[400],
  disabledTextColor: Colors.white,
  padding: EdgeInsets.fromLTRB(16, 12, 16, 12),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
  color: Colors.indigo,
  child: Text('New project', style: TextStyle(color: Colors.white)),
  onPressed: () {},
);

Here's an example of the first alert in the second attached screenshot:

return Container(
  width: double.infinity,
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    gradient: LinearGradient(
        stops: [0.01, 0.01], colors: [Colors.red[900], Colors.red[100]]),
  ),
  child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text('Whoa, that didn\'t work',
        style: TextStyle(
            color: Colors.red[800], fontWeight: FontWeight.w500),
        overflow: TextOverflow.clip),
    Padding(
        padding: EdgeInsets.only(top: 4),
        child: Text(
            'Your request can currently not be processed. Please try again in a few moments.',
            style: TextStyle(color: Colors.red[700]),
            overflow: TextOverflow.clip))
  ],
));

I also added a screenshot of a home screen view I built. I already mentioned that I love Tailwind UI, which I frequently use for three main reasons.

  • Saving time by copying and pasting pre-built components
  • Get inspiration from pre-built components and partially extract concepts
  • Learning how to get things done

Since I see the same potential for Flutter, I would like to build something similar.

If you like the idea (and would pay for something like this), please reach out to me at ronald@devoted.dev. I would love to hear from you.

Any feedback is greatly appreciated. Thanks!

posted to Icon for group Developers
Developers
on October 11, 2020
  1. 1

    Definitely a cool idea. Flutter docs have the most basic designs. I think a lot of people would find it useful.

    1. 1

      Thank you for your feedback, Kenneth! It's encouraging to hear that a lot of people would find something like that useful.

Trending on Indie Hackers
Meme marketing for startups 🔥 User Avatar 11 comments 40 open-source gems to replace your SaaS subscriptions 🔥 🚀 User Avatar 1 comment After 19,314 lines of code, i'm shutting down my project User Avatar 1 comment Need feedback for my product. User Avatar 1 comment We are live on Product Hunt User Avatar 1 comment Don't be a Jerk. Use this Tip Calculator. User Avatar 1 comment