UI design Flutter lab Project

on

"Study Planner"

Submitted
in the partial fulfilment of the requirements for
the award of the degree of

Bachelor of Technology
in

Computer Science Engineering

by

Mohammed Maaz Alam (22261A05G4)

Shashikanth (20261A05J4)
Under the guidance of

Ms. Kambli Sunitha

(Asst. Professor)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

MAHATMA GANDHI INSTITUTE OF TECHNOLOGY GANDIPET,

HYDERABAD-500 075, INDIA.

2024-25

1
 MAHATMA GANDHI INSTITUTE OF TECHNOLOGY
(Affiliated to Jawaharlal Nehru Technological University Hyderabad)Gandipet, Hyderabad-500 075,
Telangana (India)

CERTIFICATE

This is to certify that the UI design Flutter lab Project entitled "Study Planner", is being
submitted by Mohammed Maaz Alam bearing Roll No: 22261A05G4 and
Shashikanth bearing Roll No:22261A05J4 in partial fulfilment for the award of degree
of Bachelor of Technology in Computer Science and Engineering to Jawaharlal
Nehru Technological University Hyderabad is a record of bona-fide work carried out
by him under our guidance and supervision.
The results embodied in this project have not been submitted to any other
University or Institute for the award of any degree or diploma.

Project Guide Head of the Department

Ms. Kambli Sunitha Dr. C. R. K Reddy

Asst. Professor, Dept. of CSE Professor, Dept. of CSE

2
 Comprehensive Documentation for Flutter Study
Planner

Overview
The Study Planner App is a productivity tool designed specifically for students to help
them stay organized and manage their study tasks effectively. In today’s fast-paced
academic environment, students often juggle multiple assignments, exams, and projects at
the same time. The app provides a simple yet powerful solution for managing these tasks
and deadlines, ensuring that nothing falls through the cracks.

Features
 Task Management: The app allows users to add detailed tasks relatedto their academic

