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.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:tatweerui/tatweerui.dart';

void main() {
  runApp(const TatweerUIExampleApp());
}

class TatweerUIExampleApp extends StatelessWidget {
  const TatweerUIExampleApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tatweer UI Examples',
      theme: TatweerTheme.lightTheme,
      home: const ComponentShowcase(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ComponentShowcase extends StatelessWidget {
  const ComponentShowcase({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tatweer UI Components'),
        backgroundColor: TatweerColors.primary,
        foregroundColor: Colors.white,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildSection(
            context,
            'Buttons',
            [
              _buildButtonExamples(context),
            ],
          ),
          const SizedBox(height: 24),
          _buildSection(
            context,
            'Switches',
            [
              _buildSwitchExamples(context),
            ],
          ),
          const SizedBox(height: 24),
          _buildSection(
            context,
            'Text Fields',
            [
              _buildTextFieldExamples(context),
            ],
          ),
          const SizedBox(height: 24),
          _buildSection(
            context,
            'Cards',
            [
              _buildCardExamples(context),
            ],
          ),
          const SizedBox(height: 24),
          _buildSection(
            context,
            'List Components',
            [
              _buildListExamples(context),
            ],
          ),
          const SizedBox(height: 24),
          _buildSection(
            context,
            'Badges',
            [
              _buildBadgeExamples(context),
            ],
          ),
          const SizedBox(height: 24),
          _buildSection(
            context,
            'Dialogs',
            [
              _buildDialogExamples(context),
            ],
          ),
        ],
      ),
    );
  }

