---
title: "Bloom Application Blocks Catalog"
description: "Pre-built, responsive Flutter application blocks: dashboards, authentication flows, chat interfaces, and settings screens."
category: "Bloom UI Studio"
url: "https://bloom-platform-ten.vercel.app/blocks"
last_updated: "2026-08-15"
---

# Bloom Application Blocks Catalog

> Full-screen, beautifully designed, composable Flutter screen templates built with Bloom UI primitives and reactive state.

---

## Analytics & Revenue Dashboard (`dashboard-01`)

**Category:** Dashboard  
**Description:** Production dashboard layout with revenue metrics, interactive area chart, recent transactions, and date filter.

### Complete Flutter Implementation

```dart
import 'package:flutter/material.dart';
import 'package:bloom_ui/bloom_ui.dart';

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

  @override
  Widget build(BuildContext context) {
    final colors = context.bloomColors;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Overview', style: TextStyle(fontWeight: FontWeight.bold)),
        actions: [
          BloomButton(
            size: BloomButtonSize.sm,
            variant: BloomButtonVariant.outline,
            leading: const Icon(Icons.download, size: 14),
            onPressed: () {},
            child: const Text('Download Report'),
          ),
          const SizedBox(width: 16),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // Metric Cards Row
            Row(
              children: [
                Expanded(
                  child: BloomCard(
                    header: const BloomCardHeader(
                      title: BloomCardTitle('Total Revenue'),
                      description: BloomCardDescription('+20.1% from last month'),
                    ),
                    content: const Text(
                      '$45,231.89',
                      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: BloomCard(
                    header: const BloomCardHeader(
                      title: BloomCardTitle('Active Subscriptions'),
                      description: BloomCardDescription('+180 new today'),
                    ),
                    content: const Text(
                      '+2,350',
                      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 24),

            // Revenue Area Chart
            BloomCard(
              header: const BloomCardHeader(
                title: BloomCardTitle('Revenue Over Time'),
                description: BloomCardDescription('Monthly breakdown of desktop and mobile transactions.'),
              ),
              content: BloomChart(
                type: BloomChartType.area,
                height: 240,
                data: const BloomChartData(
                  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                  series: [
                    BloomChartSeries(
                      name: 'Desktop',
                      values: [186, 305, 237, 73, 209, 214],
                      color: BloomColors.petalBlue,
                    ),
                    BloomChartSeries(
                      name: 'Mobile',
                      values: [80, 200, 120, 190, 130, 140],
                      color: BloomColors.petalPink,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

---

## Clean Authentication Card (`auth-01`)

**Category:** Authentication  
**Description:** Sign-in form card with email input, password visibility toggle, remember me checkbox, and social auth buttons.

### Complete Flutter Implementation

```dart
import 'package:flutter/material.dart';
import 'package:bloom_ui/bloom_ui.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(maxWidth: 400),
          child: BloomCard(
            header: const BloomCardHeader(
              title: BloomCardTitle('Welcome Back'),
              description: BloomCardDescription('Enter your email to sign in to your account.'),
            ),
            content: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                const BloomField(
                  label: BloomFieldLabel('Email', required: true),
                  child: BloomInput(
                    placeholder: 'alex@example.com',
                    keyboardType: TextInputType.emailAddress,
                  ),
                ),
                const SizedBox(height: 16),
                const BloomField(
                  label: BloomFieldLabel('Password', required: true),
                  child: BloomInput(
                    placeholder: '••••••••',
                    obscureText: true,
                  ),
                ),
                const SizedBox(height: 16),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    BloomCheckbox(
                      checked: true,
                      label: const Text('Remember me'),
                      onChanged: (val) {},
                    ),
                    TextButton(
                      onPressed: () {},
                      child: const Text('Forgot password?'),
                    ),
                  ],
                ),
                const SizedBox(height: 20),
                BloomButton(
                  onPressed: () {
                    BloomSonner.success(context, 'Signed in successfully!');
                  },
                  child: const Text('Sign In'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
```

---

## AI Conversational Assistant (`chat-01`)

**Category:** Chat & AI  
**Description:** Complete AI messaging UI with message bubble reactions, file attachment pills, and bottom prompt bar.

### Complete Flutter Implementation

```dart
import 'package:flutter/material.dart';
import 'package:bloom_ui/bloom_ui.dart';

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

  @override
  Widget build(BuildContext context) {
    final colors = context.bloomColors;

    return Scaffold(
      appBar: AppBar(
        title: const Row(
          children: [
            BloomAvatar(name: 'Bloom AI', size: BloomAvatarSize.sm),
            SizedBox(width: 10),
            Text('Bloom Assistant', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              padding: const EdgeInsets.all(16),
              children: const [
                BloomMessage(
                  sender: BloomMessageSender(name: 'Bloom AI'),
                  bubble: BloomBubble(
                    variant: BloomBubbleVariant.received,
                    child: Text('Hello! How can I help configure your Flutter app today?'),
                  ),
                ),
                SizedBox(height: 16),
                BloomMessage(
                  sender: BloomMessageSender(name: 'You'),
                  bubble: BloomBubble(
                    variant: BloomBubbleVariant.sent,
                    child: Text('Can you generate a responsive data table layout?'),
                  ),
                ),
              ],
            ),
          ),
          Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: colors.surface1,
              border: Border(top: BorderSide(color: colors.border)),
            ),
            child: Row(
              children: [
                Expanded(
                  child: BloomInput(
                    placeholder: 'Ask Bloom anything...',
                    leading: const Icon(Icons.auto_awesome, size: 16),
                  ),
                ),
                const SizedBox(width: 8),
                BloomButton(
                  size: BloomButtonSize.defaultSize,
                  onPressed: () {},
                  child: const Icon(Icons.arrow_upward, size: 16),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
```

---

## App Settings & Preferences (`settings-01`)

**Category:** Settings  
**Description:** Account profile, appearance theme toggle, push notification switches, and danger zone actions.

### Complete Flutter Implementation

```dart
import 'package:flutter/material.dart';
import 'package:bloom_ui/bloom_ui.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Settings')),
      body: ListView(
        padding: const EdgeInsets.all(24),
        children: [
          BloomCard(
            header: const BloomCardHeader(
              title: BloomCardTitle('Appearance & Notifications'),
              description: BloomCardDescription('Configure how Bloom UI looks and alerts you.'),
            ),
            content: Column(
              children: [
                BloomSwitch(
                  checked: true,
                  label: const Text('Dark Mode Sync'),
                  onChanged: (v) {},
                ),
                const SizedBox(height: 16),
                BloomSwitch(
                  checked: true,
                  label: const Text('OTA Patch Notifications'),
                  onChanged: (v) {},
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
```

---