MACRO UI DESIGN FLUTTER PROJECT REPORT

ON
WEATHER APP
Submitted By

G.VARSHA (22W91A6630)
Under the guidance of
Mr. 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

1
 CERTIFICATE

This is to certified that the project report titled “WEATHER APP USING UI DESIGN
FLUTTER” is being carried by G.VARSHA (22W91A6630), 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: _______________________

2
 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 Mr. B. RAJA RAO and internal
guide Mr. 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 my project.

G.Varsha (22W91A6630)

3
 TABLE OF CONTENTS

Sl.no Contents Page No

1 Abstract 5

2 Introduction 6

3 System Requirements 7

4 Existing System 8-9

5 Implementation 10-11

6 Source Code 12-20

7 Output 21-22

8 Conclusion 23

9 References 24

4
 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.

5
 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 conditions

6
 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.

7
 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.

8
5.Backend and Security (Optional):
-An optional backend server may be used to handle API requests securely, manage
sensitive data (like the API key), and reduce the risk of exposing keys in the client-
side code.
- Backend could also handle caching of data for performance improvement and store user
preferences.

6.Error Handling:
- Provides error messages for invalid city names, network issues, or API failures
(e.g., “City not found” or “No Internet Connection”).
- Graceful handling of edge cases to ensure a smooth user experience under various
Conditions

9
 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.

10
The app parses this JSON data and extracts the necessary information to display on the UI.
For instance, you can show the temperature in Celsius, the weather condition (e.g., “clear
sky”), and an icon representing the condition.

4. Displaying Dynamic Data: Once the data is fetched and parsed, the app should display
it dynamically. This involves linking the backend (API) data to the frontend (UI). Tools
like Future Builder in Flutter allow you to show a loading indicator while waiting for the
data. Once the data is available, the app updates the UI automatically.
Incorporating error handling is important. For example, if the user enters an invalid city
name or there’s a network error, the app should display a user-friendly error message.

5. Adding Features: To make the app more functional and engaging, consider adding
extra features:
Search Bar: Allow users to search for weather data in different cities.
Weather Forecast: Provide a 5-day forecast to give users an idea of future weather
conditions.
Themes: Use dynamic themes (e.g., light for daytime and dark for nighttime) based on the
current time or weather conditions.

6. Testing and Deployment: Before releasing the app, test it on multiple devices and
screen sizes to ensure it performs well. Address any bugs or UI glitches. Once testing is
complete, optimize the app for production and build it for Android and iOS. Publish the
app on the Google Play Store and Apple App Store, following their respective guidelines.

11
 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),

12
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(() {

13
_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,

14
),
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!,
),

15
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) {

16
 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),
),
);
}

17
// 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),

18
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,
),

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

20
7.OUTPUT

21
22
 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.

23
 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/)

6. Google Codelabs: Building Apps with Flutter

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

24