  Widget _buildSection(BuildContext context, String title, List<Widget> children) {
    return TatweerCard(
      title: title,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: children,
      ),
    );
  }

  Widget _buildButtonExamples(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        const Text(
          'Primary Buttons',
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
        ),
        const SizedBox(height: 12),
        TatweerPrimaryButton(
          text: 'Primary Button',
          onPressed: () {},
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'With Icon',
          icon: Icons.add,
          onPressed: () {},
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'Small',
          size: 'small',
          onPressed: () {},
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'Large',
          size: 'large',
          onPressed: () {},
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'Loading',
          isLoading: true,
          onPressed: () {},
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'Disabled',
          isDisabled: true,
          onPressed: () {},
        ),
        const SizedBox(height: 24),
        const Text(
          'Secondary Buttons',
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
        ),
        const SizedBox(height: 12),
        TatweerSecondaryButton(
          text: 'Secondary Button',
          onPressed: () {},
        ),
        const SizedBox(height: 8),
        TatweerSecondaryButton(
          text: 'With Icon',
          icon: Icons.edit,
          onPressed: () {},
        ),
        const SizedBox(height: 8),
        TatweerSecondaryButton(
          text: 'Small',
          size: 'small',
          onPressed: () {},
        ),
        const SizedBox(height: 8),
        TatweerSecondaryButton(
          text: 'Large',
          size: 'large',
          onPressed: () {},
        ),
        const SizedBox(height: 8),
        TatweerSecondaryButton(
          text: 'Disabled',
          isDisabled: true,
          onPressed: () {},
        ),
      ],
    );
  }

  Widget _buildSwitchExamples(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        TatweerSwitch(
          label: 'Enable Notifications',
          value: true,
          onChanged: (value) {},
        ),
        const SizedBox(height: 16),
        TatweerSwitch(
          label: 'Dark Mode',
          subtitle: 'Switch to dark theme',
          value: false,
          onChanged: (value) {},
        ),
        const SizedBox(height: 16),
        TatweerSwitch(
          label: 'Auto Save',
          value: true,
          labelOnRight: true,
          onChanged: (value) {},
        ),
        const SizedBox(height: 16),
        TatweerSwitch(
          label: 'Disabled Switch',
          value: false,
          isDisabled: true,
          onChanged: (value) {},
        ),
      ],
    );
  }

  Widget _buildTextFieldExamples(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        TatweerTextField(
          label: 'Email',
          hintText: 'Enter your email',
          prefixIcon: Icons.email,
        ),
        const SizedBox(height: 16),
        TatweerTextField(
          label: 'Password',
          hintText: 'Enter your password',
          obscureText: true,
          prefixIcon: Icons.lock,
          suffixIcon: Icons.visibility,
        ),
        const SizedBox(height: 16),
        TatweerTextField(
          label: 'Full Name',
          hintText: 'Enter your full name',
          helperText: 'This will be displayed on your profile',
        ),
        const SizedBox(height: 16),
        TatweerTextField(
          label: 'Error State',
          hintText: 'This field has an error',
          errorText: 'This field is required',
          prefixIcon: Icons.error,
        ),
        const SizedBox(height: 16),
        TatweerTextField(
          label: 'Disabled',
          hintText: 'This field is disabled',
          enabled: false,
        ),
      ],
    );
  }

  Widget _buildCardExamples(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        TatweerCard(
          title: 'Card with Title',
          subtitle: 'This is a subtitle',
          child: const Text('Card content goes here'),
        ),
        const SizedBox(height: 16),
        TatweerCard(
          child: const Text('Simple card without title'),
        ),
        const SizedBox(height: 16),
        TatweerCard(
          title: 'Clickable Card',
          child: const Text('Tap this card'),
          onTap: () {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Card tapped!')),
            );
          },
          clickable: true,
        ),
        const SizedBox(height: 16),
        TatweerCard(
          title: 'Card with Footer',
          child: const Text('This card has a footer'),
          footer: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              TatweerSecondaryButton(
                text: 'Cancel',
                size: 'small',
                onPressed: () {},
              ),
              const SizedBox(width: 8),
              TatweerPrimaryButton(
                text: 'Save',
                size: 'small',
                onPressed: () {},
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildListExamples(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        TatweerListSection(
          title: 'Settings',
          subtitle: 'Manage your preferences',
          children: [
            TatweerListTile(
              leadingIcon: Icons.person,
              title: 'Profile',
              subtitle: 'Edit your profile information',
              trailingIcon: Icons.chevron_right,
              onTap: () {},
            ),
            TatweerListTile(
              leadingIcon: Icons.notifications,
              title: 'Notifications',
              subtitle: 'Manage notification settings',
              trailingIcon: Icons.chevron_right,
              onTap: () {},
            ),
            TatweerListTile(
              leadingIcon: Icons.security,
              title: 'Security',
              subtitle: 'Password and privacy',
              trailingIcon: Icons.chevron_right,
              onTap: () {},
            ),
          ],
        ),
        const SizedBox(height: 16),
        TatweerListTile(
          leadingIcon: Icons.home,
          title: 'Home',
          trailingIcon: Icons.chevron_right,
          onTap: () {},
        ),
        TatweerListTile(
          leadingIcon: Icons.favorite,
          title: 'Favorites',
          trailingIcon: Icons.chevron_right,
          onTap: () {},
        ),
        TatweerListTile(
          leadingIcon: Icons.settings,
          title: 'Settings',
          trailingIcon: Icons.chevron_right,
          onTap: () {},
        ),
      ],
    );
  }

  Widget _buildBadgeExamples(BuildContext context) {
    return Wrap(
      spacing: 12,
      runSpacing: 12,
      children: [
        const TatweerBadge(text: 'Default'),
        TatweerBadge(text: 'Primary', color: TatweerColors.primary),
        TatweerBadge(text: 'Success', color: TatweerColors.success),
        TatweerBadge(text: 'Error', color: TatweerColors.error),
        TatweerBadge(text: 'Warning', color: TatweerColors.warning),
        const SizedBox(width: 12),
        TatweerBadge(
          text: 'Outlined',
          variant: 'outlined',
          color: TatweerColors.primary,
        ),
        TatweerBadge(
          text: 'Soft',
          variant: 'soft',
          color: TatweerColors.primary,
        ),
        const SizedBox(width: 12),
        const TatweerBadge(text: 'Small', size: 'small'),
        const TatweerBadge(text: 'Medium', size: 'medium'),
        const TatweerBadge(text: 'Large', size: 'large'),
        const SizedBox(width: 12),
        const TatweerBadge(text: '5', circular: true),
        const TatweerBadge(text: '99+', circular: true, color: TatweerColors.error),
        TatweerBadge(
          text: 'With Icon',
          icon: Icons.star,
          color: TatweerColors.warning,
        ),
      ],
    );
  }

  Widget _buildDialogExamples(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        TatweerPrimaryButton(
          text: 'Show Info Dialog',
          onPressed: () {
            TatweerInfoDialog.show(
              context: context,
              title: 'Information',
              message: 'This is an informational message. Use this to provide helpful information to users.',
            );
          },
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'Show Success Alert',
          buttonColor: TatweerColors.success,
          onPressed: () {
            TatweerAlertDialog.show(
              context: context,
              type: 'success',
              message: 'Operation completed successfully!',
            );
          },
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'Show Warning Alert',
          buttonColor: TatweerColors.warning,
          onPressed: () {
            TatweerAlertDialog.show(
              context: context,
              type: 'warning',
              message: 'Please review your input before proceeding.',
            );
          },
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'Show Error Alert',
          buttonColor: TatweerColors.error,
          onPressed: () {
            TatweerAlertDialog.show(
              context: context,
              type: 'error',
              message: 'An error occurred. Please try again.',
            );
          },
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'Show Confirmation Dialog',
          buttonColor: TatweerColors.primary,
          onPressed: () {
            TatweerConfirmationDialog.show(
              context: context,
              title: 'Confirm Action',
              message: 'Are you sure you want to proceed? This action cannot be undone.',
            ).then((confirmed) {
              if (confirmed == true) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Action confirmed!')),
                );
              }
            });
          },
        ),
        const SizedBox(height: 8),
        TatweerPrimaryButton(
          text: 'Show Custom Dialog',
          onPressed: () {
            TatweerBaseDialog.show(
              context: context,
              title: 'Custom Dialog',
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(Icons.info_outline, size: 48, color: TatweerColors.primary),
                  const SizedBox(height: 16),
                  const Text('This is a custom dialog with custom content.'),
                ],
              ),
              actions: [
                TatweerSecondaryButton(
                  text: 'Cancel',
                  onPressed: () => Navigator.of(context).pop(),
                ),
                const SizedBox(width: 12),
                TatweerPrimaryButton(
                  text: 'OK',
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ],
            );
          },
        ),
      ],
    );
  }
}