tatweerui 0.0.14

A comprehensive Flutter UI component library with custom buttons, dialogs, switches, text fields, cards, badges, and more. Designed for Tatweer Research applications.

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

• Homepage
• Repository
• Pub.dev

Author

Tatweer Research - https://tatweerresearch.org