Expanded Übung

main.dart

/*
Aufgabe:
Erstelle eine Flutter-App mit einem einzigen Screen. 
Dieser Screen soll in drei vertikale Bereiche aufgeteilt werden. 
Die Höhe der Bereiche soll im Verhältnis 20 % – 60 % – 20 % verteilt werden.

Inhalt der Bereiche:
1. Oberer Bereich (20 %):
   - Zeige hier einen großen Text als Titel, zentriert in der Mitte des Bereichs.
   - Beispiel: "Willkommen zur App!"

2. Mittlerer Bereich (60 %):
   - Fülle diesen Bereich mit einer scrollbaren Liste.
   - Die Liste soll aus mehreren eigenen Custom-Widgets bestehen.
   - Ein Custom-Widget könnte z. B. so aussehen:
       * eine Box oder Karte mit einem Titel (großer Text)
       * darunter eine kurze Beschreibung (normaler Text).
   - In der Liste sollen mindestens 5 dieser Custom-Widgets angezeigt werden.

3. Unterer Bereich (20 %):
   - Zeige hier einen kurzen Infotext über die App oder einen Hinweis.
   - Beispiel: "Diese App ist ein Übungsprojekt"

*/

import 'package:flutter/material.dart';

void main() {
  runApp(MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Expanded(
                flex: 1,
                child: Center(
                  child: Text(
                    "Willkommen zur App!",
                    style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
              Expanded(
                flex: 3,
                child: ListView.builder(
                  itemCount: 10,
                  itemBuilder: (context, index) {
                    return CustomBox(
                      title: "Element $index",
                      description: "Das ist Beschreibung für Element $index",
                    );
                  },
                ),
              ),

              Expanded(
                flex: 1,
                child: Center(child: Text("Diese App ist ein Übungsprojekt")),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class CustomBox extends StatelessWidget {
  final String title, description;

  const CustomBox({super.key, required this.title, required this.description});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [Text(title), Text(description)],
      ),
    );
  }
}