Menu
CoddyTech

כרטיס ביקור: עיצוב

חלק מהיחידה האפליקציה הראשונה שלך במסלול ה-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 אונליין