diff --git a/README.md b/README.md index be9dea1..19fcbb8 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ A simple weather app that displays the weather information of your current location. -Icons and colors change according to weather condition! +Animated icons and colors change according to weather condition! ## Running the project diff --git a/assets/weather_conditions.flr b/assets/weather_conditions.flr new file mode 100644 index 0000000..179acae Binary files /dev/null and b/assets/weather_conditions.flr differ diff --git a/images/rainbow_weather.gif b/images/rainbow_weather.gif new file mode 100644 index 0000000..b16274a Binary files /dev/null and b/images/rainbow_weather.gif differ diff --git a/lib/main.dart b/lib/main.dart index 263b128..a225f11 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,3 +1,4 @@ +import 'package:flare_flutter/flare_actor.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; @@ -5,7 +6,7 @@ import 'package:geolocator/geolocator.dart'; import 'package:http/http.dart' as http; import 'package:strings/strings.dart'; import 'dart:convert'; -import 'dart:math'; +import 'weatherConditions.dart'; String apiKey = "142286faa5bd8ccf1ae8df60bef70179"; @@ -24,17 +25,22 @@ class Home extends StatefulWidget { class _HomeState extends State { var temp; + var conditionMain; var description; var currently; var humidity; var windSpeed; var randomColor; var city; - String unit = "metric"; var longitude; var latitude; + var conditionCode; + var conditionColor; + + var unit = "metric"; + Future getLocation() async { Position position = await Geolocator.getCurrentPosition( desiredAccuracy: LocationAccuracy.low); @@ -60,11 +66,14 @@ class _HomeState extends State { setState(() { this.temp = results['main']['temp']; + this.conditionMain = results['weather'][0]['main']; this.description = results['weather'][0]['description']; this.currently = results['weather'][0]['main']; this.humidity = results['main']['humidity']; this.windSpeed = results['wind']['speed']; this.city = results['name']; + this.conditionCode = setConditionCode(this.conditionMain); + this.conditionColor = setConditionColor(this.conditionMain); }); } @@ -72,41 +81,22 @@ class _HomeState extends State { Future.wait([getLocation()]).then((FutureOr) => {getWeather()}); } - void setColor() { - var colors = [ - [Color(0xFFFD5F7E), Color(0xFFB08BD7)], - [Color(0xFFFF7474), Color(0xFFFFD0A1)], - [Color(0xFF7EA1E6), Color(0xFF7EE1E6)], - [Color(0xFF7EB2E6), Color(0xFFC49AE9)], - [Color(0xFF64CAB1), Color(0xFFB0D87E)], - ]; - final _random = new Random(); - var randomColor = colors[_random.nextInt(colors.length)]; - setState(() { - this.randomColor = randomColor; - }); - } - @override void initState() { super.initState(); this._getWeather(); - this.setColor(); } Future _onRefresh() async { setState(() { this._getWeather(); - this.setColor(); }); } @override Widget build(BuildContext context) { SystemChrome.setSystemUIOverlayStyle( - SystemUiOverlayStyle(statusBarColor: Colors.transparent - //color set to transperent or set your own color - )); + SystemUiOverlayStyle(statusBarColor: Colors.transparent)); return Scaffold( body: RefreshIndicator( @@ -121,16 +111,26 @@ class _HomeState extends State { gradient: LinearGradient( begin: Alignment.bottomLeft, end: Alignment.topRight, - colors: randomColor)), + colors: conditionColor != null + ? conditionColor + : [Color(0xFFFFFFFF), Color(0xFFFFFFFF)])), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( - padding: - EdgeInsets.only(bottom: 15.0, top: 100.0), - child: Icon(Icons.cloud, - color: Colors.white, size: 50.0), + padding: EdgeInsets.only(bottom: 7.0, top: 100.0), + // child: Icon(Icons.cloud, + // color: Colors.white, size: 50.0), + // child: Image.asset('assets/weather_icons/cloud.png') + child: Container( + width: 100, + height: 100, + child: FlareActor( + "assets/weather_conditions.flr", + animation: conditionCode, + ), + ), ), Padding( padding: EdgeInsets.only(bottom: 10.0), diff --git a/lib/weatherConditions.dart b/lib/weatherConditions.dart new file mode 100644 index 0000000..155af34 --- /dev/null +++ b/lib/weatherConditions.dart @@ -0,0 +1,81 @@ +import 'package:flutter/material.dart'; +import 'dart:math'; + +String setConditionCode(String condition) { + /* Set Flare animation code based on weather condition.*/ + var code; + + switch (condition) { + case "Thunderstorm": + code = "11d"; + break; + case "Drizzle": + code = "09d"; + break; + case "Rain": + code = "10d"; + break; + case "Snow": + code = "13d"; + break; + case "Atmosphere": + code = "50d"; + break; + case "Clear": + code = "01d"; + break; + case "Clouds": + code = "03d"; + break; + } + + return code; +} + +List setConditionColor(String condition) { + /* Set background color based on weather condition.*/ + var color; + + switch (condition) { + case "Thunderstorm": + color = [Color(0xFF7EB2E6), Color(0xFFC49AE9)]; + break; + case "Drizzle": + color = [Color(0xFFFD5F7E), Color(0xFFFFD0A1)]; + break; + case "Rain": + color = [Color(0xFF64CAB1), Color(0xFFB0D87E)]; + break; + case "Snow": + color = [Color(0xFF7EA1E6), Color(0xFF7EE1E6)]; + break; + case "Atmosphere": + color = [Color(0xFF3C9CF8), Color(0xFFB0D87E)]; + break; + case "Clear": + color = [Color(0xFFFF7474), Color(0xFFFFD0A1)]; + break; + case "Clouds": + color = [Color(0xFFFD5F7E), Color(0xFFB08BD7)]; + break; + } + + return color; +} + +List setColor() { + /* Set background color randomly.*/ + var colors = [ + [Color(0xFFFD5F7E), Color(0xFFB08BD7)], + [Color(0xFFFF7474), Color(0xFFFFD0A1)], + [Color(0xFFFD5F7E), Color(0xFFFFD0A1)], + [Color(0xFF7EA1E6), Color(0xFF7EE1E6)], + [Color(0xFF7EB2E6), Color(0xFFC49AE9)], + [Color(0xFF64CAB1), Color(0xFFB0D87E)], + [Color(0xFF3C9CF8), Color(0xFFB0D87E)], + ]; + + final _random = new Random(); + var randomColor = colors[_random.nextInt(colors.length)]; + return randomColor; +} diff --git a/pubspec.yaml b/pubspec.yaml index 1142bae..13201b5 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -32,6 +32,7 @@ dependencies: http: ^0.12.2 strings: ^0.1.4 geolocator: ^6.1.7 + flare_flutter: ^2.0.6 dev_dependencies: flutter_launcher_icons: ^0.8.1 @@ -52,6 +53,7 @@ flutter: assets: - assets/ + - assets/weather_conditions.flr flutter_icons: ios: true @@ -63,4 +65,4 @@ flutter_icons: flutter_native_splash: image: assets/splash_screen.png - color: "ffffff" \ No newline at end of file + color: "FFFFFF" \ No newline at end of file