workload. Each task consists of:

 Subject: The name of the subject for which the task is assigned (e.g.,
Mathematics, Physics).
 Description: A brief description or instruction for the task (e.g., "Studychapter
3", "Complete lab report").
 Due Date: A date when the task is due, allowing students to prioritize their
assignments and manage their time effectively.
 Task Overview: Once tasks are added, users can view them in a clear and organized

manner in a list format. The app displays each task’s subject, description, and due date,
providing a quick overview of allupcoming deadlines and study activities.
 Date Picker for Due Dates: The app includes an intuitive date picker feature that lets

users select the due date for their tasks. This ensures accurate scheduling and helps
students track deadlines with ease.
 Cross-Platform Compatibility: Built with Flutter, the app works seamlessly across

both Android and iOS platforms. By using a single codebase, the app provides a
consistent experience on all devices, saving development time while reaching a broader
audience.
 User-Friendly Interface: The app features a simple, clean, and responsive design that

3
allows users to add tasks, view tasks, and interact with the app effortlessly. Key UI
components include text input fields, buttons, and lists, making the app intuitive and easy
to navigate.

Setup and Installation Prerequisites

Ensure you have the following tools installed on your system beforeproceeding:

1. Flutter SDK: Install Flutter.

2. Code Editor: Install either VS Code or Android Studio.
3. Emulator or Physical Device: Set up an Android emulator, iOS simulator,or connect
a physical device.

Why This App is Important?

1. Improved Time Management: The Study Planner App enables students to break down
their academic tasks into manageable steps. With clear deadlines and task descriptions,
students can plan their study time more effectively, reducing procrastination and
avoiding last-minute cramming.

2. Better Organization: By allowing students to organize their tasks by subject and due
date, the app provides an efficient way to prioritizeacademic responsibilities. The task
list acts as a visual reminder, making iteasier to keep track of what needs to be done.

3. Stress Reduction: Having a clear, organized view of upcoming tasks and deadlines can
significantly reduce the stress that comes with managing multiple assignments. With
this app, students can feel confident in their ability to meet deadlines and stay on top of
their workload.

4
 Technologies Used
1. Flutter:
 Flutter is a cross-platform development framework developed by Google. It allows
developers to write a single codebase that works across multiple platforms, such as
Android, iOS, Web, and Desktop.
 Flutter enables the development of visually appealing, high-performance applications
with a smooth and consistent user experience, regardless of the platform.
2. Dart:
 Dart is the programming language used to write Flutter applications. It is optimized
for performance and supports object-oriented programming, making it ideal for
building robust and maintainable applications.
 Dart’s clean syntax and modern features like asynchronous programming

help in creating fast, responsive applications.

5
Code Explanation

1. _addTask() Function
Purpose: This function collects the user's input for the subject, description,and due date of
a task, and adds a new task to the list of tasks (_tasks).

Functionality:

Step 1: Retrieve the user’s input for the subject and description from
_subjectController and _descriptionController.
Step 2: Check if any input fields (subject, description, due date) areempty or not.
If any are empty, exit the function without adding a task.
Step 3: Create a ne w T a s k o bje c t w it h t he inp u t t e d s u bje c t , de s c r ipt io n
a nd s e le c t ed d ue d at e.

Step 4: Add the new Task object to the _tasks list.

Step 5: Clear the input fields and reset _dueDate to null, preparing theform for the
next task.
Step 6: Call setState() to update the UI, so the newly added task appearsin the list.

void _addTask() {

final String subject = _subjectController.text;

final String description = _descriptionController.text;

if ([Link] || [Link] || _dueDate == null) return;
setState(() {

_tasks.add(Task(subject, description, _dueDate!));

});
_subjectController.clear();

_descriptionController.clear();

_dueDate = null;

}
6
2. (BuildContext context) Function
Purpose: The build function constructs the user interface of the StudyPlannerHome widget
based on the current state of the app.

Functionality:
 AppBar: Displays a title at the top of the screen.
 Body: Contains a Column with several UI components:
 TextFields: TextField widgets for the user to input the subject and
description of each task.
 Due Date Selection: A Text widget displays the selected due date (or a default message
if no date is chosen), and a TextButton allows users to open the date picker by calling
_selectDueDate.
 Add Task Button: An ElevatedButton that, when pressed, calls _addTaskto save the
task.
 Task List: An Expanded widget containing a [Link] that dynamically
displays the list of tasks stored in _tasks. Each task is shown as a ListTile with the
subject, description, and due date.

@override

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(

title: Text("Study Planner"),

),

body: Padding(

padding: [Link](16.0),

child: Column(
children: [
TextField(

7
controller: _subjectController,

decoration: InputDecoration(labelText: 'Subject'),

),

TextField(

controller: _descriptionController,

decoration: InputDecoration(labelText: 'Description'),

),
Row(
children: [
Text(
_dueDate == null
? 'No date chosen!'
: 'Due Date: ${_dueDate.toString().split(' ')[0]}',
),
TextButton(
onPressed: () => _selectDueDate(context),
child: Text('Choose Date'),
),
],
),
ElevatedButton( onPressed:
_addTask, child: Text('Add
Task'),
),
Expanded(
child: [Link](
itemCount: _tasks.length,
itemBuilder: (context, index) {
final task = _tasks[index];
return ListTile(
title: Text([Link]),
subtitle: Text('${[Link]}\nDue:${[Link]().split(' ')[0]}'),
);
},

8
 ),
),
],
),

3. _selectDueDate(BuildContext context) Function

Purpose: Opens a date picker to allow the user to select a due date for the task.

Functionality:
Step 1: Display a date picker using the showDatePicker function, which opens
dialog for the user to select a date.
Step 2: If the user picks a date, it stores the selected date in _dueDate.
Step 3: Calls setState() to update the UI, so the selected date displays in the Row with the
“Choose Date” button.

Future<void> _selectDueDate(BuildContext context) async {

final DateTime? pickedDate = await showDatePicker(
context: context,
initialDate: [Link](),
firstDate: [Link](),
lastDate: DateTime([Link]().year + 1),

);

if (pickedDate != null) {
setState(() {
_dueDate = pickedDate;

});

9
Output:

10
Conclusion
The Study Planner App serves as a practical solution for students who need help organizing
their academic tasks. By offering a simple interface for managing assignments, setting
deadlines, and organizing tasks by subject, the app ensures students remain on top of their
workload. With its cross-platform support, user- friendly design, and powerful
functionality, this app is an indispensable tool for students who want to stay organized and
productive.

11
12
13