Building a Facebook-Like App with Flutter:In the world of mobile app development, Flutter has emerge as a powerful framework for creating cross-platform applications with a single codebase. In this article, we’ll explore a simple yet effective implementation of a Facebook-like application using Flutter.
Setting the Stage
To get start, let’s break down the structure of our app. We have a Facebook class, which is a StatefulWidget, indicating that the UI of the app can change dynamically. Inside the Facebook class, we use a DefaultTabController to manage a tabbed interface with six tabs.
The App Bar
The app features a custom-styled AppBar with a unique title. The title, “Facebook,” is displayed prominently at the left end of the app bar. On the right side, there are two action icons – a search icon and a messenger icon. Tapping on these icons would trigger corresponding actions, enhancing the user experience.
The Bottom Navigation Bar
At the bottom of the screen, we have a TabBar with six tabs, each represented by a different icon from the FontAwesome icon set. These icons include a home icon, a users icon, a TV icon, a flag icon, a bell icon, and a bars icon.
Dynamic Content with TabBarView
The main body of the app is represented by a TabBarView. This widget dynamically displays content corresponding to the selected tab. Each tab is associate with a specific widget. For instance, the Post widget is displayed when the “Home” tab is selected, and the JobFeed widget is repeated for the remaining tabs.
The Flutter Magic
The beauty of Flutter lies in its simplicity and expressiveness. With just a few lines of code, we’ve created a fully functional app with a clean and modern interface. Flutter’s hot reload feature allows for real-time development and experimentation, making the development process smooth and efficient.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}Building a Facebook-Like App with Flutter
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:job/Jobfeed.dart';
import 'package:job/post.dart';
class Facebook extends StatefulWidget {
const Facebook({super.key});
@override
State<Facebook> createState() => _FacebookState();
}
class _FacebookState extends State<Facebook>
with SingleTickerProviderStateMixin {
//late TabController tabController = TabController(length: 6, vsync: this);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 6,
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
leadingWidth: 200,
titleSpacing: 2,
leading: Padding(
padding: EdgeInsets.only(left: 16.0),
child: Text(
"Facebook",
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: Colors.blue),
),
),
actions: [
Padding(
padding: EdgeInsets.only(right: 16.0),
child: Row(
children: [
CircleAvatar(
backgroundColor: Colors.grey.shade200,
child: IconButton(
color: Colors.black87,
onPressed: () {},
icon: FaIcon(
FontAwesomeIcons.search,
),
),
),
SizedBox(
width: 20,
),
CircleAvatar(
backgroundColor: Colors.grey.shade200,
child: IconButton(
color: Colors.black87,
onPressed: () {},
icon: FaIcon(
FontAwesomeIcons.facebookMessenger,
),
),
)
],
),
)
],
bottom: TabBar(
indicatorColor: Colors.blue,
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicatorSize: TabBarIndicatorSize.label,
tabs: [
const Tab(
icon: FaIcon(
FontAwesomeIcons.home,
),
),
const Tab(
icon: FaIcon(
FontAwesomeIcons.users,
),
),
const Tab(
icon: FaIcon(
FontAwesomeIcons.tv,
),
),
const Tab(
icon: FaIcon(
FontAwesomeIcons.flag,
),
),
const Tab(
icon: FaIcon(
FontAwesomeIcons.bell,
),
),
const Tab(
icon: FaIcon(
FontAwesomeIcons.bars,
),
),
],
),
),
body: TabBarView(
children: [
Post(),
JobFeed(),
JobFeed(),
JobFeed(),
JobFeed(),
JobFeed()
]),
));
}
}
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class Post extends StatefulWidget {
const Post({super.key});
@override
State<Post> createState() => _PostState();
}
class Flavor {
final String name;
final String image;
final String story;
final bool isFavorite;
Flavor(
{required this.story,
required this.image,
required this.name,
this.isFavorite = false});
Flavor copyWith({String? name, bool? isFavorite}) => Flavor(
name: name ?? this.name,
isFavorite: isFavorite ?? this.isFavorite,
story: '',
image: '');
}
class _PostState extends State<Post> {
final List<Flavor> flavors = [
Flavor(image: "assets/images/game1.png", story: 'Love', name: 'Choco'),
Flavor(image: 'assets/images/game2.png', story: 'Love', name: 'Choco'),
Flavor(image: 'assets/images/game1.png', story: 'Love', name: 'Choco'),
Flavor(image: 'assets/images/game2.png', story: 'Love', name: 'Choco'),
];
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CircleAvatar(
radius: 30,
child: FaIcon(FontAwesomeIcons.user),
),
SizedBox(
width: 20,
),
Container(
height: 45,
width: 300,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(25)),
child: Flexible(
child: TextField(
autofocus: false,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20, 0, 0, 10),
hintText: "What on your mind?",
hintStyle: TextStyle(
color: Colors.black,
fontSize: 16,
letterSpacing: 0,
wordSpacing: 2,
fontWeight: FontWeight.w500),
border: InputBorder.none,
),
),
),
),
],
),
),
Divider(
thickness: 2,
),
Container(
height: 180,
child: ListView.builder(
shrinkWrap: true,
itemCount: flavors.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.all(5),
child: Stack(
children: [
Padding(
padding: const EdgeInsets.only(),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 150,
width: 100,
child: Image.asset(
flavors[index].image,
// 'assets/images/r2.jpeg',
fit: BoxFit.cover,
),
),
),
),
Positioned(
top: 10,
left: 5,
child: CircleAvatar(
radius: 25,
child: Icon(Icons.person),
)),
Positioned(
top: 120,
left: 10,
child: Text(
flavors[index].name,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.white),
),
),
],
));
},
),
),
Divider(
thickness: 4,
),
SizedBox(
child: ListView.builder(
shrinkWrap: true,
itemCount: 2,
scrollDirection: Axis.vertical,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: EdgeInsets.all(5),
child: SizedBox(
// width: 360,
child: Column(
children: [
ListTile(
leading: CircleAvatar(
radius: 25,
child: Icon(Icons.person),
),
title: Text(
'Kums Kumaravel',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.black),
),
trailing: Icon(Icons.close),
),
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(10)),
width: double.infinity,
child: Image.asset(
'assets/images/12.jpeg',
fit: BoxFit.cover,
)),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 80,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.all(5),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
FaIcon(FontAwesomeIcons.thumbsUp),
Text('96')
],
),
)),
Container(
width: 80,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.all(5),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
FaIcon(FontAwesomeIcons.comment),
Text('196')
],
),
)),
Container(
width: 80,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.all(5),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
FaIcon(FontAwesomeIcons.share),
Text('6')
],
),
)),
],
),
SizedBox(
height: 5,
),
Divider(
thickness: 2,
)
],
),
));
},
),
)
],
),
);
}
}
Conclusion
Building a Facebook-like app with Flutter is a testament to the framework’s versatility and ease of use. Whether you’re a seasoned developer or just starting with Flutter, this example provides a foundation for creating feature-rich applications with a stunning user interface.
Feel free to customize and expand upon this codebase to add more features, implement user authentication, or connect to a backend server for dynamic content. Flutter opens the door to endless possibilities in mobile app development.
For more : To know about Indeed app in Flutter
Leave a Reply