Building a Weather App with Flutter and Weatherbit API13 min read

Introduction to Weather App Development

In today’s digital age, weather apps have become an essential tool for millions of people worldwide. Whether you’re planning a trip, preparing for the day, or simply curious about the forecast, a well-designed weather app can provide real-time updates with ease. This blog dives deep into the process of building a weather app using Flutter, a popular cross-platform framework, and the Weatherbit API, a robust weather data provider. This project is perfect for beginners and intermediate developers looking to enhance their skills in Flutter weather app development while integrating real-time weather data.

The journey of creating this mobile weather app begins with understanding the tools and technologies involved. Flutter offers a rich set of widgets and a hot reload feature, making it ideal for rapid prototyping and development. On the other hand, the Weatherbit API provides accurate and comprehensive weather information, which we’ll fetch and display dynamically. By the end of this guide, you’ll have a fully functional weather app that showcases current weather conditions with a user-friendly interface.

Project Overview

This Flutter weather app is designed to fetch and display current weather conditions for any city entered by the user. The app leverages the Weatherbit Current Weather API to retrieve data such as temperature, humidity, wind speed, and weather descriptions. One of the standout features is its responsive UI, which adapts to different weather conditions with background images like foggy, sunny, or rainy scenes. This project also includes error handling and a clean design, making it an excellent choice for a college project or a personal portfolio piece.

The app allows users to input a city name, and it displays the corresponding weather details in a card format. Screenshots of the app in action—such as a foggy day in Lucknow or a sunny day in Raleigh—demonstrate its visual appeal and functionality. Let’s explore how to build a weather app from scratch using the provided code and setup instructions.

Prerequisites for Building the Weather App

Before diving into the development process, ensure you have the following prerequisites installed:

• Flutter SDK: Version 3.0.0 or higher is recommended for this project.
• Dart: Version 2.17.0 or higher to support the latest Flutter features.
• Weatherbit API Key: Sign up for a free account at Weatherbit to obtain an API key.
• IDE: Use Android Studio, Visual Studio Code, or any IDE that supports Flutter development.
• Dependencies: The project relies on packages like http for API requests, geolocator for location services (optional), and flutter_dotenv for secure API key management.

With these tools in place, you’re ready to start weather app development. The next step is to set up your development environment and clone the project repository.

Setting Up the Project

To begin, clone the repository from GitHub using the following command:

git clone https://github.com/Arpit980jai/curremtweather
cd curremtweather

Once cloned, install the required dependencies by running:

flutter pub get

This command fetches all the packages listed in the pubspec.yaml file, including http, geolocator, and flutter_dotenv. Next, configure your Weatherbit API key by creating a .env file in the project root directory. Add your API key as follows:

WEATHERBIT_API_KEY=your_api_key_here

Ensure the .env file is added to your .gitignore to prevent exposing your API key publicly. Finally, connect a device or emulator and run the app with:

flutter run

This setup process lays the foundation for a smooth Flutter tutorial experience as you build a weather app.

Project Structure

Understanding the project structure is crucial for navigating and modifying the code. Here’s a breakdown of the key files:

• lib/main.dart: The entry point of the application, where the app is initialized.
• lib/models/weatherDataModel.dart: Defines the data model for weather data.
• lib/services/WeatherService.dart: Handles API requests to fetch weather data.
• lib/screens/WeatherView.dart: The main screen for displaying weather information.
• .env: Stores the Weatherbit API key securely.
• pubspec.yaml: Lists project dependencies and assets.

The provided screenshots, such as the foggy day in Lucknow and the sunny day in Raleigh, are stored in the assets folder and dynamically loaded based on weather conditions. This structure ensures a modular and maintainable codebase for weather app development.

Integrating the Weatherbit API

The Weatherbit API is the backbone of this weather app. It provides real-time weather data through simple HTTP requests. To use the free tier, sign up at the Weatherbit website and obtain your API key. The free plan offers a limited number of API calls per day (typically 500), making it ideal for testing and learning.

Here’s how to make API requests:

• Base URL: https://api.weatherbit.io/v2.0/current
• Required Parameter: key=your_api_key
• Example by City: https://api.weatherbit.io/v2.0/current?city=Raleigh,NC&key=your_api_key
• Example by Coordinates: https://api.weatherbit.io/v2.0/current?lat=35.7796&lon=-78.6382&key=your_api_key

Optional parameters include units (M for Metric, I for Imperial, S for Scientific) and lang (e.g., en for English). The include=minutely parameter adds minutely forecast data but counts as an additional request.

The WeatherService.dart file in the project handles these requests. It uses the http package to fetch data and parses the JSON response into a WeatherDataModel object. The code includes error handling for cases like invalid API keys or network issues, ensuring a robust real-time weather data experience.

Designing the User Interface

The UI of this mobile weather app is built using Flutter’s widget system, offering a modern and interactive design. The WeatherView.dart file defines a StatefulWidget that manages the app’s state, including user input and weather data.

The interface features:

• An AppBar with the title “Weather App” and a blue background.
• A TextField for entering the city name, with a clear button and location icon.
• A Card widget displaying weather details like city, temperature, and condition.
• A dynamic background image that changes based on the weather condition (e.g., foggy.jpg for fog, sunny.jpg for clear skies).

The getBackgroundImage() function determines the appropriate image based on the weather description, enhancing the app’s visual appeal. This responsive design makes the Flutter weather app engaging and user-friendly.

Code Walkthrough

Let’s explore the key code files with insights from the provided screenshots and documents.

• main.dart: Initializes the app and loads the .env file for the API key.

