[go: up one dir, main page]

0% found this document useful (0 votes)
16 views21 pages

Ui Project Report

The document is a project report for a Weather App developed using Flutter, which provides real-time weather data through the OpenWeatherMap API. It outlines the app's features, system requirements, implementation steps, and includes source code examples. The project aims to deliver a user-friendly interface optimized for both Android and iOS platforms, enhancing the user experience with accurate and accessible weather information.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
16 views21 pages

Ui Project Report

The document is a project report for a Weather App developed using Flutter, which provides real-time weather data through the OpenWeatherMap API. It outlines the app's features, system requirements, implementation steps, and includes source code examples. The project aims to deliver a user-friendly interface optimized for both Android and iOS platforms, enhancing the user experience with accurate and accessible weather information.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

MACRO UI DESIGN FLUTTER PROJECT REPORT

ON
WEATHER APP
Submitted By

JAYA VISHNU PRIYA (22W91A6620)


Under the guidance of
Dr. B. RAJA RAO
Assistant Professor
Department Of Computer Science and Engineering (AIML&DS)
To
JAWAHARLAL NEHRU TECHNOLOGICAL UNIVERSITY
HYDERABAD
In partial fulfilment of the requirements for the award of degree
Of
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING(AIML)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING (AIML&DS)

MALLA REDDY INSTITUTE OF ENGINEERING & TECHNOLOGY


(UGC Autonomous)

HYDERABAD

2024-2025

I
CERTIFICATE

This is to certified that the project report titled “WEATHER APP USING UI DESIGN
FLUTTER” is being carried by JAYA VISHNU PRIYA (22W91A6620), respectively in B.Tech
III Year I semester in Computer Science and Engineering (Artificial Intelligence & Machine
Learning) is a record bonafide work carried out by me. The results embodied in this report are clear
and genuine.

INTERNAL GUIDE HOD

EXTERNAL EXAMINER

Date of Viva-Voice Examination held on: _______________________

II
ACKNOWLEDGEMENT

First and foremost, I am grateful to the Principal Dr. P. SRINIVAS, for providing me with all
the resources in the college to make my project a success. I thank him for his valuable suggestions
at the time of seminars which encouraged me to give my best in the project.

I would like to express my gratitude to Dr. M. NARENDHAR, Head of the Department,


Department of Computer Science and Engineering (AIML&DS) for his support and valuable
suggestions during the dissertation work.

I offer my sincere gratitude to my project - coordinator Dr. B. RAJA RAO and internal guide
Dr. B. RAJA RAO, Assistant Professor of Computer Science and Engineering (AIML&DS)
department who has supported me throughout this project with their patience and valuable
suggestions.

I would also like to thank all the supporting staff of the Dept. of CSE (AIML&DS) and all other
departments who have been helpful directly or indirectly in making the project a success.

I am extremely grateful to my parents for their blessings and prayers for my completion of
project that gave me strength to do our project.

JAYA VISHNU PRIYA (22W91A6620)

III
TABLE OF CONTENTS

Sl.no Contents Page No

1 Abstract 1

2 Introduction 2

3 System Requirements 3

4 Existing System 4

5 Implementation 5

6 Source Code 6-14

7 Output 15

8 Conclusion 16

9 References 17

IV
1. ABSTRACT

The Weather App, crafted using Flutter, offers users a seamless and efficient way to
access real-time weather data from around the world, powered by the OpenWeatherMap
API. By simply entering a city name, users can instantly retrieve vital weather information
such as current temperature, humidity, wind speed, and detailed weather conditions like
sunny, cloudy, or rainy. The app presents this data in an intuitive, clean, and visually
engaging interface, designed to enhance the user experience with easy navigation and quick
access to information. Fully optimized for both Android and iOS platforms, the app ensures
smooth, responsive performance across all devices. With its focus on speed, accuracy, and
user-friendliness, the app allows users to stay informed about weather conditions anytime
and anywhere, making it an essential tool for daily use. Its integration of real-time data with
a polished, cross-platform design delivers a powerful, reliable, and enjoyable weather-
checking experience.

