Display WeatherImage when Reload Button Tapped

Author: morikann

lib/view/weather_view/component/weather_forecast.dart

@@ -1,17 +1,25 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 
 class WeatherForecast extends StatelessWidget {
-  const WeatherForecast({super.key});
+  const WeatherForecast({super.key, this.weatherCondition});
+
+  final String? weatherCondition;
 
   @override
   Widget build(BuildContext context) {
     final textTheme = Theme.of(context).textTheme;
 
     return Column(
       children: [
-        const AspectRatio(
+        AspectRatio(
           aspectRatio: 1,
-          child: Placeholder(),
+          child: weatherCondition == null
+              ? const Placeholder()
+              : SvgPicture.asset(
+                  'images/$weatherCondition.svg',
+                  semanticsLabel: '$weatherCondition image',
+                ),
         ),
         Padding(
           padding: const EdgeInsets.all(16),

lib/view/weather_view/weather_page.dart

@@ -1,9 +1,18 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_training/model/weather.dart';
 import 'package:flutter_training/view/weather_view/component/weather_forecast.dart';
 
-class WeatherPage extends StatelessWidget {
+class WeatherPage extends StatefulWidget {
   const WeatherPage({super.key});
 
+  @override
+  State<WeatherPage> createState() => _WeatherPageState();
+}
+
+class _WeatherPageState extends State<WeatherPage> {
+  final _weather = Weather();
+  String? _weatherCondition;
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -13,7 +22,7 @@ class WeatherPage extends StatelessWidget {
           child: Column(
             children: [
               const Spacer(),
-              const WeatherForecast(),
+              WeatherForecast(weatherCondition: _weatherCondition),
               Flexible(
                 child: Column(
                   children: [
@@ -31,7 +40,11 @@ class WeatherPage extends StatelessWidget {
                         Expanded(
                           child: TextButton(
                             child: const Text('Reload'),
-                            onPressed: () {},
+                            onPressed: () {
+                              setState(() {
+                                _weatherCondition = _weather.fetchWeather();
+                              });
+                            },
                           ),
                         ),
                       ],