Menu
CoddyTech

ריווח בתוך גלישת שורות

חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 9 מתוך 30.

התגיות מתאימות עכשיו, אבל הן נוגעות זו בזו. ל־Wrap יש שתי הגדרות לרווח שבין הילדים שלו:

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

spacing: הוא המרווח בין שני ילדים באותה שורה. runSpacing: הוא המרווח בין שורה אחת לבאה אחריה. כל שורה של Wrap נקראת רצף, ומכאן מגיע השם.

המרווחים נלקחים בחשבון כש־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 אונליין