weather_icons_animated 0.0.2

Flutter package for Meteocons weather icons with animated SVG, static SVG, outlined monochrome SVG, and Lottie assets.

example/lib/main.dart

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

void main() {
  runApp(const WeatherIconsExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'weather_icons_animated',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFBE6A3F)),
        scaffoldBackgroundColor: const Color(0xFFF6F1E8),
        useMaterial3: true,
      ),
      home: const WeatherIconsHomePage(),
    );
  }
}

class WeatherIconsHomePage extends StatefulWidget {
  const WeatherIconsHomePage({super.key});

  @override
  State<WeatherIconsHomePage> createState() => _WeatherIconsHomePageState();
}

class _WeatherIconsHomePageState extends State<WeatherIconsHomePage> {
  static const List<int> _weatherCodes = <int>[0, 1, 3, 45, 51, 61, 71, 95, 99];

  int _selectedCode = 61;
  bool _isDay = true;
  WeatherIconStyle _style = WeatherIconStyle.fill;
  WeatherIconFormat _format = WeatherIconFormat.svgAnimated;

  @override
  Widget build(BuildContext context) {
    final icon = WeatherIcons.fromOpenMeteoCode(_selectedCode, isDay: _isDay);
    final asset = icon.resolve(style: _style, format: _format);

    return Scaffold(
      appBar: AppBar(title: const Text('weather_icons_animated')),
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(28),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                const Text(
                  'Open-Meteo weather code demo',
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.w700),
                ),
                const SizedBox(height: 8),
                Text(
                  'Code $_selectedCode resolves to "${icon.name}" and then picks '
                  'the best matching asset for $_style + $_format.',
                ),
                const SizedBox(height: 20),
                Center(
                  child: WeatherIcon(
                    icon: icon,
                    style: _style,
                    format: _format,
                    size: 120,
                  ),
                ),
                const SizedBox(height: 16),
                Center(
                  child: SelectableText(
                    asset.path,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontWeight: FontWeight.w600),
                  ),
                ),
              ],
            ),
          ),
          const SizedBox(height: 16),
          _ControlCard(
            title: 'Weather code',
            child: Wrap(
              spacing: 8,
              runSpacing: 8,
              children: _weatherCodes.map((int code) {
                return ChoiceChip(
                  label: Text('$code'),
                  selected: _selectedCode == code,
                  onSelected: (_) => setState(() => _selectedCode = code),
                );
              }).toList(),
            ),
          ),
          const SizedBox(height: 16),
          _ControlCard(
            title: 'Time of day',
            child: Wrap(
              spacing: 8,
              children: <Widget>[
                ChoiceChip(
                  label: const Text('Day'),
                  selected: _isDay,
                  onSelected: (_) => setState(() => _isDay = true),
                ),
                ChoiceChip(
                  label: const Text('Night'),
                  selected: !_isDay,
                  onSelected: (_) => setState(() => _isDay = false),
                ),
              ],
            ),
          ),
          const SizedBox(height: 16),
          _ControlCard(
            title: 'Style',
            child: Wrap(
              spacing: 8,
              runSpacing: 8,
              children: WeatherIconStyle.values.map((WeatherIconStyle style) {
                return ChoiceChip(
                  label: Text(style.name),
                  selected: _style == style,
                  onSelected: (_) => setState(() => _style = style),
                );
              }).toList(),
            ),
          ),
          const SizedBox(height: 16),
          _ControlCard(
            title: 'Format',
            child: Wrap(
              spacing: 8,
              runSpacing: 8,
              children: WeatherIconFormat.values.map((
                WeatherIconFormat format,
              ) {
                return ChoiceChip(
                  label: Text(format.name),
                  selected: _format == format,
                  onSelected: (_) => setState(() => _format = format),
                );
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }
}

class _ControlCard extends StatelessWidget {
  const _ControlCard({required this.title, required this.child});

  final String title;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(28),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            title,
            style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w700),
          ),
          const SizedBox(height: 12),
          child,
        ],
      ),
    );
  }
}