membuat jadwal pelajaran

 📚 Membuat Aplikasi Jadwal Pelajaran Sederhana dengan Flutter

Di era digital saat ini, teknologi sangat membantu aktivitas sehari-hari, termasuk dalam mengatur jadwal pelajaran. Salah satu cara membuat aplikasi sederhana adalah dengan menggunakan Flutter. Pada artikel ini, kita akan membahas contoh kode untuk menampilkan jadwal pelajaran menggunakan Flutter.

🔧 Penjelasan Program

Kode di atas merupakan aplikasi Flutter sederhana yang menampilkan daftar jadwal pelajaran menggunakan widget ListView.

🧩 Struktur Utama Program

Fungsi Main

Dart

void main() { 

  runApp(MyApp()); 

}

Fungsi ini adalah titik awal program yang menjalankan aplikasi Flutter.

Class MyApp

Dart

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: JadwalPage(),

    );

  }

}

Class ini digunakan untuk mengatur tampilan utama aplikasi.

MaterialApp digunakan sebagai kerangka dasar aplikasi

home diarahkan ke halaman JadwalPage

Data Jadwal

Dart

final List<Map<String, String>> jadwal = [

  {"hari": "Senin", "mapel": "Matematika", "jam": "07.00 - 08.30"},

  ...

];

Data jadwal disimpan dalam bentuk List yang berisi Map.

Setiap item memiliki:

Hari

Mata pelajaran

Jam

Tampilan Utama (Scaffold)

Dart

return Scaffold(

  appBar: AppBar(

    title: Text("Jadwal Pelajaran"),

    backgroundColor: Colors.blue,

  ),

Scaffold digunakan sebagai struktur halaman

AppBar menampilkan judul aplikasi

Menampilkan Data dengan ListView

Dart

body: ListView.builder(

  itemCount: jadwal.length,

  itemBuilder: (context, index) {

ListView.builder digunakan untuk menampilkan data secara dinamis sesuai jumlah jadwal.

Desain Item Jadwal

Dart

return Card(

  margin: EdgeInsets.all(10),

  child: ListTile(

    leading: Icon(Icons.schedule, color: Colors.blue),

    title: Text(item['mapel']!),

    subtitle: Text(item['hari']! + " | " + item['jam']!),

  ),

);

Setiap jadwal ditampilkan dalam bentuk:

Card → agar terlihat rapi

ListTile → menampilkan ikon, judul, dan deskripsi

🎯 Kelebihan Program Ini

Sederhana dan mudah dipahami

Tampilan rapi menggunakan Card

Data bisa dengan mudah ditambahkan atau diubah

Cocok untuk pemula belajar Flutter

🚀 Pengembangan Selanjutnya

Kamu bisa mengembangkan aplikasi ini menjadi lebih menarik, seperti:

Menambahkan warna berbeda setiap hari

Menambahkan fitur edit dan tambah jadwal

Menggunakan database (SQLite/Firebase)

Membuat tampilan grid atau kalender

📌 Kesimpulan

Dengan menggunakan Flutter, kita bisa membuat aplikasi jadwal pelajaran dengan mudah dan cepat. Program ini sangat cocok untuk latihan dasar memahami widget seperti ListView, Card, dan ListTile.



import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: JadwalPage(), ); } }


