diff --git a/.gitignore copy b/.gitignore copy new file mode 100644 index 0000000..24476c5 --- /dev/null +++ b/.gitignore copy @@ -0,0 +1,44 @@ +# Miscellaneous +*.class +*.log +*.pyc +*.swp +.DS_Store +.atom/ +.buildlog/ +.history +.svn/ +migrate_working_dir/ + +# IntelliJ related +*.iml +*.ipr +*.iws +.idea/ + +# The .vscode folder contains launch configuration and tasks you configure in +# VS Code which you may wish to be included in version control, so this line +# is commented out by default. +#.vscode/ + +# Flutter/Dart/Pub related +**/doc/api/ +**/ios/Flutter/.last_build_id +.dart_tool/ +.flutter-plugins +.flutter-plugins-dependencies +.packages +.pub-cache/ +.pub/ +/build/ + +# Symbolication related +app.*.symbols + +# Obfuscation related +app.*.map.json + +# Android Studio will place build artifacts here +/android/app/debug +/android/app/profile +/android/app/release diff --git a/README.md b/README.md index 6e5198d..ab3a1d5 100644 --- a/README.md +++ b/README.md @@ -271,7 +271,7 @@ CircleAvatar( - `NetworkImage` - This is used for images that are stored on the internet -#### [AssetImage](https://api.flutter.dev/flutter/painting/AssetImage-class.html) +#### AssetImage ```dart Image( @@ -283,7 +283,7 @@ Image( - The `Image` widget has an `image` property that takes an `ImageProvider` object. This is the image that will be displayed. - The `AssetImage` widget is a widget that displays an image that is stored locally in your app. -#### [NetworkImage](https://api.flutter.dev/flutter/painting/NetworkImage-class.html) +#### NetworkImage ```dart Image( diff --git a/assets/images/0a1161e5ee97d8cd6784c0f8a8e0d2b1.jpg b/assets/images/0a1161e5ee97d8cd6784c0f8a8e0d2b1.jpg new file mode 100644 index 0000000..0c8608a Binary files /dev/null and b/assets/images/0a1161e5ee97d8cd6784c0f8a8e0d2b1.jpg differ diff --git a/assets/images/download (1).jpg b/assets/images/download (1).jpg new file mode 100644 index 0000000..f85f48a Binary files /dev/null and b/assets/images/download (1).jpg differ diff --git a/assets/images/icons8-clouds-48.png b/assets/images/icons8-clouds-48.png new file mode 100644 index 0000000..965ba5e Binary files /dev/null and b/assets/images/icons8-clouds-48.png differ diff --git a/assets/images/icons8-night-wind-48.png b/assets/images/icons8-night-wind-48.png new file mode 100644 index 0000000..e099498 Binary files /dev/null and b/assets/images/icons8-night-wind-48.png differ diff --git a/assets/images/icons8-partly-cloudy-day-48.png b/assets/images/icons8-partly-cloudy-day-48.png new file mode 100644 index 0000000..656834a Binary files /dev/null and b/assets/images/icons8-partly-cloudy-day-48.png differ diff --git a/assets/images/weather-2021-12-07.png b/assets/images/weather-2021-12-07.png new file mode 100644 index 0000000..0c81ce0 Binary files /dev/null and b/assets/images/weather-2021-12-07.png differ diff --git a/lib/main.dart b/lib/main.dart index a725658..a5a372d 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'screens/home_screen.dart'; void main() { runApp(const MainApp()); @@ -10,11 +11,8 @@ class MainApp extends StatelessWidget { @override Widget build(BuildContext context) { return const MaterialApp( - home: Scaffold( - body: Center( - child: Text('Hello World!'), - ), - ), + home: HomeScreen(), + debugShowCheckedModeBanner: false, ); } } diff --git a/lib/screens/home_screen.dart b/lib/screens/home_screen.dart new file mode 100644 index 0000000..70579fc --- /dev/null +++ b/lib/screens/home_screen.dart @@ -0,0 +1,83 @@ +import 'package:flutter/material.dart'; +import 'package:avatar_glow/avatar_glow.dart'; +import 'package:weather_app/widgets/weather_today.dart'; +import 'package:weather_app/widgets/details.dart'; + + +class HomeScreen extends StatelessWidget { + const HomeScreen({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Center( + child: Stack(children: [ + Container( + alignment: Alignment.topCenter, + width: double.maxFinite, + height: double.maxFinite, + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [Color(0xff09203F), Color(0xff537895)], + ), + ), + child: Column( + children: [ + const Text("\n\nAl Khobar", + style: TextStyle( + fontFamily: 'Open Sans', + fontSize: 30.0, + color: Colors.white)), + const Text(" 19°", + style: TextStyle( + fontFamily: 'Open Sans', + fontSize: 75.0, + color: Colors.white)), + AvatarGlow( + endRadius: 60.0, + child: Material( + elevation: 60.0, + shape: const CircleBorder(), + child: CircleAvatar( + radius: 45.0, + backgroundColor: Colors.blueGrey[100], + backgroundImage: + const AssetImage('assets/images/weather-2021-12-07.png'), + ), + ), + ), + const Text("Partly Cloudy\n H:24° L:18°", + style: TextStyle( + fontFamily: 'Open Sans', + fontSize: 20.0, + color: Colors.white70)), + const SizedBox( + height: 20, + ), + Row(mainAxisAlignment: MainAxisAlignment.end, children: [ + WeatherToday(text:"\n1 PM",link:'assets/images/icons8-partly-cloudy-day-48.png',text2:"19°"), + WeatherToday(text:"\nNow",link:'assets/images/icons8-partly-cloudy-day-48.png',text2:"19°"), + WeatherToday(text:"\n3 PM",link:'assets/images/icons8-clouds-48.png',text2:"20°"), + WeatherToday(text:"\n4 PM",link:'assets/images/icons8-night-wind-48.png',text2:"22°"), + WeatherToday(text:"\n5 PM",link:'assets/images/icons8-night-wind-48.png',text2:"23°"), + ]), + const SizedBox( + height: 20, + ), + Row( + children: [ + const SizedBox( + width: 8, + ), + Details(text:"FEELS LIKE",text2:"17°",text3:"Similar to the actual temperature."), + Details(text:"HUMIDITY",text2:"67%",text3:"The dew point is 18° right now."), + ], + ), + ], + ), + ), + ]))); + } +} diff --git a/lib/widgets/details.dart b/lib/widgets/details.dart new file mode 100644 index 0000000..9027461 --- /dev/null +++ b/lib/widgets/details.dart @@ -0,0 +1,59 @@ +import 'package:flutter/material.dart'; + +class Details extends StatelessWidget { + Details({ + super.key, + required this.text, + required this.text2, + required this.text3, + }); + + final String text; + final String text2; + final String text3; + + @override + Widget build(BuildContext context) { + return Container( + height: 250.0, + width: 200.0, + color: Colors.transparent, + child: Container( + margin: const EdgeInsets.all(15), + decoration: BoxDecoration( + color: Colors.transparent, + borderRadius: const BorderRadius.all(Radius.circular(10.0)), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.5), + spreadRadius: 5, + blurRadius: 2, + offset: const Offset(0, 3), // changes position of shadow + ), + ], + ), + child: Container( + padding: const EdgeInsets.all(5), + margin: const EdgeInsets.all(6), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + text, + style: const TextStyle(fontSize: 19, color: Colors.white70), + ), + const SizedBox(height: 25), + Text( + text2, + style: const TextStyle(fontSize: 45, color: Colors.white), + ), + const SizedBox(height: 50), + Text( + text3, + style: const TextStyle(fontSize: 17, color: Colors.white), + ), + ], + ), + ))); + } +} diff --git a/lib/widgets/weather_today.dart b/lib/widgets/weather_today.dart new file mode 100644 index 0000000..90c6765 --- /dev/null +++ b/lib/widgets/weather_today.dart @@ -0,0 +1,70 @@ +import 'package:flutter/material.dart'; +import 'package:avatar_glow/avatar_glow.dart'; + +class WeatherToday extends StatelessWidget { + WeatherToday({ + super.key, + required this.text, + required this.link, + required this.text2, + }); + + final String text; + final String link; + final String text2; + + @override + Widget build(BuildContext context) { + return Expanded( + child: Container( + padding: const EdgeInsets.all(5), + margin: const EdgeInsets.all(7), + height: 180.0, + width: 300.0, + decoration: BoxDecoration( + color: Colors.transparent, + borderRadius: const BorderRadius.all(Radius.circular(60.0)), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.5), + spreadRadius: 5, + blurRadius: 4, + offset: const Offset(0, 3), // changes position of shadow + ), + ], + ), + child: Center( + child: Column( + children: [ + Text( + text, //"\n1 PM" + style: const TextStyle( + color: Colors.white, fontSize: 20, fontFamily: 'Geneva'), + textAlign: TextAlign.center, + ), + AvatarGlow( + endRadius: 40.0, + child: Material( + elevation: 60.0, + shape: const CircleBorder(), + child: CircleAvatar( + radius: 23.0, + backgroundColor: Colors.blueGrey, + backgroundImage: AssetImage( + link), //'assets/images/icons8-partly-cloudy-day-48.png' + ), + ), + ), + Text( + text2, //"19°" + style: const TextStyle( + color: Colors.white, fontSize: 20, fontFamily: 'Geneva'), + textAlign: TextAlign.center, + ), + ], + ), + ), + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 2b23063..cf27b68 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -9,6 +9,14 @@ packages: url: "https://pub.dev" source: hosted version: "2.11.0" + avatar_glow: + dependency: "direct main" + description: + name: avatar_glow + sha256: "3627f6f97d1f10d3c1996ae108d3488eabaf68c0cf0c3eac7e7c746a3812881d" + url: "https://pub.dev" + source: hosted + version: "2.0.2" boolean_selector: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 6bac6b8..4fb8160 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -19,7 +19,7 @@ publish_to: "none" # Remove this line if you wish to publish to pub.dev version: 1.0.0+1 environment: - sdk: ">=3.1.2 <4.0.0" + sdk: ">=3.1.2 <4.0.0" # Dependencies specify other packages that your package needs in order to work. # To automatically upgrade your package dependencies to the latest versions @@ -28,51 +28,54 @@ environment: # the latest version available on pub.dev. To see which dependencies have newer # versions available, run `flutter pub outdated`. dependencies: - flutter: - sdk: flutter + flutter: + sdk: flutter + avatar_glow: 2.0.2 dev_dependencies: - # The "flutter_lints" package below contains a set of recommended lints to - # encourage good coding practices. The lint set provided by the package is - # activated in the `analysis_options.yaml` file located at the root of your - # package. See that file for information about deactivating specific lint - # rules and activating additional ones. - flutter_lints: ^2.0.0 - flutter_test: - sdk: flutter + # The "flutter_lints" package below contains a set of recommended lints to + # encourage good coding practices. The lint set provided by the package is + # activated in the `analysis_options.yaml` file located at the root of your + # package. See that file for information about deactivating specific lint + # rules and activating additional ones. + flutter_lints: ^2.0.0 + flutter_test: + sdk: flutter + # For information on the generic Dart part of this file, see the # following page: https://dart.dev/tools/pub/pubspec # The following section is specific to Flutter packages. flutter: - # The following line ensures that the Material Icons font is - # included with your application, so that you can use the icons in - # the material Icons class. - uses-material-design: true + # The following line ensures that the Material Icons font is + # included with your application, so that you can use the icons in + # the material Icons class. + uses-material-design: true - # To add assets to your application, add an assets section, like this: - assets: - - assets/example/images/ - # An image asset can refer to one or more resolution-specific "variants", see - # https://flutter.dev/assets-and-images/#resolution-aware - # For details regarding adding assets from package dependencies, see - # https://flutter.dev/assets-and-images/#from-packages - # To add custom fonts to your application, add a fonts section here, - # in this "flutter" section. Each entry in this list should have a - # "family" key with the font family name, and a "fonts" key with a - # list giving the asset and other descriptors for the font. For - # example: - # fonts: - # - family: Schyler - # fonts: - # - asset: fonts/Schyler-Regular.ttf - # - asset: fonts/Schyler-Italic.ttf - # style: italic - # - family: Trajan Pro - # fonts: - # - asset: fonts/TrajanPro.ttf - # - asset: fonts/TrajanPro_Bold.ttf - # weight: 700 - # - # For details regarding fonts from package dependencies, - # see https://flutter.dev/custom-fonts/#from-packages + # To add assets to your application, add an assets section, like this: + assets: + - assets/example/images/ + - assets/images/ + # An image asset can refer to one or more resolution-specific "variants", see + # https://flutter.dev/assets-and-images/#resolution-aware + # For details regarding adding assets from package dependencies, see + # https://flutter.dev/assets-and-images/#from-packages + # To add custom fonts to your application, add a fonts section here, + # in this "flutter" section. Each entry in this list should have a + # "family" key with the font family name, and a "fonts" key with a + # list giving the asset and other descriptors for the font. For + # example: + # fonts: + # - family: Schyler + # fonts: + # - asset: fonts/Schyler-Regular.ttf + # - asset: fonts/Schyler-Italic.ttf + # style: italic + # - family: Trajan Pro + # fonts: + # - asset: fonts/TrajanPro.ttf + # - asset: fonts/TrajanPro_Bold.ttf + # weight: 700 + # + # For details regarding fonts from package dependencies, + # see https://flutter.dev/custom-fonts/#from-packages