Skip to content

Commit dfab4d0

Browse files
cp-sneha-scp-sneha-s
authored
Improve example app (#103)
* Improve example app * Update README.md * Update README.md * Update README.md * Update README.md * Improve example app
1 parent 3b3f5bd commit dfab4d0

File tree

5 files changed

+56
-49
lines changed

5 files changed

+56
-49
lines changed

‎README.md

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ drag-and-drop functionality in Flutter.
1919

2020
### Reorderable List
2121

22-
| ![Image 1](https://github.com/user-attachments/assets/c4628033-a40c-4e27-be21-204d0d33c54f?raw=true) | ![Image 2](https://github.com/user-attachments/assets/beca0910-5729-45c8-849b-d413b540c924?raw=true) | ![Image 3](https://github.com/user-attachments/assets/ba74961c-38bd-4dcb-8357-fb4584294c3c?raw=true) |
22+
| ![Image 1](https://github.com/user-attachments/assets/f68812ad-5106-4154-9e9a-7a09e7d23015?raw=true) | ![Image 2](https://github.com/user-attachments/assets/e954b616-1820-4004-9c0e-23b002a6b36f?raw=true) | ![Image 3](https://github.com/user-attachments/assets/9b5c695b-7874-4ea3-86b0-1b00b2bf8d65?raw=true) |
2323
| :---: | :---: | :---: |
2424
| ReorderableGridView | ReorderableListView | Swap Animation |
2525

@@ -251,23 +251,24 @@ If a custom `insertItemBuilder` is provided, it will override the `enterTransiti
251251
The library provides a set of pre-built animations that can be used for item insertion and removal.
252252
You can use multiple animations at the same time by providing a list of animations.
253253

254-
255254
The following animations are available:
256255

257256
| Animation Type | ListView Example | GridView Example |
258257
|------------------|-------------------------------|-------------------------------|
259-
| **FadeIn** | <img src="https://github.com/user-attachments/assets/c1e0737e-ed06-4978-826d-8d6891a954eb?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/90dd1449-9771-436a-be04-83d10a9929f3?raw=true" width="250"/> |
260-
| **FlipInY** | <img src="https://github.com/user-attachments/assets/7d9e1398-c1ae-4fc0-8767-e7d86d0cdbe1?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/54c302f0-4d88-4152-8628-33f6baf077a0?raw=true" width="250"/> |
261-
| **FlipInX** | <img src="https://github.com/user-attachments/assets/5cdb949b-80c9-4d9b-808e-cd07a928321f?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/a638a7ca-1d5c-403e-b78b-c370a260a5d4?raw=true" width="250"/> |
262-
| **Landing** | <img src="https://github.com/user-attachments/assets/4d856723-d204-4571-bbd4-54edc4037141?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/46ebffb7-a983-4930-995c-4ea735f25810?raw=true" width="250"/> |
263-
| **ScaleIn** | <img src="https://github.com/user-attachments/assets/3b6977bf-e0f9-4162-a44d-073869c8a225?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/9945da15-10eb-4eb8-8d0b-894635702808?raw=true" width="250"/> |
264-
| **ScaleInTop** | <img src="https://github.com/user-attachments/assets/f7b5d6f9-8baa-4425-a9b1-dae3ce12d378?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/83a81b69-204f-4eff-9e52-6559065097f7?raw=true" width="250"/> |
265-
| **ScaleInBottom**| <img src="https://github.com/user-attachments/assets/5cb5cc5b-df22-44c3-9368-3520b94cdc6a?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/7a0a33e1-2f9f-42bf-ab30-bf925df56651?raw=true" width="250"/> |
266-
| **ScaleInLeft** | <img src="https://github.com/user-attachments/assets/a5c3dac6-9889-4658-996a-5694c79fcb5d?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/b2c8ac50-98ed-46d3-932b-c312dd81c5d1?raw=true" width="250"/> |
267-
| **ScaleInRight** | <img src="https://github.com/user-attachments/assets/c245eaa0-3b92-437f-b7d6-73e6c7539d6b?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/a46c2cd0-039d-440e-89a2-94f0496928c9?raw=true" width="250"/> |
268-
| **Size** | <img src="https://github.com/user-attachments/assets/a3aa9cf2-136d-4a66-abb9-25742528111e?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/63b2f1ff-08a0-4b54-8a9d-d5136af41ce9?raw=true" width="250"/> |
269-
| **SlideInDown** | <img src="https://github.com/user-attachments/assets/57c4e863-5d3e-47fd-b786-ec760a2f0c52?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/0a8611b2-1b68-4a37-9e50-fe81ac1ff22c?raw=true" width="250"/> |
270-
| **SlideInUp** | <img src="https://github.com/user-attachments/assets/7a11b8e5-7bff-462b-8fa2-816967fe5887?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/4d38d646-a485-4871-8373-20ea987f4214?raw=true" width="250"/> |
258+
| **FadeIn** | <img src="https://github.com/user-attachments/assets/ee8e2655-db72-472b-81b1-b9d1f6535518?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/38376923-8aa6-4803-a09c-a301db98c939?raw=true" width="250"/> |
259+
| **FlipInY** | <img src="https://github.com/user-attachments/assets/e7ed69dc-c038-4c14-ad82-59dec5075b10?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/cb8c0be3-9178-41e4-991b-4d652bde7ed1?raw=true" width="250"/> |
260+
| **FlipInX** | <img src="https://github.com/user-attachments/assets/08a7753f-95f7-48c8-881f-3e746798b3ca?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/f67f2463-459e-4e97-ac3f-4cb410eacf00?raw=true" width="250"/> |
261+
| **Landing** | <img src="https://github.com/user-attachments/assets/1c8ab183-1bce-4cf9-9a3d-7b4132083583?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/363f34d1-45b5-4260-a2ce-ec927b67ec02?raw=true" width="250"/> |
262+
| **ScaleIn** | <img src="https://github.com/user-attachments/assets/a3bdbeb9-7b6e-4ee7-a822-274df2f84954?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/69c06e86-e43a-4e71-ad2e-78f4c370c0de?raw=true" width="250"/> |
263+
| **ScaleInTop** | <img src="https://github.com/user-attachments/assets/2548ebdb-b873-44b7-b01a-fe1910fc5386?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/b1d63684-f934-4971-97b9-f0bce6358860?raw=true" width="250"/> |
264+
| **ScaleInBottom**| <img src="https://github.com/user-attachments/assets/f175da62-6a3b-4f8b-947f-a8ee9c6b656f?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/52f824ee-e437-464f-a462-3474a63e4306?raw=true" width="250"/> |
265+
| **ScaleInLeft** | <img src="https://github.com/user-attachments/assets/010917bb-4e04-4455-951e-f9460f9c64a3?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/844e785a-c364-462e-9e9b-37d523bdda08?raw=true" width="250"/> |
266+
| **ScaleInRight** | <img src="https://github.com/user-attachments/assets/728c3886-f2eb-4a08-b87e-9ba68867e527?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/cbbe1462-a24b-4a75-96ba-56c028b53818?raw=true" width="250"/> |
267+
| **Size** | <img src="https://github.com/user-attachments/assets/8bdb4cf7-c824-4a61-8cd2-a6902b64013e?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/9729cf06-d63d-4208-b964-30042520c8d7?raw=true" width="250"/> |
268+
| **SlideInLeft** | <img src="https://github.com/user-attachments/assets/6f8d943f-bc39-4e79-a387-976b10220a52?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/1496315f-907d-465b-b537-4fa76ff7d4ea?raw=true" width="250"/> |
269+
| **SlideInRight** | <img src="https://github.com/user-attachments/assets/6197c7b4-9060-4da4-a367-1a4570176916?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/353b2074-707d-4f76-a499-14caac021941?raw=true" width="250"/> |
270+
| **SlideInDown** | <img src="https://github.com/user-attachments/assets/64c4c6cc-fbd6-4955-b5d8-4726e1e9b271?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/b6f8bb96-f395-4378-90bf-c8b0d5a17808?raw=true" width="250"/> |
271+
| **SlideInUp** | <img src="https://github.com/user-attachments/assets/d8da449a-9d65-48c8-b9d5-b27f193b79c3?raw=true" width="250"/> | <img src="https://github.com/user-attachments/assets/ee7640c3-b1ea-443c-ba1a-b0a65f5b13af?raw=true" width="250"/> |
271272

272273

273274

‎example/lib/main.dart

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@ class _HomePageState extends State<HomePage> {
160160
dragEnabled: !nonDraggableItems.contains(user),
161161
);
162162
},
163-
enterTransition: [SlideInDown()],
163+
enterTransition: animations,
164164
exitTransition: animations,
165165
insertDuration: const Duration(milliseconds: 300),
166166
removeDuration: const Duration(milliseconds: 300),
@@ -215,37 +215,39 @@ class _HomePageState extends State<HomePage> {
215215
color: containerLowColor,
216216
borderRadius: BorderRadius.circular(10),
217217
),
218-
child: DropdownButtonHideUnderline(
219-
child: DropdownButton<AnimationType>(
220-
dropdownColor: containerLowColor,
221-
borderRadius: BorderRadius.circular(10),
222-
alignment: Alignment.center,
223-
iconEnabledColor: primaryColor,
224-
value: appliedStyle,
225-
items: AnimationType.values.map((AnimationType animationType) {
226-
return DropdownMenuItem<AnimationType>(
227-
value: animationType,
228-
child: Text(
229-
animationType.name.capitalize(),
230-
style: const TextStyle(
231-
fontSize: 20,
232-
color: primaryColor,
233-
fontWeight: FontWeight.w500),
234-
),
235-
);
236-
}).toList(),
237-
onChanged: (AnimationType? animationType) {
238-
if (animationType == null) {
239-
return;
240-
}
241-
animations = [];
242-
AnimationEffect animation =
243-
AnimationProvider.buildAnimation(animationType);
244-
animations.add(animation);
245-
setState(() {
246-
appliedStyle = animationType;
247-
});
248-
}),
218+
child: Center(
219+
child: DropdownButtonHideUnderline(
220+
child: DropdownButton<AnimationType>(
221+
dropdownColor: containerLowColor,
222+
borderRadius: BorderRadius.circular(10),
223+
alignment: Alignment.center,
224+
iconEnabledColor: primaryColor,
225+
value: appliedStyle,
226+
items: AnimationType.values.map((AnimationType animationType) {
227+
return DropdownMenuItem<AnimationType>(
228+
value: animationType,
229+
child: Text(
230+
animationType.name.capitalize(),
231+
style: const TextStyle(
232+
fontSize: 20,
233+
color: primaryColor,
234+
fontWeight: FontWeight.w500),
235+
),
236+
);
237+
}).toList(),
238+
onChanged: (AnimationType? animationType) {
239+
if (animationType == null) {
240+
return;
241+
}
242+
animations = [];
243+
AnimationEffect animation =
244+
AnimationProvider.buildAnimation(animationType);
245+
animations.add(animation);
246+
setState(() {
247+
appliedStyle = animationType;
248+
});
249+
}),
250+
),
249251
));
250252
}
251253

‎example/lib/theme/colors.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import 'dart:ui';
33
import 'package:flutter/material.dart';
44

55
const primaryColor = Color(0xFFEBB369);
6-
const surfaceColor = Color(0xFF202225);
6+
const surfaceColor = Color(0xFF121212);
77

88
const textSecondaryLightColor = Color(0x99000000);
99

‎example/lib/utils/item_card.dart

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ class ItemCard extends StatelessWidget {
1313
height: 150.0,
1414
width: 150,
1515
child: Card(
16-
color: !dragEnabled ? containerLowColor : primaryColor,
16+
color: !dragEnabled
17+
? containerLowColor
18+
: Colors.primaries[id % Colors.primaries.length],
1719
child: Center(
1820
child: dragEnabled
1921
? Text((id).toString(),

‎example/lib/utils/item_tile.dart

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ class ItemTile extends StatelessWidget {
1919
margin: const EdgeInsets.symmetric(vertical: 4),
2020
decoration: BoxDecoration(
2121
borderRadius: BorderRadius.circular(10),
22-
color: !dragEnabled ? containerLowColor : primaryColor,
22+
color: !dragEnabled
23+
? containerLowColor
24+
: Colors.primaries[id % Colors.primaries.length],
2325
),
2426
child: Center(
2527
child: dragEnabled

0 commit comments

Comments
 (0)