名刺：連絡先

CoddyのFlutterジャーニー「はじめてのアプリ」セクションの一部。レッスン 32/32。

名刺は連絡を取るためのものなので、最後の部分は連絡先情報です。白いパネルに、アイコン付きの電話番号とメールアドレスをそれぞれ表示します。

各連絡先の行は、アイコン、小さな間隔、テキストを並べたRowです。2つの行をColumnに配置し、パディングと角丸を設定したContainerの中に入れます。画面全体に明るい背景色を設定すると、白いパネルが引き立ちます。

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

Colors.indigo.shade50はインディゴの最も明るい色合いです。Colorsの各色には、shade50からshade900までの色合いがあります。

チャレンジ

簡単

カードを完成させましょう。

Scaffold に backgroundColor: として Colors.indigo.shade50 を設定します
職業の下に、SizedBox(height: 24) の後で、パディングを 16 ピクセルにし、角を丸くした白い BoxDecoration を持つ Container を追加します
その中に2行の Column を配置します。1行目は 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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}