class JadwalPage extends StatelessWidget { final List<Map<String, String>> jadwal = [ {"hari": "Senin", "mapel": "Matematika", "jam": "07.00 - 08.30"}, {"hari": "Senin", "mapel": "Bahasa Inggris", "jam": "08.30 - 10.00"}, {"hari": "Selasa", "mapel": "Informatika", "jam": "07.00 - 08.30"}, {"hari": "Selasa", "mapel": "IPA", "jam": "08.30 - 10.00"}, {"hari": "Rabu", "mapel": "Bahasa Indonesia", "jam": "07.00 - 08.30"}, {"hari": "Rabu", "mapel": "IPS", "jam": "08.30 - 10.00"}, {"hari": "Kamis", "mapel": "PJOK", "jam": "07.00 - 08.30"}, {"hari": "Kamis", "mapel": "Seni Budaya", "jam": "08.30 - 10.00"}, {"hari": "Jumat", "mapel": "Agama", "jam": "07.00 - 08.30"}, ];


@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Jadwal Pelajaran"), backgroundColor: Colors.blue, ), body: ListView.builder( itemCount: jadwal.length, itemBuilder: (context, index) { final item = jadwal[index]; return Card( margin: EdgeInsets.all(10), child: ListTile( leading: Icon(Icons.schedule, color: Colors.blue), title: Text(item['mapel']!), subtitle: Text(item['hari']! + " | " + item['jam']!), ), ); }, ), ); } }

Komentar

Posting Komentar

Postingan populer dari blog ini

MERAYAKAN ULANG TAHUN PAK FAJAR

Gambar
  Kebersamaan Hangat dalam Perayaan Ulang Tahun Pak Fajar Suasana kebersamaan dan kehangatan tampak jelas dalam perayaan ulang tahun Pak Fajar yang berlangsung sederhana namun penuh makna. Bertempat di lingkungan sekolah yang asri, Pak Fajar dikelilingi oleh para siswa dan rekan yang turut hadir untuk memberikan kejutan serta doa terbaik. Perayaan ini dilakukan di luar ruangan, di bawah rindangnya pepohonan, menciptakan suasana akrab dan santai. Sebuah kue ulang tahun sederhana menjadi simbol perhatian dan rasa hormat dari para siswa kepada Pak Fajar, yang dikenal sebagai sosok pendidik berdedikasi, ramah, dan inspiratif. Dalam momen tersebut, Pak Fajar menyampaikan rasa terima kasih serta pesan singkat yang memotivasi siswa untuk terus semangat belajar dan menjaga kebersamaan. Kegiatan ini tidak hanya menjadi bentuk perayaan bertambahnya usia, tetapi juga mempererat hubungan antara guru dan siswa. Nilai kebersamaan, rasa kekeluargaan, dan saling menghargai tercermin jelas dalam mo...
Baca selengkapnya

membuat tampilan sederhana

Gambar
  Membuat Tampilan Sederhana dalam Aplikasi Pendahuluan Tampilan (interface) merupakan bagian penting dalam sebuah aplikasi atau website. Tampilan yang sederhana akan memudahkan pengguna dalam memahami dan menggunakan aplikasi tanpa merasa bingung. Oleh karena itu, perancangan tampilan sederhana perlu diperhatikan sejak awal pengembangan. Pengertian Tampilan Sederhana Tampilan sederhana adalah desain antarmuka yang menampilkan elemen seperlunya, tidak berlebihan, mudah dipahami, dan fokus pada fungsi utama. Kesederhanaan bukan berarti tampilan menjadi membosankan, melainkan rapi, jelas, dan nyaman digunakan. Prinsip Membuat Tampilan Sederhana Beberapa prinsip yang perlu diperhatikan dalam membuat tampilan sederhana antara lain: 1. Kejelasan Gunakan teks yang mudah dibaca dan ikon yang jelas agar pengguna langsung memahami fungsi setiap bagian. 2. Konsistensi Gunakan warna, font, dan tata letak yang konsisten di setiap halaman. 3. Warna yang Minimalis Pilih kombinasi warna yang tida...
Baca selengkapnya

To Do List Sederhana

Gambar
🎀 Membuat Aplikasi To Do List Pastel dengan Flutter Flutter merupakan framework open-source dari Google yang digunakan untuk membangun aplikasi Android, iOS, dan Web dengan satu basis kode. Pada artikel ini, kita akan membahas pembuatan aplikasi To Do List sederhana dengan tampilan warna pastel yang lembut, serta penjelasan widget-widget Flutter yang digunakan. Aplikasi ini memiliki fitur: Menambahkan tugas Menandai tugas selesai (checkbox) Menghapus tugas Tampilan UI yang estetik dan nyaman dilihat 🧱 Struktur Dasar Aplikasi Aplikasi Flutter dibangun menggunakan konsep widget tree. Struktur utama aplikasi ini adalah: MyApp → Root aplikasi TodoPage → Halaman utama Scaffold → Kerangka UI Column & Row → Pengatur layout TextField, Button, ListView → Interaksi pengguna 🚀 Penjelasan Widget yang Digunakan 1. MaterialApp MaterialApp(   debugShowCheckedModeBanner: false,   home: TodoPage(), ) Fungsi: Widget utama yang membungkus seluruh aplikasi Mengatur navigasi, tema, dan hala...
Baca selengkapnya