Getting Started with Flutter Beautify

Welcome! This guide will help you understand and use Flutter Beautify effectively.

What is Flutter Beautify?

Flutter Beautify is a production-grade CLI tool that generates pre-built, customizable UI components for Flutter applications. It saves you time by providing:

✅ 26 ready-to-use components (buttons, cards, forms, etc.)
✅ 60+ factory method variants for each component
✅ Material Design 3 compliance out of the box
✅ Full customization - modify colors, sizes, and styles
✅ Zero dependencies - uses only Flutter’s built-in widgets
✅ Production-ready code - no compromises on quality

Why Use Flutter Beautify?

Traditional Approach (Without Flutter Beautify)

// ❌ You write repetitive code...
ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
  ),
  onPressed: () {},
  child: Text('Click Me'),
)

Flutter Beautify Approach

// ✅ One line of code!
FBButton.solid(label: 'Click Me', onPressed: () {})

Result: Less code, more productivity, consistent design!

Quick Comparison

Feature	Manual	Flutter Beautify
Time per component	30+ lines	1 line
Code reusability	Manual	Automatic
Design consistency	Manual	Guaranteed
Customization	Full	Full
Learning curve	Steep	Gentle
Maintenance	Complex	Simple

Component Categories

Flutter Beautify provides 26 components organized into 6 categories:

📝 Form Components (5)

TextField - Text input with variants (email, password, search)
Checkbox - Checkbox with multiple states
Radio - Radio button groups
Toggle - Switch component
Dropdown - Select/dropdown lists

// Example: Email input
FBTextField.email(
  label: 'Email',
  hintText: 'user@example.com',
)

🎨 Display Components (5)

Card - Container for content (basic, elevated, outlined)
Badge - Tags and labels
Avatar - User profile pictures
Tooltip - Hover help text
Divider - Visual separators

// Example: User card
FBCard.elevated(
  child: Column(
    children: [
      FBAvatar.initials(initials: 'JD'),
      Text('John Doe'),
    ],
  ),
)

🔘 Button Components (4)

Button - Primary buttons (solid, outline, ghost)
IconButton - Icon-only buttons
FloatingButton - Floating action buttons
Chip - Clickable chips

// Example: Button variants
FBButton.solid(label: 'Save', onPressed: () {})
FBButton.outline(label: 'Cancel', onPressed: () {})
FBButton.ghost(label: 'Learn More', onPressed: () {})

📐 Layout Components (5)

Sidebar - Navigation sidebar
Tabs - Tab navigation
Pagination - Page navigation
Accordion - Collapsible sections
Modal - Dialog windows

// Example: Tabs
FBTabs.basic(
  tabs: ['Tab 1', 'Tab 2'],
  children: [
    Text('Content 1'),
    Text('Content 2'),
  ],
)

⏳ Progress & Loading (4)

CircularProgress - Circular indicators
LinearProgress - Progress bars
Skeleton - Loading skeleton screens
Spinner - Loading animations

// Example: Loading indicator
FBCircularProgress.determinate(value: 0.7)
FBSpinner.dots()

📢 Status & Feedback (3)

AppBar - App header
Dialog - Alert dialogs
Snackbar - Bottom notifications

// Example: Snackbar
ScaffoldMessenger.of(context).showSnackBar(
  FBSnackbar.success(message: 'Saved!'),
)

Installation & Setup

Step 1: Install Flutter Beautify

dart pub global activate flutter_beautify

Step 2: Initialize Your Project

cd my_flutter_app
flutter_beautify init

You’ll be asked:

Enter widgets path [lib/widgets]: lib/widgets
Enter utils path [lib/utils]: lib/utils
Enter demo path [lib/demo]: lib/demo

Step 3: Add Your First Component

flutter_beautify add button

This creates: lib/widgets/button.dart

Step 4: Import and Use

import 'package:my_app/widgets/button.dart';

FBButton.solid(
  label: 'Click Me',
  onPressed: () => print('Clicked!'),
)

Common Use Cases

flutter_beautify add textfield
flutter_beautify add button
flutter_beautify add divider

Code:

Column(
  children: [
    FBTextField.email(label: 'Email'),
    FBTextField.password(label: 'Password'),
    FBButton.solid(label: 'Login', onPressed: () {}),
    FBDivider.text(label: 'OR'),
    FBButton.outline(label: 'Sign Up', onPressed: () {}),
  ],
)

Product List

flutter_beautify add card
flutter_beautify add badge
flutter_beautify add button

Code:

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) {
    final product = products[index];
    return FBCard.elevated(
      child: Column(
        children: [
          if (product.isNew)
            FBBadge.filled(label: 'NEW'),
          Text(product.name),
          Text('\$${product.price}'),
          FBButton.solid(label: 'Add to Cart'),
        ],
      ),
    );
  },
)

Loading States

flutter_beautify add circular-progress
flutter_beautify add skeleton
flutter_beautify add spinner

Code:

if (isLoading) {
  FBCircularProgress.indeterminate()
} else if (hasError) {
  Text('Error loading data')
} else {
  ListView(children: items)
}

Forms with Validation

flutter_beautify add textfield
flutter_beautify add checkbox
flutter_beautify add radio
flutter_beautify add button

Code:

