بطاقة العمل: التنسيق
جزء من قسم تطبيقك الأول في رحلة Flutter على Coddy. الدرس 31 من 32.
أصبحت الأجزاء في أماكنها. حان الآن وقت جعلها تبدو كبطاقة: ينبغي أن يكون الاسم أول ما تقع عليه العين، وأن تظهر الوظيفة تحته في سطر أقل بروزًا.
يجعل الحجم والوزن السطر مهمًا. ويجعل اللون الأكثر هدوءًا السطر أقل بروزًا. وتتيح مساحة صغيرة بين الصورة الرمزية والاسم لكلٍّ منهما أن يتنفّس.
التحدي
سهلنسّق البطاقة:
- ضع مسافة مقدارها
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'),
],
),
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس تطبيقك الأول
تدرّب بنفسك: مترجم Flutter عبر الإنترنت