diff --git a/lib/Helpers/translationHelper.dart b/lib/Helpers/translationHelper.dart new file mode 100644 index 0000000..a269e76 --- /dev/null +++ b/lib/Helpers/translationHelper.dart @@ -0,0 +1,21 @@ +import 'package:manager_api/api.dart'; +import 'package:tablet_app/Helpers/translations.dart'; +import 'package:tablet_app/Models/tabletContext.dart'; + +class TranslationHelper { + static String get(List? translationDTO, TabletAppContext tabletAppContext) { + try { + return translationDTO!.where((element) => element.language == tabletAppContext.language).first.value!; + } catch (_) { + return ""; + } + } + + static String getFromLocale(String valueToGet, TabletAppContext tabletAppContext) { + try { + return translations.where((element) => element.language == tabletAppContext.language).first.data![valueToGet]!; + } catch (_) { + return ""; + } + } +} diff --git a/lib/Helpers/translations.dart b/lib/Helpers/translations.dart new file mode 100644 index 0000000..f707b37 --- /dev/null +++ b/lib/Helpers/translations.dart @@ -0,0 +1,44 @@ +import 'package:tablet_app/Models/translation.dart'; + +List translations = [ + Translation(language: "FR", data: { + "weather.hourly": "Prochaines heures", + "weather.nextdays": "Prochains jours" + }), + Translation(language: "EN", data: { + "weather.hourly": "Hourly", + "weather.nextdays": "Next days" + }), + Translation(language: "DE", data: { + "weather.hourly": "Nächste Stunden", + "weather.nextdays": "Nächsten Tage" + }), + Translation(language: "NL", data: { + "weather.hourly": "Volgende uren", + "weather.nextdays": "Volgende dagen" + }), + Translation(language: "IT", data: { + "weather.hourly": "Le prossime ore", + "weather.nextdays": "Prossimi giorni" + }), + Translation(language: "ES", data: { + "weather.hourly": "Próximas horas", + "weather.nextdays": "Proximos dias" + }), + Translation(language: "PL", data: { + "weather.hourly": "Następne godziny", + "weather.nextdays": "Następne dni" + }), + Translation(language: "CN", data: { + "weather.hourly": "接下来的几个小时", + "weather.nextdays": "未来几天" + }), + Translation(language: "UK", data: { + "weather.hourly": "Наступні години", + "weather.nextdays": "Наступні дні" + }), + Translation(language: "AR", data: { + "weather.hourly": "الساعات القادمة", + "weather.nextdays": "الايام القادمة" + }), +]; \ No newline at end of file diff --git a/lib/Models/translation.dart b/lib/Models/translation.dart new file mode 100644 index 0000000..b049c5f --- /dev/null +++ b/lib/Models/translation.dart @@ -0,0 +1,8 @@ +import 'package:manager_api/api.dart'; + +class Translation { + String? language = ""; + Map? data; + + Translation({this.language, this.data}); +} \ No newline at end of file diff --git a/lib/Screens/MainView/main_view.dart b/lib/Screens/MainView/main_view.dart index 5b1f3ff..d01d1a0 100644 --- a/lib/Screens/MainView/main_view.dart +++ b/lib/Screens/MainView/main_view.dart @@ -332,20 +332,14 @@ class _MainViewWidget extends State { bottom: 0, left: 0, child: Padding( - padding: const EdgeInsets.all(8.0), - child: Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(20.0)), - color: kBackgroundGrey - ), - child: Builder( - builder: (context) { - Map weatherResultInJson = jsonDecode(configurationDTO.weatherResult!); + padding: const EdgeInsets.all(5.0), + child: Builder( + builder: (context) { + Map weatherResultInJson = jsonDecode(configurationDTO.weatherResult!); - WeatherData weatherDataResult = WeatherData.fromJson(weatherResultInJson); - return WeatherView(weatherData: weatherDataResult); - } - ), + WeatherData weatherDataResult = WeatherData.fromJson(weatherResultInJson); + return WeatherView(weatherData: weatherDataResult); + } ), )) ]), diff --git a/lib/Screens/MainView/weather_view.dart b/lib/Screens/MainView/weather_view.dart index 42d64c2..bc2a9d0 100644 --- a/lib/Screens/MainView/weather_view.dart +++ b/lib/Screens/MainView/weather_view.dart @@ -2,7 +2,9 @@ import 'package:auto_size_text/auto_size_text.dart'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/widgets.dart'; import 'package:provider/provider.dart'; +import 'package:tablet_app/Helpers/translationHelper.dart'; import 'package:tablet_app/Models/WeatherData.dart'; import 'package:tablet_app/app_context.dart'; import 'package:tablet_app/constants.dart'; @@ -28,7 +30,7 @@ class WeatherView extends StatelessWidget { } if(isDateOnly) { - dateFormat = dateFormat.replaceAll(' HH:mm', ''); + dateFormat = dateFormat.replaceAll('/yyyy HH:mm', ''); } String formattedDate = DateFormat(dateFormat).format(dateTime); @@ -99,7 +101,22 @@ class WeatherView extends StatelessWidget { content: Container( decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(20.0)), - color: kBackgroundLight, + gradient: LinearGradient( + begin: Alignment.topRight, + end: Alignment.bottomLeft, + stops: [ + 0.2, + 0.5, + 0.9, + 0.95 + ], + colors: [ + Colors.blue[50]!, + Colors.blue[100]!, + Colors.blue[200]!, + Colors.blue[300]! + ] + ) ), height: size.height * 0.9, width: size.width * 0.7, @@ -115,22 +132,10 @@ class WeatherView extends StatelessWidget { child: Container( width: 50, height: 50, - decoration: BoxDecoration( - color: kMainGrey, - shape: BoxShape.circle, - boxShadow: [ - BoxShadow( - color: kMainGrey, - spreadRadius: 0.5, - blurRadius: 1.1, - offset: Offset(0, 1.1), // changes position of shadow - ), - ], - ), child: Icon( Icons.close, size: 25, - color: Colors.white, + color: Colors.black54, ), ), ), @@ -144,125 +149,164 @@ class WeatherView extends StatelessWidget { children: [ Padding( padding: const EdgeInsets.all(10.0), - child: Center(child: Text(weatherData.city!.name!, style: TextStyle(fontSize: kSectionTitleDetailSize, fontWeight: FontWeight.w400),)), + child: Center(child: Text(weatherData.city!.name!, style: TextStyle(fontSize: kSectionTitleDetailSize, fontWeight: FontWeight.w500, color: Colors.black54))), ), - SizedBox( - height: 125, - width: 125, - child: Container( - color: Colors.red, child: Center(child: CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherData.list!.first.weather!.first.icon!}@4x.png"))), - ), - /*Center( - child: Text("${formattedDate}", style: TextStyle(fontSize: kSectionDescriptionDetailSize, fontWeight: FontWeight.w400)) - ),*/ - Container( - color: Colors.green, - width: size.width * 0.4, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - children: [ - Icon(Icons.water_drop_outlined), - Text("${weatherData.list!.first.pop!.round().toString()}%", style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w400)), - ], - ), - ), - Text("${weatherData.list!.first.main!.temp!.round().toString()}°", style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.w400)), - Padding( - padding: const EdgeInsets.all(8.0), - child: Column( - children: [ - Icon(Icons.air), - Text("${(weatherData.list!.first.wind!.speed! * 3.6).toStringAsFixed(1)}km/h", style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w400)), - ], - ), - ), - ], - ), - ), - Padding( - padding: const EdgeInsets.all(8.0), - child: Container( - height: size.height * 0.2, - width: size.width * 0.5, - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(20.0)), - color: Colors.grey, + Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Text("${weatherData.list!.first.main!.temp!.round().toString()}°", style: TextStyle(fontSize: 55.0, fontWeight: FontWeight.w400, color: Colors.black54)), ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - crossAxisAlignment: CrossAxisAlignment.center, - children: List.generate( - nbrNextHours, - (index) { - final weatherForecast = weatherData.list![index]; - return Padding( + Container( + //color: Colors.red, + height: size.height * 0.2, + width: size.width * 0.2, + child: Center( + child: CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherData.list!.first.weather!.first.icon!}@4x.png") + ) + ), + Container( + // color: Colors.green, + width: size.width * 0.1, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( padding: const EdgeInsets.all(8.0), - child: Container( - height: size.height * 0.25, - width: size.width * 0.08, - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(20.0)), - color: kBackgroundGrey, - ), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceAround, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Center(child: CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherForecast.weather!.first.icon!}.png")), - Text('${weatherForecast.main!.temp!.round().toString()} °C', style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600)), - Text('${formatTimestamp(weatherForecast.dt!, appContext, true, false)}', style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400)), - ], - ), + child: Column( + children: [ + Icon(Icons.water_drop_outlined, color: kTestSecondColor), + Text("${weatherData.list!.first.pop!.round().toString()}%", style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w400, color: Colors.black54)), + ], ), - ); - }, + ), + Padding( + padding: const EdgeInsets.all(8.0), + child: Column( + children: [ + Icon(Icons.air, color: kTestSecondColor), + Text("${(weatherData.list!.first.wind!.speed! * 3.6).toStringAsFixed(1)}km/h", style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w400, color: Colors.black54)), + ], + ), + ), + ], ), ), - ), - ), + ]), Padding( padding: const EdgeInsets.all(8.0), child: Container( height: size.height * 0.25, + width: size.width * 0.6, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(20.0)), + //color: Colors.grey, + ), + child: Column( + children: [ + Padding( + padding: const EdgeInsets.only(left: 15, bottom: 10), + child: Align(alignment: Alignment.centerLeft, child: Text(TranslationHelper.getFromLocale("weather.hourly", appContext.getContext()), style: TextStyle(fontSize: 22, fontWeight: FontWeight.w400, color: Colors.black54))), + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.center, + children: List.generate( + nbrNextHours, + (index) { + final weatherForecast = weatherData.list![index]; + return Padding( + padding: const EdgeInsets.all(8.0), + child: Container( + height: size.height * 0.15, + width: size.width * 0.1, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(20.0)), + color: Colors.lightBlueAccent, + boxShadow: [ + BoxShadow( + color: kBackgroundGrey.withOpacity(0.6), + spreadRadius: 0.75, + blurRadius: 3.1, + offset: Offset(0, 2.5), // changes position of shadow + ), + ], + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text('${formatTimestamp(weatherForecast.dt!, appContext, true, false)}', style: TextStyle(fontSize: 12.0, fontWeight: FontWeight.w400, color: Colors.white)), + Center(child: CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherForecast.weather!.first.icon!}.png")), + Text('${weatherForecast.main!.temp!.round().toString()}°', style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600, color: Colors.white)), + ], + ), + ), + ); + }, + ), + ), + ], + ), + ), + ), + Padding( + padding: const EdgeInsets.all(8.0), + child: Container( + height: size.height * 0.3, width: size.width * 0.75, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(20.0)), - color: Colors.amber, + //color: Colors.amber, ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceAround, - crossAxisAlignment: CrossAxisAlignment.center, - children: List.generate( - nbrNextHours, - (index) { - final weatherForecastNextDay = getNextFiveDaysForecast(weatherData.list!)[index]; - return Padding( - padding: const EdgeInsets.all(8.0), - child: Container( - height: size.height * 0.2, - width: size.width * 0.125, - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(20.0)), - color: kBackgroundGrey, - ), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceAround, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Center(child: CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherForecastNextDay.weather!.first.icon!}@2x.png")), - Text('${weatherForecastNextDay.main!.temp!.round().toString()} °C', style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w600)), - Text('${formatTimestamp(weatherForecastNextDay.dt!, appContext, false, true)}', style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w400)), - ], - ), - ), - ); - }, - ), + child: Column( + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Align(alignment: Alignment.centerLeft, child: Text(TranslationHelper.getFromLocale("weather.nextdays", appContext.getContext()), style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400, color: Colors.black54))), + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.center, + children: List.generate( + nbrNextHours, + (index) { + final weatherForecastNextDay = getNextFiveDaysForecast(weatherData.list!)[index]; + return Padding( + padding: const EdgeInsets.all(8.0), + child: Container( + height: size.height * 0.22, + width: size.width * 0.125, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(20.0)), + color: Colors.lightBlue, + boxShadow: [ + BoxShadow( + color: kBackgroundGrey.withOpacity(0.5), + spreadRadius: 0.75, + blurRadius: 3.1, + offset: Offset(0, 2.5), // changes position of shadow + ), + ], + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Center(child: CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherForecastNextDay.weather!.first.icon!}@2x.png")), + Text('${weatherForecastNextDay.main!.temp!.round().toString()}°', style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w600, color: Colors.white)), + Text('${formatTimestamp(weatherForecastNextDay.dt!, appContext, false, true)}', style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w400, color: Colors.white)), + ], + ), + ), + ); + }, + ), + ), + ], ), ), ) @@ -278,11 +322,30 @@ class WeatherView extends StatelessWidget { }, child: Container( //color: Colors.amber, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10.0)), + gradient: LinearGradient( + begin: Alignment.topRight, + end: Alignment.bottomLeft, + stops: [ + 0.2, + 0.5, + 1.0, + 1.0 + ], + colors: [ + Colors.blue[50]!, + Colors.blue[100]!, + Colors.blue[200]!, + Colors.blue[300]! + ] + ) + ), width: 70, child: Column( children: [ CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherData.list!.first.weather!.first.icon!}.png"), - Container(child: AutoSizeText("${weatherData.list!.first.main!.temp!.round().toString()} °C")), + Container(child: AutoSizeText("${weatherData.list!.first.main!.temp!.round().toString()}°")), //AutoSizeText(weatherData.city!.name!), ], ),