Zeilen innerhalb von Spalten

Teil des Abschnitts Deine erste App der Flutter-Journey von Coddy. Lektion 24 von 32.

Eine Row kann eines der Kinder einer Column sein. So erhält ein Bildschirm Zeilen mit mehreren Elementen:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Pancakes'),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('20 min'),
        SizedBox(width: 12),
        Text('Easy'),
      ],
    ),
  ],
)

mainAxisSize: MainAxisSize.min bewirkt, dass eine Zeile oder Spalte nur so groß wie ihre Kinder ist, anstatt den gesamten verfügbaren Platz einzunehmen. Hier sorgt es dafür, dass beide Elemente in der Mitte des Bildschirms bleiben.

Aufgabe

Einfach

Verwandle dies in einen kleinen Profilkopf:

Behalte Ada Lovelace in der ersten Zeile
Platziere London und 1815 nebeneinander darunter, in einer Row

Probier es selbst

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Ada Lovelace', style: TextStyle(fontSize: 28)),
              Text('London'),
              Text('1815'),
            ],
          ),
        ),
      ),
    );
  }
}