Overview
Today we finish off the social media app home page UI with Custom bottom navigation bar and stories section using Flutter
Source Code
import 'package:flutter/material.dart';
class SlowgramFinal extends StatefulWidget {
const SlowgramFinal({Key? key}) : super(key: key);
@override
State<SlowgramFinal> createState() => _SlowgramFinalState();
}
class _SlowgramFinalState extends State<SlowgramFinal> {
int _selectedIndex = 0;
final double iconSize = 30;
void _onTap(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xfff383332),
bottomNavigationBar: BottomAppBar(
color: Color(0xfff383332).withOpacity(0.95),
child: Container(
padding: const EdgeInsets.only(top: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
color: Colors.white,
padding: EdgeInsets.zero,
onPressed: () => {_onTap(0)},
icon: Icon(
_selectedIndex == 0 ? Icons.home : Icons.home_outlined,
size: iconSize)),
IconButton(
color: Colors.white,
padding: EdgeInsets.zero,
onPressed: () => {_onTap(1)},
icon: Icon(
_selectedIndex == 1 ? Icons.saved_search : Icons.search,
size: iconSize),
),
IconButton(
color: Colors.white,
padding: EdgeInsets.zero,
onPressed: () => {_onTap(3)},
icon: Icon(
_selectedIndex == 3
? Icons.notifications_active
: Icons.notifications_active_outlined,
size: iconSize)),
IconButton(
color: Colors.white,
padding: EdgeInsets.zero,
onPressed: () => {_onTap(4)},
icon: Icon(
_selectedIndex == 4
? Icons.local_mall
: Icons.local_mall_outlined,
size: iconSize)),
InkWell(
onTap: () => _onTap(5),
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: iconSize / 2,
backgroundImage: NetworkImage(stories[0]),
))
],
),
),
),
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,
)
],
),
SliverToBoxAdapter(
child: SizedBox(
height: 110,
child: Column(
children: [
Expanded(child: storiesSection(stories)),
const SizedBox(
height: 8,
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
height: 0.25,
width: MediaQuery.of(context).size.width,
color: Colors.white,
)
],
),
),
),
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 storiesSection(List<String> images) {
return ListView.builder(
padding: EdgeInsets.only(left: 10),
scrollDirection: Axis.horizontal,
itemCount: images.length,
itemBuilder: (context, index) {
return Container(
width: 80,
margin: const EdgeInsets.symmetric(horizontal: 5, vertical: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
images[index],
),
),
),
);
},
);
}
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'),
];
final stories = [
"https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
"https://images.unsplash.com/photo-1557053910-d9eadeed1c58?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80",
"https://images.unsplash.com/photo-1506277886164-e25aa3f4ef7f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1035&q=80",
"https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
"https://images.unsplash.com/photo-1523824921871-d6f1a15151f1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80",
"https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80",
];