tatweerui 0.0.13 
tatweerui: ^0.0.13 copied to clipboard
mohammedalojile.comA comprehensive Flutter UI component library with custom buttons, dialogs, switches, text fields, cards, badges, and more. Designed for Tatweer Research applications.
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(),
),
],
);
},
),
],
);
}
}Metadata
4
likes
145
points
205
downloads
Publisher
Weekly Downloads
Metadata
A comprehensive Flutter UI component library with custom buttons, dialogs, switches, text fields, cards, badges, and more. Designed for Tatweer Research applications.
Homepage
Repository (GitHub)
View/report issues
Documentation
License
MIT (license)
