flutter_weather_bg

A rich and cool weather dynamic background plug-in, supporting 15 weather types.

Used by SimplicityWeather to render weather backgrounds. If you want to try the app directly, download the APK here.

Features

15 weather types: sunny, sunny night, cloudy, cloudy night, overcast, light/middle/heavy rain, light/middle/heavy snow, foggy, hazy, dusty and thunder
Dynamic width/height — the scene adapts automatically
Smooth cross-fade transition when the weather type changes
Pure Dart implementation (no native code); renders with CustomPainter on Flutter canvas

Supported platforms

Platform	Status
Android	✅
iOS	✅
Web	✅
macOS	✅
Windows	Not tested
Linux	Not tested

Requirements

Flutter >= 3.0.0
Dart SDK >= 3.0.0 < 4.0.0 (null-safety)

Installation

Available on pub.dev. Add the dependency to your pubspec.yaml:

dependencies:
  flutter_weather_bg: ^3.1.0

Then run:

flutter pub get

And import it wherever you need:

import 'package:flutter_weather_bg/flutter_weather_bg.dart';

Usage

Drop a WeatherBg into your widget tree, and pass the desired weatherType together with a width and a height:

import 'package:flutter/material.dart';
import 'package:flutter_weather_bg/flutter_weather_bg.dart';

class WeatherDemo extends StatelessWidget {
  const WeatherDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WeatherBg(
        weatherType: WeatherType.thunder,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
      ),
    );
  }
}

Switching weatherType at runtime will automatically trigger a cross-fade animation.

A full demo (covering PageView, ListView, GridView, size animation and type switching) lives in example/.

Preview

Regular PageView effect

home

ListView effect

list

GridView effect with a dynamically-switchable column count

grid

Dynamic size demonstration

width_height

Weather type cross-fade transition

transition

Contributing

Issues and pull requests are welcome — feel free to open one on the issue tracker.

If you want to run the example locally:

git clone https://github.com/xiaweizi/flutter_weather_bg.git
cd flutter_weather_bg/example
flutter pub get
flutter run              # or: flutter run -d chrome