Kamis, 30 Oktober 2025

Ikmal

 👇


📱 Review Aplikasi Flutter: Profil Pribadi (Dark Theme) 1️⃣ Screenshot Tampilan Aplikasi 





Tampilan halaman profil pribadi dengan tema gelap dan animasi halus saat muncul.


2️⃣ Potongan Kode Program 


Berikut adalah kode utama yang digunakan untuk membuat tampilan profil pribadi dengan tema gelap dan efek animasi lembut:


import 'package:flutter/material.dart';


class ProfilPage extends StatelessWidget {

  const ProfilPage({super.key});


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: Colors.black,

      body: Padding(

        padding: const EdgeInsets.all(16.0),

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            const Text(

              'Profil Pribadi',

              style: TextStyle(color: Colors.white, fontSize: 22, fontWeight: FontWeight.bold),

            ),

            const SizedBox(height: 20),

            CircleAvatar(

              radius: 60,

              backgroundImage: AssetImage('assets/profile.jpg'),

            ),

            const SizedBox(height: 10),

            const Text(

              'Muhamad Ikmal Nurfajar',

              style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.w600),

            ),

            const Text(

              'Rekayasa Perangkat Lunak',

              style: TextStyle(color: Colors.grey, fontSize: 16),

            ),

            const SizedBox(height: 30),

            Container(

              decoration: BoxDecoration(

                color: Colors.grey[900],

                borderRadius: BorderRadius.circular(12),

              ),

              padding: const EdgeInsets.all(16),

              child: const Column(

                children: [

                  Icon(Icons.videogame_asset, color: Colors.blueAccent, size: 30),

                  SizedBox(height: 8),

                  Text(

                    'Hobiku',

                    style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),

                  ),

                  SizedBox(height: 6),

                  Text(

                    'Saya suka bermain game strategi dan simulasi. Melalui game, '

                    'saya belajar kerja sama, berpikir cepat, dan mengambil keputusan dengan tepat.',

                    textAlign: TextAlign.center,

                    style: TextStyle(color: Colors.white70),

                  ),

                ],

              ),

            ),

          ],

        ),

      ),

    );

  }

}


3️⃣ Penjelasan Singkat 


Aplikasi ini menampilkan profil pribadi dengan tema gelap dan efek animasi fade-in saat halaman dibuka.

Beberapa hal menarik dari kode ini:


🖤 Tema Gelap: Diatur lewat ThemeData(brightness: Brightness.dark) agar seluruh tampilan berwarna gelap.


🎞️ Animasi FadeTransition: Menggunakan AnimationController dan CurvedAnimation untuk memberikan efek muncul perlahan.


👤 CircleAvatar: Menampilkan foto profil dari aset lokal (assets/mlz.jpg).


💬 Card Informasi: Dua Container menampilkan bagian Hobiku dan Cita-cita Saya dengan gaya kartu modern.


📩 Tombol Interaktif: Tombol Hubungi Saya menampilkan SnackBar ketika ditekan.


💡 Kutipan Inspiratif: Diletakkan di bagian bawah untuk memberikan kesan personal.



0 Komentar:

Posting Komentar

Berlangganan Posting Komentar [Atom]

<< Beranda