PackRuble/weather_animation

telegram_badge pub_badge configurator_badge repo_star_badge license_badge code_size_badge

all_scenes

🌇 weather_animation

Create weather scenes and animate as your heart desires. Simple and free.

Try the Weathunits configurator for setting weather scenes directly in the WEB!

Put an https://pub.dev/static/hash-ffjootqp/img/like-active.svg on Pub and favorite ⭐ on GitHub to keep up with changes and not miss new releases!

Motivation

• 🎨 colorful weather scenes without using gif/png and stuff source
• 🆓 free license for use in your projects (including commercial ones)
• 🎛 easy creation of scenes and easy customization when needed
• 🌅 configurator for easy creation of weather scenes
• 😅 enjoy yourself and you with another fun package

Table of Contents

• 🌇 weather_animation
• Motivation
• Table of Contents
• How to use simply?
  • Use WeatherScene
  • Use WrapperScene
  • Use weather_configurator app
• Library structure
  • Configuration files ...Config
  • About WrapperScene
  • About BackgroundWidget
• Author
• Additional information

How to use simply?

Import the library:

import 'package:weather_animation/weather_animation.dart';

Use WeatherScene

Check the provided list of ready-made weather scenes in the WeatherScene enumeration and select the desired one through the getter:

@override
Widget build(BuildContext context) {
  return WeatherScene.sunset.sceneWidget;
}

or for more customization, use WrapperScene.weather:

@override
Widget build(BuildContext context) {
  return WrapperScene.weather(scene: WeatherScene.sunset);
}

Use WrapperScene

Specify a list of weather widgets and a list of colors to create a beautiful background gradient:

@override
Widget build(BuildContext context) {
  return const WrapperScene(
      colors: [
        Color(0xff283593),
        Color(0xffff8a65),
      ],
      children: [
        SunWidget(),
        CloudWidget(),
        WindWidget(),
      ],
    );
}

If necessary, specify a configuration file to fine-tune the weather widget:

// ...
SunWidget(
  sunConfig: SunConfig(
    width: 262.0,
    blurSigma: 10.0,
    blurStyle: BlurStyle.solid,
    isLeftLocation: true,
    coreColor: Color(0xffffa726),
    midColor: Color(0xd6ffee58),
    outColor: Color(0xffff9800),
    animMidMill: 2000,
    animOutMill: 1800,
  ),
),
// ...

Use weather_configurator app

• online in web → Weathunits configurator
• offline after build project on your gadget (path example/weathunits_configurator. Learn more here)

https://raw.githubusercontent.com/PackRuble/weather_animation/HEAD/example/weathunits_configurator/assets/weather_configurator_screen.png

Library structure

The only point of using the library is to import the following file:

import 'package:weather_animation/weather_animation.dart';

The following weather widgets are available:

Widget weather	A configuration class
CloudWidget	CloudConfig
RainWidget RainDropWidget*	RainConfig
SnowWidget SnowflakeWidget*	SnowConfig
SunWidget	SunConfig
ThunderWidget SingleThunderWidget*	ThunderConfig
WindWidget	WindConfig

💡Tip: Widgets under * represent a single weather item. Use these when another Stack setting is required.

Each weather widget accepts an optional configuration parameter to fine-tune the widget.

Configuration files ...Config

• have correctly toString, operator ==, hashCode
• have a copyWith method to clone the object
• have de/serialization handling (toJson and fromJson). Note: not all fields
• are inherited from class WeatherConfig

About WrapperScene

Also, there is a WrapperScene widget for quick scene adjustment, which allows you to scale the weather scene relative to the specified canvas dimensions. Has a clipper and scene widget decoration.

About BackgroundWidget

The BackgroundWidget class allows you to create a color background in the form of a linear gradient. Specify the desired colors and you're done.

Author

You can contact me or check out my activities on the following platforms:

• Github
• Telegram
• StackOverflow
• Medium
• Habr

Additional information

Made with ❤️. Enjoy it!

---

🏷 tags: weather, animation, weather conditions, weather scenes