Tatweer UI
A comprehensive Flutter UI component library designed for Tatweer Research. This package provides a collection of custom, reusable UI components with consistent styling and branding.
Screenshots
Features
- 🎨 Consistent Design System - Built with Tatweer Research branding
- 🧩 Comprehensive Components - Buttons, dialogs, switches, text fields, cards, badges, and more
- 🎯 Fully Customizable - Extensive customization options for all components
- ♿ Accessible - Built with accessibility in mind
- 📱 Material Design 3 - Follows modern Material Design principles
- 🎨 Theme Support - Built-in theme and color system
Installation
Add this to your package's pubspec.yaml file:
dependencies:
tatweerui: ^0.0.12
Then run:
flutter pub get
Usage
Import the package:
import 'package:tatweerui/tatweerui.dart';
Components
Buttons
Primary Button
TatweerPrimaryButton(
text: 'Click Me',
onPressed: () {
// Handle button press
},
)
Secondary Button
TatweerSecondaryButton(
text: 'Cancel',
onPressed: () {
// Handle button press
},
)
Features:
- Multiple sizes (small, medium, large)
- Icon support
- Loading states
- Disabled states
- Gradient support
- Customizable colors
Dialogs
Info Dialog
TatweerInfoDialog.show(
context: context,
title: 'Information',
message: 'This is an informational message.',
);
Alert Dialog
TatweerAlertDialog.show(
context: context,
type: 'success', // 'success', 'warning', or 'error'
message: 'Operation completed successfully!',
);
Confirmation Dialog
TatweerConfirmationDialog.show(
context: context,
title: 'Confirm Action',
message: 'Are you sure you want to proceed?',
).then((confirmed) {
if (confirmed == true) {
// User confirmed
}
});
Text Fields
TatweerTextField(
label: 'Email',
hintText: 'Enter your email',
prefixIcon: Icons.email,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your email';
}
return null;
},
)
Switches
TatweerSwitch(
label: 'Enable Notifications',
subtitle: 'Receive push notifications',
value: isEnabled,
onChanged: (value) {
setState(() {
isEnabled = value;
});
},
)
Cards
TatweerCard(
title: 'Card Title',
subtitle: 'Card subtitle',
child: Text('Card content'),
footer: TatweerPrimaryButton(
text: 'Action',
onPressed: () {},
),
)
List Components
List Section
TatweerListSection(
title: 'Settings',
subtitle: 'Manage your preferences',
children: [
TatweerListTile(
leadingIcon: Icons.settings,
title: 'General',
trailingIcon: Icons.chevron_right,
onTap: () {},
),
],
)
List Tile
TatweerListTile(
leadingIcon: Icons.person,
title: 'Profile',
subtitle: 'Edit your profile information',
trailingIcon: Icons.chevron_right,
onTap: () {},
)
Badges
TatweerBadge(
text: 'New',
color: TatweerColors.success,
variant: 'filled', // 'filled', 'outlined', or 'soft'
size: 'medium', // 'small', 'medium', or 'large'
)
Theme & Colors
The package includes a comprehensive color system:
import 'package:tatweerui/tatweerui.dart';
// Use Tatweer colors
TatweerColors.primary
TatweerColors.secondary
TatweerColors.success
TatweerColors.error
TatweerColors.warning
TatweerColors.info
// Apply theme
MaterialApp(
theme: TatweerTheme.lightTheme,
// ...
)
Example
See the example directory for a complete demonstration of all components.
To run the example:
cd example
flutter pub get
flutter run
Components Overview
- ✅ Buttons - Primary and secondary buttons with multiple variants
- ✅ Dialogs - Info, alert, confirmation, and custom dialogs
- ✅ Text Fields - Customizable input fields with validation
- ✅ Switches - Toggle switches with labels and subtitles
- ✅ Cards - Flexible card components
- ✅ List Components - List sections and tiles
- ✅ Badges - Status indicators and labels
- ✅ Theme - Complete color system and theme
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Links
Author
Tatweer Research - https://tatweerresearch.org