pubspec.yaml
<![CDATA[
cupertino_icons: ^1.0.6
http: ^1.2.1
interpolate_animated: ^0.0.1
intl: ^0.19.0
]]>
main.dart
<![CDATA[
import 'package:flutter/material.dart';
import 'package:weather_app/Screen/weather_home.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: WeatherHome(),
);
}
}
]]>
Services/services.dart
<![CDATA[
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:weather_app/Model/weather_model.dart';
class WeatherServices {
fetchWeather() async {
final response = await http.get(
Uri.parse(
"https://api.openweathermap.org/data/2.5/weather?lat=28.5175&lon=81.7787&appid=509079b22fae7e954dff8403ef5eba0e"),
);
// now we can cange latitude and longitude and let's see how it perfrom.
try {
if (response.statusCode == 200) {
var json = jsonDecode(response.body);
return WeatherData.fromJson(json);
} else {
throw Exception('Failed to load Weather data');
}
} catch (e) {
print(e.toString());
}
}
}
// replace the api key with your api key thay openWeathemap provide you
// for your current location provide the longitude and latitude of your current location
]]>
Screen/weather_home.dart
<![CDATA[
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:weather_app/Model/weather_model.dart';
import 'package:weather_app/Services/services.dart';
class WeatherHome extends StatefulWidget {
const WeatherHome({super.key});
@override
State<WeatherHome> createState() => _WeatherHomeState();
}
class _WeatherHomeState extends State<WeatherHome> {
late WeatherData weatherInfo;
bool isLoading = false;
myWeather() {
isLoading = false;
WeatherServices().fetchWeather().then((value) {
setState(() {
weatherInfo = value;
isLoading = true;
});
});
}
@override
void initState() {
weatherInfo = WeatherData(
name: '',
temperature: Temperature(current: 0.0),
humidity: 0,
wind: Wind(speed: 0.0),
maxTemperature: 0,
minTemperature: 0,
pressure: 0,
seaLevel: 0,
weather: [],
);
myWeather();
super.initState();
}
@override
Widget build(BuildContext context) {
String formattedDate =
DateFormat('EEEE d, MMMM yyyy').format(DateTime.now());
String formattedTime = DateFormat('hh:mm a').format(DateTime.now());
return Scaffold(
backgroundColor: const Color(0xFF676BD0),
body: Padding(
padding: const EdgeInsets.all(15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: isLoading
? WeatherDetail(
weather: weatherInfo,
formattedDate: formattedDate,
formattedTime: formattedTime,
)
: const CircularProgressIndicator(color: Colors.white,),
),
],
),
),
);
}
}
class WeatherDetail extends StatelessWidget {
final WeatherData weather;
final String formattedDate;
final String formattedTime;
const WeatherDetail({
super.key,
required this.weather,
required this.formattedDate,
required this.formattedTime,
});
@override
Widget build(BuildContext context) {
return Column(
children: [
// for current address name
Text(
weather.name,
style: const TextStyle(
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
// for current temperature of my location
Text(
"${weather.temperature.current.toStringAsFixed(2)}°C",
style: const TextStyle(
fontSize: 40,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
// fpr weather condition
if (weather.weather.isNotEmpty)
Text(
weather.weather[0].main,
style: const TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 30),
// for current date and time
Text(
formattedDate,
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
Text(
formattedTime,
style: const TextStyle(
fontSize: 18,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 30),
Container(
height: 200,
width: 200,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/cloudy.png"),
),
),
),
const SizedBox(height: 30),
// for more weather detail
Container(
height: 250,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.wind_power,
color: Colors.white,
),
const SizedBox(height: 5),
weatherInfoCard(
title: "Wind", value: "${weather.wind.speed}km/h"),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.sunny,
color: Colors.white,
),
const SizedBox(height: 5),
weatherInfoCard(
title: "Max",
value:
"${weather.maxTemperature.toStringAsFixed(2)}°C"),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.wind_power,
color: Colors.white,
),
const SizedBox(height: 5),
weatherInfoCard(
title: "Min",
value:
"${weather.minTemperature.toStringAsFixed(2)}°C"),
],
),
],
),
const Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.water_drop,
color: Colors.amber,
),
const SizedBox(height: 5),
weatherInfoCard(
title: "Humidity", value: "${weather.humidity}%"),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.air,
color: Colors.amber,
),
const SizedBox(height: 5),
weatherInfoCard(
title: "Pressure", value: "${weather.pressure}hPa"),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.leaderboard,
color: Colors.amber,
),
const SizedBox(height: 5),
weatherInfoCard(
title: "Sea-Level", value: "${weather.seaLevel}m"),
],
),
],
)
],
),
),
),
],
);
}
Column weatherInfoCard({required String title, required String value}) {
return Column(
children: [
Text(
value,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: 18,
),
),
Text(
title,
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 16,
),
)
],
);
}
}
]]>
Model/weather_model
<![CDATA[
class WeatherData {
final String name;
final Temperature temperature;
final int humidity;
final Wind wind;
final double maxTemperature;
final double minTemperature;
final int pressure;
final int seaLevel;
final List<WeatherInfo> weather;
// i have alreadt create a mode her according to my requirement you can also create mode according to your requiremnet
// if you need like my model all the source code are is in description. you can follow we me.
WeatherData({
required this.name,
required this.temperature,
required this.humidity,
required this.wind,
required this.maxTemperature,
required this.minTemperature,
required this.pressure,
required this.seaLevel,
required this.weather,
});
factory WeatherData.fromJson(Map<String, dynamic> json) {
return WeatherData(
name: json['name'],
temperature: Temperature.fromJson(json['main']['temp']),
humidity: json['main']['humidity'],
wind: Wind.fromJson(json['wind']),
maxTemperature: (json['main']['temp_max'] - 273.15), // Kelvin to Celsius
minTemperature: (json['main']['temp_min'] - 273.15), // Kelvin to Celsius
pressure: json['main']['pressure'],
seaLevel: json['main']['sea_level'] ?? 0,
weather: List<WeatherInfo>.from(
json['weather'].map(
(weather) => WeatherInfo.fromJson(weather),
),
),
);
}
}
class WeatherInfo {
final String main;
WeatherInfo({
required this.main,
});
factory WeatherInfo.fromJson(Map<String, dynamic> json) {
return WeatherInfo(
main: json['main'],
);
}
}
class Temperature {
final double current;
Temperature({required this.current});
factory Temperature.fromJson(dynamic json) {
return Temperature(
current: (json - 273.15), // Kelvin to Celsius
);
}
}
class Wind {
final double speed;
Wind({required this.speed});
factory Wind.fromJson(Map<String, dynamic> json) {
return Wind(speed: json['speed']);
}
}
]]>
MANVIA BLOG