# flutter_ui_challenges

**Repository Path**: ideplugin/flutter_ui_challenges

## Basic Information

- **Project Name**: flutter_ui_challenges
- **Description**: mirror of https://github.com/lohanidamodar/flutter_ui_challenges
- **Primary Language**: Dart
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-18
- **Last Updated**: 2023-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter UI Challenges

My effort on replicating various apps UI on flutter.


[View on Web](https://lohanidamodar.github.io/flutter_ui_challenges/#/)

[<img src="screenshots/play-store-logo.png" width="450" >](https://play.google.com/store/apps/details?id=com.popupbits.flutteruichallenges) [<img src="screenshots/app-store-logo.png" width="400" >](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** ]

- Thank you all for your tremendous support. With latest update, I have removed all firebase dependency, and project now runs on web and desktop as well. Please use flutter master channel to run and build. If you want previous version with firebase please checkout [with-firebase](https://github.com/lohanidamodar/flutter_ui_challenges/tree/with-firebase) branch.

### 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">