Add animated icons (Flare), set icon and background color according t…

…o weather condition, update README.md.

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
 

lib/main.dart

@@ -1,11 +1,12 @@
+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';
 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<Home> {
   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,53 +66,37 @@ class _HomeState extends State<Home> {
 
     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);
     });
   }
 
   void _getWeather() {
     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<void> _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<Home> {
                           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: <Widget>[
                             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),

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<Color> 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<Color> 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;
+}

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"
+  color: "FFFFFF"