Menu
CoddyTech
flag Ar iconالعربيةdown icon

بطاقة العمل: التنسيق

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

أصبحت الأجزاء في أماكنها. حان الآن وقت جعلها تبدو كبطاقة: ينبغي أن يكون الاسم أول ما تقع عليه العين، وأن تظهر الوظيفة تحته في سطر أقل بروزًا.

يجعل الحجم والوزن السطر مهمًا. ويجعل اللون الأكثر هدوءًا السطر أقل بروزًا. وتتيح مساحة صغيرة بين الصورة الرمزية والاسم لكلٍّ منهما أن يتنفّس.

challenge icon

التحدي

سهل

نسّق البطاقة:

  • ضع مسافة مقدارها 16 بكسل بين الصورة الرمزية والاسم
  • اجعل حجم الاسم 28 واجعله عريضًا
  • اجعل لون الوظيفة Colors.blueGrey

جرّب بنفسك

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(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              CircleAvatar(
                radius: 48,
                backgroundColor: Colors.indigo,
                child: Text('JD', style: TextStyle(fontSize: 32, color: Colors.white)),
              ),
              Text('Jordan Diaz'),
              Text('Flutter Developer'),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس تطبيقك الأول

تدرّب بنفسك: مترجم Flutter عبر الإنترنت