Weather view done + translations

This commit is contained in:
Thomas Fransolet 2024-02-27 22:08:17 +01:00
parent ef7b8d37e1
commit 0559600efc
5 changed files with 264 additions and 134 deletions

View File

@ -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>? 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 "";
}
}
}

View File

@ -0,0 +1,44 @@
import 'package:tablet_app/Models/translation.dart';
List<Translation> 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": "الايام القادمة"
}),
];

View File

@ -0,0 +1,8 @@
import 'package:manager_api/api.dart';
class Translation {
String? language = "";
Map<String, String>? data;
Translation({this.language, this.data});
}

View File

@ -332,20 +332,14 @@ class _MainViewWidget extends State<MainViewWidget> {
bottom: 0, bottom: 0,
left: 0, left: 0,
child: Padding( child: Padding(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(5.0),
child: Container( child: Builder(
decoration: BoxDecoration( builder: (context) {
borderRadius: BorderRadius.all(Radius.circular(20.0)), Map<String, dynamic> weatherResultInJson = jsonDecode(configurationDTO.weatherResult!);
color: kBackgroundGrey
),
child: Builder(
builder: (context) {
Map<String, dynamic> weatherResultInJson = jsonDecode(configurationDTO.weatherResult!);
WeatherData weatherDataResult = WeatherData.fromJson(weatherResultInJson); WeatherData weatherDataResult = WeatherData.fromJson(weatherResultInJson);
return WeatherView(weatherData: weatherDataResult); return WeatherView(weatherData: weatherDataResult);
} }
),
), ),
)) ))
]), ]),

View File

@ -2,7 +2,9 @@ import 'package:auto_size_text/auto_size_text.dart';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:tablet_app/Helpers/translationHelper.dart';
import 'package:tablet_app/Models/WeatherData.dart'; import 'package:tablet_app/Models/WeatherData.dart';
import 'package:tablet_app/app_context.dart'; import 'package:tablet_app/app_context.dart';
import 'package:tablet_app/constants.dart'; import 'package:tablet_app/constants.dart';
@ -28,7 +30,7 @@ class WeatherView extends StatelessWidget {
} }
if(isDateOnly) { if(isDateOnly) {
dateFormat = dateFormat.replaceAll(' HH:mm', ''); dateFormat = dateFormat.replaceAll('/yyyy HH:mm', '');
} }
String formattedDate = DateFormat(dateFormat).format(dateTime); String formattedDate = DateFormat(dateFormat).format(dateTime);
@ -99,7 +101,22 @@ class WeatherView extends StatelessWidget {
content: Container( content: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)), 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, height: size.height * 0.9,
width: size.width * 0.7, width: size.width * 0.7,
@ -115,22 +132,10 @@ class WeatherView extends StatelessWidget {
child: Container( child: Container(
width: 50, width: 50,
height: 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( child: Icon(
Icons.close, Icons.close,
size: 25, size: 25,
color: Colors.white, color: Colors.black54,
), ),
), ),
), ),
@ -144,125 +149,164 @@ class WeatherView extends StatelessWidget {
children: [ children: [
Padding( Padding(
padding: const EdgeInsets.all(10.0), 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( Row(
height: 125, mainAxisAlignment: MainAxisAlignment.center,
width: 125, crossAxisAlignment: CrossAxisAlignment.center,
child: Container( children: [
color: Colors.red, child: Center(child: CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherData.list!.first.weather!.first.icon!}@4x.png"))), Padding(
), padding: const EdgeInsets.all(8.0),
/*Center( child: Text("${weatherData.list!.first.main!.temp!.round().toString()}°", style: TextStyle(fontSize: 55.0, fontWeight: FontWeight.w400, color: Colors.black54)),
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,
), ),
child: Row( Container(
mainAxisAlignment: MainAxisAlignment.spaceAround, //color: Colors.red,
crossAxisAlignment: CrossAxisAlignment.center, height: size.height * 0.2,
children: List.generate( width: size.width * 0.2,
nbrNextHours, child: Center(
(index) { child: CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherData.list!.first.weather!.first.icon!}@4x.png")
final weatherForecast = weatherData.list![index]; )
return Padding( ),
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), padding: const EdgeInsets.all(8.0),
child: Container( child: Column(
height: size.height * 0.25, children: [
width: size.width * 0.08, Icon(Icons.water_drop_outlined, color: kTestSecondColor),
decoration: BoxDecoration( Text("${weatherData.list!.first.pop!.round().toString()}%", style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w400, color: Colors.black54)),
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)),
],
),
), ),
); ),
}, 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(
padding: const EdgeInsets.all(8.0), padding: const EdgeInsets.all(8.0),
child: Container( child: Container(
height: size.height * 0.25, 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, width: size.width * 0.75,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20.0)), borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Colors.amber, //color: Colors.amber,
), ),
child: Row( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
crossAxisAlignment: CrossAxisAlignment.center, Padding(
children: List.generate( padding: const EdgeInsets.all(8.0),
nbrNextHours, child: Align(alignment: Alignment.centerLeft, child: Text(TranslationHelper.getFromLocale("weather.nextdays", appContext.getContext()), style: TextStyle(fontSize: 20, fontWeight: FontWeight.w400, color: Colors.black54))),
(index) { ),
final weatherForecastNextDay = getNextFiveDaysForecast(weatherData.list!)[index]; Row(
return Padding( mainAxisAlignment: MainAxisAlignment.spaceAround,
padding: const EdgeInsets.all(8.0), crossAxisAlignment: CrossAxisAlignment.center,
child: Container( children: List.generate(
height: size.height * 0.2, nbrNextHours,
width: size.width * 0.125, (index) {
decoration: BoxDecoration( final weatherForecastNextDay = getNextFiveDaysForecast(weatherData.list!)[index];
borderRadius: BorderRadius.all(Radius.circular(20.0)), return Padding(
color: kBackgroundGrey, padding: const EdgeInsets.all(8.0),
), child: Container(
child: Column( height: size.height * 0.22,
mainAxisAlignment: MainAxisAlignment.spaceAround, width: size.width * 0.125,
crossAxisAlignment: CrossAxisAlignment.center, decoration: BoxDecoration(
children: [ borderRadius: BorderRadius.all(Radius.circular(20.0)),
Center(child: CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherForecastNextDay.weather!.first.icon!}@2x.png")), color: Colors.lightBlue,
Text('${weatherForecastNextDay.main!.temp!.round().toString()} °C', style: TextStyle(fontSize: 25.0, fontWeight: FontWeight.w600)), boxShadow: [
Text('${formatTimestamp(weatherForecastNextDay.dt!, appContext, false, true)}', style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.w400)), 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( child: Container(
//color: Colors.amber, //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, width: 70,
child: Column( child: Column(
children: [ children: [
CachedNetworkImage(imageUrl: "https://openweathermap.org/img/wn/${weatherData.list!.first.weather!.first.icon!}.png"), 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!), //AutoSizeText(weatherData.city!.name!),
], ],
), ),