https://github.com/sazardev/animal_crossing_ui
Build delightful apps with the cozy charm of Animal Crossing!
https://github.com/sazardev/animal_crossing_ui
Last synced: 5 months ago
JSON representation
Build delightful apps with the cozy charm of Animal Crossing!
- Host: GitHub
- URL: https://github.com/sazardev/animal_crossing_ui
- Owner: sazardev
- License: mit
- Created: 2025-11-23T19:35:27.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-11-24T23:58:16.000Z (7 months ago)
- Last Synced: 2026-01-11T16:21:47.907Z (5 months ago)
- Language: Dart
- Homepage:
- Size: 1.77 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Animal Crossing UI
A comprehensive Flutter UI component library inspired by the warm, friendly design of Animal Crossing. Build beautiful applications with 60+ custom widgets, 16+ predefined themes, and a complete design system - no Material or Cupertino dependencies required.
[](https://pub.dev/packages/animal_crossing_ui)
[](https://opensource.org/licenses/MIT)
[](https://flutter.dev/)
## Overview
Animal Crossing UI (ACUI) is a production-ready Flutter package that brings the signature flat, rounded, and friendly aesthetic of Animal Crossing games to your applications. Every component is built from scratch using Flutter's widget system, providing a cohesive design language independent of Material Design or Cupertino.
**Key Features:**
- **60+ Custom Components** - Complete widget library covering buttons, forms, navigation, dialogs, data display, and specialized game-inspired elements
- **16+ Predefined Themes** - Character-based and seasonal color palettes with full light/dark mode support
- **True Flat Design** - Authentic Animal Crossing aesthetic with rounded corners, soft colors, and friendly typography
- **Zero Dependencies** - Built entirely with Flutter primitives, no Material or Cupertino required
- **Responsive Utilities** - Built-in breakpoints and helpers for mobile, tablet, and desktop layouts
- **Comprehensive Documentation** - Every component includes detailed API docs, examples, and usage patterns
- **Production Ready** - Type-safe, well-tested, and optimized for real-world applications
## Design Philosophy
Animal Crossing UI was created to provide Flutter developers with an alternative to Material Design and Cupertino, drawing inspiration from Nintendo's beloved life simulation franchise. The design system emphasizes:
**Visual Principles:**
- **Flat Design** - No shadows, gradients, or depth effects. Simple, clean surfaces.
- **Rounded Everything** - Generous border radius on all interactive elements (8-20px)
- **Soft Color Palette** - Pastel tones and muted colors that feel warm and welcoming
- **Friendly Typography** - Rounded sans-serif fonts with comfortable sizing
- **Consistent Spacing** - 8px base unit system for predictable layouts
**Interaction Design:**
- **Gentle Animations** - Smooth 200ms transitions with easing curves
- **Clear Feedback** - Hover states, pressed states, and visual confirmation
- **Intuitive Controls** - Familiar patterns adapted to flat aesthetic
- **Accessibility First** - Semantic structure and screen reader support
**Interaction Design:**
- **Gentle Animations** - Smooth 200ms transitions with easing curves
- **Clear Feedback** - Hover states, pressed states, and visual confirmation
- **Intuitive Controls** - Familiar patterns adapted to flat aesthetic
- **Accessibility First** - Semantic structure and screen reader support
## Installation
Add to your `pubspec.yaml`:
```yaml
dependencies:
animal_crossing_ui: ^0.4.0
```
Then run:
```bash
flutter pub get
```
## Quick Start
```dart
import 'package:flutter/widgets.dart';
import 'package:animal_crossing_ui/animal_crossing_ui.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ACUIApp(
title: 'My Application',
theme: ACUIThemePresets.isabelle,
home: ACUIScaffold(
appBar: ACUIAppBar(
title: const Text('Welcome'),
),
body: Center(
child: ACUIButton(
onPressed: () {},
child: const Text('Get Started'),
),
),
),
);
}
}
```
## Component Library
Animal Crossing UI provides 60+ components organized into logical categories:
### Core Components
**ACUIApp** - Root application widget with theme management
- Light/dark mode support
- Custom theme configuration
- Navigator integration
- Global theme access via `ACUITheme.of(context)`
**ACUIScaffold** - Screen layout structure
- Predefined architectures (basic, centered, split, tabbed, etc.)
- AppBar integration
- Drawer support
- Bottom navigation
- Responsive layout helpers
### Buttons & Actions
**ACUIButton** - Primary action button
- Variants: primary, secondary, outlined, text, icon
- Sizes: small, medium, large
- States: enabled, disabled, loading
- Full customization support
### Form Controls
**ACUITextField** - Text input with validation
- Placeholder and label support
- Prefix/suffix icons
- Error states
- Focus animations
- Password visibility toggle
**ACUICheckbox** - Boolean toggle
- Checked/unchecked states
- Tri-state support
- Custom colors
**ACUISwitch** - Toggle switch
- Smooth slide animation
- Active/inactive states
- Customizable colors
**ACUIRadio** - Single choice selection
- Generic type support
- ACUIRadioListTile variant with label/subtitle
- Group management
**ACUISlider** - Value selection
- Continuous range
- Min/max constraints
- Visual feedback
**ACUIDropdown** - Selection menu
- Scrollable options
- Custom item rendering
- Keyboard navigation
### Data Display
**ACUICard** - Content container
- Rounded corners
- Optional tap handling
- Customizable padding and colors
**ACUIListTile** - List item layout
- Leading/trailing widgets
- Title and subtitle
- Interactive states
**ACUIChip** - Tag or category label
- Optional delete action
- Compact sizing
- Background customization
**ACUIBadge** - Notification indicator
- Dot or label variants
- Positioning offset
- Custom colors
**ACUIAvatar** - Profile pictures
- Image or placeholder support
- Circular shape
- Configurable radius
**ACUIIcon** - Icon rendering
- No Material dependency
- Custom IconData support
- Size and color props
### Navigation
**ACUIAppBar** - Top navigation bar
- Title display
- Leading widget (back button)
- Action buttons
- Automatic text contrast
**ACUIDrawer** - Side navigation panel
- Header and footer sections
- Grouped menu items
- Selection states
- Custom width
**ACUIBottomNavigationBar** - Bottom tabs
- Icon and label display
- Multiple items
- Active state indicator
- Badge support
**ACUITabBar** - Segmented control
- Equal-width tabs
- Selection animation
- Custom colors
**ACUITabView** - Tab content display
- State preservation with IndexedStack
- Syncs with ACUITabBar
- Lazy loading support
### Dialogs & Overlays
**ACUIDialog** - Modal dialog
- Custom content
- Dismissible barrier
- Fade and scale animation
- `showACUIDialog()` helper function
**ACUIAlert** - Confirmation dialog
- Title and message
- OK/Cancel buttons
- Async result handling
- `showACUIAlert()` helper function
**ACUISnackbar** - Bottom notification
- Auto-dismiss
- Optional action button
- Slide-up animation
- `showACUISnackbar()` helper function
**ACUIToast** - Brief notification
- Four types: success, error, warning, info
- Global controller
- Position options (top/center/bottom)
- Auto-dismiss with custom duration
**ACUIMenu** - Popup menu
- Context menu support
- Item list with icons
- Position calculation
- Generic return type
- `showACUIMenu()` helper function
### Pickers
**ACUIDatePicker** - Calendar selection
- Month/year navigation
- Date range constraints
- Today highlighting
- `showACUIDatePicker()` helper function
**ACUITimePicker** - Time selection
- 12/24 hour format
- Hour and minute adjustment
- AM/PM toggle
- `showACUITimePicker()` helper function
### Progress Indicators
**ACUILinearProgress** - Horizontal progress bar
- Determinate (0.0-1.0 value)
- Indeterminate (animated loading)
- Custom colors and height
**ACUIProgressIndicator** - Circular spinner
- Determinate arc
- Indeterminate rotation
- CustomPaint rendering
- Configurable size and stroke width
**ACUILoadingSpinner** - Animated loading states
- Six animation styles: spinner, dots, typing, fallingLetters, leaf, bells
- Optional text display
- Theme-aware colors
- Game-inspired animations
### Layout Utilities
**ACUISection** - Labeled content area
- Title and description
- Optional action button
- Organized grouping
**ACUIContainer** - Styled box
- Theme-aware colors
- Rounded corners
- Padding and margins
- Alternative to ACUICard for simpler needs
**ACUIExpansionPanel** - Collapsible section
- Header with arrow icon
- Smooth expand/collapse
- State management
- Title and subtitle support
**ACUIDivider** / **ACUIVerticalDivider** - Visual separators
- Horizontal and vertical variants
- Configurable thickness
- Theme border color
- Optional indentation
**ACUIListView** / **ACUIListViewBuilder** - Scrollable lists
- Automatic spacing between items
- Vertical/horizontal scrolling
- Builder pattern for performance
- Configurable padding
**ACUIGridView** / **ACUIGridViewBuilder** - Grid layouts
- Responsive column count
- Aspect ratio control
- Gap spacing
- Builder pattern for efficiency
**ACUISearchBar** - Search input
- Search icon
- Clear button
- onChange callback
- Submit handling
**ACUIBanner** - Notification banner
- Four types: info, warning, success, error
- Leading icon
- Dismiss action
- Semantic colors
**ACUIEmptyState** - No content placeholder
- Icon display
- Title and message
- Optional action button
- Centered layout
### Navigation Extras
**ACUINavigationDrawer** - Alternative drawer
- Scrollable content
- Header/footer support
- ACUINavigationDrawerItem for menu entries
- Selection states
### Animal Crossing Game Components
Specialized widgets inspired by in-game interfaces:
**ACUIBellCounter** - Currency display
- Animated counting
- Formatted numbers
- Bell icon
- Smooth transitions
**ACUIStarRating** - Rating display
- Interactive or read-only
- Full and half stars
- CustomPaint rendering
- Configurable star count
**ACUIDialogBox** - Character dialog
- Typing animation
- Three speed options
- Character name display
- Blinking cursor
**ACUIInventoryGrid** - Pocket interface
- Grid of item slots
- Selection handling
- Empty slot display
- Quantity badges
**ACUICatalogCard** - Item showcase
- Image display
- Name and price
- Owned indicator
- Bell currency
**ACUIReactionWheel** - Circular picker
- Radial layout
- Emoji reactions
- Tap selection
- Animated highlight
**ACUIWeatherWidget** - Weather display
- Condition types
- Temperature
- Themed colors
- Icon support
**ACUIFossilDisplay** - Museum collection
- Donated status
- Icon display
- Interactive cards
- Progress tracking
**ACUIFruitCounter** - Harvest tracking
- Fruit type selection
- CustomPaint fruit icons
- Count display
- Themed colors
**ACUIMessageBottle** - Collectible message
- Expandable content
- Animation states
- Author and date
- Interactive disclosure
**ACUISeasonalBanner** - Event announcements
- Season themes
- Custom messages
- Responsive sizing
- Decorative display
**ACUINookPhone** - App launcher
- Grid of apps
- Icon and label
- Tap handling
- Phone-style interface
**ACUIVillagerCard** - Character profile
- Personality types
- Photo display
- Species and birthday
- Catchphrase
**ACUIAchievementBadge** - Reward display
- Tier levels (bronze/silver/gold/platinum)
- Icon and title
- Description
- Date earned
**ACUIProgressTracker** - Collection progress
- Current/total display
- Progress bar
- Percentage
- Custom icons
## Theming System
Animal Crossing UI includes a sophisticated theming system with 16+ predefined themes and full customization support.
### Predefined Themes
**Character Themes:**
- `ACUIThemePresets.isabelle` - Cheerful yellow
- `ACUIThemePresets.tomNook` - Warm brown
- `ACUIThemePresets.kk` - Cool blue
- `ACUIThemePresets.celeste` - Celestial purple
- `ACUIThemePresets.timmy` - Friendly green
- `ACUIThemePresets.kicks` - Stylish teal
- `ACUIThemePresets.blathers` - Scholarly blue
- `ACUIThemePresets.sable` - Elegant rose
**Seasonal Themes:**
- `ACUIThemePresets.spring` - Cherry blossom pink
- `ACUIThemePresets.summer` - Beach blue
- `ACUIThemePresets.autumn` - Maple orange
- `ACUIThemePresets.winter` - Snowy white
**Special Themes:**
- `ACUIThemePresets.nookMiles` - Teal and orange
- `ACUIThemePresets.nookShopping` - Shopping green
- `ACUIThemePresets.classic` - Original game palette
- `ACUIThemePresets.pastelDream` - Soft pastels
### Custom Themes
Create your own theme:
```dart
final customTheme = ACUIThemeData(
primaryColor: Color(0xFF9ACD7B),
secondaryColor: Color(0xFF87CEEB),
backgroundColor: Color(0xFFFFFAF0),
surfaceColor: Color(0xFFFFFFFF),
textColor: Color(0xFF4A4A4A),
textSecondaryColor: Color(0xFF8A8A8A),
borderColor: Color(0xFFE0E0E0),
errorColor: Color(0xFFFF6B6B),
successColor: Color(0xFF9ACD7B),
warningColor: Color(0xFFFFB347),
);
ACUIApp(
theme: customTheme,
// ...
)
```
### Dark Mode
All themes include automatic dark mode variants accessed via `brightness` parameter:
```dart
ACUIThemeData.fromPreset(
ACUIThemePresets.isabelle,
brightness: Brightness.dark,
)
```
Or respond to system settings:
```dart
ACUIApp(
theme: ACUIThemeData.fromPreset(
ACUIThemePresets.isabelle,
brightness: MediaQuery.of(context).platformBrightness,
),
// ...
)
```
## Responsive Design
Built-in utilities for adaptive layouts:
```dart
// Breakpoints
ACUIResponsive.isMobile(context) // < 600px
ACUIResponsive.isTablet(context) // 600-1200px
ACUIResponsive.isDesktop(context) // > 1200px
// Responsive values
final columns = ACUIResponsive.value(
context: context,
mobile: 1,
tablet: 2,
desktop: 3,
);
// Responsive spacing
final spacing = ACUIResponsive.spacing(context);
```
## Validation Utilities
Form validation helpers:
```dart
// Email validation
ACUIValidators.isValidEmail(email)
// Password strength
ACUIValidators.getPasswordStrength(password) // Returns 0-4
// Phone validation
ACUIValidators.isValidPhoneNumber(phone)
// URL validation
ACUIValidators.isValidUrl(url)
// Custom validators
ACUIValidators.minLength(text, minLength)
ACUIValidators.maxLength(text, maxLength)
ACUIValidators.matches(text, pattern)
```
## Page Transitions
Animated route transitions:
```dart
Navigator.push(
context,
ACUIPageTransition(
type: ACUIPageTransitionType.slideUp,
child: NextPage(),
),
);
```
Available transitions: `fade`, `slideUp`, `slideDown`, `slideLeft`, `slideRight`, `scale`, `rotate`, `fadeScale`
## Layout Presets
Pre-built layout patterns:
```dart
// Form layout
ACUILayouts.form(
children: [
ACUITextField(/* ... */),
ACUIButton(/* ... */),
],
)
// Grid layout
ACUILayouts.grid(
crossAxisCount: 2,
children: items,
)
// Card list
ACUILayouts.cardList(
children: cards,
)
```
## Best Practices
**Theme Access:**
```dart
final theme = ACUITheme.of(context);
final primaryColor = theme.primaryColor;
```
**Spacing:**
Use `ACUISpacing` constants for consistent gaps:
```dart
SizedBox(height: ACUISpacing.md) // 16px
Padding(padding: EdgeInsets.all(ACUISpacing.lg)) // 24px
```
**Border Radius:**
Use `ACUIBorderRadius` for consistent roundedness:
```dart
BorderRadius.circular(ACUIBorderRadius.md) // 12px
BorderRadius.circular(ACUIBorderRadius.full) // Pill shape
```
**Text Styles:**
Use `ACUITextStyles` for typography:
```dart
Text('Title', style: ACUITextStyles.titleLarge)
Text('Body', style: ACUITextStyles.bodyMedium)
```
**Responsive Layouts:**
Check screen size before rendering:
```dart
if (ACUIResponsive.isMobile(context)) {
return MobileLayout();
} else {
return DesktopLayout();
}
```
## Example App
A comprehensive example app is included showcasing all components and features. Run it with:
```bash
cd example
flutter run
```
The example demonstrates:
- All 60+ components in action
- Theme switcher
- Responsive layouts
- Form validation
- Navigation patterns
- Dialog and overlay usage
- Animal Crossing game components
- Custom layouts and compositions
## Requirements
- **Dart SDK**: ^3.10.0
- **Flutter**: >=3.0.0
- **Dependencies**: flutter_svg ^2.0.10
No other dependencies required. Works on all Flutter platforms: iOS, Android, Web, Windows, macOS, Linux.
## Migration Guide
### From v0.3.x to v0.4.0
New components added, no breaking changes. Simply update your dependency version.
### From v0.2.x to v0.3.x
- `ACUILoadingSpinner` now supports multiple animation styles via `style` parameter
- All dialogs now use `showACUI*` helper functions for consistency
## Contributing
Contributions are welcome! Please read the contributing guidelines before submitting pull requests.
## License
MIT License - see [LICENSE](LICENSE) file for details.
## Acknowledgments
Inspired by Nintendo's Animal Crossing series. This is an unofficial fan project and is not affiliated with or endorsed by Nintendo.
## Support
- **Documentation**: [pub.dev/documentation/animal_crossing_ui](https://pub.dev/documentation/animal_crossing_ui/latest/)
- **Issues**: [GitHub Issues](https://github.com/sazardev/animal_crossing_ui/issues)
- **Repository**: [GitHub](https://github.com/sazardev/animal_crossing_ui)
---
Built with care by the Flutter community.
**9 brand new components!** 🎉
| Component | Use Case | Example |
|-----------|----------|---------|
| 🔘 **Radio Buttons** | Single choice selection | Pick your favorite fruit |
| 📋 **Dropdowns** | Select from lists | Choose a villager |
| 🔍 **Search Bar** | Filter and find | Search your catalog |
| ⏳ **Loading Spinner** | Show progress | Loading island data |
| 🏝️ **Empty States** | No content yet | First-time user experience |
| 📢 **Banners** | Important messages | Island announcements |
| 📦 **Containers** | Flexible wrappers | Custom layouts |
| 📑 **Sections** | Organized content | Settings categories |
| 🎪 **Expansion Panels** | Collapsible areas | FAQ sections |
**Plus powerful utilities!**
- 📏 **ACUIResponsive** - Adapt to any screen size effortlessly
- ✅ **ACUIValidators** - Email, password, phone validation and more
- 🎨 **ACUILayouts** - Pre-built patterns (forms, grids, lists)
- ☁️ **ACUIShadows** - Subtle depth when you need it
## 📦 Installation
```yaml
dependencies:
animal_crossing_ui: ^0.4.0
```
```bash
flutter pub get
```
## 🚀 Quick Start
### Your First ACUI App (2 minutes!)
```dart
import 'package:flutter/widgets.dart';
import 'package:animal_crossing_ui/animal_crossing_ui.dart';
void main() => runApp(const MyIslandApp());
class MyIslandApp extends StatelessWidget {
const MyIslandApp({super.key});
@override
Widget build(BuildContext context) {
return ACUIApp(
title: 'My Island',
theme: ACUIThemePresets.isabelle, // 🐶 Cheerful yellow theme!
home: Column(
children: [
ACUIAppBar(title: const Text('Welcome! 🏝️')),
Expanded(
child: Center(
child: ACUIButton(
onPressed: () => print('Hello!'),
child: const Text('Say Hello!'),
),
),
),
],
),
);
}
}
```
**That's it!** Run it and see the magic! ✨
## 🎨 Beautiful Themes
Choose from 16+ pre-designed themes or create your own!
### Character Themes 🎮
```dart
ACUIThemePresets.isabelle // 🐶 Cheerful yellow & coral
ACUIThemePresets.tomNook // 🦝 Professional green & brown
ACUIThemePresets.kkSlider // 🎸 Musical blue & white
ACUIThemePresets.celeste // ⭐ Dreamy pink & purple
ACUIThemePresets.blathers // 🦉 Scholarly brown & teal
```
### Seasonal Themes 🌸
```dart
ACUIThemePresets.spring // 🌸 Cherry blossom pink
ACUIThemePresets.summer // ☀️ Ocean blue
ACUIThemePresets.autumn // 🍂 Warm orange & brown
ACUIThemePresets.winter // ❄️ Icy blue & white
```
**All themes have automatic dark mode!**
```dart
ACUIApp(
theme: ACUIThemePresets.isabelle, // Light
darkTheme: ACUIThemePresets.isabelleDark, // Dark
home: const HomePage(),
)
```
## 🧱 Essential Components
### 🎯 Buttons
```dart
// Primary action
ACUIButton(
onPressed: () => print('Planted!'),
child: const Text('Plant Tree 🌳'),
)
// Secondary action
ACUIButton.secondary(
onPressed: () => print('Cancelled'),
child: const Text('Cancel'),
)
// Sizes: small, medium, large
ACUIButton(
size: ACUIButtonSize.large,
child: const Text('Big Button!'),
)
```
### 📝 Forms
```dart
// Text input
ACUITextField(
placeholder: 'Enter island name...',
onChanged: (text) => print(text),
)
// Radio selection
ACUIRadioListTile(
title: const Text('Apple 🍎'),
value: 'apple',
groupValue: selected,
onChanged: (val) => setState(() => selected = val),
)
// Dropdown
ACUIDropdown(
hint: const Text('Choose fruit'),
items: [
ACUIDropdownItem(value: 'apple', child: const Text('Apple 🍎')),
ACUIDropdownItem(value: 'orange', child: const Text('Orange 🍊')),
],
onChanged: (val) => print(val),
)
// Search
ACUISearchBar(
placeholder: 'Search catalog...',
onChanged: (query) => filterItems(query),
)
```
### 🎴 Cards & Containers
```dart
// Simple card
ACUICard(
child: Text('Card content'),
)
// Custom container
ACUIContainer(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),
padding: EdgeInsets.all(16),
child: Text('Custom box!'),
)
```
### 📢 Feedback
```dart
// Banners
ACUIBanner(
type: ACUIBannerType.success,
message: 'Island rating: 5 stars! 🌟',
)
// Loading
const ACUILoadingSpinner()
// Empty state
ACUIEmptyState(
icon: const Text('🏝️', style: TextStyle(fontSize: 80)),
title: 'No islands yet!',
message: 'Create your first island to get started!',
actionLabel: 'Create Island',
action: () => createIsland(),
)
```
## 🛠️ Powerful Utilities
### 📏 Responsive Design
```dart
// Check device type
if (ACUIResponsive.isMobile(context)) {
// Show mobile layout
}
// Pick value by screen size
final fontSize = ACUIResponsive.value(
context: context,
mobile: 14.0,
tablet: 16.0,
desktop: 18.0,
);
// Responsive padding
EdgeInsets padding = ACUIResponsive.padding(context);
```
### ✅ Form Validation
```dart
// Email validation
if (ACUIValidators.isValidEmail(email)) {
print('Email is valid! 📧');
}
// Password strength (0-4)
int strength = ACUIValidators.passwordStrength(password);
// With error messages
String? error = ACUIValidators.email(emailInput);
if (error != null) {
showError(error); // "That doesn't look like a valid email! 🤔"
}
```
### 🎨 Layout Presets
```dart
// Form layout
ACUILayouts.form(
children: [
ACUITextField(placeholder: 'Name'),
ACUITextField(placeholder: 'Email'),
ACUIButton(child: Text('Submit')),
],
)
// Card grid
ACUILayouts.cardGrid(
itemCount: items.length,
columns: 3,
itemBuilder: (context, index) => ACUICard(
child: Text(items[index]),
),
)
// Sectioned list
ACUILayouts.sectionedList(
sections: [
ACUILayoutSection(
title: 'ISLAND SETTINGS',
items: [
ACUIListTile(title: Text('Island Name')),
ACUIListTile(title: Text('Island Tune')),
],
),
],
)
```
## 📚 Documentation
- **[Getting Started Guide](GETTING_STARTED.md)** - Complete beginner-friendly tutorial
- **[Theme Guide](THEME_GUIDE.md)** - All about themes and customization
- **[API Documentation](https://pub.dev/documentation/animal_crossing_ui/latest/)** - Full API reference
- **[Example App](example/)** - See all components in action
## 🎪 Example Patterns
### Login Screen
```dart
ACUILayouts.form(
children: [
const Text('Welcome Back! 👋', style: TextStyle(fontSize: 32)),
ACUICard(
child: Column(
children: [
ACUITextField(placeholder: 'Email'),
const SizedBox(height: 16),
ACUITextField(placeholder: 'Password', obscureText: true),
],
),
),
ACUIButton(
onPressed: () => login(),
child: const Text('Log In 🔐'),
),
],
)
```
### Settings Screen
```dart
ACUILayouts.sectionedList(
sections: [
ACUILayoutSection(
title: 'ISLAND',
items: [
ACUIListTile(
leading: Text('🏝️'),
title: Text('Island Name'),
subtitle: Text('Paradise Island'),
),
],
),
ACUILayoutSection(
title: 'APP',
items: [
ACUIListTile(
leading: Text('🌙'),
title: Text('Dark Mode'),
trailing: ACUISwitch(value: dark, onChanged: setDark),
),
],
),
],
)
```
## 🎯 Component Catalog
### Basic Components (20+)
- ✅ ACUIButton (primary, secondary, text)
- ✅ ACUICard
- ✅ ACUIContainer
- ✅ ACUIAppBar
- ✅ ACUITextField
- ✅ ACUISearchBar
- ✅ ACUICheckbox
- ✅ ACUISwitch
- ✅ ACUIRadio & ACUIRadioListTile
- ✅ ACUISlider
- ✅ ACUIDropdown
### Lists & Navigation (10+)
- ✅ ACUIListTile & ACUIListView
- ✅ ACUIGridView
- ✅ ACUITabBar & ACUITabView
- ✅ ACUIBottomNavigationBar
- ✅ ACUINavigationDrawer
- ✅ ACUISection
- ✅ ACUIExpansionPanel
### Feedback & Display (10+)
- ✅ ACUIDialog & ACUIAlert
- ✅ ACUIBanner
- ✅ ACUISnackbar
- ✅ ACUITooltip
- ✅ ACUIMenu
- ✅ ACUILoadingSpinner
- ✅ ACUIProgressIndicator
- ✅ ACUILinearProgress
- ✅ ACUIEmptyState
- ✅ ACUIBadge
- ✅ ACUIAvatar
- ✅ ACUIChip
### Pickers & Input (4+)
- ✅ ACUIDatePicker
- ✅ ACUITimePicker
- ✅ ACUIDivider
### Utilities (10+)
- ✅ ACUIThemePresets (16+ themes)
- ✅ ACUIResponsive
- ✅ ACUIValidators
- ✅ ACUILayouts
- ✅ ACUIShadows
- ✅ ACUIAnimations
- ✅ ACUISpacing
- ✅ ACUIBorderRadius
- ✅ ACUIColors
- ✅ ACUITextStyles
**Total: 44+ components + 10+ utilities = 54+ tools!** 🎉
## 🤝 Contributing
We welcome contributions! Whether it's:
- 🐛 Bug reports
- 💡 Feature suggestions
- 📝 Documentation improvements
- 🎨 New themes or components
Please open an issue or pull request on [GitHub](https://github.com/sazardev/animal_crossing_ui)!
## 📄 License
MIT License - See [LICENSE](LICENSE) file for details.
## 🌟 Show Your Support
If you love Animal Crossing UI, give it a ⭐ on GitHub!
---
**Built with 💚 for the Flutter community**
*May your code be as delightful as a 5-star island!* 🏝️✨