Posisi di Sudut

Termasuk bagian Layout yang Menyesuaikan dalam perjalanan Flutter di Coddy. Pelajaran 11 dari 30.

Anak-anak dari Stack dimulai dari sudut kiri atasnya. Untuk menempatkan salah satunya di tempat lain, bungkus dengan Positioned dan tentukan jaraknya dari tepi:

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

top:, bottom:, left: dan right: adalah jarak dalam piksel dari tepi Stack tersebut. Tentukan satu sisi untuk setiap arah: top atau bottom, serta left atau right.

Anak Positioned tidak mengubah ukuran Stack. Foto tetap menentukan ukurannya.

Tantangan

Mudah

Pindahkan lencana SALE ke sudut kanan atas foto, 12 piksel dari atas dan 12 dari kanan.

Coba sendiri

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