Flutter Assignment 02

Bano Qabil

CODE:
main.dart:
import 'package:flutter/material.dart';
import 'MyHomePage.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
 home: const MyHomePage(title: 'Instagram Clone'),
);
}
}

MyHomePage.dart

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key, required this.title});

final String title;

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

final List<String> postImages = [
'https://images.unsplash.com/photo-1593642532973-
d31b6557fa68',
 'https://images.unsplash.com/photo-1506748686214-
e9df14d4d9d0',
'https://images.unsplash.com/photo-1547721064-da6cfb341d50',
'https://images.unsplash.com/photo-1498050108023-
c5249f4df085',
'https://images.unsplash.com/photo-1518770660439-
4636190af475',
'https://images.unsplash.com/photo-1565373672673-
2bede35a5fb1',
'https://images.unsplash.com/photo-1510812431401-
41d2bd2722f3',
'https://images.unsplash.com/photo-1517245386807-
bb43f82c33c4',
'https://images.unsplash.com/photo-1521747116042-
5a810fda9664'
];

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
title: Text(
widget.title,
 style: const TextStyle(
color: Colors.black, fontWeight: FontWeight.bold, fontSize:
24),
),
centerTitle: true,
leading: const Icon(Icons.camera_alt, color: Colors.black),
actions: [
IconButton(
icon: const Icon(Icons.send, color: Colors.black),
onPressed: () {},
),
],
elevation: 0,
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
itemCount: postImages.length,
itemBuilder: (BuildContext context, int index) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
 Row(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image.network(
'https://img.freepik.com/premium-vector/businessman-
avatar-illustration-cartoon-user-portrait-user-profile-icon_118339-
4382.jpg',
height: 40,
width: 40,
),
),
const SizedBox(
width: 10,
),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Umer',
style: TextStyle(
fontWeight: FontWeight.w600, fontSize: 14),
),
 Text(
'Just Now',
style: TextStyle(color: Colors.grey, fontSize: 12),
),
],
),
const Spacer(),
Icon(
Icons.more_vert,
color: Colors.black.withOpacity(0.7),
)
],
),
const SizedBox(
height: 10,
),
Image.network(
postImages[index],
fit: BoxFit.cover,
width: double.infinity,
height: 400,
),
 const SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
IconButton(
icon: const Icon(Icons.thumb_up_off_alt, color:
Colors.black),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.comment, color: Colors.black),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.share, color: Colors.black),
onPressed: () {},
),
],
 ),
IconButton(
icon: const Icon(Icons.bookmark_border, color:
Colors.black),
onPressed: () {},
),
],
),
const SizedBox(
height: 10,
),
const Text(
'This is the detail of the post, please check this out before
you leave...',
style: TextStyle(color: Colors.black),
),
const Divider(),
],
);
},
),
),
bottomNavigationBar: BottomNavigationBar(
 type: BottomNavigationBarType.fixed,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home, color: Colors.black),
label: '',),
BottomNavigationBarItem(
icon: Icon(Icons.search, color: Colors.black),
label: '', ),
BottomNavigationBarItem(
icon: Icon(Icons.add_box, color: Colors.black),
label: '', ),
BottomNavigationBarItem(
icon: Icon(Icons.favorite, color: Colors.black),
label: '', ),
BottomNavigationBarItem(
icon: Icon(Icons.person, color: Colors.black),
label: '',), ],
onTap: (index) {
// Handle bottom navigation item tap
},
),);}}
Output: