명함: 연락처

Coddy Flutter 여정의 첫 앱 만들기 섹션에 포함된 레슨. 32개 중 32번째.

명함은 연락을 주고받기 위한 것이므로, 마지막 부분은 연락처입니다. 흰색 패널에 아이콘과 함께 전화번호와 이메일 주소를 각각 표시합니다.

각 연락처 행은 아이콘, 약간의 간격, 텍스트로 이루어진 Row입니다. 두 행은 패딩과 둥근 모서리가 있는 Container 안의 Column에 배치합니다. 화면 전체에 밝은 배경을 적용하면 흰색 패널이 돋보입니다.

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

Colors.indigo.shade50는 가장 밝은 남색 계열입니다. Colors의 모든 색상에는 shade50부터 shade900까지의 명도가 있습니다.

챌린지

쉬움

카드를 완성하세요:

Scaffold에 Colors.indigo.shade50을 backgroundColor:로 지정하세요
직업 아래에 SizedBox(height: 24)를 추가한 다음, 패딩을 16픽셀로 설정하고 모서리를 둥글게 처리한 흰색 BoxDecoration을 적용한 Container를 추가하세요
그 안에 두 개의 행으로 이루어진 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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}