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,
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<String, dynamic> weatherResultInJson = jsonDecode(configurationDTO.weatherResult!);
padding: const EdgeInsets.all(5.0),
child: Builder(
builder: (context) {
Map<String, dynamic> weatherResultInJson = jsonDecode(configurationDTO.weatherResult!);
WeatherData weatherDataResult = WeatherData.fromJson(weatherResultInJson);
return WeatherView(weatherData: weatherDataResult);
}
),
WeatherData weatherDataResult = WeatherData.fromJson(weatherResultInJson);
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: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!),
],
),