名片：联系方式

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

名片的用途是方便联系，因此最后一部分是联系方式：电话号码和电子邮件，各自带有图标，放在白色面板上。

每一行联系方式都是由图标、一小段间距和文本组成的 Row。两行放在一个 Column 中，再放入带有内边距和圆角的 Container。整个屏幕使用浅色背景，让白色面板更加醒目：

Scaffold(
  backgroundColor: Colors.indigo.shade50,
  body: ...,
)

Colors.indigo.shade50 是最浅的靛蓝色。Colors 中的每种颜色都有从 shade50 到 shade900 的不同深浅。

挑战

简单

完成这张卡片：

为 Scaffold 设置 backgroundColor:，值为 Colors.indigo.shade50
在职位下方，也就是 SizedBox(height: 24) 之后，添加一个 Container，设置 16 像素的内边距，并使用白色的 BoxDecoration 和圆角
在其中放一个包含两行的 Column：第一行使用 Icons.phone 和 +1 555 0100，第二行使用 Icons.email 和 jordan@example.com

亲手试试

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)),
              ),
              SizedBox(height: 16),
              Text(
                'Jordan Diaz',
                style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
              ),
              Text(
                'Flutter Developer',
                style: TextStyle(color: Colors.blueGrey),
              ),
            ],
          ),
        ),
      ),
    );
  }
}