Flutter Pengenalan & Bahasa Dart

<!DOCTYPE html>

<html>

<head>

    <style>

        body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 250px; background: #e0f2fe; margin: 0; }

        .phone { width: 220px; height: 260px; background: white; border-radius: 24px; border: 4px solid #0284c7; box-shadow: 0 10px 20px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden; }

        .appbar { background: #0284c7; color: white; padding: 12px; font-weight: bold; text-align: center; font-size: 0.8rem; }

        .body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 10px; }

        .btn-fab { background: #0284c7; color: white; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; margin-top: 10px; }

    </style>

</head>

<body>

    <div class="phone">

        <div class="appbar">Aplikasi Flutter Pertama</div>

        <div class="body">

            <span style="font-size:0.75rem; color:#64748b;">Tombol Ditekan:</span>

            <h2 id="angkaCounter" style="margin:5px 0; color:#0284c7;">0</h2>

            <button class="btn-fab" onclick="let el=document.getElementById('angkaCounter'); el.innerText=parseInt(el.innerText)+1;">+</button>

        </div>

    </div>

</body>

</html>