Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/prosmaw/flutter_custom_widgets

Flutter Custom Widgets is a collection of custom widgets inspired by innovative designs and components I’ve discovered on various platforms. Follow me and star ⭐ the repo if you like what you're seeing.
https://github.com/prosmaw/flutter_custom_widgets

flutter flutter-ui flutter-widget

Last synced: 11 days ago
JSON representation

Flutter Custom Widgets is a collection of custom widgets inspired by innovative designs and components I’ve discovered on various platforms. Follow me and star ⭐ the repo if you like what you're seeing.

Awesome Lists containing this project

README

        

# custom_widgets
Flutter Custom Widgets is a collection of custom widgets inspired by innovative designs and components I’ve discovered on various platforms. Some were originaly created with other frameworks while others are based on simple design. All have been reproduced with Flutter to showcase its versatility and creative potential.

### What You'll Find

- A growing list of unique widgets, each with its own GIF demo for quick preview.
- Inspiration for your own Flutter projects.
- Modular and reusable components that follow best practices.

### Want to Join?

Have you seen something awesome you'd like to replicate in Flutter or you have an idea of a cool widget? Contributions are welcome!

Check out the [[Contributing Guidelines](CONTRIBUTING.md)] to get started. Whether you’re reporting a bug, suggesting a feature, or submitting a new widget, your input is invaluable to making this project even better.

| Card Splitting | | |
| :---------------------------------------------------------------------------------------------------------------------: |:------------------------------------------------------------------------------------------------------------------------:| :----------------------------------------------------------------------------------------------------------------------:|
| ![card_splitting](https://github.com/user-attachments/assets/f4e4b7c6-834d-413b-9202-2087024cd40f) | | |
| [[SOURCE](lib/widgets/card_splitting.dart)] [[Inspiration](https://x.com/nitishkmrk/status/1860935449713557924)] | | |

| Stack List | Stack cards | Dropdown interaction |
| :---------------------------------------------------------------------------------------------------------------------: |:------------------------------------------------------------------------------------------------------------------------:| :----------------------------------------------------------------------------------------------------------------------:|
| ![stack_listt](https://github.com/user-attachments/assets/153d6fb0-ab78-4905-89e3-5c5e1712b695) | ![stack_cards](https://github.com/user-attachments/assets/81fa81ed-6d5a-4859-809d-e20ab2c9155f) | ![dropdown_menu](https://github.com/user-attachments/assets/e9025e6b-1b27-4ea1-a072-f200a1de91c3) |
| [[SOURCE](lib/widgets/stack_list.dart)] [[Inspiration](https://x.com/iamarunabh/status/1824870055974518986)] | [[SOURCE](lib/widgets/cards_stack.dart)] [[Inspiration](https://x.com/nitishkmrk/status/1822884723485708550)] | [[SOURCE](lib/widgets/dropdown_menu.dart)] [[Inspiration](https://x.com/nitishkmrk/status/1845717423808225665)] |

| Blurred List | Fane out animation | Cascade out animation |
| :---------------------------------------------------------------------------------------------------------------------: |:-----------------------------------------------------------------------------------------------------------------------:| :----------------------------------------------------------------------------------------------------------------------:|
| ![blurred_list](https://github.com/user-attachments/assets/4b297c77-7043-4cdc-bcc7-1200daab3619) | ![fan_out](https://github.com/user-attachments/assets/ee0e2c27-0fb4-4f43-bc49-d9fd64db90ff) | ![casacade_out](https://github.com/user-attachments/assets/a41065c2-5eb8-4bc4-bc7e-fb8d242b35a1) |
| [[SOURCE](lib/widgets/blurred_list.dart)] [[Inspiration](https://x.com/reactiive_/status/1841040359549239518)] | [[SOURCE](lib/widgets/card_fan_out_animation.dart)] [[Inspiration](https://x.com/jmtrivedi/status/1510014145126612993)] | [[SOURCE](lib/widgets/cards_cascade_out.dart)] [[Inspiration](https://x.com/jmtrivedi/status/1510358859424034818)] |

| Loading Animation | Dots Loading | Rotating Arcs |
| :---------------------------------------------------------------------------------------------------------------------: |:-----------------------------------------------------------------------------------------------------------------------:| :----------------------------------------------------------------------------------------------------------------------:|
| ![loading-animation](https://github.com/user-attachments/assets/b57e3cc6-c09a-4f55-9a16-bcb403852d00) | ![dots_loading](https://github.com/user-attachments/assets/aa3a9185-06d0-47ce-900b-5a4ee6e571cb) | ![rotating-arcs](https://github.com/user-attachments/assets/556031ca-ea3e-45f8-8f27-96e8e316180d) |
| [[SOURCE](lib/widgets/loading_animation.dart)] [[Inspiration](https://x.com/sucodeee/status/1814638797331570854)] | [[SOURCE](lib/widgets/dots_loading.dart)] [[Inspiration](Bank of America mobile app)] | [[SOURCE](lib/widgets/rotating_arcs.dart)] [[Inspiration](https://x.com/sucodeee/status/1815337886880878790)] |

| Rotating gradient arc | Angular gradient butoon | Jump and slide |
| :---------------------------------------------------------------------------------------------------------------------: |:-----------------------------------------------------------------------------------------------------------------------:| :----------------------------------------------------------------------------------------------------------------------:|
| ![rot-grad](https://github.com/user-attachments/assets/ebc6df6d-e2cd-4751-bd40-fa221ef8dd58) | ![angular-grad](https://github.com/user-attachments/assets/01405162-dfb6-4203-b5c5-87661d749a64) | ![jump_slide](https://github.com/user-attachments/assets/31e8ba2e-6600-44da-9cb8-acae827ade70) |
| [[SOURCE](lib/widgets/rotating_gradient_arc.dart)] [[Inspiration](https://x.com/sucodeee/status/1813555751656518037)] | [[SOURCE](lib/widgets/angular_gradient_button.dart)] [[Inspiration](https://x.com/sucodeee/status/1813193366596644994)] | [[SOURCE](lib/widgets/jump_slide.dart)] [[Inspiration](https://x.com/CodePen/status/1820523679387689166)] |

A new Flutter project.

## Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)

For help getting started with Flutter development, view the
[online documentation](https://docs.flutter.dev/), which offers tutorials,
samples, guidance on mobile development, and a full API reference.