Latihan Membuat Tampilan Sederhana

Januari 19, 2026

Membuat Tampilan Sederhana

Berisi :

AppBar dengan judul
Body berisi column
3 widget text

Experimen :

Ubah warna AppBar
Ganti column ke row
Tambahkan padding dan sizedbox

BERIKUT KODE NYA :

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isActive = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 195, 0, 255),
      appBar: AppBar(
        title: const Text('IQBALKECEAHAY'),
        backgroundColor: Colors.black,
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Muhammad Iqbal Ramadhan',
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
            const SizedBox(height: 12),
            const Text(
              '11 RPL 2',
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),
            const SizedBox(height: 12),
            const Text(
              'Latihan Tipis-Tipis',
              style: TextStyle(fontSize: 18, color: Colors.white),
            ),

            const SizedBox(height: 40),

            // 🔥 LINGKARAN ROTATE + GRADIENT
            Center(
              child: GestureDetector(
                onTap: () {
                  setState(() {
                    isActive = !isActive;
                  });
                },
                child: AnimatedRotation(
                  turns: isActive ? 1 : 0, // 360 derajat pas tap
                  duration: const Duration(milliseconds: 600),
                  curve: Curves.easeInOut,
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 600),
                    curve: Curves.easeInOut,
                    width: 140,
                    height: 140,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      gradient: LinearGradient(
                        colors: isActive
                            ? const [
                                Color(0xFFFF6FD8), // pink
                                Color(0xFFFFC371), // orange
                              ]
                            : const [
                                Color(0xFF00E5FF), // cyan
                                Color(0xFF2979FF), // blue
                              ],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                      boxShadow: const [
                        BoxShadow(
                          color: Colors.black38,
                          blurRadius: 15,
                          offset: Offset(0, 8),
                        ),
                      ],
                    ),
                    alignment: Alignment.center,
                    child: Text(
                      isActive
                          ? 'Iqbal sayang mie ayam 💥'
                          : 'Pencet 👆',
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}