מיקום בפינה

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-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)),
            ],
          ),
        ),
      ),
    );
  }
}