
Zehnte Woche: Noch mehr FlutterFlow
In der zehnten Woche hat meine Gruppe vor allem einfach nur weiter in FlutterFlow gearbeitet. So haben wir beispielsweise die Guide-Funktion fertiggestellt (noch ohne NFC-Tags).
Ich habe nochmals die Navigationsleiste mit neuen Icons überarbeitet und dafür gesorgt, dass die Labels der Navigationsleiste übersetzt werden können, indem diese nicht mehr in der Komponente gehardcoded sind:
import 'package:material_symbols_icons/symbols.dart';
class Navigation extends StatefulWidget {
const Navigation({
super.key,
this.width,
this.height,
required this.selectedIndex,
required this.goObjects,
required this.goTimeline,
required this.goGuestbook,
required this.goQrCode,
required this.backgroundColor,
required this.indicatorColor,
required this.goTopics,
required this.goGuide,
required this.objectsLabel,
required this.qrCodeLabel,
required this.topicsLabel,
required this.timelineLabel,
required this.guestbookLabel,
required this.guideLabel,
});
final double? width;
final double? height;
final int selectedIndex;
final Future Function() goObjects;
final Future Function() goTimeline;
final Future Function() goGuestbook;
final Future Function() goQrCode;
final Color backgroundColor;
final Color indicatorColor;
final Future Function() goTopics;
final Future Function() goGuide;
final String objectsLabel;
final String qrCodeLabel;
final String topicsLabel;
final String timelineLabel;
final String guestbookLabel;
final String guideLabel;
@override
State<Navigation> createState() => _NavigationState();
}
class _NavigationState extends State<Navigation> {
@override
Widget build(BuildContext context) {
return NavigationRail(
destinations: [
NavigationRailDestination(
icon: const Icon(Symbols.deployed_code),
selectedIcon: const Icon(Symbols.deployed_code, fill: 1),
label: Text(widget.objectsLabel),
),
NavigationRailDestination(
icon: const Icon(Symbols.qr_code),
selectedIcon: const Icon(Symbols.qr_code, fill: 1),
label: Text(widget.qrCodeLabel),
),
NavigationRailDestination(
icon: const Icon(Symbols.topic),
selectedIcon: const Icon(Symbols.topic, fill: 1),
label: Text(widget.topicsLabel),
),
NavigationRailDestination(
icon: const Icon(Symbols.sort),
selectedIcon: const Icon(Symbols.sort, fill: 1),
label: Text(widget.timelineLabel),
),
NavigationRailDestination(
icon: const Icon(Symbols.forum),
selectedIcon: const Icon(Symbols.forum, fill: 1),
label: Text(widget.guestbookLabel),
),
NavigationRailDestination(
icon: const Icon(Symbols.co_present),
selectedIcon: const Icon(Symbols.co_present, fill: 1),
label: Text(widget.guideLabel),
),
],
selectedIndex: widget.selectedIndex,
labelType: NavigationRailLabelType.all,
groupAlignment: 0,
onDestinationSelected: (selectedIndex) {
switch (selectedIndex) {
case 0:
widget.goObjects();
case 1:
widget.goQrCode();
case 2:
widget.goTopics();
case 3:
widget.goTimeline();
case 4:
widget.goGuestbook();
case 5:
widget.goGuide();
}
},
backgroundColor: widget.backgroundColor,
indicatorColor: widget.indicatorColor,
);
}
}
Auch habe ich die leichte Sprache als zusätzliche Sprache zur App hinzugefügt:
import 'dart:convert';
import 'package:google_fonts/google_fonts.dart';
class LanguageChoice extends StatefulWidget {
const LanguageChoice({
super.key,
this.width,
this.height,
required this.selected,
required this.switchToGerman,
required this.switchToEnglish,
required this.switchToDutch,
required this.selectedBackgroundColor,
required this.switchToEasyLanguage,
required this.easyLanguageColor,
});
final double? width;
final double? height;
final Language selected;
final Future Function() switchToGerman;
final Future Function() switchToEnglish;
final Future Function() switchToDutch;
final Color selectedBackgroundColor;
final Future Function() switchToEasyLanguage;
final Color easyLanguageColor;
@override
State<LanguageChoice> createState() => _LanguageChoiceState();
}
class _LanguageChoiceState extends State<LanguageChoice> {
@override
Widget build(BuildContext context) {
return SegmentedButton<Language>(
segments: <ButtonSegment<Language>>[
ButtonSegment(
value: Language.easy_language,
label: Icon(
const IconData(0xe900, fontFamily: 'CustomIcons'),
color: widget.easyLanguageColor,
),
),
const ButtonSegment(
value: Language.german,
label: Text("🇩🇪"),
),
const ButtonSegment(
value: Language.english,
label: Text("🇬🇧"),
),
const ButtonSegment(
value: Language.dutch,
label: Text("🇳🇱"),
),
],
selected: {widget.selected},
onSelectionChanged: (selected) {
switch (selected.first) {
case Language.easy_language:
widget.switchToEasyLanguage();
case Language.german:
widget.switchToGerman();
case Language.english:
widget.switchToEnglish();
case Language.dutch:
widget.switchToDutch();
}
},
style: SegmentedButton.styleFrom(
textStyle: GoogleFonts.notoColorEmoji(),
selectedBackgroundColor: widget.selectedBackgroundColor,
),
);
}
}
String languageText(
String engText,
String gerText,
String nlText,
Language language,
String easyText,
) {
/// MODIFY CODE ONLY BELOW THIS LINE
switch (language) {
case Language.easy_language:
return easyText;
case Language.german:
return gerText;
case Language.english:
return engText;
case Language.dutch:
return nlText;
}
/// MODIFY CODE ONLY ABOVE THIS LINE
}