Feature/current weather card UI

lib/ui/components/current_weather_card.dart

@@ -0,0 +1,128 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'max_min_temp_card.dart';
+import '../cubit/theme/theme_cubit.dart';
+import 'package:weather_app/ui/theme/font_families.dart';
+import '../model/current_weather.dart';
+
+class CurrentWeatherCard extends StatelessWidget {
+  final CurrentWeather currentWeather;
+
+  const CurrentWeatherCard({
+    super.key,
+    required this.currentWeather,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context
+        .watch<ThemeCubit>()
+        .state;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 15.0),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: <Widget>[
+          SizedBox(
+            width: 250,
+            height: 250,
+            child: Stack(
+              clipBehavior: Clip.none,
+              alignment: Alignment.center,
+              children: [
+                Positioned(
+                  left: -15,
+                  top: 5,
+                  child: Container(
+                    width: 250,
+                    height: 250,
+                    decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      gradient: RadialGradient(
+                        colors: [
+                          Color.fromRGBO(
+                            theme.colors.weatherIconColor.red,
+                            theme.colors.weatherIconColor.green,
+                            theme.colors.weatherIconColor.blue,
+                            0.25,
+                          ),
+                          Color.fromRGBO(
+                            theme.colors.weatherIconColor.red,
+                            theme.colors.weatherIconColor.green,
+                            theme.colors.weatherIconColor.blue,
+                            0.08,
+                          ),
+                          Colors.transparent,
+                        ],
+                        stops: const [0.0, 0.3, 1.0],
+                      ),
+                      boxShadow: [
+                        BoxShadow(
+                          color: Color.fromRGBO(
+                            theme.colors.weatherIconColor.red,
+                            theme.colors.weatherIconColor.green,
+                            theme.colors.weatherIconColor.blue,
+                            0.2,
+                          ),
+                          blurRadius: 70,
+                          spreadRadius: 5,
+                          offset: const Offset(-5, 5),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                Positioned(
+                  top: 5,
+                  child: SizedBox(
+                    width: 220,
+                    height: 200,
+                    child: Image.asset(
+                      currentWeather.image,
+                      width: 220,
+                      height: 200,
+                      fit: BoxFit.contain,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+
+          Text(
+            '${currentWeather.temperature}${currentWeather.unit}',
+            style: TextStyle(
+              fontFamily: urbanist,
+              fontSize: 64,
+              fontWeight: FontWeight.w600,
+              letterSpacing: 0.25,
+              color: theme.colors.temperatureColor,
+              height: 1.0,
+            ),
+          ),
+
+          Text(
+            currentWeather.status,
+            style: TextStyle(
+              fontFamily: urbanist,
+              fontSize: 16,
+              fontWeight: FontWeight.w500,
+              letterSpacing: 0.25,
+              color: theme.colors.statusColor,
+              height: 1.0,
+            ),
+          ),
+          const SizedBox(height: 12),
+
+          MaxMinTempCard(
+            highTemp: currentWeather.highTemp,
+            lowTemp: currentWeather.lowTemp,
+            unit: currentWeather.unit,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/ui/components/daily_weather.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:weather_app/ui/model/daily_weather.dart';
-import '../../gen/assets.gen.dart';
 import '../cubit/theme/theme_cubit.dart';
 
 class NextDaysWeatherForecastTable extends StatelessWidget {
@@ -81,7 +80,7 @@ class _DailyWeatherDetails extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.end,
               children: [
                 _TempDisplay(
-                  icon: Assets.images.arrowUp.path,
+                  icon: 'assets/images/arrow_up.svg',
                   text: '${dailyWeather.maxTemperature}°C',
                 ),
 
@@ -97,7 +96,7 @@ class _DailyWeatherDetails extends StatelessWidget {
                 ),
 
                 _TempDisplay(
-                  icon: Assets.images.arrowDown.path,
+                  icon: 'assets/images/arrow_down.svg',
                   text: '${dailyWeather.minTemperature}°C',
                 ),
               ],

lib/ui/components/location_row.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import '../../gen/assets.gen.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import '../cubit/theme/theme_cubit.dart';
 
 class LocationRow extends StatelessWidget {
@@ -14,7 +14,8 @@ class LocationRow extends StatelessWidget {
       crossAxisAlignment: WrapCrossAlignment.center,
       spacing: 4,
       children: [
-        Assets.images.location.svg(
+        SvgPicture.asset(
+          'assets/images/location.svg',
           colorFilter: ColorFilter.mode(theme.colors.text, BlendMode.srcIn),
         ),
         Text(

lib/ui/components/max_min_temp_card.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:weather_app/ui/theme/font_families.dart';
+import '../cubit/theme/theme_cubit.dart';
+
+class MaxMinTempCard extends StatelessWidget {
+  final String highTemp;
+  final String lowTemp;
+  final String unit;
+
+  const MaxMinTempCard({
+    super.key,
+    required this.highTemp,
+    required this.lowTemp,
+    required this.unit,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.watch<ThemeCubit>().state;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
+      decoration: BoxDecoration(
+        color: theme.colors.maxMinCardBackground,
+        borderRadius: BorderRadius.circular(100),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          SizedBox(
+            width: 12,
+            height: 12,
+            child: SvgPicture.asset(
+              'assets/images/arrow_up.svg',
+              width: 12,
+              height: 12,
+              colorFilter: ColorFilter.mode(
+                theme.colors.maxMinTextColor,
+                BlendMode.srcIn,
+              ),
+            ),
+          ),
+          const SizedBox(width: 8),
+          Text(
+            '$highTemp$unit',
+            style: TextStyle(
+              fontFamily: urbanist,
+              fontSize: 16,
+              fontWeight: FontWeight.w500,
+              letterSpacing: 0.25,
+              color: theme.colors.maxMinTextColor,
+              height: 1.0,
+            ),
+          ),
+          const SizedBox(width: 8),
+          Container(
+            width: 1,
+            height: 20,
+            decoration: BoxDecoration(
+              color: theme.colors.maxMinDividerColor,
+            ),
+          ),
+          const SizedBox(width: 8),
+          SizedBox(
+            width: 12,
+            height: 12,
+            child: SvgPicture.asset(
+              'assets/images/arrow_down.svg',
+              width: 12,
+              height: 12,
+              colorFilter: ColorFilter.mode(
+                theme.colors.maxMinTextColor,
+                BlendMode.srcIn,
+              ),
+            ),
+          ),
+          const SizedBox(width: 8),
+          Text(
+            '$lowTemp$unit',
+            style: TextStyle(
+              fontFamily: urbanist,
+              fontSize: 16,
+              fontWeight: FontWeight.w500,
+              letterSpacing: 0.25,
+              color: theme.colors.maxMinTextColor,
+              height: 1.0,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/ui/model/current_weather.dart

@@ -0,0 +1,46 @@
+class CurrentWeather {
+  final String image;
+  final String temperature;
+  final String status;
+  final String highTemp;
+  final String lowTemp;
+  final String unit;
+
+  const CurrentWeather({
+    required this.image,
+    required this.temperature,
+    required this.status,
+    required this.highTemp,
+    required this.lowTemp,
+    this.unit = '°C',
+  });
+
+  factory CurrentWeather.sample() {
+    return const CurrentWeather(
+      image: 'assets/images/day_mainly_clear.png',
+      temperature: '24',
+      status: 'Partly cloudy',
+      highTemp: '32',
+      lowTemp: '20',
+      unit: '°C',
+    );
+  }
+
+  CurrentWeather copyWith({
+    String? image,
+    String? temperature,
+    String? status,
+    String? highTemp,
+    String? lowTemp,
+    String? unit,
+  }) {
+    return CurrentWeather(
+      image: image ?? this.image,
+      temperature: temperature ?? this.temperature,
+      status: status ?? this.status,
+      highTemp: highTemp ?? this.highTemp,
+      lowTemp: lowTemp ?? this.lowTemp,
+      unit: unit ?? this.unit,
+    );
+  }
+}