Skip to content

Commit

Permalink
refactor: chip (#96)
Browse files Browse the repository at this point in the history
  • Loading branch information
@thelukewalton
thelukewalton authored Jun 12, 2024
1 parent a8b31d3 commit ccb3fe9
Show file tree
Hide file tree
Showing 7 changed files with 299 additions and 292 deletions.
276 changes: 107 additions & 169 deletions example/lib/pages/components/chip_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,225 +2,163 @@ import 'package:flutter/material.dart';
import 'package:zeta_example/widgets.dart';
import 'package:zeta_flutter/zeta_flutter.dart';

class ChipExample extends StatelessWidget {
class ChipExample extends StatefulWidget {
static const String name = 'Chip';

const ChipExample({super.key});

@override
State<ChipExample> createState() => _ChipExampleState();
}

class _ChipExampleState extends State<ChipExample> {
String chipType = 'none';
@override
Widget build(BuildContext context) {
final List<Widget> inputChipExample = [
final Widget inputChipExample = Column(children: [
Text(
'Input Chip',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Text(
'Rounded',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 30),
Text('Label Only', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaInputChip(label: 'Label'),
const SizedBox(height: 30),
Text('Label + Icon', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaInputChip(
label: 'Label',
),
const SizedBox(height: 30),
Text('Label + Avatar', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaInputChip(
label: 'Label',
leading: const Icon(ZetaIcons.user_round),
),
const SizedBox(height: 30),
Text('Label, Avatar + Icon', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaInputChip(
label: 'Label',
leading: const Icon(ZetaIcons.user_round),
trailing: Icon(ZetaIcons.close_round),
),
],
Expanded(
child: Column(
children: [
ZetaInputChip(
label: 'Label',
leading: ZetaAvatar.initials(initials: "ZA"),
trailing: IconButton(icon: Icon(ZetaIcons.close_round), onPressed: () {}),
),
],
),
),
Column(
children: [
Text(
'Sharp',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 30),
Text('Label Only', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaInputChip(
label: 'Label',
rounded: false,
),
const SizedBox(height: 30),
Text('Label + Icon', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaInputChip(
label: 'Label',
rounded: false,
),
const SizedBox(height: 30),
Text('Label + Avatar', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaInputChip(
label: 'Label',
rounded: false,
leading: const Icon(ZetaIcons.user_round),
),
const SizedBox(height: 30),
Text('Label, Avatar + Icon', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaInputChip(
label: 'Label',
rounded: false,
leading: const Icon(ZetaIcons.user_round),
trailing: Icon(ZetaIcons.close_sharp),
),
],
Expanded(
child: Column(
children: [
ZetaInputChip(
label: 'Label',
rounded: false,
leading: const Icon(ZetaIcons.user_round),
trailing: Icon(ZetaIcons.close_sharp),
),
],
),
),
],
),
];
]);

final List<Widget> filterChipExample = [
final Widget assistChipExample = Column(children: [
Text(
'Filter Chip',
'Assist Chip',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Text(
'Rounded',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
ZetaFilterChip(label: 'Label'),
const SizedBox(height: 10),
ZetaFilterChip(
label: 'Label',
selected: true,
),
],
Expanded(
child: Column(
children: [
ZetaAssistChip(
label: 'Label',
leading: Icon(ZetaIcons.star_round),
draggable: true,
data: 'Round Assist chip',
),
],
),
),
Column(
children: [
Text(
'Sharp',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
ZetaFilterChip(
label: 'Label',
rounded: false,
),
const SizedBox(height: 10),
ZetaFilterChip(
label: 'Label',
rounded: false,
selected: true,
),
],
Expanded(
child: Column(
children: [
ZetaAssistChip(
label: 'Label',
rounded: false,
leading: Icon(ZetaIcons.star_round),
data: 'Sharp Assist chip',
draggable: true,
),
],
),
),
],
),
];
]);

final List<Widget> assistChipExample = [
final Widget filterChipExample = Column(children: [
Text(
'Assist Chip',
'Filter Chip',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
Text(
'Rounded',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 30),
Text('Label Only', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaAssistChip(label: 'Label'),
const SizedBox(height: 30),
Text('Label + Icon', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaAssistChip(
label: 'Label',
leading: Icon(ZetaIcons.star_round),
),
],
Expanded(
child: Column(
children: [
ZetaFilterChip(
label: 'Label',
selected: true,
data: 'Round filter chip',
draggable: true,
),
],
),
),
Column(
children: [
Text(
'Sharp',
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.bold),
),
const SizedBox(height: 30),
Text('Label Only', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaAssistChip(
label: 'Label',
rounded: false,
),
const SizedBox(height: 30),
Text('Label + Icon', textAlign: TextAlign.center),
const SizedBox(height: 10),
ZetaAssistChip(
label: 'Label',
rounded: false,
leading: Icon(ZetaIcons.star_round),
),
],
Expanded(
child: Column(
children: [
ZetaFilterChip(
label: 'Label',
rounded: false,
selected: true,
data: 'Sharp filter chip',
draggable: true,
),
],
),
),
],
),
];

]);
final colors = Zeta.of(context).colors;
return ExampleScaffold(
name: ChipExample.name,
child: SingleChildScrollView(
padding: EdgeInsets.all(ZetaSpacing.medium),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
...inputChipExample,
const SizedBox(height: 30),
...assistChipExample,
const SizedBox(height: 30),
...filterChipExample,
const SizedBox(height: 30),
],
Row(
children: [
Expanded(child: Center(child: Text('Rounded'))),
Expanded(child: Center(child: Text('Sharp'))),
],
),
inputChipExample,
assistChipExample,
filterChipExample,
const SizedBox(height: 100),
DragTarget<String>(
onAcceptWithDetails: (details) => setState(() => chipType = details.data),
builder: (context, _, __) {
return Container(
padding: EdgeInsets.all(ZetaSpacing.medium),
color: colors.surfaceSelectedHover,
height: 100,
width: 200,
child: Center(child: Text('Last chip dragged here: $chipType')),
);
},
)
].gap(30),
),
),
);
Expand Down
2 changes: 1 addition & 1 deletion example/macos/Podfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ EXTERNAL SOURCES:

SPEC CHECKSUMS:
FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24
path_provider_foundation: 3784922295ac71e43754bd15e0653ccfd36a147c
path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
sqflite: 673a0e54cc04b7d6dba8d24fb8095b31c3a99eec
url_launcher_macos: 5f437abeda8c85500ceb03f5c1938a8c5a705399
Expand Down
14 changes: 12 additions & 2 deletions lib/src/components/chips/assist_chip.dart
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
import 'chip.dart';
import 'package:flutter/material.dart';

import '../../../zeta_flutter.dart';

/// Zeta Assist Chip.
///
/// Leading widget should typically be an icon.
///
/// These chips use [Draggable] and can be dragged around the screen and placed in new locations using [DragTarget].
///
/// Extends [ZetaChip].
class ZetaAssistChip extends ZetaChip {
/// Creates a [ZetaAssistChip].
Expand All @@ -10,5 +16,9 @@ class ZetaAssistChip extends ZetaChip {
required super.label,
super.leading,
super.rounded,
}) : super(type: ZetaChipType.assist);
super.draggable = false,
super.data,
super.onDragCompleted,
super.onTap,
});
}
Loading

0 comments on commit ccb3fe9

Please sign in to comment.