Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: chip #96

Merged
merged 3 commits into from
Jun 12, 2024
Merged

refactor: chip #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
effaa0c
refactor: chip
thelukewalton Jun 11, 2024
526201f
[automated commit] lint format and import sort
invalid-email-address Jun 11, 2024
faaddd0
fixed filter chip colors, border and alignment
thelukewalton Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 107 additions & 169 deletions example/lib/pages/components/chip_example.dart
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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