Skip to content

Commit

Permalink
main: Contact List (#40)
Browse files Browse the repository at this point in the history
* feat(main): Contact List

* [automated commit] lint format and import sort

---------

Co-authored-by: github-actions <[email protected]>
  • Loading branch information
2 people authored and thelukewalton committed May 2, 2024
1 parent 3f51508 commit 84b727c
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 0 deletions.
2 changes: 2 additions & 0 deletions example/lib/home.dart
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import 'package:zeta_example/pages/components/breadcrumbs_example.dart';
import 'package:zeta_example/pages/components/button_example.dart';
import 'package:zeta_example/pages/components/checkbox_example.dart';
import 'package:zeta_example/pages/components/chip_example.dart';
import 'package:zeta_example/pages/components/contact_item_example.dart';
import 'package:zeta_example/pages/components/date_input_example.dart';
import 'package:zeta_example/pages/components/dialog_example.dart';
import 'package:zeta_example/pages/components/dialpad_example.dart';
Expand Down Expand Up @@ -58,6 +59,7 @@ final List<Component> components = [
Component(ButtonExample.name, (context) => const ButtonExample()),
Component(CheckBoxExample.name, (context) => const CheckBoxExample()),
Component(ChipExample.name, (context) => const ChipExample()),
Component(ContactItemExample.name, (context) => const ContactItemExample()),
Component(ListItemExample.name, (context) => const ListItemExample()),
Component(NavigationBarExample.name, (context) => const NavigationBarExample()),
Component(PaginationExample.name, (context) => const PaginationExample()),
Expand Down
27 changes: 27 additions & 0 deletions example/lib/pages/components/contact_item_example.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class ContactItemExample extends StatefulWidget {
static const String name = 'ContactItem';

const ContactItemExample({super.key});

@override
State<ContactItemExample> createState() => _ContactItemExampleState();
}

class _ContactItemExampleState extends State<ContactItemExample> {
@override
Widget build(BuildContext context) {
return ExampleScaffold(
name: ContactItemExample.name,
child: ZetaContactItem(
onTap: () {},
leading: ZetaAvatar(size: ZetaAvatarSize.s),
title: Text("Contact / Group Name"),
subtitle: Text("Store Associate - Bakery Dept."),
),
);
}
}
2 changes: 2 additions & 0 deletions example/widgetbook/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import 'pages/components/breadcrumbs_widgetbook.dart';
import 'pages/components/button_widgetbook.dart';
import 'pages/components/checkbox_widgetbook.dart';
import 'pages/components/chip_widgetbook.dart';
import 'pages/components/contact_item_widgetbook.dart';
import 'pages/components/date_input_widgetbook.dart';
import 'pages/components/dial_pad_widgetbook.dart';
import 'pages/components/dialog_widgetbook.dart';
Expand Down Expand Up @@ -83,6 +84,7 @@ class HotReload extends StatelessWidget {
),
WidgetbookUseCase(name: 'Avatar', builder: (context) => avatarUseCase(context)),
WidgetbookUseCase(name: 'Checkbox', builder: (context) => checkboxUseCase(context)),
WidgetbookUseCase(name: 'Contact Item', builder: (context) => contactItemUseCase(context)),
WidgetbookComponent(
name: 'Buttons',
useCases: [
Expand Down
21 changes: 21 additions & 0 deletions example/widgetbook/pages/components/contact_item_widgetbook.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import 'package:flutter/material.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

import '../../test/test_components.dart';

Widget contactItemUseCase(BuildContext context) {
final title = context.knobs.string(label: 'Title', initialValue: "Contact / Group Name");
final subtitle = context.knobs.string(label: 'Subtitle', initialValue: "Store Associate - Bakery Dept.");
final enabledDivider = context.knobs.boolean(label: 'Enabled Divider', initialValue: true);

return WidgetbookTestWidget(
widget: ZetaContactItem(
onTap: () {},
leading: ZetaAvatar(size: ZetaAvatarSize.s),
title: Text(title),
subtitle: Text(subtitle),
enabledDivider: enabledDivider,
),
);
}
100 changes: 100 additions & 0 deletions lib/src/components/contact_item/contact_item.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import '../../../zeta_flutter.dart';

/// A single row that contains avatar, title and subtitle.
class ZetaContactItem extends StatelessWidget {
/// Constructs [ZetaContactItem].
const ZetaContactItem({
required this.title,
required this.leading,
required this.subtitle,
this.enabledDivider = true,
this.onTap,
super.key,
});

/// The main text to be displayed on the top.
final Widget title;

/// Normally an Avatar
final Widget leading;

/// Text to be displayed under [title].
final Widget subtitle;

/// Callback to be called onTap.
final VoidCallback? onTap;

/// Whether to display a divider at the bottom.
final bool enabledDivider;

@override
Widget build(BuildContext context) {
final colors = Zeta.of(context).colors;

return DecoratedBox(
decoration: BoxDecoration(
color: colors.surfacePrimary,
border: enabledDivider
? Border(
bottom: BorderSide(color: colors.borderDisabled),
)
: null,
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
child: Padding(
padding: const EdgeInsets.only(
top: ZetaSpacing.xs,
bottom: ZetaSpacing.xs,
left: ZetaSpacing.m,
),
child: Row(
children: [
leading,
Flexible(
child: Padding(
padding: const EdgeInsets.only(left: ZetaSpacing.s),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
DefaultTextStyle(
style: ZetaTextStyles.bodyMedium.copyWith(
color: colors.textDefault,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
child: title,
),
DefaultTextStyle(
style: ZetaTextStyles.bodySmall.copyWith(
color: colors.textSubtle,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
child: subtitle,
),
],
),
),
),
],
),
),
),
),
);
}

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(ObjectFlagProperty<VoidCallback?>.has('onTap', onTap))
..add(DiagnosticsProperty<bool>('enabledDivider', enabledDivider));
}
}
1 change: 1 addition & 0 deletions lib/zeta_flutter.dart
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export 'src/components/buttons/fab.dart';
export 'src/components/buttons/icon_button.dart';
export 'src/components/checkbox/checkbox.dart';
export 'src/components/chips/chip.dart';
export 'src/components/contact_item/contact_item.dart';
export 'src/components/date_input/date_input.dart';
export 'src/components/dial_pad/dial_pad.dart';
export 'src/components/dialog/dialog.dart';
Expand Down

0 comments on commit 84b727c

Please sign in to comment.