1
2. INTRODUCTION

The Weather App, developed using Flutter, provides users with an efficient and easy
way to access real-time weather data from any location around the world. By leveraging the
OpenWeatherMap API, the app fetches accurate weather information, including
temperature, humidity, wind speed, and weather conditions such as sunny, cloudy, or rainy.
This allows users to stay informed and make weather-dependent decisions on the go.
The app features a simple, user-friendly interface where users can quickly search for
any city and retrieve detailed weather data. Once the city is entered, the app displays the
latest weather conditions in a clear, visually appealing format, ensuring that users can easily
understand the information without unnecessary complexity. The design is focused on
usability, offering a smooth and intuitive experience for all users.
Built with Flutter, the app is optimized for both Android and iOS platforms, ensuring
that it works seamlessly on a wide range of devices. Flutter’s cross-platform capabilities
allow for consistent performance and functionality across both mobile operating systems,
providing users with a unified experience regardless of the device they are using. The app is
fast, responsive, and designed to handle varying screen sizes and orientations.
In terms of responsiveness, the app’s layout adapts to different screen sizes, ensuring
that it looks great on devices of all shapes and sizes, from phones to tablets. This makes the
Weather App highly versatile, catering to a wide range of user preferences and ensuring an
enjoyable experience for everyone. Whether at home, traveling, or on the move, users can
easily access weather information at their convenience.
Overall, the Weather App is a reliable and practical tool for anyone needing quick
access to weather updates. Its integration of real-time data from OpenWeatherMap, cross-
platform functionality, and user-centric design make it a powerful weather tracking solution.
The app is ideal for users who want to check weather conditions effortlessly and make
informed decisions based on current weather condition.

2
3. SYSTEM REQUIREMENTS

HARDWARE REQUIREMENTS:

Processor : At least 2 GHz, dual-core or higher


RAM : Minimum 4 GB (8 GB or higher recommended)
Storage : At least 10 GB of free disk space.
Graphics : GPU with OpenGL 3.3 support

SOFTWARE REQUIREMENTS:

Operating System : Windows 10 or later (64-bit).


Flutter SDK : Latest stable version
Dart SDK : Comes pre-installed with Flutter.
Android SDK : Required for Android development Studio.
Xcode : Required for iOS development (macOS only).
Emulators : Android Virtual Device (AVD) for Android apps.
Real Devices : Optional, for testing on physical Android or iOS devices.
Libraries : http for API requests.

3
4. EXISTING SYSTEM

An existing system for a Weather App using the OpenWeatherMap API generally
includes several key components and features that work together to provide users with
accurate, real-time weather information. These systems are designed to be both efficient and
user-friendly, leveraging the capabilities of modern technologies such as the Flutter
framework and APIs for live data retrieval.
1. OpenWeatherMap API Integration:
- Fetches real-time weather data like temperature, humidity, wind speed, and weather
- Requires an API key for authentication to make requests.
- Provides data based on city name or geolocation (latitude and longitude).

2. Flutter Framework:
- Cross-platform development framework that ensures the app works seamlessly on both
- Uses Dart programming language for building the app.
- Allows for responsive and interactive UIs with customizable widgets.

3. User Interface (UI):


- Simple and intuitive design for easy city search and display of weather information.
- Weather data displayed clearly (temperature, wind speed, humidity) with relevant icons.
- Dynamic updates for real-time weather, with icons representing weather conditions (sun,
rain, etc.).

4.Geolocation (Optional Feature):


- Fetches weather based on the user's current location using GPS.
-Uses geolocation libraries (e.g., geolocator package) in Flutter to detect the user’s
coordinates (latitude, longitude).
-Automatically provides weather data for the user's current location without needing
to search for a city.

4
5.IMPLEMENTATION

A weather app is a practical project that demonstrates how to build a dynamic


application capable of fetching and displaying real-time weather information. By leveraging
Flutter, a cross-platform framework, we can design a modern, responsive interface that
works seamlessly on both Android and iOS devices. This guide explains the step-by-step
process of creating a weather app, from project setup to deployment.

