PRAKTIKUM FLUTTER APLIKASI JADWAL + setState

Praktikum Flutter - Aplikasi Jadwal

PRAKTIKUM FLUTTER

Aplikasi Jadwal Menggunakan setState

Pendahuluan

Flutter merupakan framework UI dari Google yang digunakan untuk membuat aplikasi mobile secara cepat dan efisien. Pada praktikum ini, kita akan membuat aplikasi jadwal sederhana dengan memanfaatkan setState.

Tujuan Praktikum

  • Memahami Stateful Widget
  • Menggunakan setState
  • Membuat aplikasi jadwal sederhana

Konsep setState

setState digunakan untuk memperbarui tampilan UI ketika data berubah.

setState(() {
  data = "Data baru";
});

Langkah Pembuatan

1. Membuat Project

flutter create jadwal_app
cd jadwal_app
flutter run

2. Stateful Widget

class JadwalPage extends StatefulWidget {
  @override
  _JadwalPageState createState() => _JadwalPageState();
}

3. List Jadwal

List<String> jadwal = [];
TextEditingController controller = TextEditingController();

4. Tambah Jadwal

void tambahJadwal() {
  setState(() {
    jadwal.add(controller.text);
    controller.clear();
  });
}

5. Tampilan UI

ListView.builder(
  itemCount: jadwal.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(jadwal[index]),
    );
  },
);

Hasil

Aplikasi dapat menambahkan dan menampilkan jadwal secara langsung. UI akan otomatis diperbarui menggunakan setState.

Kesimpulan

  • setState penting untuk update UI
  • StatefulWidget digunakan untuk data dinamis
  • Flutter mempermudah UI interaktif

Saran

  • Tambah fitur hapus jadwal
  • Gunakan database SQLite
  • Gunakan Provider / Riverpod

© 2026 Praktikum Flutter

Comments

Post a Comment

Popular posts from this blog

Latihan Tentang Appbar,column berisi 3 widget text

Image
 Latihan 1 (Wajib) Membuat Tampilan Sederhana: Appbar dgn Judul Body Berisi Column Minimal 3 Widget Text Experiment: Ubah Warna AppBAr Ganti Column ke Row Tambahkan Padding dan SizedBox import 'package:flutter/material.dart'; void main() {   runApp(const MyApp()); } class MyApp extends StatelessWidget {   const MyApp({super.key});   @override   Widget build(BuildContext context) {     return MaterialApp(       debugShowCheckedModeBanner: false, // Menghilangkan banner debug       home: Scaffold(         // Bagian Atas Aplikasi         appBar: AppBar(           title: const Text('Latihan Pertama Flutter'),           backgroundColor: Colors.blueAccent,           centerTitle: true, // Membuat judul di tengah         ),                  // Bagian Uta...
Read more

Praktikum Flutter: Aplikasi Jadwal Pelajaran Sederhana (CRUD + setState)

Praktikum Flutter CRUD + setState PRAKTIKUM FLUTTER Aplikasi Jadwal Pelajaran Sederhana (CRUD + setState) Pendahuluan Pada praktikum ini kita akan membuat aplikasi jadwal pelajaran sederhana menggunakan Flutter. Aplikasi ini mendukung fitur CRUD (Create, Read, Update, Delete) dengan memanfaatkan setState untuk memperbarui tampilan secara real-time. Tujuan Memahami konsep CRUD di Flutter Menggunakan setState untuk update data Membuat aplikasi interaktif sederhana Konsep CRUD Create → Menambah data Read → Menampilkan data Update → Mengubah data Delete → Menghapus data Struktur Data List<String> jadwal = []; TextEditingController controller = TextEditingController(); int indexEdit = -1; Fungsi Create & Update void simpanJadwal() { setState(() { if (indexEdit == -1) { jadwal.add(controller.text); // Create } else { ...
Read more