# flutter_ui_challenges

**Repository Path**: xiaolinlu/flutter_ui_challenges

## Basic Information

- **Project Name**: flutter_ui_challenges
- **Description**: No description available
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-08
- **Last Updated**: 2024-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter UI Challenges

My effort on replicating various apps UI on flutter.

> 🎉 Exciting News! 🎉
> 
> Level up your Flutter skills in just 30 days with 🚀 [30DaysMasterFlutter](https://appwriters.dev/30days/flutter) 🚀
>
> 👨‍💻 [Join the fun and become a Flutter pro!](https://appwriters.dev/30days/flutter) 💪👩‍💻

## Live

[Flutter UI Challenges Web](https://lohanidamodar.github.io/flutter_ui_challenges/#/)

[<img src="screenshots/play-store-logo.png" width="150" >](https://play.google.com/store/apps/details?id=com.popupbits.flutteruichallenges) [<img src="screenshots/app-store-logo.png" width="150" >](https://apps.apple.com/np/app/flutter-ui-challenges/id1473537882) [![Get it from the Snap Store](https://snapcraft.io/static/images/badges/en/snap-store-black.svg)](https://snapcraft.io/flutter-ui-challenges)

## Building and running the code [ **Updated** ]

- Should work on all platforms with Flutter Stable Release

### Table of contents
- **[Animation Examples UI](#animations)**
- **[Ecommerce UIs](#ecommerce)**
- **[Login/signup UIs](#user-flow-screens)**
- **[Settings UIs](#settings-uis)**
- **[Dashboard UIs](#dashboard-uis)**
- **[Quotes App UIs](#quotes-app-uis)**
- **[Motorbike App UIs](#motorbike-app-uis)**
- **[Profile UIs](#profile-screens)**
- **[Invitation App UIs](#inviation-app-ui)**
- **[Lists UIs](#lists-uis)**
- **[Navigation UIs](#navigations)**
- **[Onboarding UIs](#onboarding-screens)**
- **[Miscellaneous UIs](#miscellaneous-widgets)**
- **[Blog UIs](#blog)**
- **[Food App UIs](#food-app)**
- **[Quiz App UIs](#quiz-app)**
- **[Todo App UIs](#todo-app)**
- **[Hotel App UIs](#hotel-app)**
- **[Travel App UIs](#travel-app)**
- **[Grocery App UI Kit](#grocery-app-ui-kit)**
- **[Bank App Clone](#bank-app-clone)**
- **[Furniture App UI](#furniture-app-ui)**

## Contributors

1. [Damodar Lohani](https://github.com/lohanidamodar)
2. [Aparna Dulal] (https://github.com/ambikadulal)
2. [Sudip Thapa](https://github.com/sudeepthapa)
3. [Shyam Adhikari (UI/UX Designer)](http://uilearner.com)
4.  [Mausam Rayamajhi](https://github.com/mausamRayamajhi)
5. [Siddhartha Joshi](https://github.com/cimplesid)

## Packages Used

- Flutter Swiper (https://pub.dartlang.org/packages/flutter_swiper_null_safety)
- Flutter Custom Clippers (https://pub.dartlang.org/packages/flutter_custom_clippers)

## Credits

The code for Springy Widget is taken and refactored from (https://github.com/matthew-carroll/flutter_ui_challenge_springy_slider)

## Animations

<img src="screenshots/anim5.gif" height="480px" > <img src="screenshots/animated_bottom_nav.gif" height="480px" > <img src="screenshots/anim3.gif" height="480px" > <img src="screenshots/animation2.gif" height="480px" > <img src="screenshots/animation1.gif" height="480px" >

## Ecommerce

<img height="480px" src="screenshots/cart3.jpg"> <img height="480px" src="screenshots/cart2.png"> <img height="480px" src="screenshots/ecommerce4.png"> <img height="480px" src="screenshots/checkout1.png"> <img height="480px" src="screenshots/ecommerce_details3.png"> <img height="480px" src="screenshots/home_page1.png"> <img height="480px" src="screenshots/confirm_order1.png"> <img height="480px" src="screenshots/cart1.png"> <img height="480px" src="screenshots/ecommerce1.png"> <img height="480px" src="screenshots/ecommerce2.png"> <img height="480px" src="screenshots/ecommerce_detail1.png"> <img height="480px" src="screenshots/ecommerce_detail2.png">

## User Flow Screens

<img height="480px" src="screenshots/signup3.jpg"> <img height="480px" src="screenshots/login14.jpg"> <img height="480px" src="screenshots/login13.jpg"> <img height="480px" src="screenshots/login12.jpg"> <img height="480px" src="screenshots/login10.png"> <img height="480px" src="screenshots/login9.png"> <img height="480px" src="screenshots/login8.png"> <img height="480px" src="screenshots/auth3-1.png"> <img height="480px" src="screenshots/auth3-2.png"> <img height="480px" src="screenshots/login7.png"> <img height="480px" src="screenshots/signup2.png"> <img height="480px" src="screenshots/login6.png"> <img height="480px" src="screenshots/auth2.png"> <img height="480px" src="screenshots/login5.png"> <img height="480px" src="screenshots/auth1.png"> <img height="480px" src="screenshots/login4.png"> <img height="480px" src="screenshots/login1.png"> <img height="480px" src="screenshots/login2.png"> <img height="480px" src="screenshots/login3.gif"> <img height="480px" src="screenshots/signup1.png">

## Settings UIs
<img height="480px" src="screenshots/settings1.png"> <img height="480px" src="screenshots/settings2.png"> <img height="480px" src="screenshots/settings3.png"> <img height="480px" src="screenshots/profilesetting.jpg"> <img height="480px" src="screenshots/settings4.jpg">

## Dashboard UIs
<img height="480px" src="screenshots/dash1.png"> <img height="480px" src="screenshots/dash2.png">  <img height="480px" src="screenshots/dash3.png">

## Quotes App UIs
<img height="480px" src="screenshots/quotes1.png"> <img height="480px" src="screenshots/quotes2.jpg"> 

## Motorbike App UIs
<img height="480px" src="screenshots/bikeshop.jpg"> <img height="480px" src="screenshots/bike1.png"> <img height="480px" src="screenshots/bike2.png">

## Profile Screens

<img height="480px" src="screenshots/profile12.jpg"> <img height="480px" src="screenshots/profile11.png"> <img height="480px" src="screenshots/profile10.png"> <img height="480px" src="screenshots/profile9.png"> <img height="480px" src="screenshots/profile8.png"> <img height="480px" src="screenshots/profile7.png"> <img height="480px" src="screenshots/profile4.png"> <img height="480px" src="screenshots/profile3.png"> <img height="480px" src="screenshots/p6.png"> <img height="480px" src="screenshots/profile5.png"> <img height="480px" src="screenshots/profile1.png"> <img height="480px" src="screenshots/profile2.png">

## Inviation App UI

<img height="480px" src="screenshots/invitation1.png"> <img height="480px" src="screenshots/inauth.png"> <img height="480px" src="screenshots/inland.png">

## Lists UIs

<img src="screenshots/grid_view.jpg" height="480px"> <img height="480px" src="screenshots/schoolList.png"> <img height="480px" src="screenshots/place list.png">

## Navigations

<img height="480px" src="screenshots/menu2.jpg"> <img height="480px" src="screenshots/menu1.png"> <img height="480px" src="screenshots/bottom.png"> <img height="480px" src="screenshots/drawer2.png"> <img height="480px" src="screenshots/dark_drawer_nav.png"> <img height="480px" src="screenshots/hidden_menu1.gif">

## Onboarding Screens

(Smart walled onboarding is from https://www.uplabs.com/posts/smart-wallet-onboarding)

<img height="480px" src="screenshots/intro6.gif"> <img height="480px" src="screenshots/intro4.gif"> <img height="480px" src="screenshots/onboard3.gif"> <img height="480px" src="screenshots/onboard2.gif"> <img height="480px" src="screenshots/onboarding1.gif"><img height="480px" src="screenshots/i5.gif">

## miscellaneous widgets

<img height="480px" src="screenshots/whatsapp.jpg"> <img height="480px" src="screenshots/youtube.jpg"> <img height="480px" src="screenshots/otp1.png"> <img height="480px" src="screenshots/gallery1.png"> <img height="480px" src="screenshots/musicplayer2.png"> <img height="480px" src="screenshots/image-popup.png"> <img height="480px" src="screenshots/dash3.png"> <img height="480px" src="screenshots/dash2.png"> <img height="480px" src="screenshots/chat2.png"> <img height="480px" src="screenshots/dash1.png"> <img height="480px" src="screenshots/chatui.png"> <img height="480px" src="screenshots/landing1.png"> <img height="480px" src="screenshots/form.png"> <img height="480px" src="screenshots/sliders.gif"> <img height="480px" src="screenshots/dialog2.png"> <img height="480px" src="screenshots/dialog1.png"> <img height="480px" src="screenshots/hidden_menu1.gif"> <img height="480px" src="screenshots/springy_slider.gif"> <img height="480px" src="screenshots/sliverappbar1.gif"> <img height="480px" src="screenshots/hero-animation.gif"> <img height="480px" src="screenshots/btm2.png"><img height="480px" src="screenshots/music.png"> <img src="screenshots/crop1.png" height="480px" >

## Blog

<img height="480px" src="screenshots/news1.png" > <img height="480px" src="screenshots/sports_news1.png" > <img height="480px" src="screenshots/blog-home1.png" > <img height="480px" src="screenshots/article2.png" > <img height="480px" src="screenshots/article1.png" >

## Food App

<img height="480px" src="screenshots/food_checkout_1.png"> <img height="480px" src="screenshots/recipe-single.png"> <img height="480px" src="screenshots/recipe-list.png"> <img height="480px" src="screenshots/recipe_details1.png"> <img height="480px" src="screenshots/avocado.png"> <img height="480px" src="screenshots/cake.png"> <img height="480px" src="screenshots/fdhome.png">

## Quiz App

<img height="480px" src="screenshots/quiz1.png"> <img height="480px" src="screenshots/quiz2.png"> <img height="480px" src="screenshots/quiz3.png"> <img height="480px" src="screenshots/quiz5.png"> <img height="480px" src="screenshots/quiz6.png">

## Todo App

<img height="480px" src="screenshots/todo_home3.png"> <img height="480px" src="screenshots/todo_home2.png"> <img height="480px" src="screenshots/todo2.png"> <img height="480px" src="screenshots/todohome1.png">

## Hotel App

<img height="480px" src="screenshots/room-details.png"><img height="480px" src="screenshots/hotelbooking.jpg"> <img height="480px" src="screenshots/hotel-home.png">

## Travel App

<img height="480px" src="screenshots/travelstory.jpg"> <img height="480px" src="screenshots/travel_home1.png"> <img height="480px" src="screenshots/thome.png"> <img height="480px" src="screenshots/tdetails.png"> <img height="480px" src="screenshots/travel_nepal.gif">

## grocery App UI Kit

(design credit: https://www.uplabs.com/posts/grocery-app-kit)

### Whats implemented

- Working bottom navigator to show different pages
- Navigation push/pop to show details page
- Stateless & Stateful Widgets
- Custom widgets for list items, category items etc.

 <img height="480px" src="screenshots/grocery_home.png"> <img height="480px" src="screenshots/grocery_details.png"> <img height="480px" src="screenshots/grocery_cart.png"> <img height="480px" src="screenshots/grocery_wishlist.png"> <img height="480px" src="screenshots/grocery_options.png">

## Bank App Clone
Bank app clone by [Mausam Rayamajhi](https://github.com/mausamRayamajhi)

<img height="480px" src="screenshots/nic1.png"> <img height="480px" src="screenshots/nic2.png"> <img height="480px" src="screenshots/nic3.png">

## Furniture App UI 
Furniture App by  [Mausam Rayamajhi](https://github.com/mausamRayamajhi)

<img height="480px" src="screenshots/f1.png"> <img height="480px" src="screenshots/f2.gif"> 

## Plant App UI 
Plant UI Clone by [Ambika Dulal](https://github.com/Ambikadulal)

<img height="480px" src="screenshots/plant-1.jpg"> <img height="480px" src="screenshots/plant-2.jpg"> <img height="480px" src="screenshots/plant-3.jpg"> <img height="480px" src="screenshots/plant-4.jpg"> <img height="480px" src="screenshots/plant-5.jpg"> <img height="480px" src="screenshots/plant-6.jpg">

## TravelUi Clone
Furniture App by  [Ambika Dulal](https://github.com/Ambikadulal)

<img height="480px" src="screenshots/travelui1.jpg"> <img height="480px" src="screenshots/travelui2.jpg">

## Wallet App Clone 
Furniture App by  [Ambika Dulal](https://github.com/Ambikadulal)

<img height="480px" src="screenshots/wallet-1.jpg"> <img height="480px" src="screenshots/wallet-2.jpg">