Empiler des widgets les uns sur les autres

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 10 sur 30.

Un Column place ses enfants les uns sous les autres, et un Row côte à côte. Un Stack les place les uns par-dessus les autres, comme des feuilles de papier sur un bureau :

Stack(
  children: [
    Container(height: 200, color: Colors.grey),
    const Text('On top'),
  ],
)

Le premier enfant est dessiné en premier, en bas. Chaque enfant suivant est dessiné par-dessus ceux qui le précèdent. Ainsi, la photo est placée en premier et l’étiquette qui y est posée en dernier.

Les enfants commencent dans le coin supérieur gauche du Stack, et le Stack est aussi grand que son enfant le plus grand. C’est ainsi qu’un badge, une étiquette ou un bouton de lecture se superpose à une image.

Défi

Facile

Le badge SALE se trouve sous la photo. Place-le sur la photo : remplace le Column qui contient les deux éléments par un Stack, avec le badge dessiné au premier plan.

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(
        appBar: AppBar(title: const Text('Shop')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Column(
                children: [
                  Container(
                    height: 200,
                    color: Colors.blueGrey.shade100,
                    child: const Center(child: Icon(Icons.image, size: 64)),
                  ),
                  Container(
                    padding: const EdgeInsets.all(8),
                    color: Colors.red,
                    child: const Text('SALE', style: TextStyle(color: Colors.white)),
                  ),
                ],
              ),
              const SizedBox(height: 12),
              const Text('Running shoes', style: TextStyle(fontSize: 20)),
            ],
          ),
        ),
      ),
    );
  }
}