1.Setting Up the Environment: The first step is to prepare your development environment.
Install Flutter from its official website and set it up on your system. Use an integrated
development environment (IDE) like Visual Studio Code or Android Studio and ensure the
Flutter and Dart plugins are installed. Once your environment is ready, create a new Flutter
project using the terminal.

2. Designing the User Interface: The user interface is where the weather data will be
displayed. Start by planning the layout. The home screen typically showcases the current
temperature, weather condition (e.g., sunny, cloudy, rainy), and location. You can design a
simple and appealing interface using Flutter widgets.
Consider including:
A weather icon (like a sun for sunny weather).
A prominent display of the current temperature.
The name of the location.
Additional data like humidity, wind speed, and a brief weather description.
Ensure that the design is responsive and adapts to various screen sizes. For a better user
experience, use appropriate colors and themes that align with the current weather condition.

3. Fetching Weather Data: To provide real-time weather information, the app must fetch
data from a weather API. When a user opens the app, a request is sent to the API with the
specified location. The API responds with data in JSON format, containing details such as
temperature, weather condition, wind speed, and humidity.

5
6.SOURCE CODE

1.get the apiKey


const String apiKey = “paste-your-api-key-here”

2 Building simple UI with Stateful widget


FutureBuilder(
builder: (ctx, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
// if data has errors
if (snapshot.hasError) {
return Center(
child: Text(
'${snapshot.error.toString()} occurred',
style: TextStyle(fontSize: 18),
),
);

// if data has no errors


} else if (snapshot.hasData) {
// Extracting data from snapshot object
final data = snapshot.data as WeatherModel;
return Container(
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment(0.8, 1),

6
colors: <Color>[
Color.fromARGB(255, 65, 89, 224),
Color.fromARGB(255, 83, 92, 215),
Color.fromARGB(255, 86, 88, 177),
Color(0xfff39060),
Color(0xffffb56b),
],
tileMode: TileMode.mirror,
),
),
width: double.infinity,
height: double.infinity,
child: SafeArea(
child: Column(
children: [
AnimSearchBar(
rtl: true,
width: 400,
color: Color(0xffffb56b),
textController: textController,
suffixIcon: Icon(
Icons.search,
color: Colors.black,
size: 26,
),
onSuffixTap: () async {
textController.text == ""
? log("No city entered")
: setState(() {

7
_myData = getData(false, textController.text);
});

FocusScope.of(context).unfocus();
textController.clear();
},
style: f14RblackLetterSpacing2,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.location_on,
color: Colors.white,
),
Text(
data.city,
style: f24Rwhitebold,
),
],
),
height25,
Text(
data.desc,
style: f16PW,

8
),
height25,
Text(
"${data.temp}°C",
style: f42Rwhitebold,
),
],
),
),
],
),
),
);
}
} else if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else {
return Center(
child: Text("State ${snapshot.connectionState}"),
);
}
return Center(
child: Text("Server timed out!"),
);
},
future: _myData!,
),

9
3. http — to make http request to the api
var url = Uri.https('api.openweathermap.org', '/data/2.5/weather',
{'q': cityName, "units": "metric", "appid": apiKey});
final http.Response response = await http.get(url);
4.geolocator package and geocoding package to get the current location of the user

Position position = await getCurrentPosition();


if (current) {
List<Placemark> placemarks = await placemarkFromCoordinates(
position.latitude, position.longitude);
Placemark place = placemarks[0];
cityName = place.locality!;
}

Future<Position> getCurrentPosition() async {


bool serviceEnabled;
LocationPermission permission;

serviceEnabled = await Geolocator.isLocationServiceEnabled();


if (!serviceEnabled) {
return Future.error('Location services are disabled.');
}
permission = await Geolocator.checkPermission();
if (permission == LocationPermission.denied) {
permission = await Geolocator.requestPermission();
if (permission == LocationPermission.denied) {

10
return Future.error('Location permissions are denied');
}
}

if (permission == LocationPermission.deniedForever) {
return Future.error(
'Location permissions are permanently denied, we cannot request permissions.');
}

return await Geolocator.getCurrentPosition(


desiredAccuracy: LocationAccuracy.best,
);
}

