Skip to content

Commit

Permalink
Improve example app (#103)
Browse files Browse the repository at this point in the history 
* Improve example app

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Improve example app
  • Loading branch information
@cp-sneha-s
cp-sneha-s authored Dec 31, 2024
1 parent 3b3f5bd commit dfab4d0
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 49 deletions.
29 changes: 15 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ drag-and-drop functionality in Flutter.

### Reorderable List

| ![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) |
| ![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) |
| :---: | :---: | :---: |
| ReorderableGridView | ReorderableListView | Swap Animation |

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


The following animations are available:

| Animation Type | ListView Example | GridView Example |
|------------------|-------------------------------|-------------------------------|
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |
| **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"/> |



Expand Down
66 changes: 34 additions & 32 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ class _HomePageState extends State<HomePage> {
dragEnabled: !nonDraggableItems.contains(user),
);
},
enterTransition: [SlideInDown()],
enterTransition: animations,
exitTransition: animations,
insertDuration: const Duration(milliseconds: 300),
removeDuration: const Duration(milliseconds: 300),
Expand Down Expand Up @@ -215,37 +215,39 @@ class _HomePageState extends State<HomePage> {
color: containerLowColor,
borderRadius: BorderRadius.circular(10),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<AnimationType>(
dropdownColor: containerLowColor,
borderRadius: BorderRadius.circular(10),
alignment: Alignment.center,
iconEnabledColor: primaryColor,
value: appliedStyle,
items: AnimationType.values.map((AnimationType animationType) {
return DropdownMenuItem<AnimationType>(
value: animationType,
child: Text(
animationType.name.capitalize(),
style: const TextStyle(
fontSize: 20,
color: primaryColor,
fontWeight: FontWeight.w500),
),
);
}).toList(),
onChanged: (AnimationType? animationType) {
if (animationType == null) {
return;
}
animations = [];
AnimationEffect animation =
AnimationProvider.buildAnimation(animationType);
animations.add(animation);
setState(() {
appliedStyle = animationType;
});
}),
child: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton<AnimationType>(
dropdownColor: containerLowColor,
borderRadius: BorderRadius.circular(10),
alignment: Alignment.center,
iconEnabledColor: primaryColor,
value: appliedStyle,
items: AnimationType.values.map((AnimationType animationType) {
return DropdownMenuItem<AnimationType>(
value: animationType,
child: Text(
animationType.name.capitalize(),
style: const TextStyle(
fontSize: 20,
color: primaryColor,
fontWeight: FontWeight.w500),
),
);
}).toList(),
onChanged: (AnimationType? animationType) {
if (animationType == null) {
return;
}
animations = [];
AnimationEffect animation =
AnimationProvider.buildAnimation(animationType);
animations.add(animation);
setState(() {
appliedStyle = animationType;
});
}),
),
));
}

Expand Down
2 changes: 1 addition & 1 deletion example/lib/theme/colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import 'dart:ui';
import 'package:flutter/material.dart';

const primaryColor = Color(0xFFEBB369);
const surfaceColor = Color(0xFF202225);
const surfaceColor = Color(0xFF121212);

const textSecondaryLightColor = Color(0x99000000);

Expand Down
4 changes: 3 additions & 1 deletion example/lib/utils/item_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ class ItemCard extends StatelessWidget {
height: 150.0,
width: 150,
child: Card(
color: !dragEnabled ? containerLowColor : primaryColor,
color: !dragEnabled
? containerLowColor
: Colors.primaries[id % Colors.primaries.length],
child: Center(
child: dragEnabled
? Text((id).toString(),
Expand Down
4 changes: 3 additions & 1 deletion example/lib/utils/item_tile.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ class ItemTile extends StatelessWidget {
margin: const EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: !dragEnabled ? containerLowColor : primaryColor,
color: !dragEnabled
? containerLowColor
: Colors.primaries[id % Colors.primaries.length],
),
child: Center(
child: dragEnabled
Expand Down

0 comments on commit dfab4d0

Please sign in to comment.