Kartu Nama: Tata Letak

Termasuk bagian Aplikasi Pertamamu dalam perjalanan Flutter di Coddy. Pelajaran 30 dari 32.

Saatnya menyatukan semuanya. Dalam tiga pelajaran berikutnya, kamu akan membuat aplikasi kartu nama, jenis layar yang menjadi dasar setiap halaman profil.

Mulailah dengan tata letak. Buat sketsa layar dalam bentuk kotak terlebih dahulu: avatar bulat di bagian atas, lalu nama, kemudian pekerjaan, semuanya dalam satu kolom di tengah layar. Setelah kotak-kotak berada di tempat yang tepat, lanjutkan dengan gaya.

Tantangan

Mudah

Buat kartu di tengah layar sebagai Column (dengan mainAxisSize: MainAxisSize.min) yang terdiri dari:

CircleAvatar dengan radius: 48, backgroundColor: Colors.indigo, dan inisial JD sebagai child-nya, berwarna putih, berukuran 32
nama, Jordan Diaz
pekerjaan, Flutter Developer

Coba sendiri

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