5. Using FutureBuilder to call the api asynchronously


getData(bool isCurrentCity, String cityName)
Future<WeatherModel> getData(bool isCurrentCity, String cityName) async {
return await CallToApi().callWeatherAPi(isCurrentCity, cityName);
}
if (snapshot.connectionState == ConnectionState.done) {
// if error encountered
if (snapshot.hasError) {
return Center(
child: Text(
'${snapshot.error.toString()} occurred',
style: TextStyle(fontSize: 18),
),
);
}

11
// if data has no error
else if (snapshot.hasData) {
// Extracting data from snapshot object
final data = snapshot.data as WeatherModel;
return Container(
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment(0.8, 1),
colors: <Color>[
Color.fromARGB(255, 65, 89, 224),
Color.fromARGB(255, 83, 92, 215),
Color.fromARGB(255, 86, 88, 177),
Color(0xfff39060),
Color(0xffffb56b),
],
tileMode: TileMode.mirror,
),
),
width: double.infinity,
height: double.infinity,
child: SafeArea(
child: Column(
children: [
AnimSearchBar(
rtl: true,
width: 400,
color: Color(0xffffb56b),

12
textController: textController,
suffixIcon: Icon(
Icons.search,
color: Colors.black,
size: 26,
),
onSuffixTap: () async {
textController.text == ""
? log("No city entered")
: setState(() {
_myData = getData(false, textController.text);
});

FocusScope.of(context).unfocus();
textController.clear();
},
style: f14RblackLetterSpacing2,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.location_on,
color: Colors.white,
),

13
Text(
data.city,
style: f24Rwhitebold,
),
],
),
height25,
Text(
data.desc,
style: f16PW,
),
height25,
Text(
"${data.temp}°C",
style: f42Rwhitebold,
),
],
),
),
],
),
),
);
}
}

14
7.OUTPUT

15
8.CONCLUSION

Developing a weather app using Flutter is a practical and engaging project that
showcases the capabilities of modern app development. It integrates multiple aspects of
software development, including designing a user-friendly interface, working with APIs to
fetch real-time data, and managing dynamic content. Flutter’s cross-platform compatibility
allows developers to create an app that functions seamlessly on both Android and iOS with
a single codebase, saving time and effort.

The app’s functionality goes beyond simply displaying weather information. By


incorporating features such as location-based weather data, search functionality, and
forecasts, it can provide a rich user experience. The addition of themes and icons enhances
the visual appeal, making the app more interactive and engaging. Furthermore, robust error
handling ensures that the app remains user-friendly, even in cases of network issues or
invalid input.

This project also serves as a learning opportunity for developers to gain hands-on
experience in integrating external APIs, managing state, and implementing asynchronous
programming in Flutter. Testing and deploying the app further demonstrate the importance
of optimization and ensuring compatibility across devices.

16
9.REFERENCES

1. Flutter Official Documentation*


Provides comprehensive guides and best practices for building apps with Flutter.
Website: (https://flutter.dev/docs)

2. *OpenWeatherMap API Documentation*


Details on how to fetch weather data, including API key registration and endpoint usage.
Website: ( https://openweathermap.org/api)

3. *Dart Packages (pub.dev)*


Repository for Flutter packages like http for API requests and provider for state
management.
Website: (https://pub.dev)

4. *Weather API Documentation


An alternative weather data API with features for forecasts and historical data.
Website: (https://www.weatherapi.com/docs/)

5. *Flutter by Example
Step-by-step tutorials on Flutter projects, including working with APIs and building UIs.
Website: (https://flutterbyexample.com/)

5. Google Codelabs: Building Apps with Flutter


Interactive tutorials by Google to learn Flutter development basics and advanced techniques.
Website: (https://codelabs.developers.google.com/)

17

You might also like