Menu
CoddyTech
flag Ar iconالعربيةdown icon

رصّ الودجات فوق بعضها

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

يضع Column عناصره الفرعية واحدًا تحت الآخر، بينما يضع Row عناصره جنبًا إلى جنب. أما Stack فيضعها فوق بعضها، مثل أوراق على مكتب:

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

يُرسَم العنصر الفرعي الأول أولًا، في الأسفل. ويُرسَم كل عنصر فرعي بعده فوق العناصر التي سبقته. لذا توضع الصورة أولًا، ثم التسمية التي تظهر عليها أخيرًا.

تبدأ العناصر الفرعية من الزاوية العلوية اليسرى لـ Stack، ويكون Stack بحجم أكبر عناصره الفرعية. وهكذا توضع شارة أو تسمية أو زر تشغيل على صورة.

challenge icon

التحدي

سهل

تظهر شارة SALE أسفل الصورة. ضعها على الصورة: غيّر Column التي تضم العنصرين إلى Stack، بحيث تُرسم الشارة في المقدمة.

جرّب بنفسك

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)),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس تصميم يتكيف مع الشاشة

تدرّب بنفسك: مترجم Flutter عبر الإنترنت