EP.20 Social Media App Using Flutter – Part 1

January 21, 2022
Overview

Today we build a social media app home page UI using Flutter
Source Code

import 'package:flutter/material.dart';

class Slowgram extends StatelessWidget {
  const Slowgram({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff383332),
      body: CustomScrollView(
        slivers: [
          const SliverAppBar(
            backgroundColor: Color(0xfff383332),
            pinned: true,
            title: Text("Slowgram",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.bold)),
            actions: [
              Icon(Icons.inbox),
              SizedBox(
                width: 20,
              )
            ],
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  padding: const EdgeInsets.symmetric(vertical: 8),
                  height: MediaQuery.of(context).size.height * 0.5,
                  color: Color(0xfff383332),
                  child: Column(
                    children: [
                      ListTile(
                        leading: CircleAvatar(
                          backgroundImage:
                              NetworkImage(posts[index].profileImage),
                        ),
                        title: Text(
                          posts[index].name,
                          style: const TextStyle(
                              color: Colors.white, fontSize: 20),
                        ),
                        subtitle: Text(
                          posts[index].dateTime,
                          style: TextStyle(
                              color: Colors.grey.shade300, fontSize: 14),
                        ),
                      ),
                      Expanded(
                        child: listSection(posts[index].images),
                      ),
                      Padding(
                        padding:
                            const EdgeInsets.only(left: 15, right: 15, top: 8),
                        child: Row(
                          children: [
                            const Icon(
                              Icons.favorite,
                              color: Colors.white,
                              size: 26,
                            ),
                            const SizedBox(
                              width: 8,
                            ),
                            Text(
                              posts[index].likes,
                              style: const TextStyle(
                                  color: Colors.white, fontSize: 18),
                            ),
                            const Spacer(),
                            const Icon(
                              Icons.chat_bubble,
                              color: Colors.white,
                              size: 26,
                            ),
                            const SizedBox(
                              width: 8,
                            ),
                            Text(
                              posts[index].comments,
                              style: const TextStyle(
                                  color: Colors.white, fontSize: 18),
                            ),
                            const Spacer(),
                            const Icon(
                              Icons.bookmark,
                              color: Colors.white,
                              size: 26,
                            ),
                            const SizedBox(
                              width: 8,
                            ),
                            Text(
                              posts[index].bookmarks,
                              style: const TextStyle(
                                  color: Colors.white, fontSize: 18),
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(
                        height: 12,
                      ),
                      Container(
                        margin: const EdgeInsets.symmetric(horizontal: 10),
                        height: 0.25,
                        color: Colors.white,
                      )
                    ],
                  ),
                );
              },
              childCount: posts.length,
            ),
          )
        ],
      ),
    );
  }
}

Widget listSection(List<String> images) {
  return ListView.builder(
    padding: EdgeInsets.only(left: 10),
    scrollDirection: Axis.horizontal,
    itemCount: images.length,
    itemBuilder: (context, index) {
      return Container(
        width: MediaQuery.of(context).size.width * 0.6,
        margin: const EdgeInsets.symmetric(horizontal: 5, vertical: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20),
          image: DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage(
              images[index],
            ),
          ),
        ),
      );
    },
  );
}

class Post {
  final String name;
  final String profileImage;
  final String likes;
  final String comments;
  final String bookmarks;
  final List<String> images;
  final String dateTime;

  Post(this.name, this.profileImage, this.likes, this.comments, this.bookmarks,
      this.images, this.dateTime);
}

final List<Post> posts = [
  Post(
      'Jennifer Lopez',
      'https://images.unsplash.com/photo-1557053910-d9eadeed1c58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80',
      '43.5k',
      '20.1k',
      '30k',
      [
        "https://images.unsplash.com/photo-1570738876550-be79a88f64c8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=972&q=80",
        "https://images.unsplash.com/photo-1533122250115-6bb28e9a48c3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80",
        "https://images.unsplash.com/photo-1462159221268-2b40f378cdb4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1065&q=80",
      ],
      '20th January 2022'),
  Post(
      'Carrie Underwood',
      'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80',
      '10k',
      '33k',
      '51k',
      [
        "https://images.unsplash.com/photo-1578855691621-8a08ea00d1fb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80",
        "https://images.unsplash.com/photo-1546548970-71785318a17b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80",
        "https://images.unsplash.com/photo-1618897996318-5a901fa6ca71?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80",
      ],
      '20th January 2022'),
];