名片：布局

本课属于 Coddy Flutter 学习旅程的“你的第一个应用”单元。第 30 课，共 32 课。

现在把所有内容整合起来吧。在接下来的 3 节课中，你将制作一个名片应用，这是每个个人资料页的基础界面。

先设计布局。先把屏幕草绘成几个方框：顶部是圆形头像，下面是姓名，再下面是职位，所有内容都在屏幕中间排成一列。方框位置确定后，再添加样式。

挑战

简单

在屏幕中间构建卡片，将以下内容放在一个 Column 中（使用 mainAxisSize: MainAxisSize.min）：

一个 CircleAvatar，设置 radius: 48、backgroundColor: Colors.indigo，并将白色、大小为 32 的首字母 JD 作为其子元素
姓名：Jordan Diaz
职位：Flutter Developer

亲手试试

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: Text('Jordan Diaz'),
        ),
      ),
    );
  }
}