In this tutorial, I will show you how to Create the Home Page UI of Instagram app using Flutter.
Source code
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: Instagram(),
debugShowCheckedModeBanner: false,
));
class Instagram extends StatefulWidget {
@override
_InstagramState createState() => _InstagramState();
}
class _InstagramState extends State<Instagram> {
//Post Urls
List<String> PostUrls = [
"https://images.unsplash.com/photo-1596176375062-9baebbd5a6b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1596240019118-feefa72db0d7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=914&q=80",
"https://images.unsplash.com/photo-1572854874971-d16697d62e24?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEwMDE0M30&auto=format&fit=crop&w=1050&q=80",
"https://images.unsplash.com/photo-1572854875120-d65c8b0a6fbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
"https://images.unsplash.com/photo-1595971138828-ec548f80982a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80",
"https://images.unsplash.com/photo-1596276553750-6ba3a3b3b627?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",
];
//Avatar Urls
List<String> AvatarUrls = [
"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
"https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
"https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"https://images.unsplash.com/photo-1537815749002-de6a533c64db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=845&q=80",
"https://images.unsplash.com/photo-1564923630403-2284b87c0041?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=751&q=80",
"https://images.unsplash.com/photo-1567336273898-ebbf9eb3c3bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=786&q=80",
];
Widget InstaPost(String AvatarUrl,String UserName,String PostUrl){
return Container(
child: Column(
children: <Widget>[
SizedBox(height: 20,),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 30,
backgroundImage:NetworkImage(AvatarUrl) ,
),
SizedBox(width: 10,),
Text(UserName)
],
),
),
SizedBox(height: 10,),
Image.network(PostUrl),
],
),
);
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: Text("Instagram", style: TextStyle(
color: Colors.black,
fontSize: 22.0
),),
centerTitle: true,
actions: <Widget>[
IconButton(
onPressed: (){},
icon: Icon(Icons.camera_alt),
color: Colors.black,
)
],
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0),
child: Column(
children: <Widget>[
//the stories timeline
Container(
height: 110,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 12.0),
child: Text("Stories", textAlign: TextAlign.start,
style: TextStyle(
fontSize: 18.0
),
),
),
Container(
height: 60.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(0.0),
child: CircleAvatar(
radius: 40.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Image.network(AvatarUrls[0]),
),
),
),
Padding(
padding: const EdgeInsets.all(0.0),
child: CircleAvatar(
radius: 40.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Image.network(AvatarUrls[0]),
),
),
),
Padding(
padding: const EdgeInsets.all(0.0),
child: CircleAvatar(
radius: 40.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Image.network(AvatarUrls[1]),
),
),
),
Padding(
padding: const EdgeInsets.all(0.0),
child: CircleAvatar(
radius: 40.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Image.network(AvatarUrls[2]),
),
),
),
Padding(
padding: const EdgeInsets.all(0.0),
child: CircleAvatar(
radius: 40.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Image.network(AvatarUrls[3]),
),
),
),
Padding(
padding: const EdgeInsets.all(0.0),
child: CircleAvatar(
radius: 40.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Image.network(AvatarUrls[4]),
),
),
),
Padding(
padding: const EdgeInsets.all(0.0),
child: CircleAvatar(
radius: 40.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Image.network(AvatarUrls[5]),
),
),
),
],
),
),
SizedBox(height: 10,),
],
),
),
Expanded(
child: ListView(
children: <Widget>[
InstaPost(AvatarUrls[0], "UserName", PostUrls[0]),
InstaPost(AvatarUrls[1], "UserName", PostUrls[1]),
InstaPost(AvatarUrls[2], "UserName", PostUrls[2]),
InstaPost(AvatarUrls[3], "UserName", PostUrls[3]),
InstaPost(AvatarUrls[4], "UserName", PostUrls[4]),
InstaPost(AvatarUrls[5], "UserName", PostUrls[5]),
],
),
)
],
),
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: (
Container(
height: 70,
child: Row(
children: <Widget>[
Expanded(
child: IconButton(
iconSize: 30.0,
icon: Icon(Icons.home,color: Colors.black,),
onPressed: (){},
),
),
Expanded(
child: IconButton(
iconSize: 30.0,
icon: Icon(Icons.search,color: Colors.black,),
onPressed: (){},
),
),
Expanded(
child: IconButton(
iconSize: 30.0,
icon: Icon(Icons.camera_alt,color: Colors.black,),
onPressed: (){},
),
),
Expanded(
child: IconButton(
iconSize: 30.0,
icon: Icon(Icons.favorite,color: Colors.black,),
onPressed: (){},
),
),
Expanded(
child: IconButton(
iconSize: 30.0,
icon: Icon(Icons.person,color: Colors.black,),
onPressed: (){},
),
),
],
),
)
),
),
/*floatingActionButton: FloatingActionButton(
child: Icon(Icons.camera_alt),
onPressed: (){},
),*/
//floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
),
);
}
}
Make an Instagram Clone App Using Flutter
Reviewed by Medics
on
August 02, 2020
Rating:
Reviewed by Medics
on
August 02, 2020
Rating:
No comments: