1

DEPARTMENT OF COMPUTER &

SOFTWARE ENGINEERING
COLLEGE OF E&ME, NUST, RAWALPINDI

Mobile App Development for SMBs

Lab Number 6

SUBMITTED TO:
LE MA’AM KASHAF

SUBMITTED BY:
Abdurrafay Bin Khurram
Reg # 282912
DE- 41 Dept B

Submission Date: Apr 2, 2023

 2

Tasks:

Add functionality to insert images in the app and also add a button to
change images while in the app.

pubspec.yaml:

flutter:

# The following line ensures that the Material Icons font is

# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true

# To add assets to your application, add an assets section, like this:

assets:
- assets/images/

folder structure:
 3

main.dart:

class _MyHomePageState extends State<MyHomePage> {

int _counter = 0;
Image _image = Image.asset('assets/images/sample1.png');

void _setImage()
{
setState(() {
if (_counter == 0) _counter = 5;
if (_counter == 6) _counter = 1;
_image = Image.asset('assets/images/sample$_counter.png');
});
}
void _setPreviousImage()
{
setState(() {
_counter--;
});
_setImage();
}
void _setNextImage()
{
setState(() {
_counter++;
});
_setImage();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
 4

child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 400,
child: _image,
),
SizedBox.square(dimension: 20,),
Text(
'Loaded Sample Image#$_counter',
style: TextStyle(fontSize: 28),
),
],
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: _setNextImage,
child: const Icon(Icons.add),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: _setPreviousImage,
child: const Icon(Icons.horizontal_rule),
)
],
)
);
}
}
 5

Application: