Business Card: Style

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

The parts are in place. Now make them look like a card: the name should be the first thing the eye lands on, and the job a quieter line under it.

Size and weight make a line important. A softer color makes a line step back. A little space between the avatar and the name lets each one breathe.

Challenge

Easy

Style the card:

put 16 pixels of space between the avatar and the name
make the name size 28 and bold
make the job Colors.blueGrey

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