4.1 Einführung und Startcode
Für dieses Projekt sollten Sie wieder zu Zweit arbeiten und Ihre Rolle tauschen.
Was ist das Ziel?
In diesem Kapitel werden Sie eine Quiz-App erstellen, bei der Benutzer:innen Aussagen auf Ihre Korrektheit prüfen müssen und gleichzeitig darstellt, wie viele der Aussagen richtig bewertet wurden. In Abschnitt 2.2 haben Sie bereits gelernt was Klassen und Objekte sind und jetzt werden Sie anhand der Quiz-App diese Konzepte festigen. Am Ende des Kapitels werden Sie eine App besitzen, die ungefähr so aussieht:
Bitte erstellen Sie ein neues Flutter-Projekt und kopieren Sie den folgenden Startcode in Ihre main.dart Datei.
import 'package:flutter/material.dart';
void main() {
runApp(QuizApp());
}
class QuizApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey.shade900,
body: SafeArea(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: QuizPage(),
),
),
),
);
}
}
class QuizPage extends StatefulWidget {
@override
_QuizPageState createState() => _QuizPageState();
}
// 1
class _QuizPageState extends State {
@override
Widget build(BuildContext context) {
// 2
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 3
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: Text(
'Hier erscheinen die Aussagen.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
color: Colors.white,
),
),
),
),
),
// 3
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: TextButton(
style: TextButton.styleFrom(backgroundColor: Colors.green),
child: Text(
'Wahr',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
onPressed: () {
// hier folgt die Aktion, falls User Wahr ausgewählt hat.
},
),
),
),
// 3
Expanded(
child: Padding(
padding: EdgeInsets.all(15.0),
child: TextButton(
style: TextButton.styleFrom(backgroundColor: Colors.red),
child: Text(
'Falsch',
style: TextStyle(
fontSize: 20.0,
color: Colors.white,
),
),
onPressed: () {
// hier folgt die Aktion, falls User Falsch ausgewählt hat.
},
),
),
),
// hier folgt ein Row-Widget zur Speicherung des Punktestandes.
],
);
}
}
- In der Klasse _QuizPageState wird die Benutzeroberfläche der App definiert.
- Das Column-Widget wird wieder dazu verwendet, um die Widgets auf dem Bildschirm an die richtige Position zu bringen.
- Aktuell besteht die App lediglich aus Expanded-Widgets, welche Text-Widgets und TextButton-Widgets beheimaten.
Im nächsten Abschnitt werden Sie einen Punktezähler erstellen.