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