Bahria University Islamabad

Department of Computer Science

Lab Journal 4

Name: CHAUDHARY AMMAZ HUSSAIN

Enrollment No: 01-134222-037

Class & Section: BSCS-6B

--------------------------------------------------

Course: Mobile App Development Lab

Objective
To design different screens of a Flutter application using custom widgets and implement
navigation between them.

Tools Used
- IDE: Visual Studio Code
- Language: Dart (Flutter Framework)

Implementing Custom Widgets and Screens

Main Entry Point (main.dart)

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

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

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Lab 4 Flutter App',
theme: ThemeData(
primarySwatch: Colors.blue,
 ),
home: const HomeScreen(),
);
}
}

Home Screen (home_screen.dart)

import 'package:flutter/material.dart';
import 'screen1.dart';
import 'screen2.dart';

class HomeScreen extends StatelessWidget {

const HomeScreen({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Home Screen")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomButton(
text: "Go to Screen 1",
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const
Screen1()),
);
},
),
const SizedBox(height: 20),
CustomButton(
text: "Go to Screen 2",
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const
Screen2()),
);
},
),
],
),
),
);
}
}

class CustomButton extends StatelessWidget {

final String text;
final VoidCallback onPressed;

const CustomButton({super.key, required this.text, required

this.onPressed});

@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical:
15),
),
child: Text(text),
);
}
}

Screen 1 (screen1.dart)
import 'package:flutter/material.dart';

class Screen1 extends StatelessWidget {

const Screen1({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Screen 1")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
"Welcome to Screen 1",
style: TextStyle(fontSize: 20, fontWeight:
FontWeight.bold),
),
const SizedBox(height: 20),
Image.network(
'https://source.unsplash.com/200x200/?nature',
width: 200,
height: 200,
fit: BoxFit.cover,
),
 ],
),
),
);
}
}

Screen 2 (screen2.dart)
import 'package:flutter/material.dart';

class Screen2 extends StatefulWidget {

const Screen2({super.key});

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

class _Screen2State extends State<Screen2> {

final _formKey = GlobalKey<FormState>();
final TextEditingController nameController = TextEditingController();
final TextEditingController emailController = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Screen 2 - Form")),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: nameController,
decoration: const InputDecoration(
labelText: "Enter your name",
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return "Name is required";
}
return null;
},
),
const SizedBox(height: 20),
TextFormField(
controller: emailController,
 decoration: const InputDecoration(
labelText: "Enter your email",
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return "Email is required";
}
return null;
},
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text("Form Submitted")),
);
}
},
child: const Text("Submit"),
),
],
),
),
),
);
}
}

Conclusion
• The application was successfully implemented using Flutter and Dart.
• Custom widgets were used to simplify code reuse.
• Navigation between screens was achieved using Navigator.push().
• Form validation was implemented in Screen 2.