Lignes dans des colonnes

Fait partie de la section Votre première application du Journey Flutter de Coddy. Leçon 24 sur 32.

Un Row peut être l’un des enfants d’un Column. C’est ainsi qu’un écran affiche des lignes contenant plusieurs éléments :

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

mainAxisSize: MainAxisSize.min fait qu’une ligne ou une colonne n’occupe que l’espace nécessaire à ses enfants, au lieu de prendre tout l’espace dont elle dispose. Ici, cela maintient les deux au milieu de l’écran.

Défi

Facile

Transforme ceci en un petit en-tête de profil :

garde Ada Lovelace sur la première ligne
place London et 1815 côte à côte en dessous, dans une Row

Essayez vous-même

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