كيفية وضع العناصر فوق بعض في فلاتر بدون مكتبات باستخدام Stack و Positioned

Ahmed Mahmoud

اخر تحديث :

كيفية وضع العناصر فوق بعض في فلاتر بدون مكتبات باستخدام Stack و Positioned

في كثير من الاحيان نحتاج ان نقوم بوضع تصميم فوق تصميم ولكن لا يكون بداخله كما يتم في Stack ولكن يكون بينه وبين تصميم اخر او فوقة كما هو موضح في الصورة الخاصه بالمقالة وهي وضع عنصر فوق عنصر اخر وهذه العملية سوف تتم عن طريق استخدام Positioned ووضع الصورة الاخرى في مكان معين داخل التصميم كما سوف نشاهد في الكود التالي .

أصدرت Google Flutter كإطار عمل مفتوح المصدر لترميز وتطوير تطبيقات Android و iOS الأصلية. Flutter هو إطار عمل جديد نسبيًا ، حيث تم الكشف عنه كأول إصدار مستقر 1.0 في حدث Flutter Live في ديسمبر 2018.

يوفر Flutter بساطة البرمجة بأداء يشبه الأصلي ، كل ذلك مع الحفاظ على التناسق البصري عبر الأنظمة الأساسية. تم تصميم Dart ، لغة برمجة Flutter ، لتكون بديلاً لجافا سكريبت. Flutter هو ، قبل كل شيء ، مفتوح المصدر ومجاني تمامًا. على GitHub و Stack Overflow ، أصبح Flutter مرتبطًا الآن بـ React Native من حيث الشعبية. في مقال حديث ، قمنا بمقارنة مزايا وعيوب Flutter vs React Native باستخدام تسعة معايير.

كيفية استخدام Stack و Positioned في flutter

قمنا بعمل Center لجعل التصميم يكون في المنتصف وبعدها تم استخدام الامر Overflow.visible ليظهر العنصر فوق الاخر وبعدها تم عمل padding لكي نبعد التصميم عن الحواف وبعدها قمنا بعمل تصميم للcontainer بالشكل الذي نرغب به مثل تغيير الحواف وكتابة محتوي نصي بداخلة او اي تصميم تريده بعدها تم استخدام الامر Positioned وهو المسؤول عن وضع اي عنصر في اي مكان اخر تريده وهنا قمنا بعمل موقع لوضع التصميم وبعدها قمنا بوضع صورة كما هو موضح , وهذا كل ما في الامر ببساطة .

code.dart

class CodeLess extends StatelessWidget {
  const CodeLess({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Stack(
          overflow: Overflow.visible,
          children: [
            Padding(
              padding: const EdgeInsets.all(32.0),
              child: Container(
                height: 100,
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.orangeAccent,
                  borderRadius: BorderRadius.only(bottomRight: Radius.circular(20)),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(25.0),
                      child: Text('vacation' , style: TextStyle(fontWeight: FontWeight.bold , fontSize: 33 , color: Colors.white),),
                    ),
                  ],
                ),
              ),
            ),
            Positioned(
              right: 10,
                top: -35,
                child: Image.asset('assets/beach.png' , height: 150,)
            ),
          ],
        ),
      )
    );
  }
}