Business Card: Layout

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

Time to put it all together. In the next three lessons you build a business card app, the kind of screen every profile page starts from.

Start with the layout. Sketch the screen as boxes first: a round avatar on top, then the name, then the job, all in one column in the middle of the screen. Once the boxes are in the right places, the style comes next.

Challenge

Easy

Build the card in the middle of the screen, as a Column (with mainAxisSize: MainAxisSize.min) of:

a CircleAvatar with radius: 48, backgroundColor: Colors.indigo and the initials JD as its child, in white, size 32
the name, Jordan Diaz
the job, Flutter Developer

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