Scribd
Upload
11 views17 pages

Mad Lab 06 023

The document outlines a series of tasks related to mobile application development using Flutter, focusing on image handling techniques. Each task includes a problem statement and a corresponding solution in Dart code, covering topics such as displaying multiple images, fixed-size images, circular images, images with borders, background images, image changing functionality, and loading images from the internet. The document serves as a practical guide for implementing these features in a mobile app.

Uploaded by

Maaz Anwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views17 pages

Mad Lab 06 023

The document outlines a series of tasks related to mobile application development using Flutter, focusing on image handling techniques. Each task includes a problem statement and a corresponding solution in Dart code, covering topics such as displaying multiple images, fixed-size images, circular images, images with borders, background images, image changing functionality, and loading images from the internet. The document serves as a practical guide for implementing these features in a mobile app.

Uploaded by

Maaz Anwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

MOBILE APPLICATION DEVELOPMENT

Lab 6

Submitted By: Maaz Anwar

{SP22-BSE-023}

Class: BSE-7A

Submitted To: Shuja’at Hussain

MARCH 21, 2025


Comsats University Islamabad
Unsolved Activities:
Task 1: Add Multiple Images in a Column

Problem:

• Add three different images to your app and stack them vertically using a Column.

• Images should be stored inside an images folder.

Ans: import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Lab 6 Image Tasks"),
backgroundColor: Colors.blueAccent,
),
body: Container(
padding: EdgeInsets.all(16),
color: Colors.grey[200],
child: Center(
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Image Gallery",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.blueAccent,
),
),
SizedBox(height: 10),
Image.asset("assets/images/image1.jpg", width: 250, height:
150, fit: BoxFit.cover),
SizedBox(height: 10),
Image.asset("assets/images/image2.jpg", width: 250, height:
150, fit: BoxFit.cover),
SizedBox(height: 10),
Image.asset("assets/images/image3.jpg", width: 250, height:
150, fit: BoxFit.cover),
],
),
),
),
),
),
);
}
}

OUTPUT:
Task 2: Display an Image with a Fixed Size
Problem:

• Show an image on the screen with a fixed width of 150 pixels and a height of 200
pixels.

Ans: import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Task 2: Fixed Size Image"),
backgroundColor: Colors.blueAccent,
),
body: Center(
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Fixed Size Image",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.blueGrey,
),
),
SizedBox(height: 10),
Image.asset(
"assets/images/image1.jpg",
width: 150,
height: 200,
),
],
),
),
),
),
);
}
}

Output:
Task 3: Display an Image Inside a Circle

Problem:

• Show an image inside a circular frame.

Ans: import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Task 3: Image Inside a Circle"),
backgroundColor: Colors.blueAccent,
),
body: Center(
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Circular Image",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.blueGrey,
),
),
SizedBox(height: 10),
CircleAvatar(
radius: 75,
backgroundImage: AssetImage("assets/images/image1.jpg"),
),
],
),
),
),
),
);
}
}

OUTPUT:
Task 4: Add a Border Around the Image

Problem:

• Display an image with a red border of 5 pixels.

ANS: import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Task 4: Image with Border"),
backgroundColor: Colors.blueAccent,
),
body: Center(
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Image with Red Border",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.blueGrey,
),
),
SizedBox(height: 10),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 5),
),
child: Image.asset(
"assets/images/image1.jpg",
width: 150,
height: 200,
fit: BoxFit.cover,
),
),
],
),
),
),
),
);
}
}
OUTPUT:

Task 5: Set an Image as Background

Problem:

• Set an image as the background of the screen.

ANS: import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("ASSETS/images/image1.jpg"),
fit: BoxFit.cover,
),
),
child: Center(
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Background Image Example",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.blueGrey,
),
),
SizedBox(height: 10),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 5),
),
child: Image.asset(
"ASSETS/images/image2.jpg",
width: 150,
height: 200,
fit: BoxFit.cover,
),
),
],
),
),
),
),
),
);
}
}

OUTPUT:

Task 6: Add a Button to Change the Image

Problem:

• Add two images and a button. When you click the button, the image should change.

ANS: import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


String currentImage = "assets/images/image1.png";

void changeImage() {
setState(() {
currentImage = currentImage == "assets/images/image1.jpg"
? "assets/images/image2.jpg"
: "assets/images/image1.jpg";
});
}

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image1.jpg"),
fit: BoxFit.cover,
),
),
child: Center(
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Change Image Example",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.blueGrey,
),
),
SizedBox(height: 10),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 5),
),
child: Image.asset(
currentImage,
width: 150,
height: 200,
fit: BoxFit.cover,
),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: changeImage,
child: Text("Change Image"),
),
],
),
),
),
),
),
);
}
}
OUTPUT:

Task 7: Load an Image from the Internet

Problem:

• Display an image from a URL instead of using local assets.

ANS: import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {


@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


String currentImage = "assets/images/image1.jpg";

void changeImage() {
setState(() {
currentImage = currentImage == "assets/images/image1.jpg"
? "assets/images/image2.jpg"
: "assets/images/image1.jpg";
});
}

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image1.png"),
fit: BoxFit.cover,
),
),
child: Center(
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.8),
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 3,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Load Image from Internet",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.blueGrey,
),
),
SizedBox(height: 10),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 5),
),
child: Image.network(
"https://www.shutterstock.com/shutterstock/photos/219824502
9/display_1500/stock-photo-autumn-nature-landscape-lake-bridge-in-fall-forest-
path-way-in-gold-woods-romantic-view-image-2198245029.jpg",
width: 150,
height: 200,
fit: BoxFit.cover,
),
),
],
),
),
),
),
),
);
}
}

OUTPUT:

You might also like