UI design Flutter lab Project

on

"Stay updated with accurate, real-time weather forecasts

anytime, anywhere."

Submitted

in the partial fulfilment of the requirements forthe award of the degree

of

Bachelor of Technology

in

Computer Science Engineering

by

Muskan (22261A05G7)

Roshan Zameer (22261A05J3)

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.

2023-24
 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 "Stay
updated with accurate, real-time weather forecasts anytime, anywhere.",
is being submitted by Muskan bearing Roll No: 22261A05G7 and Roshan
Zameer bearing Roll No :22261A05J3 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

i
 DECLARATION

This is to certify that the work reported in this project titled “Stay updated
with accurate, real-time weather forecasts anytime, anywhere.” is a
record of work done by me in the Department of Computer Science and
Engineering, Mahatma Gandhi Institute of Technology, Hyderabad.
No part of the work is copied from books, journals, or the internet, and
wherever a portion is taken, the same has been duly referred to in the text.
The report is based entirely on my original work and is not copied from
any other source.

Muskan

(22261A05G7)

Roshan Zameer
(22261A05J3)

ii
 Comprehensive Documentation for Flutter Weather
Forecast App
Introduction
The Flutter Weather Forecast App is a robust mobile application designed
to provide users with accurate, real-time weather updates. It integrates with the
OpenWeather API to fetch live weather data and displays it in a user-friendly
interface. The app showcases weather conditions, temperature, humidity, wind
speed, and dynamic weather icons, providing a visually engaging experience.
This documentation provides a detailed overview of the project's features,
setup process, code structure, and functionality.

Features
The application comes with a range of features aimed at enhancing user
experience and ensuring accurate weather information:
• Real-Time Weather Update: Retrieves current weather conditions for any
location using the OpenWeather API.
• Location Information: Displays the name of the city or area.
• Dynamic Weather Icons: Shows weather-specific icons (e.g., sunny, cloudy,
rainy) fetched dynamically based on the weather condition.
• Detailed Weather Information:Displays temperature (current, minimum, and
maximum), humidity, wind speed, and weather description.
• Date and Time: Shows the current date and time in a human-readable format.
• Responsive Design: The app layout is adaptive and works well across various
screen sizes.
• Loading State: Provides a loading spinner while fetching weather data to ensure
smooth user experience.

4
 Setup and Installation Prerequisites
Ensure you have the following tools installed on your system before
proceeding:
• Flutter SDK: Install Flutter.
• Code Editor: Install either VS Code or Android Studio.
• Emulator or Physical Device: Set up an Android emulator, iOS simulator, or
connect a physical device.
Installation Steps
Configure API Key: Open the consts.dart file and replace the placeholder
API key with your actual OpenWeather API key:
dart
const OPENWEATHER_API_KEY = "YOUR_API_KEY";
Run the Application: Execute the app on an emulator or connected device:
flutter run

Application Structure Directory Layout

/lib
├── consts.dart # Stores API keys and constants
├── main.dart # Entry point of the application
├── pages/
└── home_page.dart # Implements the main app interface.

5
 Code Explanation
1. main.dart:
The entry point of the application initializes the app and sets up theming.
void main() { runApp(const MyApp());
}
class MyApp extends StatelessWidget { const MyApp({super.key});
@override
Widget build(BuildContext context) { return MaterialApp(
title: 'Weather App', theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const HomePage(),
);
}
}

2. Home Page: The HomePage widget serves as the main screen.

home_page.dart
The HomePage widget is the heart of the application. It handles fetching
and displaying weather data.
Fetching Weather Data dart
final WeatherFactory _wf =
WeatherFactory(OPENWEATHER_API_KEY);
@override
void initState() { super.initState();
_wf.currentWeatherByCityName("Hyderabad").then((w) { setState(() {
_weather = w;
});
6
 });
}
• WeatherFactory: A class from the weather package to fetch weather data.
• initState: Fetches weather information when the app starts. Building
the UI
The UI is built dynamically based on the weather data. dart
Widget _buildUI() {
if (_weather == null) { return const Center(
child: CircularProgressIndicator(),
);
}
return Column( children: [
_locationHeader(),
_dateTimeInfo(),
_weatherIcon(),
_currentTemp(),
_extraInfo(),
],
);
}
• Loading State: Displays a spinner if weather data is not yet available.
• Dynamic Widgets: Calls helper functions (_locationHeader, _weatherIcon,
etc.) to create modular UI components.

7
 UI Components
1. Location Header: Displays the name of the location. dart
Widget _locationHeader() { return Text(
_weather?.areaName ?? "", style: const TextStyle( fontSize: 20,
fontWeight: FontWeight.w500,
),
);
}
2. Date and Time: Formats and displays the current date and time. dart
Widget _dateTimeInfo() { DateTime now = _weather!.date!; return
Column(
children: [ Text(
DateFormat("h:mm a").format(now), style: const TextStyle(fontSize: 35),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,

children: [ Text(
DateFormat("EEEE").format(now),
style: const TextStyle(fontWeight: FontWeight.w700),
),
Text(" ${DateFormat("d.M.y").format(now)}"),
],
),
],
);
}

8
3. Weather Icon: Fetches and displays a weather-specific icon. dart
Widget _weatherIcon() { return Container( height: 100,
decoration: BoxDecoration( image: DecorationImage( image:
NetworkImage(
"http://openweathermap.org/img/wn/${_weather?.weatherIcon}@4x.png",
),
),
),
);
}
4. Current Temperature: Displays the current temperature in Celsius. dart
Widget _currentTemp() { return Text(
"${_weather?.temperature?.celsius?.toStringAsFixed(0)}° C", style: const
TextStyle(
fontSize: 90,
fontWeight: FontWeight.w500,
),
);
}
5. Additional Information: Provides max/min temperatures, wind speed, and
humidity.

Widget _extraInfo() { return Container(

padding: const EdgeInsets.all(8.0), child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
Text("Max: ${_weather?.tempMax?.celsius?.toStringAsFixed(0)}° C"),
Text("Min: ${_weather?.tempMin?.celsius?.toStringAsFixed(0)}° C"),
Text("Wind: ${_weather?.windSpeed?.toStringAsFixed(0)}m/s"),
Text("Humidity: ${_weather?.humidity?.toStringAsFixed(0)}%"),],),);}

9
 Dependencies
Include these in pubspec.yaml: yaml
dependencies: flutter:
sdk: flutter intl: ^0.17.0 weather: ^3.0.0
API Integration
API Details
• Base URL: http://api.openweathermap.org/data/2.5/
• Icon URL: http://openweathermap.org/img/wn/{icon_code}@4x.png
• Adding API Key
• Replace the placeholder in consts.dart: dart
• const OPENWEATHER_API_KEY = "YOUR_API_KEY";

Future Enhancements
• Add support for hourly and weekly forecasts.

10