عناصر واجهة مستخدم من قائمة

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

إن كتابة عنصر Text واحد لكل عنصر تستغرق وقتًا طويلًا، وتتوقف عن العمل عندما تتغير القائمة. يمكن لـ Dart إنشاء عناصر الواجهة لك، باستخدام for داخل القائمة:

List<String> colors = ['red', 'green', 'blue'];

Column(
  children: [
    for (String color in colors) Text(color),
  ],
)

اقرأها هكذا: لكل color في colors، أضف Text(color). سيحتوي العمود على ثلاثة عناصر نصية، وإذا أضفت لونًا رابعًا إلى القائمة، فسيظهر عنصر نصي رابع تلقائيًا.

التحدي

سهل

يُظهر العمود أول كوكبين فقط. اعرض الكواكب الأربعة كلها بالترتيب، باستخدام حلقة for واحدة على قائمة planets بدلًا من سطري Text.

جرّب بنفسك

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    List<String> planets = ['Mercury', 'Venus', 'Earth', 'Mars'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(planets[0]),
              Text(planets[1]),
            ],
          ),
        ),
      ),
    );
  }
}