Sir Syed C@SE Institute of Technology, Islamabad

Final Paper – Fall 2023

CS3103 Smart Application Development

Total Marks: 100 Time Allowed: 3.0 Hr
“Understanding the question is the part of exam”

Take a look at the Code that follows for Questions 1,2 and 3. Carefully read and analyze the
following code, then fill in the gaps as indicated by questions 1,2 and 3 below.
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

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

class MyHomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Exam Home'),
),
drawer: Drawer(
child: ListView(
children: [
// Added code with different color
ListTile(
title: Text('Settings'),
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Settings tapped!'),

Page 1 of 4
 ),
);
},
),
],
),
),
body: Form(
// Added code with different color
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Added code with different color
TextFormField(
decoration: InputDecoration(
labelText: 'Enter your name',
),
),
SizedBox(height: 20),
// Added code with different color
RaisedButton(
onPressed: () {
// TODO: Implement form submission logic.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Form submitted!'),
),
);
},
child: Text('Submit'),
),
],
),
),
);
}
}

1 Drawer ListTile: 10
Task: Add a ListTile with the title "Settings" that shows a SnackBar when tapped.
Question:Explain how you would modify the code to include a ListTile in the Drawer with
the title "Settings" and implement functionality to display a SnackBar when this ListTile is
tapped. Provide the necessary code snippets and describe any additional logic or methods
you might use.
10
Page 2 of 4
2 Form Widget and TextFormField:
Task:Add a Form widget and a TextFormField to collect the user's name.
Question:Describe the steps you would take to integrate a Form widget into the existing
code, and add a TextFormField within it to collect the user's name. Provide the relevant code
snippets and explain any properties or methods you would use for form validation or
customization.

3 RaisedButton: 10
Task:Add a RaisedButton to submit the form and show a SnackBar.
Question: Outline the modifications needed in the code to insert a RaisedButton within the
Column widget. Specify the actions or events associated with the RaisedButton to submit the
form and display a SnackBar. Include the relevant code snippets and explain any callback
functions or methods involved in this process.

Take a look at the Code that follows for Question 4. Carefully read and analyze the following
code, then fill in the gaps as indicated by question 4 below.

Add a GestureDetector to the ListTile with title "Settings" to show a SnackBar on tap.
GestureDetector(
onTap: () {

ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Settings tapped with GestureDetector!'),
),
);

},
child: ListTile(
title: Text('Settings'),
4 ),
),

GestureDetector in Drawer ListTile: 10

Task: Add a ListTile with the title "Settings" that shows a SnackBar when tapped, utilizing
GestureDetector for the interaction.
Question: Describe how you would integrate a GestureDetector to the ListTile in the Drawer
with the title "Settings." Provide the code snippets, including the GestureDetector
implementation, and explain any specific properties or methods used to handle the tap
gesture and display a SnackBar upon tapping.

Page 3 of 4
 Take a look at the Code that follows for Questions 5 and 6. Carefully read and analyze the
following code, then fill in the gaps as indicated by questions 5 and 6 below.

body: Form(
// TODO: Add a Form widget here.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// TODO: Add a TextFormField here to collect the user's name.
TextFormField(
decoration: InputDecoration(
labelText: 'Name',
),
),
SizedBox(height: 20),
// TODO: Add a RaisedButton here with an animation effect to submit the form and
show a SnackBar.
RaisedButton(
onPressed: () {
// TODO: Implement the code to submit the form and display a SnackBar.
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Form Submitted!'),
),
);
},
child: Text('Submit'),
// TODO: Add an animation effect to the RaisedButton when pressed.
splashColor: Colors.blueAccent, // Example animation effect
),
],
),
),

5 Form Widget with TextFormField 10

Task: Add a Form widget and a TextFormField to collect the user's name.

Question: Provide the code snippets for incorporating a Form widget and a TextFormField
for collecting the user's name within the given Column widget. Additionally, describe any
relevant properties or methods used for form validation, if applicable.

6 RaisedButton with Animation Effect 10

Task: Add a RaisedButton with an animation effect to submit the form and show a
SnackBar.
Question: Provide the code snippets for adding a RaisedButton within the given Column
widget. Implement an animation effect (e.g., fade-in or scale) to the RaisedButton when
pressed. Also, describe how you would implement the code to submit the form and display a
SnackBar upon pressing the RaisedButton.
Page 4 of 4
7 Write a Dart code that have a Dart function which accepts an integer parameter representing 10
a person's age. Inside the function, use conditional statements (if-else) to check if the person
is eligible to vote (age 18 or older). Print a message indicating whether the person can vote or
not. Provide a sample function call to demonstrate your code.

10
void checkVotingEligibility(int age) {
if (age >= 18) {
print('You are eligible to vote!');
} else {
print('You are not eligible to vote yet. Wait until you turn 18.');
}
}

void main() {
// Sample function call
int personAge = 20;
checkVotingEligibility(personAge);
}
10

10
Write Dart code to transform the given list 'temperatures' into a new list
8
'convertedTemperatures' where each element is the temperature converted from Celsius to
Fahrenheit. The conversion formula is F = (C * 9/5) + 32, where F is Fahrenheit and C is
Celsius.
void main() {
List<double> temperatures = [0.0, 15.5, 30.0, -5.5, 10.0];
List<double> convertedTemperatures = [];

// Convert temperatures from Celsius to Fahrenheit

for (double celsius in temperatures) {
double fahrenheit = (celsius * 9 / 5) + 32;
convertedTemperatures.add(fahrenheit);
}

print('Original Temperatures: $temperatures');

print('Converted Temperatures: $convertedTemperatures');
}

Elaborate on the significance of state management in Flutter. Explain the difference between
9
StatefulWidget and StatelessWidget. Provide a simple code example demonstrating how to
manage and update state in a Flutter widget.

Page 5 of 4
Significance of State Management in Flutter:

Involves handling mutable data for a responsive UI.

Flutter provides StatefulWidget and StatelessWidget.
StatefulWidget:

Can change its internal state.

Consists of StatefulWidget and State classes.
Mutable data in the State triggers widget rebuilds.
StatelessWidget:

Immutable, no mutable state.

Used for static parts of the UI.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) => MaterialApp(home: MyStatefulWidget());
}

class MyStatefulWidget extends StatefulWidget {

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

int counter = 0;

void _incrementCounter() => setState(() => counter++);

@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: Text('Stateful Widget Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Counter Value:'),
Text('$counter', style: TextStyle(fontSize: 40)),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',

Page 6 of 4
 child: Icon(Icons.add),
),
);
}

10 Describe the hierarchy of Flutter widgets and their relationship in building a Flutter user
interface? Provide an example of a simple widget hierarchy.

Widget Hierarchy in Flutter:

Flutter UI is built with a widget tree.

Widgets create elements, managed by the framework.
Elements create render objects for layout and painting.

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter Widget Hierarchy')),
body: Center(child: MyButton()),
),
);
}

class MyButton extends StatelessWidget {

@override
Widget build(BuildContext context) => ElevatedButton(
onPressed: () {
// Button pressed logic
},
child: Text('Press Me'),
);
}

** The End **

Page 7 of 4