Flutty UI

A developer‑friendly component library that brings polished, production‑ready widgets to your Flutter projects. Flutty UI aims to stay lightweight, accessible, and easy to theme—so you can ship beautiful apps fast.


✨ Features

Status Widget Description
FluttyButton A highly–configurable, accessible button with built‑in loading & disabled states (outlined/filled/ghost).
⚙️ More Coming Soon Alerts, badges, cards, modals, and form fields are on our roadmap.

📦 Installation

Add the package to your pubspec.yaml:

# pubspec.yaml
dependencies:
  flutter: ^3.24.0
  flutty_ui: ^0.1.0  # check pub.flutter-io.cn for the latest version

Then run:

flutter pub get

🚀 Quick Start

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutty UI Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FluttyButton(
          label: 'Press Me',
          variant: ButtonVariant.filled,
          onPressed: () => debugPrint('Clicked!'),
        ),
      ),
    );
  }
}

🔧 API Reference — FluttyButton

Parameter Type Default Description
label (required) String Text displayed on the button.
onPressed (required) VoidCallback Called when the user taps the button.
variant ButtonVariant ButtonVariant.filled Style variant: filled, outlined, or ghost.
isLoading bool false Shows a loading spinner & disables taps.
icon Widget? null Optional leading icon.
size ButtonSize ButtonSize.md Preset sizes: xs, sm, md, lg.
backgroundColor Color? From theme Overrides the background color (filled).
textStyle TextStyle? From theme Overrides the label text style.
borderRadius BorderRadius? BorderRadius.circular(8) Corner radius.

🎨 Theming & Global Styles

Flutty UI follows your app’s ThemeData by default but remains fully customizable:

FluttyButtonTheme(
  data: const FluttyButtonThemeData(
    baseRadius: 12,
    defaultVariant: ButtonVariant.outlined,
    defaultSize: ButtonSize.lg,
  ),
  child: MyApp(),
);

Tip: Wrap MaterialApp with FluttyButtonTheme at the root to keep button styles consistent across the app.


🗺️ Roadmap

Have ideas? Open an issue or upvote an existing one.


🤝 Contributing

  1. Fork the repo & create your branch: git checkout -b feature/awesome‑widget
  2. Install dev dependencies: flutter pub get
  3. Format & analyze: flutter format . && flutter analyze
  4. Write tests. PRs without tests may be politely asked to add some.
  5. Open a Pull Request and describe your changes.

We follow the Conventional Commits spec & use semantic versioning.


📄 License

This project is released under the MIT License. See LICENSE for details.


✉️ Support & Contact

Created with ❤️ by YOUR NAME.
• Follow me on Twitter → @your_handle
• Email → you@example.com
• Bugs / feature requests → GitHub Issues

If Flutty UI saves you time, consider ⭐ starring the repo!

Libraries

flutty