1 files changed, 152 insertions, 0 deletions
diff --git a/lib/presentation/screens/weather/hourly_forecast.dart b/lib/presentation/screens/weather/hourly_forecast.dart
new file mode 100644
index 0000000..aed8a6c
--- /dev/null
+++ b/lib/presentation/screens/weather/hourly_forecast.dart
@@ -0,0 +1,152 @@
+import 'package:flutter_ics_homescreen/export.dart';
+
+class HourlyForecast extends StatefulWidget {
+  const HourlyForecast({super.key});
+
+  @override
+  State<HourlyForecast> createState() => _HourlyForecastState();
+}
+
+class _HourlyForecastState extends State<HourlyForecast> {
+  String selectedForescastTime = "13:00";
+  List<ForecastModel> foreCastList = [
+    ForecastModel(
+        time: "13:00", image: "assets/weatherStat.svg", weather: "29.1°"),
+    ForecastModel(
+        time: "14:00", image: "assets/weatherStat.svg", weather: "28.1°"),
+    ForecastModel(
+        time: "15:00", image: "assets/weatherStat.svg", weather: "27.1°"),
+    ForecastModel(
+        time: "16:00", image: "assets/weatherStat.svg", weather: "29.1°"),
+    ForecastModel(
+        time: "13:00", image: "assets/weatherStat.svg", weather: "29.1°"),
+    ForecastModel(
+        time: "14:00", image: "assets/weatherStat.svg", weather: "28.1°"),
+    ForecastModel(
+        time: "15:00", image: "assets/weatherStat.svg", weather: "27.1°"),
+    ForecastModel(
+        time: "16:00", image: "assets/weatherStat.svg", weather: "29.1°"),
+  ];
+  @override
+  Widget build(BuildContext context) {
+    double weatherIconSize = 126;
+    return Container(
+      padding: const EdgeInsets.all(1),
+      decoration: BoxDecoration(
+        gradient: LinearGradient(colors: [
+          AGLDemoColors.periwinkleColor.withOpacity(0.2),
+          AGLDemoColors.periwinkleColor
+        ]),
+        boxShadow: [
+          BoxShadow(
+              offset: const Offset(1, 2),
+              blurRadius: 16,
+              color: Colors.black.withOpacity(0.5))
+        ],
+        borderRadius: BorderRadius.circular(40),
+        //  border: Border.all(color: Colors.white12),
+      ),
+      child: Container(
+        padding: const EdgeInsets.only(top: 5, bottom: 20, left: 5, right: 5),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(40),
+          // border: Border.all(color: AGLDemoColors.periwinkleColor),
+          // boxShadow: [
+          //   BoxShadow(
+          //       offset: const Offset(1, 2),
+          //       blurRadius: 16,
+          //       color: Colors.black.withOpacity(0.5))
+          // ],
+          gradient: const RadialGradient(
+            //center: Alignment(0.7, -0.6), // near the top right
+            radius: 1,
+            colors: <Color>[
+              Color.fromARGB(255, 12, 16, 57), // yellow sun
+              Color.fromARGB(255, 0, 0, 0), // blue sky
+            ],
+          ),
+        ),
+        child:
+            Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 10),
+            child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  const Text(
+                    "Hourly Forecast",
+                    style: TextStyle(
+                        color: Colors.white,
+                        fontWeight: FontWeight.w500,
+                        fontSize: 44),
+                  ),
+                  Text(
+                    "March 9",
+                    style: GoogleFonts.firaSans(
+                        color: Colors.white,
+                        fontWeight: FontWeight.w200,
+                        fontSize: 44),
+                  ),
+                ]),
+          ),
+          const SizedBox(
+            height: 20,
+          ),
+          SizedBox(
+            height: 320,
+            child: ListView.builder(
+                itemCount: foreCastList.length,
+                shrinkWrap: true,
+                padding: EdgeInsets.zero,
+                scrollDirection: Axis.horizontal,
+                itemBuilder: (context, index) {
+                  return Container(
+                    margin: const EdgeInsets.symmetric(horizontal: 32),
+                    decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(32),
+                        color: foreCastList[index].time == selectedForescastTime
+                            ? AGLDemoColors.resolutionBlueColor
+                            : Colors.transparent),
+                    padding: const EdgeInsets.symmetric(
+                        horizontal: 18, vertical: 10),
+                    child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Text(
+                            foreCastList[index].time,
+                            style: GoogleFonts.firaSans(
+                                fontWeight: FontWeight.w100,
+                                color: Colors.white,
+                                fontSize: 40),
+                          ),
+                          Padding(
+                            padding: const EdgeInsets.symmetric(vertical: 30),
+                            child: SvgPicture.asset(
+                              "assets/weatherStat.svg",
+                              width: weatherIconSize,
+                              height: weatherIconSize,
+                            ),
+                          ),
+                          Text(
+                            foreCastList[index].weather,
+                            style: const TextStyle(
+                                color: Colors.white, fontSize: 40),
+                          ),
+                        ]),
+                  );
+                }),
+          )
+        ]),
+      ),
+    );
+  }
+}
+
+class ForecastModel {
+  final String time;
+  final String image;
+  final String weather;
+
+  ForecastModel(
+      {required this.time, required this.image, required this.weather});
+}