import 'package:flutter/material.

dart';
final tealGreenDark = Color(0xff075E54);
final tealGreen = Color(0xff128C7E);
final lightGreen = Color(0xff25D366);
List<Map<String, String>> userMap=[
{
"dp":"https://randomuser.me/api/portraits/men/94.jpg",
"handle":"leomessi",
"location": "Paris",
"image1": "https://c4.wallpaperflare.com/wallpaper/297/678/332/lionel-
messi-soccer-photoshop-effects-wallpaper-preview.jpg",
"likedBy": "bharath,vijay,jaco and venkie",
"description1": "Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lectus proin nibh nisl condimentum. Imperdiet nulla malesuada pellentesque
elit eget gravida cum sociis natoque. Vulputate odio ut enim blandit
volutpat maecenas. In fermentum posuere urna nec tincidunt praesent semper
feugiat nibh. Phasellus egestas tellus rutrum tellus. At tempor commodo
ullamcorper a lacus vestibulum sed. Posuere urna nec tincidunt praesent
semper feugiat nibh sed pulvinar. Proin libero nunc consequat interdum
varius sit amet mattis. Eget magna fermentum iaculis eu. Sed felis eget
velit aliquet sagittis id consectetur. Tortor dignissim convallis aenean et
tortor.",
"commentsCount": "723421",

},
{
"dp":"https://randomuser.me/api/portraits/men/43.jpg",
"handle":"zuckerberg",
"location": "London",
"image1": "https://c4.wallpaperflare.com/wallpaper/446/920/878/soccer-
lionel-messi-fc-barcelona-wallpaper-preview.jpg",

"likedBy":"blocklie ,argentwinner,governoink,chirmminority,cliquesavings,pa
introband",
"description1": "Nibh mauris cursus mattis molestie a iaculis. Egestas
fringilla phasellus faucibus scelerisque eleifend donec pretium. Felis eget
nunc lobortis mattis aliquam faucibus purus. Natoque penatibus et magnis
dis parturient montes. Vitae auctor eu augue ut lectus. A arcu cursus vitae
congue mauris. Neque sodales ut etiam sit. Mattis vulputate enim nulla
aliquet. Dolor purus non enim praesent elementum. Pulvinar pellentesque
habitant morbi tristique senectus et. Lectus urna duis convallis convallis
tellus id interdum. Auctor eu augue ut lectus arcu. Congue quisque egestas
diam in arcu cursus euismod quis viverra. Scelerisque viverra mauris in
aliquam sem. Pharetra diam sit amet nisl. Ornare arcu odio ut sem.",
"commentsCount": "623422",

},
{
"dp":"https://randomuser.me/api/portraits/men/61.jpg",
"handle":"bharath",
"location": "Paris",
"image1":
"https://i.pinimg.com/originals/30/00/2c/30002c47f6e87b70ed07b0c675a26ee6.j
pg",
"likedBy":"cliquesavings ,peacefulibis, chirmminority, rockallargue,
immaterialresistance, governoink, glamorousterror, erodedconvention,
fundingdunnock, argentwinner, awardbewildered, myceliumthirty, bimbojovial,
suburbanmemorize",
"description1": "Vestibulum mattis ullamcorper velit sed ullamcorper.
Posuere ac ut consequat semper viverra nam. Amet commodo nulla facilisi
nullam vehicula ipsum a arcu cursus. Est ultricies integer quis auctor elit
sed. Sit amet dictum sit amet justo donec. Sed sed risus pretium quam
vulputate. Tincidunt praesent semper feugiat nibh sed pulvinar proin. Neque
viverra justo nec ultrices dui sapien eget. Eget nunc scelerisque viverra
mauris in aliquam sem. Justo eget magna fermentum iaculis eu non diam
phasellus. Nunc sed id semper risus in hendrerit gravida. Diam quis enim
lobortis scelerisque fermentum dui faucibus in. Sit amet porttitor eget
dolor morbi non. Imperdiet sed euismod nisi porta. Feugiat pretium nibh
ipsum consequat. Sed elementum tempus egestas sed sed risus. Leo integer
malesuada nunc vel risus commodo viverra maecenas accumsan. Odio ut sem
nulla pharetra diam.",
"commentsCount": "6342621",

},
{
"dp":"https://randomuser.me/api/portraits/men/71.jpg",
"handle":"elonmusk",
"location": "London",
"image1": "https://images5.alphacoders.com/521/thumb-1920-521476.jpg",
"likedBy":"loganberriesspurge, pelvisidealistic, bookclancy, biddysoba,
wideunstable, boltgnaw, hopefultailor, celeriacdate, crewoutpost,
definiterelevant, pearlpester, reveredloudmouth",
"description1": "Enim sit amet venenatis urna cursus. Tellus cras
adipiscing enim eu turpis. Non arcu risus quis varius quam quisque. Ipsum
suspendisse ultrices gravida dictum. Sit amet mauris commodo quis imperdiet
massa tincidunt. Proin sagittis nisl rhoncus mattis. Nisi vitae suscipit
tellus mauris. Metus aliquam eleifend mi in nulla posuere sollicitudin.
Commodo odio aenean sed adipiscing diam donec adipiscing. Sed euismod nisi
porta lorem mollis aliquam ut porttitor. Velit egestas dui id ornare arcu
odio ut. Nec nam aliquam sem et tortor consequat. Phasellus egestas tellus
rutrum tellus pellentesque eu tincidunt. Porttitor massa id neque aliquam.
Cras ornare arcu dui vivamus. Nisl nunc mi ipsum faucibus vitae aliquet.
Sed faucibus turpis in eu. Morbi tincidunt augue interdum velit. Interdum
velit euismod in pellentesque massa placerat duis. Fringilla ut morbi
tincidunt augue interdum.",
"commentsCount": "13436",

},{
"dp":"https://randomuser.me/api/portraits/men/11.jpg",
"handle":"abdul",
"location": "New York",
"image1":
"https://wallpapers.com/images/featured/t7otmb1xwl662a0r.jpg",

"likedBy":"bharath,celeriacdate,jac,venkie,speakdelirious,boltgnaw,erodedco
nvention",
"description1": "Sagittis orci a scelerisque purus semper eget duis at
tellus. Urna et pharetra pharetra massa. Nec dui nunc mattis enim ut
tellus. Ultricies integer quis auctor elit sed vulputate. Morbi enim nunc
faucibus a pellentesque sit amet porttitor. Pellentesque massa placerat
duis ultricies lacus sed. Egestas sed sed risus pretium quam vulputate
dignissim suspendisse. Non quam lacus suspendisse faucibus interdum posuere
lorem ipsum dolor. Neque egestas congue quisque egestas diam in arcu cursus
euismod. Amet aliquam id diam maecenas. Placerat in egestas erat imperdiet
sed euismod nisi porta. Elit ullamcorper dignissim cras tincidunt. Lacus
luctus accumsan tortor posuere ac.",
"commentsCount": "632462",

},{
"dp":"https://randomuser.me/api/portraits/men/5.jpg",
"handle":"leomessi",
 "location": "London",
"image1": "https://wallpapercave.com/wp/wp7477458.jpg",
"likedBy": "charioteer, visibilityunbalanced, speakdelirious,
cherryruffs, structurebathtub, securityphase, fertilecarpenter,
sussexirate, virtuousremuda, coachprinciple, collegebrave, needmuscle,
composesweeping, mythseedling, betswanky, revolutionwithout, hijackscrawny,
pepsimow, disgustingstern, musicianlavender, shoddyshould, promotepicayune,
hawkstew, footprintstitle, croissantauthentic, sparbreathless,
girlfriendjumprope, curvesweat, bagelspodzol, symbollamp,
advantagemeaning",
"description1": "Id velit ut tortor pretium viverra suspendisse
potenti. Sem nulla pharetra diam sit amet nisl suscipit adipiscing
bibendum. Interdum posuere lorem ipsum dolor sit amet. Eu feugiat pretium
nibh ipsum. Vitae purus faucibus ornare suspendisse sed nisi lacus.
Faucibus turpis in eu mi bibendum neque egestas congue quisque. At quis
risus sed vulputate. Dictum at tempor commodo ullamcorper a lacus. In
cursus turpis massa tincidunt dui ut. In nisl nisi scelerisque eu. Est sit
amet facilisis magna etiam. Euismod nisi porta lorem mollis aliquam ut
porttitor leo a. Augue eget arcu dictum varius duis. Faucibus purus in
massa tempor. Est sit amet facilisis magna etiam tempor orci. Ac odio
tempor orci dapibus ultrices in iaculis. Libero id faucibus nisl tincidunt
eget nullam. Venenatis lectus magna fringilla urna porttitor rhoncus dolor
purus. Morbi tristique senectus et netus et malesuada fames ac turpis.",
"commentsCount": "223462",

},{
"dp":"https://randomuser.me/api/portraits/men/15.jpg",
"handle":"elonmusk",
"location": "New York",
"image1": "https://cdn.resfu.com/media/img_news/goal_hd-lionel-messi-
barcelona_5toanmhsh09f11z1b8ucasj4p.jpg",
"likedBy":"bakegodly, screendecreasing, veinedthaw, poisedbelated,
slowtechnician, personnelsynonymous, dunlinnutty, mansionshower,
fatsometatarsal, discerningdeadbeat, axecomplain, borderedethnic, adultzone
",
"description1":"Neque egestas congue quisque egestas. Est ultricies
integer quis auctor elit sed. Lacus laoreet non curabitur gravida arcu.
Turpis cursus in hac habitasse. Nisi est sit amet facilisis magna etiam.
Diam in arcu cursus euismod quis viverra nibh cras. Non diam phasellus
vestibulum lorem sed risus ultricies tristique nulla. Aenean sed adipiscing
diam donec adipiscing tristique. At in tellus integer feugiat scelerisque
varius morbi. Non sodales neque sodales ut etiam sit amet nisl purus. Hac
habitasse platea dictumst quisque. Sed elementum tempus egestas sed sed
risus pretium. Mi proin sed libero enim sed faucibus. Elit duis tristique
sollicitudin nibh sit amet commodo.",
"commentsCount": "2349459",

}];

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Instagram post page',
theme: ThemeData(
primarySwatch: Colors.pink,
),
home: MyHomePage(title: 'Instagram'),
 );
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
title: Text(this.title),
actions: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Icon(Icons.favorite_border,),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20 ),
child: Icon(Icons.send),
)
]
),
body:ListView(
children:[
for(int i=0;i< userMap.length;i++)
ChatHead(
userMap[i]['dp']!,
userMap[i]["handle"]!,
userMap[i]["location"]!,
userMap[i]["image1"]!,
userMap[i]["description1"]!,
userMap[i]["likedBy"]!,
),
]
),
);

}
}
class ChatHead extends StatelessWidget {
const ChatHead(
this.url,
this.handle,
this.location,
this.image1,
this.descrption1,
this.likedBy, {
Key? key,}) : super(key: key);

final String url;

final String handle;
final String location;
final String image1;
final String descrption1;
final String likedBy;

@override
Widget build(BuildContext context) {
 return
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(8),
child: CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(url),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(handle,style: TextStyle(color:
Colors.white),),
Text(location,style: TextStyle(color:
Colors.white),),
],
),
),
Spacer(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Icon(Icons.more_vert,color:Colors.white),
)

]
),
Image.network(image1),
Row(
children: [
Padding(
padding: const EdgeInsets.all(15),
child: Icon(Icons.favorite_border,color:Colors.white),
),
Padding(
padding: const EdgeInsets.all(15),
child:
Icon(Icons.messenger_outline,color:Colors.white),
),
Padding(
padding: const EdgeInsets.all(15),
child: Icon(Icons.send,color:Colors.white),
),
Spacer(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child:
Icon(Icons.bookmark_border_outlined,color:Colors.white),
)
]
),
Row(
children: [
Stack(
children: [
 Padding(
padding: const EdgeInsets.symmetric(horizontal:
15),
child: CircleAvatar(
radius: 11,
backgroundImage: NetworkImage(

"https://yt3.googleusercontent.com/ytc/AL5GRJVZqekX2KBNTbss7v_XMm-
I1RKcXd5G6PTD_Va77Q=s900-c-k-c0x00ffffff-no-rj"),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal:
30),
child: CircleAvatar(
radius: 11,
backgroundImage: NetworkImage(

"https://i.ytimg.com/vi/ayb4EKgmYTw/hq720_2.jpg?sqp=-
oaymwEYCMAEENAFSFryq4qpAwoIARUAAIhC0AEB&rs=AOn4CLB4GGZ007HSpwFbOq-
_NvyFbRmMYQ"),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal:
45),
child: CircleAvatar(
radius: 11,
backgroundImage: NetworkImage(

"https://i.ytimg.com/vi/9afqIA_mfKU/hq720_2.jpg?sqp=-
oaymwEYCNAFENAFSFryq4qpAwoIARUAAIhC0AEB&rs=AOn4CLBggkAjNiU5Yu8bRPFuuhUoDcQx
uA"),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal:
70),
child:
Container(
height: 75,
width: 250,
child: Text(
'Liked by'+likedBy+ 'and 1,12,000
ohters',
textScaleFactor: 1, maxLines: 3,
overflow:
TextOverflow.fade,style:TextStyle(color: Colors.white) ,)
)

),

]
),

]
),

Padding(
 padding: const EdgeInsets.symmetric(horizontal: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children:[
Text(handle+' ',style:TextStyle(fontWeight:
FontWeight.bold,color:Colors.white)),
Container(
height: 30,
width: 200,
child:

Text(descrption1,style:TextStyle(color:Colors.white)),
)
]
)
),

Padding(
padding: const EdgeInsets.all( 15),
child: Text(
'View all 441 comments...',
style: TextStyle(color: Colors.grey),)

),

Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal:
15),
child:
Text('@kanish_04 '+ "superb...❤❤❤",style:
TextStyle(color:Colors.white),)

),
Spacer(),
Padding(
padding: const EdgeInsets.all(10),
child: Icon(Icons.favorite_border, size: 10),
),
]
),
Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal:
15),
child:
Text('@harely_queen'+ " vera lvl....🔥
🔥🔥",style:TextStyle(color:Colors.white),)

),
Spacer(),
Padding(
padding: const EdgeInsets.symmetric(horizontal:
20),
 child: Icon(Icons.favorite_border, size: 15),
),
]
),
]
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(10),
child: CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(

"https://therealchamps.com/wp-content/uploads/getty-images/2017/07/94709628
8.jpeg"),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 0),
child:
Text("Add a comment....",
style: TextStyle(color: Colors.grey)),

),
],
)
]
);
}
}