Business Card: Contacts

Part of the Your First App section of Coddy's Flutter journey. Lesson 32 of 32.

A business card is for getting in touch, so the last part is the contact details: a phone number and an email, each with its icon, on a white panel.

Each contact line is a Row of an icon, a small gap and a text. The two rows go in a Column, inside a Container with padding and rounded corners. A light background on the whole screen makes the white panel stand out:

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

Colors.indigo.shade50 is the lightest shade of indigo. Every color in Colors has shades from shade50 to shade900.

Challenge

Easy

Finish the card:

give the Scaffold a backgroundColor: of Colors.indigo.shade50
under the job, after a SizedBox(height: 24), add a Container with 16 pixels of padding and a white BoxDecoration with rounded corners
inside it, a Column of two rows: Icons.phone with +1 555 0100, and under it Icons.email with jordan@example.com

Try it yourself

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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}