Positionner dans un coin

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

Les enfants d’un Stack commencent dans son coin supérieur gauche. Pour en placer un ailleurs, enveloppe-le dans un Positioned et indique la distance qui le sépare des bords :

Stack(
  children: [
    Container(height: 200, color: Colors.grey),
    const Positioned(
      bottom: 8,
      left: 8,
      child: Text('Bottom left'),
    ),
  ],
)

top:, bottom:, left: et right: indiquent des distances en pixels à partir du bord correspondant du Stack. Indique un côté pour chaque direction : top ou bottom, et left ou right.

Un enfant Positioned ne modifie pas la taille du Stack. C’est toujours la photo qui détermine sa taille.

Défi

Facile

Déplacez le badge SALE dans le coin supérieur droit de la photo, à 12 pixels du haut et à 12 pixels de la droite.

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: [
              Stack(
                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)),
            ],
          ),
        ),
      ),
    );
  }
}