This is another flutter Ui i made for a News app with the help of people can view news on the go with their mobile phones.
This UI is a part of a series of UI's i am building. Check other UI's clicking the link below.
- Flutter UI 1 Login UI
- Flutter UI 2 Product Showcase UI
- Flutter UI 3 Find Your Inspiration
- Flutter UI 4 Looking for Places
- Flutter UI 5 Food Delivery UI
- Flutter UI 6 Actor Profile UI
- Flutter UI 7 Buying Frames UI
- Flutter UI 8 New Mobile App UI
About the UI:-
When you will open the app you will have a screen showing a login or register button. Clicking any of the button will take you to their respective screens. In the login screen, you can login with you registered id or with google or facebook(Not working yet as it is only UI).
On the register screen you can register with you mail and password.
After a sucessful login is made you are taken to a carousel screen which has two buttons saying prev and next. The later button changes its name to finish as soon as the last screen is reached in the carousel screen.
When you click on the finish button you will see a pop up which wll ask you about recieving notifications or not. If you click on allow a snackbar saying "You will recieve ntifications" will be displayed further and if you deny then snackbar saying "You will not be recieving notifications" will be displayed later on. This snackbar will be displayed on the next screen.
The screen which will open now takes us to the main app where we can have a look at the articles or watch videos respectively. In this screen we have a bottom navigation bar which has 5 items which are home, live news, liked news, profile and daily news. On the same screen on the top we have a List view with vertical scrolling in different colors which on clicking take us to the respective screen have articles/news arranged in different patterns. When we click on any of the article/news it will open in another screen, keeping th bottom navigation bar intact, and has a single child scroll view and the complete article is shown there with different widgets in it.
When you click on the different icons shown to you in the bottom navigation bar then you will be navigated to their particular screens and each screen has a different layout. For layouts you can check the images attached below.
The daily news screen has a way to different layout for the screen when compared to other screens. It has a top tab bar which is scrollable and has particular widget for each respective screens.
Built in:-
- Flutter
Some snaps from the app:-
- Full video:-
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.