רוחב מרבי
חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 15 מתוך 30.
כרטיס עם טקסט ארוך מתרחב לרוחב המסך. בטלפון הוא נראה בסדר; בטאבלט אותו כרטיס נמתח לשורה אחת באורך אלף פיקסלים, שקשה לקרוא.
ConstrainedBox מגדיר גבולות לגודל של הרכיב הבן שלו. maxWidth: מציין את הרוחב המרבי שאליו הוא יכול להתרחב:
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 400),
child: Container(...),
)במסך שרוחבו קטן מ־400 פיקסלים, הכרטיס עדיין מצטמצם כדי להתאים. במסך רחב יותר, הוא נעצר ברוחב 400, והטקסט נשבר לשורות נוספות.
BoxConstraints מקבל גם את minWidth:, minHeight: ואת maxHeight:. ערך מינימום הוא הגודל הקטן ביותר של הרכיב הבן, ולכן הוא אף פעם לא מונע ממנו לגדול.
אתגר
קלשמרו על כרטיס הציטוט קריא במסכים רחבים: אפשרו לו להתרחב לרוחב של עד 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),
),
),
),
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פריסות שמתאימות למסך
1חלוקת מקום בשורה
Expanded ממלא את השורהחלוקת מקום באמצעות flexFlexible נצמד לילד שלוSpacer מפריד בין הפריטים4גדלים ונקודות שבירה
רוחב מלא: double.infinityרוחב מרביגודל המסך: MediaQueryנקודות שבירה באמצעות LayoutBuilderתרגלו בעצמכם: קומפיילר Flutter אונליין