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

التباعد داخل الالتفاف

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

أصبحت العناصر ملائمة الآن، لكنها متلامسة. يحتوي Wrap على إعدادين للمسافة بين عناصره الفرعية:

Wrap(
  spacing: 8,
  runSpacing: 12,
  children: [...],
)

spacing: هي المسافة بين عنصرين فرعيين في السطر نفسه. أما runSpacing: فهي المسافة بين سطر وآخر. يُسمّى كل سطر في Wrap run، ومن هنا جاءت التسمية.

تُحتسب المسافات عندما يحدد Wrap ما يتسع في السطر، لذا قد تؤدي قيمة أكبر لـ spacing إلى نقل عنصر فرعي إلى السطر التالي.

challenge icon

التحدي

سهل

امنح الوسوم مساحة:

  • 8 بكسلات بين الوسوم في السطر نفسه
  • 12 بكسلًا بين السطور

جرّب بنفسك

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final tags = ['Dart', 'Flutter', 'Mobile', 'Design', 'Games', 'Web'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Interests')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Wrap(
            children: [
              for (final tag in tags)
                Container(
                  width: 110,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Colors.purple.shade100,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Center(child: Text(tag)),
                ),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

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

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

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