Ui Project Report
Ui Project Report
ON
WEATHER APP
Submitted By
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.
EXTERNAL EXAMINER
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 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.
III
TABLE OF CONTENTS
1 Abstract 1
2 Introduction 2
3 System Requirements 3
4 Existing System 4
5 Implementation 5
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:
SOFTWARE REQUIREMENTS:
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.
4
5.IMPLEMENTATION
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
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
10
return Future.error('Location permissions are denied');
}
}
if (permission == LocationPermission.deniedForever) {
return Future.error(
'Location permissions are permanently denied, we cannot request permissions.');
}
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.
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
5. *Flutter by Example
Step-by-step tutorials on Flutter projects, including working with APIs and building UIs.
Website: (https://flutterbyexample.com/)
17