The weather app in Flutter is the easiest to create, Today we will create a Weather app in Flutter.
How to create a weather app in Flutter?
We will use the openweathermap.com API to create our weather app. The source code is available on Github, Link is at the end of the article.
So let’s start
Also, Read- 3D Carousel in CSS
Step 1:
First, we will use the “flutter create weatherapp” command to create our flutter app.
Step 2:
Now, we will add two packages to our flutter app.
- weather
- geolocator
Open pubspec.yaml file add both packages and save.
Now, run the “flutter pub get” command go get our packages.
Step 3:
Now, we will create constants.dart file and add our open weather API key.
String apiKey = "Paste your API key here";Step 4:
Now we will write the below code to the main.dart file.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:geolocator/geolocator.dart';
import 'package:weather/weather.dart';
import 'package:weatherapp/utils/constants.dart';
void main() {
runApp(const WeatherApp());
}
class WeatherApp extends StatelessWidget {
const WeatherApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
late LocationPermission permission;
String cityName = "new york";
WeatherFactory weatherFactory = WeatherFactory(apiKey);
late Future<Weather> weather;
@override
void initState() {
weather = _getWeatherData(cityName);
super.initState();
}
Future<Weather> _getWeatherData(String city) async {
_getPosition();
Position position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
double lat = position.latitude;
double log = position.longitude;
//Weather weather = await weatherFactory.currentWeatherByCityName(city);
Weather weather = await weatherFactory.currentWeatherByLocation(lat, log);
return weather;
}
Future<Position> _getPosition() async {
bool serviceEnabled;
LocationPermission permission;
// Test if location services are enabled.
serviceEnabled = await Geolocator.isLocationServiceEnabled();
if (!serviceEnabled) {
// Location services are not enabled don't continue
// accessing the position and request users of the
// App to enable the location services.
return Future.error('Location services are disabled.');
}
permission = await Geolocator.checkPermission();
if (permission == LocationPermission.denied) {
permission = await Geolocator.requestPermission();
if (permission == LocationPermission.denied) {
// Permissions are denied, next time you could try
// requesting permissions again (this is also where
// Android's shouldShowRequestPermissionRationale
// returned true. According to Android guidelines
// your App should show an explanatory UI now.
return Future.error('Location permissions are denied');
}
}
if (permission == LocationPermission.deniedForever) {
// Permissions are denied forever, handle appropriately.
return Future.error(
'Location permissions are permanently denied, we cannot request permissions.');
}
// When we reach here, permissions are granted and we can
// continue accessing the position of the device.
return await Geolocator.getCurrentPosition();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.only(top: 20),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage(
"assets/bg.jpg",
),
fit: BoxFit.cover,
),
),
child: RefreshIndicator(
onRefresh: () => _getWeatherData(cityName),
child: Stack(
children: [
ListView(),
FutureBuilder<Weather>(
future: weather,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Container(
padding: const EdgeInsets.all(15),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.3),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.white,
),
),
child: Row(
children: [
Column(
children: [
Container(
width: 200,
alignment: Alignment.topLeft,
child: Text(
"${snapshot.data?.areaName}"
.toUpperCase(),
textAlign: TextAlign.left,
style: const TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
const SizedBox(
height: 50,
),
Container(
width: 200,
alignment: Alignment.bottomLeft,
padding: const EdgeInsets.all(0),
child: Text(
"${snapshot.data?.temperature}",
textAlign: TextAlign.left,
maxLines: 2,
style: const TextStyle(
color: Colors.white,
fontSize: 50,
fontWeight: FontWeight.w500,
),
),
),
],
),
Container(
width: 105,
alignment: Alignment.bottomRight,
child: RotatedBox(
quarterTurns: -45,
child: Text(
"${snapshot.data?.weatherMain}",
textAlign: TextAlign.left,
style: const TextStyle(
fontSize: 20,
color: Colors.white,
),
),
),
),
],
),
),
const SizedBox(
height: 350,
),
Container(
alignment: Alignment.bottomCenter,
width: 350,
height: 100,
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.3),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.white,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
alignment: Alignment.center,
child: Text(
"${snapshot.data?.humidity}%\nHumidity",
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
),
),
),
Container(
alignment: Alignment.center,
child: Text(
"${snapshot.data?.windSpeed} m/s\nVelocity",
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
),
),
),
Container(
alignment: Alignment.center,
child: Text(
"${snapshot.data?.pressure} Pa\nPressure",
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
),
),
),
],
),
),
],
),
);
} else {
return Container(
alignment: Alignment.center,
child: const Text("Loading..."),
);
}
},
),
],
),
),
),
);
}
}
And you have created a weather app.
The source code is available on Github.
If you find this post helpful then please share and comment.
