Proyek Pertama Kita: Membuat Aplikasi Kartu Nama Digital yang Cantik
Setelah memahami dasar pengubahan state dan navigasi antar layar, saatnya menggabungkan dasar-dasar tata letak (layouting) di Flutter untuk membangun sebuah proyek nyata.
Artikel ini membahas cara membangun Kartu Nama Digital yang rapi, modern, dan estetis menggunakan kombinasi widget Column, CircleAvatar, Card, dan ListTile.
Komponen Utama yang Digunakan
-
SafeArea: Memastikan seluruh tampilan berada di area aman layar seluler (tidak tertutup notch atau kamera atas). -
CircleAvatar: Widget bawaan Flutter untuk membuat foto profil berbentuk lingkaran. -
Card&ListTile: Komponen berdesain Material Design yang memberikan efek bayangan (elevasi) serta susunan ikon dan teks yang rapi secara otomatis.
Kode Lengkap Proyek
import 'package:flutter/material.dart';
void main() {
runApp(const KartuNamaApp());
}
class KartuNamaApp extends StatelessWidget {
const KartuNamaApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.indigo.shade900,
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 1. Foto Profil / Avatar
const CircleAvatar(
radius: 50.0,
backgroundColor: Colors.white,
child: Icon(
Icons.person,
size: 60,
color: Colors.indigo,
),
),
const SizedBox(height: 12),
// 2. Nama Lengkap
const Text(
'Budi Pratama',
style: TextStyle(
fontSize: 28.0,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
// 3. Profesi / Judul
Text(
'FLUTTER DEVELOPER',
style: TextStyle(
fontSize: 14.0,
color: Colors.indigo.shade100,
letterSpacing: 2.5,
fontWeight: FontWeight.w600,
),
),
// 4. Garis Pemisah
SizedBox(
height: 20.0,
width: 150.0,
child: Divider(
color: Colors.indigo.shade200,
),
),
// 5. Kartu Informasi Telepon
const Card(
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 25.0),
child: ListTile(
leading: Icon(Icons.phone, color: Colors.indigo),
title: Text(
'+62 812 3456 7890',
style: TextStyle(fontSize: 16.0),
),
),
),
// 6. Kartu Informasi Email
const Card(
margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 25.0),
child: ListTile(
leading: Icon(Icons.email, color: Colors.indigo),
title: Text(
'budi.pratama@example.com',
style: TextStyle(fontSize: 16.0),
),
),
),
],
),
),
),
),
);
}
}
Bedah Struktur UI
-
Pengaturan Posisi Tengah (
Center&MainAxisAlignment.center): Menjaga agar seluruh elemen dalamColumnberada tepat di tengah layar secara vertikal maupun horizontal. -
SizedBoxuntuk Spasi dan Garis: Mengatur jarak vertikal antar elemen dengan presisi, serta menetapkan lebar spesifik (width: 150.0) untuk widgetDivider. -
Penggunaan
ListTiledalamCard: Struktur bawaanListTilemempermudah penataan ikon di sebelah kiri (leading) dan teks utama di sampingnya (title) tanpa perlu mengatur tata letak manual denganRow.
