وضع عنصر في زاوية

جزء من قسم تصميم يتكيف مع الشاشة في رحلة Flutter على Coddy. الدرس 11 من 30.

تبدأ العناصر التابعة لـ Stack من زاويته العلوية اليسرى. لوضع أحدها في مكان آخر، أَحِطْه بـ Positioned وحدد بُعده عن الحواف:

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

تمثل top: وbottom: وleft: وright: مسافات بالبكسل من الحافة المقابلة في Stack. حدّد جانبًا واحدًا لكل اتجاه: top أو bottom، وleft أو right.

لا يغيّر العنصر التابع Positioned حجم Stack. تظل الصورة هي التي تحدد حجمه.

التحدي

سهل

انقل شارة SALE إلى الزاوية العلوية اليمنى من الصورة، على بُعد 12 بكسل من الأعلى و12 من اليمين.

جرّب بنفسك

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