مسافة بين العناصر

جزء من قسم تطبيقك الأول في رحلة Flutter على Coddy. الدرس 21 من 32.

تتلامس العناصر الفرعية في Column بعضها مع بعض. لإضافة مسافة بين عنصرين منها، ضع عنصر SizedBox فارغًا في القائمة:

Column(
  children: [
    Text('Top'),
    SizedBox(height: 20),
    Text('Bottom'),
  ],
)

لا يرسم SizedBox شيئًا. بل يشغل مساحة فقط: ارتفاعها هنا 20 بكسل. في Row، استخدم SizedBox(width: 20) بدلًا من ذلك.

التحدي

سهل

ضع مسافة قدرها 24 بكسل بين Title وSubtitle.

جرّب بنفسك

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(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Title', style: TextStyle(fontSize: 32)),
              Text('Subtitle'),
            ],
          ),
        ),
      ),
    );
  }
}