Buat aplikasi “Kartu Profil Sederhana – Aku & Hobiku”
Cara Membuat Aplikasi Profil Sederhana dengan Flutter
Flutter adalah framework yang powerful untuk membuat aplikasi mobile cross-platform. Dalam tutorial ini, saya akan menunjukkan bagaimana membuat aplikasi profil sederhana dengan fitur kontak yang interaktif.
Yang Akan Kita Buat
Kita akan membuat aplikasi profil pribadi yang menampilkan:
Informasi pribadi dan jurusan
Deskripsi tentang diri
Tombol "Hubungi Saya" yang menampilkan kontak ketika ditekan
Berikut codingan lengkapnya :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Profil Saya'),
backgroundColor: Colors.blue,
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
// Foto Profile Simple
CircleAvatar(
radius: 60,
backgroundImage: AssetImage('assets/images/WhatsApp Image 2025-09-29 at 8.36.41 PM.jpeg'),
backgroundColor: Colors.grey[200],
),
SizedBox(height: 20),
Text(
'M.Rizky Firmansyah',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(height: 5),
Text(
'Rekayasa Perangkat Lunak (RPL)',
style: TextStyle(fontSize: 16, color: Colors.grey[600]),
),
SizedBox(height: 15),
Text(
'Saya sangat suka dengan dunia teknologi, terutama membuat aplikasi mobile. Hobi saya adalah menonton film dan mendengarkan music.',
textAlign: TextAlign.center,
),
SizedBox(height: 20),
Divider(),
SizedBox(height: 20),
GestureDetector(
onTap: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Kontak Saya'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Telepon: 087729788226'),
SizedBox(height: 10),
Text('Email: rizkyfirmanysah23@gmail.com'),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Tutup'),
),
],
),
);
},
child: Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8),
),
child: Text(
'Hubungi Saya',
style: TextStyle(color: Colors.white, fontSize: 16),
),
),
),
],
),
),
),
);
}
}
hasilnya:
https://ze2u06yve2v0.zapp.page/#/
Comments
Post a Comment