PAB1 Widget

MyScreen.dart

import 'package:flutter/material.dart';

class MyScreen extends StatelessWidget {
  const MyScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    const orange = Colors.deepOrange;
    const darkText = Colors.black;

    return Scaffold(
      backgroundColor: Colors.grey.shade50,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.grey.shade50,
        foregroundColor: Colors.black,
        title: const Text('UTS PAB 1 IF3A'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Center(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(16),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.08),
                  blurRadius: 16,
                  offset: const Offset(0, 8),
                ),
              ],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                // Banner
                _HeaderImage(),

                // Nama & lokasi
                Padding(
                  padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Universitas Multi Data Palembang',
                        style: theme.textTheme.titleMedium?.copyWith(
                          fontSize: 20,
                          fontWeight: FontWeight.w800,
                          color: darkText,
                        ),
                      ),
                      const SizedBox(height: 6),
                      Text(
                        'Kota Palembang, Prov. Sumatera Selatan',
                        style: theme.textTheme.bodyMedium?.copyWith(
                          color: Colors.black54,
                          height: 1.25,
                        ),
                      ),
                    ],
                  ),
                ),

                // Kartu status/akreditasi/rasio/tanggal/contacts
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 16,
                    vertical: 8,
                  ),
                  child: Container(
                    decoration: BoxDecoration(
                      color: orange,
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(16, 16, 16, 6),
                      child: Column(
                        children: [
                          // 2 kolom: Status & Akreditasi
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Expanded(
                                child: _LabeledValue(
                                  label: 'Status',
                                  value: 'Aktif',
                                  light: true,
                                ),
                              ),
                              SizedBox(width: 16),
                              Expanded(
                                child: _LabeledValue(
                                  label: 'Akreditasi',
                                  value: 'Baik Sekali',
                                  light: true,
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(height: 16),
                          // 2 kolom: Tanggal & Rasio
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: const [
                              Expanded(
                                child: _LabeledValue(
                                  label: 'Tanggal Berdiri',
                                  value: '9 April 2021',
                                  light: true,
                                ),
                              ),
                              SizedBox(width: 16),
                              Expanded(
                                child: _LabeledValue(
                                  label: 'Rasio Dosen : Mahasiswa',
                                  value: '1:18.54',
                                  light: true,
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(height: 16),
                          // Kontak
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: const [
                              _ContactItem(
                                icon: Icons.call,
                                text: '0711-376400',
                              ),
                              _ContactItem(
                                icon: Icons.email_rounded,
                                text: 'kuliah@mdp.ac.id',
                              ),
                              _ContactItem(
                                icon: Icons.public_rounded,
                                text: 'mdp.ac.id',
                              ),
                            ],
                          ),
                          const SizedBox(height: 10),
                        ],
                      ),
                    ),
                  ),
                ),

                // Alamat + tombol maps
                Padding(
                  padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.grey.shade50,
                      borderRadius: BorderRadius.circular(16),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Alamat',
                            style: theme.textTheme.titleSmall?.copyWith(
                              fontWeight: FontWeight.w700,
                              color: darkText,
                            ),
                          ),
                          const SizedBox(height: 8),
                          Text(
                            'Jl. Rajawali 14, Kota Palembang,\nProv. Sumatera Selatan',
                            style: theme.textTheme.bodyMedium?.copyWith(
                              color: Colors.black87,
                              height: 1.35,
                            ),
                          ),
                          const SizedBox(height: 16),
                          SizedBox(
                            width: double.infinity,
                            child: ElevatedButton(
                              style: ElevatedButton.styleFrom(
                                backgroundColor: orange,
                                foregroundColor: Colors.white,
                                padding: const EdgeInsets.symmetric(
                                  vertical: 14,
                                ),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(12),
                                ),
                              ),
                              onPressed: () {
                                // TODO: buka maps / url launcher
                              },
                              child: const Text(
                                'Lihat Maps',
                                style: TextStyle(fontWeight: FontWeight.w700),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class _HeaderImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: ClipRRect(
        borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
        child: Container(
          color: Colors.deepPurple.shade50,
          alignment: Alignment.center,
          child: Stack(
            fit: StackFit.expand,
            children: [
              // Ganti dengan AssetImage jika punya file vector/PNG sendiri:
              // Image.asset('assets/ilustrasi_kampus.png', fit: BoxFit.cover)
              // Placeholder ilustrasi:
              Image.network(
                'https://mdp.ac.id/mdp2020/wp-content/uploads/2025/02/Kampus-Prestasi-dan-Inovasi-scaled-350x212.jpg',
                fit: BoxFit.cover,
              ),
              Container(color: Colors.white.withOpacity(0.2)),
            ],
          ),
        ),
      ),
    );
  }
}

class _LabeledValue extends StatelessWidget {
  final String label;
  final String value;
  final bool light;

  const _LabeledValue({
    required this.label,
    required this.value,
    this.light = false,
  });

  @override
  Widget build(BuildContext context) {
    final labelStyle = Theme.of(context).textTheme.bodySmall?.copyWith(
      color: light ? Colors.white70 : Colors.black54,
      height: 1.1,
    );
    final valueStyle = Theme.of(context).textTheme.titleMedium?.copyWith(
      color: light ? Colors.white : Colors.black87,
      fontWeight: FontWeight.w800,
      height: 1.25,
    );

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: labelStyle),
        const SizedBox(height: 4),
        Text(value, style: valueStyle),
      ],
    );
  }
}

class _ContactItem extends StatelessWidget {
  final IconData icon;
  final String text;

  const _ContactItem({required this.icon, required this.text});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        CircleAvatar(
          radius: 16,
          backgroundColor: Colors.white.withOpacity(0.25),
          child: Icon(icon, size: 18, color: Colors.white),
        ),
        const SizedBox(width: 8),
        Text(
          text,
          style: const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
          ),
        ),
      ],
    );
  }
}