Building a Social app UI with Flutter

Olusegun Festus Babajide
Jul 16 · 4 min read

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.

Note

This is my first flutter article. Sorry if its not detailed or good enough🤧

TL;DR

This is the link to the github repo

Getting Started

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.

data.dart

const.dart

Creating the Screens

The app’s screens includes:

  1. MainScreen
  2. Home
  3. Chats
  4. Friends
  5. Notifications
  6. Profile

Lets get on the screens one by one.

MainScreen

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

Home

Screenshot of home page

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.

Chats

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

Friends

This screen displays friends(followers). It only consist of ListView.seperated which renders a ListTile. The code is simple and straight

Notifications

This page contains only one ListView.seperated which renders a ListTile. The code is simple and straight

Profile

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:

Final Notes

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.

Lets become friends on Twitter and Github

Olusegun Festus Babajide

Written by

18y.o FullStack Developer and Technical Writer. Flutter, Node.js, Python.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade