Einmal im Jahr veranstaltet Flutter Dev einen Hackathon. Und dieses Jahr habe auch ich im Team mit coodoo mitgemacht. Beim Flutter-Puzzle Hack. Wir sahen es als eine gute Herausforderung unser Wissen über Flutter zu vertiefen und Kollegen, die neu in dieser Technologie sind, Flutter näherzubringen. Zu denen gehörte ich. Ich habe zwar schonmal in Flutter Projekte ausprobiert, aber nie intensiv damit beschäftigt. So haben Fortgeschrittene wie auch Anfänger zusammen an einem Projekt gearbeitet.
Die Aufgabe war ein Schiebepuzzle in Flutter umzusetzen. Also ein Puzzle, indem man numerierte Plättchen so lange verschiebt, bis man die richtige Reihenfolge hat und so gewinnt
Flutter Puzzle Hack Idee
Unsere Idee war etwas anders. Wir wollten nicht, dass der/die Spieler*in gewinnt, sondern dass er/sie in kurzer Zeit so viele Plättchen wie möglich korrekt setzt. Für jedes korrekt platzierte Plättchen gibt es extra Zeit. Nach Ablauf der Zeit wird eine Übersicht angezeigt, mit einer Anzahl der Aktionen und den korrekt platzierten Plättchen. Die Motivation ist es, immer besser zu werden und die Anzahl der korrekt platzierten Plättchen nach jedem neuen Versuch zu erhöhen. Hier ein Video zu unserem erstellten Puzzle:
Wie wir es umgesetzt haben
Das Projekt haben wir in einer einfachen Ordnerstruktur gehalten.
In Models wird ein einfaches Datenmodell von einem Plättchen dargestellt mit Werten wie Größe und Farbe.
class PuzzleItem {
PuzzleItem(this.value, {this.color}) {
color ??= Colors.yellow.shade900;
}
int value = 0;
double width = 75.0;
double height = 75.0;
Curve? animationCurve;
Color? color ;
}
Jedes PuzzleItem ist ein Teil eines zweidimensionalen Arrays und wird zur Darstellung des Puzzles benutzt.
class _PuzzleGame extends State<PuzzleGame> with TickerProviderStateMixin {
final List<List<PuzzleItem>> puzzleMatrix = [];
final int listHeight = 4;
final int listWidth = 4;
In Repositories ist die Verwaltung von globalen Daten wie auch Events. In Repos können Events angestoßen werden, auf die andere Widgets reagieren.
addTime(int extraTime) {
_controller.add({"added": true, 'time': extraTime});
}
removeTime(int removeTime) {
_controller.add({"added": false, 'time': removeTime});
}
resetStartTime() {
_controller.add({"added": false, "time": -1});
}
Z.B. betrifft das die Extra-Zeit die man bekommt, wenn man ein Plättchen korrekt platziert.
@override
void initState() {
super.initState();
_restartTimer();
PuzzleRepo().getController().listen((event) async {
bool add = event['added'];
int time = event['time'];
// -1 -> restart starTtime
if (time == -1) {
_counter = PuzzleRepo().getStartTime();
setState(() {
_showAnimatedTime = false;
});
} else if (add) {
_counter += time;
setState(() {
_showAnimatedTime = true;
});
await Future.delayed(const Duration(milliseconds: 3000));
setState(() {
_showAnimatedTime = false;
});
} else if (!add) {
_counter -= time;
setState(() {});
}
_restartTimer();
});
}
Die verschiedenen Screens beinhalten die Darstellung der Start-, Spiel- und Game Over-Screens. Im Ordner Services würden Endpunkte sein, um z.B. mit einer Datenbank zu kommunizieren, aber war für diese Anwendung nicht notwendig. In Templates befinden sich modulare Widgets, wie z.B. der Timer. Dieser Timer kann modular in jeden Screen eingesetzt werden.
Was ich gelernt habe
Was haben wir von diesem Flutter Puzzle Hack gelernt? Mit den Vorgaben und Schulungen unserer erfahrenen Entwickler im Bereich Flutter konnte ich einfach durchstarten und eine Idee umsetzen. Ich habe einfache wie auch wichtige Konzepte gelernt, wie die korrekte Ordnerstruktur, Templates und Repositories zu nutzen. Für weitere Information schaut hier: GitHub-Projekt Devpost