Righe all’interno delle colonne

Fa parte della sezione La tua prima app del percorso Flutter di Coddy. Lezione 24 di 32.

Una Row può essere uno dei figli di una Column. È così che una schermata può avere righe con diversi elementi al loro interno:

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

mainAxisSize: MainAxisSize.min fa sì che una riga o una colonna abbia solo le dimensioni necessarie ai suoi figli, invece di occupare tutto lo spazio disponibile. Qui mantiene entrambi al centro della schermata.

Sfida

Facile

Trasformalo in una piccola intestazione del profilo:

mantieni Ada Lovelace sulla prima riga
metti London e 1815 affiancati sotto, in una Row

Provalo tu

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'),
            ],
          ),
        ),
      ),
    );
  }
}