Skip to content

Commit

Permalink
Improved Sortable animation and tab pane animation
Browse files Browse the repository at this point in the history
  • Loading branch information
@sunarya-thito
sunarya-thito committed Dec 21, 2024
1 parent 7a8a20b commit 60172f5
Show file tree
Hide file tree
Showing 7 changed files with 498 additions and 272 deletions.
124 changes: 39 additions & 85 deletions docs/lib/pages/docs/components/sortable/sortable_example_1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,27 @@ class SortableExample1 extends StatefulWidget {
State<SortableExample1> createState() => _SortableExample1State();
}

class _IndexData {
final int index;
final List<String> names;

_IndexData(this.index, this.names);
}

class _SortableExample1State extends State<SortableExample1> {
List<String> names = [
'James',
'John',
'Robert',
'Michael',
'William',
List<SortableData<String>> invited = [
const SortableData('James'),
const SortableData('John'),
const SortableData('Robert'),
const SortableData('Michael'),
const SortableData('William'),
];
List<String> names2 = [
'David',
'Richard',
'Joseph',
'Thomas',
'Charles',
List<SortableData<String>> reserved = [
const SortableData('David'),
const SortableData('Richard'),
const SortableData('Joseph'),
const SortableData('Thomas'),
const SortableData('Charles'),
];

@override
void initState() {
super.initState();
}

@override
Widget build(BuildContext context) {
return SizedBox(
Expand All @@ -40,56 +38,34 @@ class _SortableExample1State extends State<SortableExample1> {
children: [
Expanded(
child: Card(
child: SortableDropFallback<_IndexData>(
child: SortableDropFallback<String>(
onAccept: (value) {
setState(() {
names.add(value.data.names.removeAt(value.data.index));
swapItemInLists(
[invited, reserved], value, invited, invited.length);
});
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
for (int i = 0; i < names.length; i++)
Sortable<_IndexData>(
key: ValueKey(i),
data: _IndexData(i, names),
for (int i = 0; i < invited.length; i++)
Sortable<String>(
data: invited[i],
onAcceptTop: (value) {
setState(() {
bool isBefore = i < value.data.index ||
value.data.names != names;
if (isBefore) {
names.insert(
i,
value.data.names
.removeAt(value.data.index));
} else {
names.insert(
i - 1,
value.data.names
.removeAt(value.data.index));
}
swapItemInLists(
[invited, reserved], value, invited, i);
});
},
onAcceptBottom: (value) {
setState(() {
bool isBefore = i > value.data.index &&
value.data.names == names;
if (isBefore) {
names.insert(
i,
value.data.names
.removeAt(value.data.index));
} else {
names.insert(
i + 1,
value.data.names
.removeAt(value.data.index));
}
swapItemInLists(
[invited, reserved], value, invited, i + 1);
});
},
child: OutlinedContainer(
padding: const EdgeInsets.all(12),
child: Center(child: Text(names[i])),
child: Center(child: Text(invited[i].data)),
),
),
],
Expand All @@ -100,56 +76,34 @@ class _SortableExample1State extends State<SortableExample1> {
gap(12),
Expanded(
child: Card(
child: SortableDropFallback<_IndexData>(
child: SortableDropFallback<String>(
onAccept: (value) {
setState(() {
names2.add(value.data.names.removeAt(value.data.index));
swapItemInLists([invited, reserved], value, reserved,
reserved.length);
});
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
for (int i = 0; i < names2.length; i++)
Sortable<_IndexData>(
key: ValueKey(i),
data: _IndexData(i, names2),
for (int i = 0; i < reserved.length; i++)
Sortable<String>(
data: reserved[i],
onAcceptTop: (value) {
setState(() {
bool isBefore = i < value.data.index ||
value.data.names != names2;
if (isBefore) {
names2.insert(
i,
value.data.names
.removeAt(value.data.index));
} else {
names2.insert(
i - 1,
value.data.names
.removeAt(value.data.index));
}
swapItemInLists(
[invited, reserved], value, reserved, i);
});
},
onAcceptBottom: (value) {
setState(() {
bool isBefore = i > value.data.index &&
value.data.names == names2;
if (isBefore) {
names2.insert(
i,
value.data.names
.removeAt(value.data.index));
} else {
names2.insert(
i + 1,
value.data.names
.removeAt(value.data.index));
}
swapItemInLists(
[invited, reserved], value, reserved, i + 1);
});
},
child: OutlinedContainer(
padding: const EdgeInsets.all(12),
child: Center(child: Text(names2[i])),
child: Center(child: Text(reserved[i].data)),
),
),
],
Expand Down
32 changes: 11 additions & 21 deletions docs/lib/pages/docs/components/sortable/sortable_example_2.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ class SortableExample2 extends StatefulWidget {
}

class _SortableExample2State extends State<SortableExample2> {
List<String> names = [
'James',
'John',
'Robert',
'Michael',
'William',
List<SortableData<String>> names = [
const SortableData('James'),
const SortableData('John'),
const SortableData('Robert'),
const SortableData('Michael'),
const SortableData('William'),
];

@override
Expand All @@ -30,32 +30,22 @@ class _SortableExample2State extends State<SortableExample2> {
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
for (int i = 0; i < names.length; i++)
Sortable<int>(
Sortable<String>(
key: ValueKey(i),
data: i,
data: names[i],
onAcceptTop: (value) {
setState(() {
bool isBefore = i < value.data;
if (isBefore) {
names.insert(i, names.removeAt(value.data));
} else {
names.insert(i - 1, names.removeAt(value.data));
}
names.swapItem(value, i);
});
},
onAcceptBottom: (value) {
setState(() {
bool isBefore = i > value.data;
if (isBefore) {
names.insert(i, names.removeAt(value.data));
} else {
names.insert(i + 1, names.removeAt(value.data));
}
names.swapItem(value, i + 1);
});
},
child: OutlinedContainer(
padding: const EdgeInsets.all(12),
child: Center(child: Text(names[i])),
child: Center(child: Text(names[i].data)),
),
),
],
Expand Down
32 changes: 11 additions & 21 deletions docs/lib/pages/docs/components/sortable/sortable_example_3.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ class SortableExample3 extends StatefulWidget {
}

class _SortableExample3State extends State<SortableExample3> {
List<String> names = [
'James',
'John',
'Robert',
'Michael',
'William',
List<SortableData<String>> names = [
const SortableData('James'),
const SortableData('John'),
const SortableData('Robert'),
const SortableData('Michael'),
const SortableData('William'),
];

@override
Expand All @@ -33,33 +33,23 @@ class _SortableExample3State extends State<SortableExample3> {
mainAxisSize: MainAxisSize.min,
children: [
for (int i = 0; i < names.length; i++)
Sortable<int>(
Sortable<String>(
key: ValueKey(i),
data: i,
data: names[i],
onAcceptLeft: (value) {
setState(() {
bool isBefore = i < value.data;
if (isBefore) {
names.insert(i, names.removeAt(value.data));
} else {
names.insert(i - 1, names.removeAt(value.data));
}
names.swapItem(value, i);
});
},
onAcceptRight: (value) {
setState(() {
bool isBefore = i > value.data;
if (isBefore) {
names.insert(i, names.removeAt(value.data));
} else {
names.insert(i + 1, names.removeAt(value.data));
}
names.swapItem(value, i + 1);
});
},
child: OutlinedContainer(
width: 100,
padding: const EdgeInsets.all(12),
child: Center(child: Text(names[i])),
child: Center(child: Text(names[i].data)),
),
),
],
Expand Down
Loading

0 comments on commit 60172f5

Please sign in to comment.