הצבת ווידג'טים זה מעל זה
חלק מהיחידה פריסות שמתאימות למסך במסלול ה-Flutter של Coddy. שיעור 10 מתוך 30.
Column מציב את רכיבי-הילד שלו זה מתחת לזה, ו-Row מציב אותם זה לצד זה. Stack מציב אותם זה מעל זה, כמו דפי נייר על שולחן:
Stack(
children: [
Container(height: 200, color: Colors.grey),
const Text('On top'),
],
)רכיב-הילד הראשון מצויר ראשון, בתחתית. כל רכיב-ילד אחריו מצויר מעל הרכיבים שלפניו. לכן התמונה מופיעה ראשונה, והתווית שמונחת עליה מופיעה אחרונה.
רכיבי-הילד מתחילים בפינה השמאלית העליונה של Stack, והגודל של Stack הוא כגודל רכיב-הילד הגדול ביותר שלו. כך תג, תווית או כפתור הפעלה מונחים על תמונה.
אתגר
קלתגית SALE נמצאת מתחת לתמונה. מקמו אותה על התמונה: שנו את ה־Column שמחזיק את שניהם ל־Stack, כך שהתגית תצויר בחזית.
נסו בעצמכם
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('Shop')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Column(
children: [
Container(
height: 200,
color: Colors.blueGrey.shade100,
child: const Center(child: Icon(Icons.image, size: 64)),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.red,
child: const Text('SALE', style: TextStyle(color: Colors.white)),
),
],
),
const SizedBox(height: 12),
const Text('Running shoes', style: TextStyle(fontSize: 20)),
],
),
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה פריסות שמתאימות למסך
1חלוקת מקום בשורה
Expanded ממלא את השורהחלוקת מקום באמצעות flexFlexible נצמד לילד שלוSpacer מפריד בין הפריטיםתרגלו בעצמכם: קומפיילר Flutter אונליין