🚀 Belajar Flutter Bersama

Personal Dashboard – Flutter Web 👤 Muhammad Iqbal Flutter Web Developer • UI Explorer About This Dashboard Ini adalah personal dashboard berbasis Flutter Web yang berfokus pada tampilan modern, animasi halus, dan gaya glassmorphism. Project ini dibuat sebagai eksplorasi UI interaktif dan personal branding agar terlihat clean, futuristik, dan nyaman dipandang. import 'dart:ui'; 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: DashboardPage(), ); } } /* ================= DASHBOARD ================= */ class DashboardPage extends StatefulWidget { const DashboardPage({super.key}); @override State createSta...

Belajar Web MSI + Statistik Interaktif Belajar Membuat Web BMI Kita belajar membuat web MSI/BMI yang rapih, elegan, dan interaktif . Web ini punya input data diri, tombol hitung, hasil BMI, dan rekomendasi kesehatan. 1 Desain Input Input data dipisahkan ke dalam card agar rapi. Field umur, berat, tinggi diberi icon supaya interaktif. <div class="card">   <input type="number" placeholder="Umur">   <input type="number" placeholder="Berat (kg)">   <input type="number" placeholder="Tinggi (cm)"> </div> 2 Tombol Hitung Tombol "Hitung BMI" diletakkan terpisah agar user mudah menekannya. Tombol full-width dengan warna menonjol. <button>Hitung BMI</button> ...

Membuat To-Do List Flutter Web dengan Background Foto 02 Februari 2026 Pada tutorial ini, kita akan membuat aplikasi To-Do List Flutter Web yang lengkap: bisa menambah jadwal, checklist selesai, hapus jadwal, pilih tanggal & jam, dan punya background foto keren. Kode Flutter Lengkap 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: TodoPage(), ); } } class TodoPage extends StatefulWidget { const TodoPage({super.key}); @override State<TodoPage> createState() => _TodoPageState(); } class _TodoPageState extends State<TodoPage> { final TextEditingController todoController = TextEditingController(); DateTime? selectedDate; TimeOfDay? selectedTime; final List<Map<String, d...

Pada pembahasan ini, penulis menjelaskan cara membuat satu halaman web sederhana menggunakan Flutter dengan bantuan platform Zapp.run. Zapp.run memungkinkan pengembangan aplikasi Flutter secara online tanpa perlu melakukan instalasi software tambahan, sehingga sangat cocok digunakan oleh pemula. Struktur utama aplikasi Flutter diawali dengan penggunaan MaterialApp sebagai dasar aplikasi. Selanjutnya, Scaffold digunakan untuk menyediakan kerangka tampilan seperti AppBar, body, dan Floating Action Button. Pada bagian atas halaman, AppBar berfungsi sebagai judul aplikasi. Untuk mengatur tata letak komponen secara vertikal atau horizontal, digunakan widget Column atau Row. Di dalamnya terdapat minimal tiga widget Text untuk menampilkan informasi. Selain itu, Container digunakan sebagai pembungkus elemen agar tampilan lebih terstruktur, sedangkan Padding dan SizedBox berfungsi untuk mengatur jarak antar komponen agar tampilan lebih rapi. Sebagai bentuk interaksi peng...