# flutter_ui_challenges

**Repository Path**: caolv/flutter_ui_challenges

## Basic Information

- **Project Name**: flutter_ui_challenges
- **Description**: Trying to replicate various app UIs in flutter
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-12-13
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Flutter UI Challenges

My effort on replicating various apps UI on flutter.

[<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)

## Building and running the code

- From now on, you need to create your own firebase project and add the config files in order to build the project

    In order to build the project before firebase services were added please checkout the branch [without-firebase](https://github.com/lohanidamodar/flutter_ui_challenges/tree/without-firebase)


### Table of contents

- **[Youtube Speed Codes](#speed-codes-youtube)**
- **[My flutter plugins](#my-flutter-plugins)**
- **[Complete App Examples](#complete-app-examples)**
- **[Code Examples](#code-examples)**
- **[Animation Examples UI](#animations)**
- **[Ecommerce UIs](#ecommerce)**
- **[Login/signup UIs](#user-flow-screens)**
- **[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)**

## Speed codes [Youtube](https://youtube.com/c/reactbits)

- [Cake UI](https://www.youtube.com/watch?v=PNL5DxMO2AA) :star2: Popular
- [Fitness App Dashboard](https://www.youtube.com/watch?v=fAfdT30UYlQ) :star2: Latest
- [Blog App List UI](https://youtu.be/pIWHFwrhbIo) :star2: Latest
- [Hotel Booking](https://www.youtube.com/watch?v=2G_PquLyiv0)
- [Ecommerce Details](https://youtu.be/I_JEvLSaJv0)
- [Minimal Login UI](https://www.youtube.com/watch?v=ZYMu3JYWOeI)
- [Resume UI](https://www.youtube.com/watch?v=ERUvJbtaGMI)
- [Fruit Add To Cart UI](https://youtu.be/96o6_arX69U)
- [Login UI](https://youtu.be/3JDriYMYiu8)
- [Dating app profile UI](https://youtu.be/UHw5fMCyRfQ)
- [Recipe List](https://youtu.be/rKBmwVW3KeI)
- [Recipe Single](https://youtu.be/iq0tvM3DOaU)
- [Todo Home](https://youtu.be/k4veahELtck)
- [Landing Page](https://youtu.be/LsfGjRuLQR0)

---

## My Flutter Plugins

These are some of my flutter plugins, that might help you in your flutter development journey.

1. [Flutter Automation](https://pub.dev/packages/flutter_automation)<br>
   A flutter package that helps you setup firebase auth, android signing, firestore CRUD, google maps automatically with just a command.

2. [Custom Clippers](https://pub.dev/packages/flutter_custom_clippers)<br>
   A bunch of custom clippers to help you clip your widgets into different shapes

3. [Bottom Reveal Widget](https://pub.dev/packages/bottomreveal)<br>
   A flutter package that provides an animated bottom reveal widget, the example is in the Animations section below.

---

## Complete app examples

1. [Audio Book App](https://github.com/lohanidamodar/flutter_audiobooks_app)<br>
   An audio books listening app (works on background), where you can listen to audio books from librivox.org

2. [Quiz App](https://github.com/lohanidamodar/flutter_opentrivia)<br>
   A trivia app made with flutter using opentdb.com api

3. [Khalti Clone](https://github.com/lohanidamodar/khalticlone)<br>
   An effort to clone Khalti (A nepal based mobile payment app) app's UI

4. [Android Launcher](https://github.com/lohanidamodar/flutter_launcher)<br>
   A simple android launcher app made with flutter
5. [Iremember](https://github.com/lohanidamodar/flutter_iremember)<br>
   A simple app, that helps you remember where you kept your items by taking pictures. Demonstrates the use of **SQLite Database** and **Image picker plugin**

## Code Examples

1. [Flutter Crypto List](https://github.com/lohanidamodar/flutter-4-crypto-list)<br>
   Flutter crypto tracker using [coinmarketcap.com](https://coinmarketcap.com) api. Demonstrate using http library to perform simple http request and displaying the result

2. [Simple BLOC pattern example](https://github.com/lohanidamodar/flutter_5_bloc_pattern)<br>
   Simple Example demonstrating state management in flutter using Streams (BLoC pattern) / RxDart

3. [Hangman](https://github.com/lohanidamodar/flutter_7_hangman)<br>
   Simple hangman game example in flutter

4. [Firebase Login](https://github.com/lohanidamodar/flutter_fire_login)<br>
   Very simple flutter authentication example using **Firebase auth**

5. [Http requests](https://github.com/lohanidamodar/flutter_http_requests)<br>
   Simple http request example with Future, json decode, async/await and FutureBuilder widget

6. [Flutter Lessons](https://github.com/lohanidamodar/flutter_lessons)<br>
   Basic to intermediate flutter code examples, projects I made while teaching flutter

7. [Flutter Flavors](https://github.com/lohanidamodar/flutter_flavors)<br>
   Setting up flavors in flutter app, using multiple firebase config based on flavors. [Companion Youtube Tutorials](https://www.youtube.com/watch?v=DgGUtTUatDQ&list=PLUiueC0kTFqLdkuj4j8FNy1qlzcI0nyCu)

8. [Google Map Experiments](https://github.com/lohanidamodar/flutterMapExperiments)<br>
   Learning different aspects of integrating google maps in flutter app.

9. [Animation Experiments](https://github.com/lohanidamodar/flutter_animation_experiments)<br>
   Simple to advance animation examples in flutter

## Contributors

1. [Damodar Lohani](https://github.com/lohanidamodar)
2. [Siddhartha Joshi](https://github.com/cimplesid)
3. [Sudip Thapa](https://github.com/sudeepthapa)

## Packages Used

- Flutter Swiper (https://pub.dartlang.org/packages/flutter_swiper)
- 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/anim3.gif" height="480px" > <img src="screenshots/animation2.gif" height="480px" > <img src="screenshots/animation1.gif" height="480px" >

## Ecommerce

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

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

## Profile Screens

<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 height="480px" src="screenshots/schoolList.png"> <img height="480px" src="screenshots/place list.png">

## Navigations

<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

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

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

## Blog

<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/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/hotel-home.png">

## Travel App

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