Form(
  key: _formKey,
  child: Column(
    children: [
      FBTextField.outlined(
        label: 'Name',
        validator: (value) => value?.isEmpty ?? true ? 'Required' : null,
      ),
      FBCheckbox.basic(label: 'I agree to terms'),
      FBRadio.vertical(
        options: ['Option 1', 'Option 2'],
        onChanged: (value) {},
      ),
      FBButton.solid(label: 'Submit'),
    ],
  ),
)

Factory Methods Explained

Each component has factory methods for common variants:

// Example: Button component
FBButton.solid()      // Filled button
FBButton.outline()    // Outline button
FBButton.ghost()      // Ghost/text button
FBButton.loading()    // Loading state
FBButton.disabled()   // Disabled state

// Each factory method accepts parameters:
FBButton.solid(
  label: 'Click',          // Button text
  onPressed: () {},        // Callback
  backgroundColor: Colors.blue,
  textColor: Colors.white,
  isLoading: false,
)

Full Example: Complete Form Screen

import 'package:flutter/material.dart';
import 'package:my_app/widgets/textfield.dart';
import 'package:my_app/widgets/checkbox.dart';
import 'package:my_app/widgets/button.dart';
import 'package:my_app/widgets/card.dart';

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final _formKey = GlobalKey<FormState>();
  bool agreeToTerms = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Sign Up')),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // Welcome message
              Text(
                'Create Account',
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              SizedBox(height: 24),

              // Form fields
              FBTextField.outlined(
                label: 'Full Name',
                hintText: 'John Doe',
                validator: (value) =>
                    value?.isEmpty ?? true ? 'Name required' : null,
              ),
              SizedBox(height: 16),

              FBTextField.email(
                label: 'Email',
                hintText: 'john@example.com',
                validator: (value) =>
                    value?.isEmpty ?? true ? 'Email required' : null,
              ),
              SizedBox(height: 16),

              FBTextField.password(
                label: 'Password',
                hintText: 'Min 8 characters',
                validator: (value) =>
                    (value?.length ?? 0) < 8 ? 'Min 8 chars' : null,
              ),
              SizedBox(height: 16),

              FBTextField.password(
                label: 'Confirm Password',
                hintText: 'Repeat password',
              ),
              SizedBox(height: 24),

              // Terms checkbox
              FBCheckbox.basic(
                value: agreeToTerms,
                label: 'I agree to Terms & Conditions',
                onChanged: (value) {
                  setState(() => agreeToTerms = value ?? false);
                },
              ),
              SizedBox(height: 24),

              // Buttons
              FBButton.solid(
                label: 'Create Account',
                onPressed: agreeToTerms
                    ? () {
                        if (_formKey.currentState?.validate() ?? false) {
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text('Account created!')),
                          );
                        }
                      }
                    : null,
              ),
              SizedBox(height: 12),

              FBButton.outline(
                label: 'Already have account? Sign In',
                onPressed: () => Navigator.pop(context),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output: A complete, production-ready sign-up form with 10 lines of component code!

Next Steps

Installation Guide - Detailed setup instructions
Component Reference - All 26 components documented
Real-World Examples - Copy-paste examples
CLI Commands - Command line reference

Tips & Tricks

Tip 1: Organize Components by Feature

flutter_beautify add button   # For auth feature
flutter_beautify add textfield
flutter_beautify add card     # For home feature

Tip 2: Use Factory Methods for Variants

// Instead of conditional styling:
FBButton.solid()      // Use factory methods
FBButton.outline()
FBButton.ghost()

Tip 3: Combine Components for Complex UIs

FBCard.elevated(
  child: Column(
    children: [
      FBTextField.outlined(),
      FBCheckbox.basic(),
      FBButton.solid(),
    ],
  ),
)

Tip 4: Check Current Configuration

flutter_beautify config

Tip 5: Get Help Anytime

flutter_beautify help
flutter_beautify help add

Troubleshooting

Component file not found

# Reinitialize configuration
flutter_beautify init

Want to customize components?

Edit files in lib/widgets/
Each factory method is fully documented
Extend components with your own factories

Need custom styling?

// All components support Flutter's standard theming
Theme(
  data: ThemeData(primaryColor: Colors.blue),
  child: FBButton.solid(label: 'Styled'),
)

Support & Resources

📖 Documentation: Full guides for each component
🔧 CLI Commands: flutter_beautify help
🐛 Issues: Report on GitHub
💬 Discussions: Ask questions on GitHub Discussions
📧 Contact: See CONTACT.md for support channels

Ready to build beautiful UIs faster? Let’s get started! 🚀

→ Next: Installation Guide

Getting Started with Flutter Beautify

What is Flutter Beautify?

Why Use Flutter Beautify?

Traditional Approach (Without Flutter Beautify)

Flutter Beautify Approach

Quick Comparison

Component Categories

📝 Form Components (5)

🎨 Display Components (5)

🔘 Button Components (4)

📐 Layout Components (5)

⏳ Progress & Loading (4)

📢 Status & Feedback (3)

Installation & Setup

Step 1: Install Flutter Beautify

Step 2: Initialize Your Project

Step 3: Add Your First Component

Step 4: Import and Use

Common Use Cases

Login Screen

Product List

Loading States

Forms with Validation

Factory Methods Explained

Full Example: Complete Form Screen

Next Steps

Tips & Tricks

Tip 1: Organize Components by Feature

Tip 2: Use Factory Methods for Variants

Tip 3: Combine Components for Complex UIs

Tip 4: Check Current Configuration

Tip 5: Get Help Anytime

Troubleshooting

Component file not found

Want to customize components?

Need custom styling?

Support & Resources