Components

Flutter Studio provides a comprehensive set of 40+ production-ready Flutter components that you can copy directly into your project.

Component Categories

Buttons & Inputs

Interactive elements for user input and actions.

• Button - Versatile button with multiple variants
• Text Field - Single-line text input
• Text Area - Multi-line text input
• Checkbox - Boolean selection control
• Radio - Single selection from options
• Switch - Toggle between two states
• Slider - Value selection from a range
• Select - Dropdown selection
• Dropdown - Advanced dropdown menu

Layout

Components for structuring your UI.

• Card - Container for content
• Divider - Visual separator
• Accordion - Collapsible content panels
• Tabs - Tabbed navigation

Feedback

Components for providing feedback to users.

• Alert - Important messages and notifications
• Toast - Brief notification messages
• Dialog - Modal dialog boxes
• Progress - Progress indicators
• Spinner - Loading indicators
• Skeleton - Loading placeholders
• Empty - Empty state indicators
• Tooltip - Contextual information on hover

Navigation

Components for app navigation.

• App Bar - Top application bar
• Bottom Nav Bar - Bottom navigation
• Breadcrumb - Hierarchical navigation
• Pagination - Page navigation controls

Data Display

Components for displaying data and content.

• Avatar - User profile images
• Badge - Status indicators
• Chip - Compact element for tags
• Table - Data tables

Overlay

Components that appear on top of content.

• Bottom Sheet - Modal bottom panel
• Popover - Contextual popup

Usage

All components follow the same pattern:

1. Install: Use CLI or copy code from docs
2. Import: Add to your Flutter file
3. Customize: Modify to match your design

import 'package:flutter_studio/flutter_studio.dart';

// Use any component
CustomButton(
  text: 'Click me',
  onPressed: () {},
)

Need Help?

• Try components in the Playground
• Check the Installation Guide
• Read about Theming