Menu
CoddyTech

רוחב מרבי

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

כרטיס עם טקסט ארוך מתרחב לרוחב המסך. בטלפון הוא נראה בסדר; בטאבלט אותו כרטיס נמתח לשורה אחת באורך אלף פיקסלים, שקשה לקרוא.

ConstrainedBox מגדיר גבולות לגודל של הרכיב הבן שלו. maxWidth: מציין את הרוחב המרבי שאליו הוא יכול להתרחב:

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 400),
  child: Container(...),
)

במסך שרוחבו קטן מ־400 פיקסלים, הכרטיס עדיין מצטמצם כדי להתאים. במסך רחב יותר, הוא נעצר ברוחב 400, והטקסט נשבר לשורות נוספות.

BoxConstraints מקבל גם את minWidth:, minHeight: ואת maxHeight:. ערך מינימום הוא הגודל הקטן ביותר של הרכיב הבן, ולכן הוא אף פעם לא מונע ממנו לגדול.

challenge icon

אתגר

קל

שמרו על כרטיס הציטוט קריא במסכים רחבים: אפשרו לו להתרחב לרוחב של עד 320 פיקסלים.

נסו בעצמכם

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('Quote of the Day')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.amber.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Text(
                'The best way to learn to build apps is to build apps, one small screen at a time.',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה פריסות שמתאימות למסך

תרגלו בעצמכם: קומפיילר Flutter אונליין