For this article, i am assuming that you have a little idea about Flutter and some of it’s widgets . If not please go to the below link and read more about it.
In this post, I’ll be trying to narrate how i created a social app UI in flutter.
This is my first flutter article. Sorry if its not detailed or good enough🤧
This is the link to the github repo
Flutter representation of a Social App Concept i found in Uplabs. - JideGuru/FlutterSocialAppUIKit
While starting this app, i got images from unsplash(as usual 😅) and also got names from a random online name generator . I added the images to my project by creating an “assets” folder and pasting all the images there, i also adding them to pubspec.yaml as shown below:
After adding the images to “pubspec.yaml”, I then created two files named “data.dart” and “const.dart” in “lib/util” folder. The data.dart file contains Lists of items like posts, messages, notifications, chats, groups and a few others while the const.dart file contains App name and App themes as shown below.
Creating the Screens
The app’s screens includes:
Lets get on the screens one by one.
You might be wondering what makes MainScreen different from Home screen. Well the MainScreen is just the container that holds the BottomNavigationBar and PageView which allow us to navigate the pages through tabs. This code is shown below
The home page displays news feed from different people for user’s to see and user’s can add new posts from the FAB. While making this page i had to create a custom widget that holds the posts. Each posts is a custom widget. The widget is created under the widgets folder in the lib package. the code and explanation below:
As shown below the widget consists of an InkWell wrapped in a Padding to handle Tap event for the PostItem. The InkWell contains a Column which holds a ListTile and Image.asset. The ListTile consists of the Username, Profile picture and Time of post while the Image.asset holds the image posted.
After the widget had been created its time to display it in the Home page. this will be done through a ListView.builder and the List of posts in the data.dart.
With the help of Tabs, this page is divided into 2 parts, the first part shows the people that you have conversed with while the second part shows the Groups in which you are a participant. Each segments contains a ListView.seperated to display list of items. The Items are custom widgets i made and called ChatItem. See code below:
The widget ListTile handle an onTap event that routes to the Conversation Screen. Now to display the widget in the chats screen
This screen displays friends(followers). It only consist of ListView.seperated which renders a ListTile. The code is simple and straight
This page contains only one ListView.seperated which renders a ListTile. The code is simple and straight
User details and Posts are shown on this page. There was a need for ‘dart:math’ because the profile picture and the follower, following and posts counts were generated on random and ‘dart: math’ has a Random() method. The code is shown below:
Thanks for reading this article. Be sure to clap/recommend as much as you can and also share with your friends. It means a lot to me.