import 'package:curremtweather/ViewModel/WeatherView.dart';
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

Future<void> main() async {
  await dotenv.load(fileName: ".env");
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple)),
      home: const Weatherview(),
      debugShowCheckedModeBanner: false,
    );
  }
}

• WeatherService.dart: Fetches weather data from the Weatherbit API.

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:curremtweather/Model/weatherDataModel.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';

class WeatherService {
  static String? _apiKey = dotenv.env['WEATHERBIT_API_KEY'];

  Future<List<WeatherDataModel>> getCurrentWeather(String city) async {
    if (_apiKey == null) throw Exception('API key not found in .env');
    final response = await http.get(Uri.parse('https://api.weatherbit.io/v2.0/current?city=$city&key=$_apiKey&include=minutely'));
    if (response.statusCode == 200) {
      final json = jsonDecode(response.body) as Map<String, dynamic>;
      if (json['data'] == null) throw Exception('No data found in API response');
      final dataList = json['data'] as List<dynamic>;
      return dataList.map((item) => WeatherDataModel.fromJson(item)).toList();
    } else {
      throw Exception('Failed to load weather data: ${response.statusCode} - ${response.body}');
    }
  }
}

• WeatherView.dart: Manages the UI and data fetching.

import 'package:curremtweather/Model/weatherDataModel.dart';
import 'package:curremtweather/View/WeatherService.dart';
import 'package:flutter/material.dart';

class Weatherview extends StatefulWidget {
  @override
  State<Weatherview> createState() => _WeatherviewState();
}

class _WeatherviewState extends State<Weatherview> {
  final WeatherService weatherService = WeatherService();
  List<WeatherDataModel> weatherData = [];
  TextEditingController cityName = TextEditingController();

  Future<void> fetchWeatherData(String city) async {
    if (city.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Please enter a city name')));
      return;
    }
    try {
      var data = await weatherService.getCurrentWeather(city);
      setState(() => weatherData = data);
    } catch (e) {
      setState(() => weatherData = []);
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Failed to load weather data: $e')));
    }
  }

  @override
  void initState() {
    super.initState();
    fetchWeatherData("Raleigh");
  }

  String getBackgroundImage() {
    if (weatherData.isNotEmpty) {
      String weatherCondition = weatherData[0].weather.description.toLowerCase();
      if (weatherCondition.contains('fog')) return 'assets/foggy.jpg';
      if (weatherCondition.contains('clear') || weatherCondition.contains('sunny')) return 'assets/sunny.jpg';
      return 'assets/partlyCloudy.jpg';
    }
    return 'assets/sunny.jpg';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Weather App", style: TextStyle(color: Colors.white)), backgroundColor: Colors.blue[700]),
      body: Stack(
        children: [
          Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage(getBackgroundImage()), fit: BoxFit.cover, colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.5), BlendMode.dstATop)))),
          Center(child: Container(padding: const EdgeInsets.all(16.0), child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            Container(decoration: BoxDecoration(borderRadius: BorderRadius.circular(10.0), color: Colors.black38), child: TextField(controller: cityName, decoration: InputDecoration(hintText: "Enter City Name", prefixIcon: const Icon(Icons.location_city, color: Colors.white), suffixIcon: IconButton(icon: const Icon(Icons.clear, color: Colors.white), onPressed: () { setState(() { cityName.clear(); weatherData.clear(); }); }), border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0), borderSide: BorderSide(color: Colors.white)), enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0), borderSide: BorderSide(color: Colors.white)), focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0), borderSide: BorderSide(color: Colors.white)), hintStyle: TextStyle(color: Colors.white70)), style: const TextStyle(color: Colors.white), onSubmitted: (value) => value.isNotEmpty ? fetchWeatherData(cityName.text) : null)),
            const SizedBox(height: 20),
            if (weatherData.isNotEmpty) Card(color: Colors.black54, elevation: 8, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)), child: Padding(padding: const EdgeInsets.all(16.0), child: Column(mainAxisSize: MainAxisSize.min, children: [
              Text('City: ${weatherData[0].cityName}', style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white)),
              const SizedBox(height: 10),
              Text('Temp: ${weatherData[0].temp}°C', style: const TextStyle(fontSize: 20, color: Colors.white)),
              Text('Condition: ${weatherData[0].weather.description}', style: const TextStyle(fontSize: 20, color: Colors.white)),
            ]))) else const CircularProgressIndicator(color: Colors.white),
          ]))),
        ],
      ),
    );
  }
}

These code snippets, combined with the project screenshots, illustrate how to build a weather app with a focus on modularity and user experience.

Testing and Debugging

Testing is a critical part of weather app development. Use the Flutter DevTools to monitor performance and debug issues. The app includes basic error handling, such as displaying a snack bar for invalid city names or API failures. Test the app with different cities (e.g., Lucknow, Raleigh) to ensure the real-time weather data updates correctly.

Enhancing the Weather App

To take this project further, consider adding features like:

• Location-based weather using geolocator.
• Support for multiple languages using the lang parameter.
• A settings page to switch between Metric and Imperial units.

These enhancements can make your Flutter weather app more versatile and appealing to a broader audience.

Conclusion

Building a weather app with Flutter and the Weatherbit API is a rewarding project that combines front-end development with API integration. This guide has walked you through the setup, code implementation, and UI design, supported by screenshots and detailed explanations. Whether you’re following a Flutter tutorial or working on a personal project, this weather app development journey offers valuable insights and practical skills.

For more resources, refer to the Weatherbit API documentation and explore the GitHub repository. Contributions are welcome, for support. Start building your own mobile weather app today and unleash your creativity!