Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/sahq-azhar/flutter-future_google-youtube_ui

🔮YouTube Concept UI made using Flutter.
https://github.com/sahq-azhar/flutter-future_google-youtube_ui

android android-ui androidx flutter flutter-apps flutter-design flutter-ui google google-api ios trending-repositories ui youtube youtube-video

Last synced: about 1 month ago
JSON representation

🔮YouTube Concept UI made using Flutter.

Awesome Lists containing this project

README

        

YouTube Concept UI &nbsp


This project is about redesigning the Youtube UI/UX using Flutter. The main page by default is home, the top header houses various elements including profile info, search bar, and a live stream button. Next to it, is the horizontally scrollable list with various categories. The central content of the page consists of the videos from recommended/subscribed channels as a vertical scrollable list maintaining the classic youtube touch. Each video thumbnail is spread out as a polaroid frame.

Clicking on the channel icon opens up the channel page which contains channel info followed by videos uploaded on that channel. This page also contains categories as a modified scrollable list(Home, Playlist, Community, etc.)

The footer of each page includes a new and modified navigation bar with an elegant touch. The top header on the main page includes the user name and profile photo, clicking on it will take to an enticing user profile page.

## 🖼️ Final UI



## 💠 Dependencies

### ✔️Packages used:

🔹 flutter_svg : [link](https://pub.dev/packages/flutter_svg)

🔹 provider : [link](https://pub.dev/packages/provider)

🔹 curved_navigation_bar : [link](https://pub.dev/packages/curved_navigation_bar)

🔹 flutter_custom_clippers : [link](https://pub.dev/packages/flutter_custom_clippers)

🔹 flutter_launcher_icons : [link](https://pub.dev/packages/flutter_launcher_icons)

🔹 url_launcher: : [link](https://pub.dev/packages/url_launcher)

### ✔️Other Links:

🔹 Custom Icons : [link](https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977)

### ✔️Font used:

🔹 ProductSans from Google

-----------------------------------------------------------------

[![Works with Android](https://img.shields.io/badge/Works_with-Android-green?style=flat-square)]
[![Open Source Love svg2](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)]
[![Awesome Badges](https://img.shields.io/badge/badges-awesome-green.svg)]
[![Open Source? Yes!](https://badgen.net/badge/Open%20Source%20%3F/Yes%21/blue?icon=github)]

[![ForTheBadge built-by-developers](http://ForTheBadge.com/images/badges/built-by-developers.svg)]



**⭐ The repo**

### Eat, Sleep, CODE, Repeat!