Joory altuwaijri

lib/main.dart

@@ -1,3 +1,4 @@
+import 'screens/home_screen.dart';
 import 'package:flutter/material.dart';
 
 void main() {
@@ -10,11 +11,9 @@ class MainApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return const MaterialApp(
-      home: Scaffold(
-        body: Center(
-          child: Text('Hello World!'),
-        ),
-      ),
+      title: 'Weather App',
+      home: HomeScreen(),
+      debugShowCheckedModeBanner: false,
     );
   }
 }

lib/screens/home_screen.dart

@@ -0,0 +1,105 @@
+import 'package:flutter/material.dart';
+import 'package:weather_app/widgets/daily_weather.dart';
+import 'package:weather_app/widgets/hourly_weather.dart';
+import 'package:weather_app/widgets/weather_card.dart';
+import 'package:weather_app/widgets/indicators.dart';
+
+class HomeScreen extends StatelessWidget {
+  const HomeScreen({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+
+      body: Center(
+
+        child: Container(
+
+            decoration: const BoxDecoration(
+                gradient: LinearGradient(
+              begin: Alignment.topRight,
+              end: Alignment.bottomLeft,
+              colors: [
+                Color.fromARGB(255, 59, 213, 252),
+                Color.fromARGB(255, 2, 4, 117),
+              ],
+            )),
+
+            child: const Center(
+                child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                WeatherCard(
+                  city: 'Khobar',
+                  image: Image(
+                      image: AssetImage("assets/images/sun_4814489.png"),
+                      width: 190),
+                  conditions: 'Partly cloudy',
+                  degree: '25°c',
+                ),
+
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                  children: [
+                  IndicatorCard(
+                    image: Image(
+                        image: AssetImage("assets/images/image-removebg-preview (1).png")),
+                    indicator: 'Wind',
+                    level: '15 km/h',
+                  ),
+                  IndicatorCard(
+                    image: Image(
+                        image: AssetImage("assets/images/image-removebg-preview.png")),
+                    indicator: 'Humidity',
+                    level: '34 %',
+                  ),
+                  IndicatorCard(
+                    image: Image(
+                        image: AssetImage("assets/images/image-removebg-preview (2).png")),
+                    indicator: 'Rain',
+                    level: '56 %',
+                  ),
+
+                ]),
+                SizedBox(height: 25,),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                  children: [
+                    HourlyWeather(time: 'Now', degree: '25°c'),
+                    HourlyWeather(time: '5PM', degree: '24°c'),
+                    HourlyWeather(time: '6PM', degree: '24°c'),
+                    HourlyWeather(time: '7PM', degree: '23°c'),
+                    HourlyWeather(time: '8PM', degree: '22°c'),
+                    HourlyWeather(time: '9PM', degree: '22°c'),
+                    ],
+                ),
+                SizedBox(height: 30,),
+                DailyWeather( 
+                day: 'Mon',
+                 high: '25°c', 
+                 low: '20°c'),
+                 DailyWeather( 
+                day: 'Tue',
+                 high: '23°c', 
+                 low: '20°c'),
+                 DailyWeather( 
+                day: 'Wed',
+                 high: '24°c', 
+                 low: '21°c'),
+                 DailyWeather( 
+                day: 'Thu',
+                 high: '25°c', 
+                 low: '23°c'),
+                 DailyWeather( 
+                day: 'Fri',
+                 high: '26°c', 
+                 low: '19°c'),
+                SizedBox(height: 20,),
+              ],
+            ))),
+      ),
+    );
+  }
+}

lib/widgets/daily_weather.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+
+// ignore: camel_case_types
+class DailyWeather extends StatelessWidget {
+  const DailyWeather({
+    super.key,
+    required this.day,
+    required this.high,
+    required this.low,
+  });
+
+  final String day;
+  final String high;
+  final String low;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+        width: 400,
+        height: 50,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            Column(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                Flexible(
+                  child: Text(
+                    day,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(
+              height: 20,
+            ),
+            Column(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                Flexible(
+                  child: Text(
+                    low,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Color.fromARGB(255, 195, 217, 255),
+                      fontSize: 20,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(
+              height: 10,
+            ),
+            Column(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: [
+                Flexible(
+                  child: Text(
+                    high,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Color.fromARGB(255, 195, 217, 255),
+                      fontSize: 20,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ));
+  }
+}

lib/widgets/hourly_weather.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+
+// ignore: camel_case_types
+class HourlyWeather extends StatelessWidget {
+  const HourlyWeather({
+    super.key,
+    required this.time,
+    required this.degree,
+  });
+
+  final String time;
+  final String degree;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+       width: 70,
+        height: 70,
+
+
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+
+          children: [
+
+                Flexible(
+                  child: Text(
+                    time,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Color.fromARGB(255, 195, 217, 255),
+                      fontSize: 20,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 15,),
+                Flexible(
+                  child: Text(
+                    degree,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ],
+
+
+        ));
+  }
+}

lib/widgets/indicators.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+
+// ignore: camel_case_types
+class IndicatorCard extends StatelessWidget {
+  const IndicatorCard({
+    super.key,
+    required this.image,
+    required this.indicator,
+    required this.level,
+  });
+
+  final Image image;
+  final String indicator;
+  final String level;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+       width: 120,
+        height: 120,
+
+        decoration: BoxDecoration(
+            borderRadius: const BorderRadius.all(Radius.circular(30)),
+            color: const Color.fromARGB(255, 255, 255, 255).withOpacity(0.25)),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+
+          children: [
+                Flexible(child: image),
+                Flexible(
+                  child: Text(
+                    level,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+                Flexible(
+                  child: Text(
+                    indicator,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Color.fromARGB(255, 195, 217, 255),
+                      fontSize: 20,
+                    ),
+                  ),
+                ),
+              ],
+
+
+        ));
+  }
+}

lib/widgets/weather_card.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+
+// ignore: camel_case_types
+class WeatherCard extends StatelessWidget {
+  const WeatherCard({
+    super.key,
+    required this.city,
+    required this.image,
+    required this.conditions,
+    required this.degree,
+  });
+
+  final String city;
+  final Image image;
+  final String conditions;
+  final String degree;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+        width: 400,
+        height: 300,
+
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Flexible(
+                  child: Text(
+                    city,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 40,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 15,),
+
+                Flexible(
+                  child: Text(
+                    degree,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 40,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+                Flexible(
+                  child: Text(
+                    conditions,
+                    textAlign: TextAlign.left,
+                    style: const TextStyle(
+                      color: Colors.white,
+                      fontSize: 25,
+                    ),
+                  ),
+                ),
+              ],
+            )
+          ,
+        );
+  }
+}