Berikut adalah contoh kode sederhana menggunakan Flutter (Dart) untuk menampilkan jadwal pelajaran dari Senin sampai Jumat, di mana pengguna bisa menggulir jadwal harian dan melompat ke hari tertentu menggunakan menu navigasi:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Jadwal Pelajaran',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: JadwalPelajaran(),
);
}
}
class JadwalPelajaran extends StatefulWidget {
@override
_JadwalPelajaranState createState() => _JadwalPelajaranState();
}
class _JadwalPelajaranState extends State<JadwalPelajaran> {
final PageController _pageController = PageController();
final List<String> _days = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat'];
final Map<String, List<Map<String, String>>> _schedule = {
'Senin': [
{'mataPelajaran': 'Matematika', 'kelas': 'Kelas 101', 'waktu': '08:00 - 09:00'},
{'mataPelajaran': 'Fisika', 'kelas': 'Kelas 102', 'waktu': '09:00 - 10:00'},
],
'Selasa': [
{'mataPelajaran': 'Kimia', 'kelas': 'Kelas 101', 'waktu': '08:00 - 09:00'},
{'mataPelajaran': 'Biologi', 'kelas': 'Kelas 102', 'waktu': '09:00 - 10:00'},
],
'Rabu': [
{'mataPelajaran': 'Sejarah', 'kelas': 'Kelas 103', 'waktu': '08:00 - 09:00'},
{'mataPelajaran': 'Geografi', 'kelas': 'Kelas 104', 'waktu': '09:00 - 10:00'},
],
'Kamis': [
{'mataPelajaran': 'Seni', 'kelas': 'Kelas 105', 'waktu': '08:00 - 09:00'},
{'mataPelajaran': 'Musik', 'kelas': 'Kelas 106', 'waktu': '09:00 - 10:00'},
],
'Jumat': [
{'mataPelajaran': 'Olahraga', 'kelas': 'Lapangan', 'waktu': '08:00 - 09:00'},
{'mataPelajaran': 'Bahasa Inggris', 'kelas': 'Kelas 107', 'waktu': '09:00 - 10:00'},
],
};
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Jadwal Pelajaran'),
actions: [
PopupMenuButton<String>(
onSelected: (day) {
final int dayIndex = _days.indexOf(day);
if (dayIndex != -1) {
_pageController.jumpToPage(dayIndex);
}
},
itemBuilder: (context) => _days
.map((day) => PopupMenuItem(
value: day,
child: Text(day),
))
.toList(),
),
],
),
body: PageView.builder(
controller: _pageController,
itemCount: _days.length,
itemBuilder: (context, index) {
final day = _days[index];
final lessons = _schedule[day] ?? [];
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
day,
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 16),
Expanded(
child: ListView.builder(
itemCount: lessons.length,
itemBuilder: (context, lessonIndex) {
final lesson = lessons[lessonIndex];
return Card(
child: ListTile(
title: Text(lesson['mataPelajaran'] ?? ''),
subtitle: Text('${lesson['kelas']} | ${lesson['waktu']}'),
),
);
},
),
),
],
),
);
},
),
);
}
}
Penjelasan:
- PageView: Digunakan untuk menggulir hari-hari jadwal pelajaran dari Senin sampai Jumat.
- PopupMenuButton: Menu ini memungkinkan pengguna untuk melompat ke hari tertentu. Ketika salah satu hari dipilih, aplikasi akan lompat ke halaman yang sesuai menggunakan
jumpToPage. - PageController: Mengontrol halaman yang sedang ditampilkan di dalam
PageView. - ListView: Menampilkan jadwal pelajaran harian yang berisi mata pelajaran, kelas, dan waktu.
Cara Menambahkan Lebih Banyak Data:
Anda bisa menambah data pelajaran untuk setiap hari dengan memasukkan lebih banyak entri ke dalam map _schedule.
Semoga kode ini membantu! Jika ada yang ingin disesuaikan atau ditambah, jangan ragu untuk memberi tahu.
======================================================================
Berikut adalah penjelasan langkah demi langkah untuk mengetik kode tersebut dalam proyek Flutter:
1. Import Paket Flutter
Pada bagian pertama kode ini, kita melakukan import paket Flutter yang berisi widget-widget dasar yang diperlukan untuk membangun UI aplikasi.
dartimport 'package:flutter/material.dart';
Penjelasan: material.dart adalah pustaka (library) yang berisi widget untuk membuat aplikasi dengan gaya material design.
2. Fungsi Main
Fungsi main adalah titik masuk utama untuk menjalankan aplikasi Flutter. Fungsi ini memanggil runApp() untuk menjalankan aplikasi.
dartvoid main() { runApp(MyApp()); }
Penjelasan: runApp() akan memuat widget utama yang kita definisikan (dalam hal ini MyApp) dan menampilkannya di layar.
3. Kelas MyApp
Ini adalah kelas utama aplikasi yang merupakan subclass dari StatelessWidget. StatelessWidget berarti widget ini tidak akan berubah setelah dibangun.
dartclass MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Jadwal Pelajaran', theme: ThemeData( primarySwatch: Colors.blue, ), home: JadwalPelajaran(), ); } }
Penjelasan:
MaterialApp: Widget utama yang mengatur seluruh aplikasi.title: Judul aplikasi.theme: Menentukan tema aplikasi, dalam hal ini warna utama adalah biru (Colors.blue).home: Halaman utama aplikasi, yang dalam hal ini adalah widgetJadwalPelajaran.
4. Kelas JadwalPelajaran
Kelas JadwalPelajaran adalah StatefulWidget, yang artinya widget ini dapat berubah saat aplikasi berjalan.
dartclass JadwalPelajaran extends StatefulWidget { @override _JadwalPelajaranState createState() => _JadwalPelajaranState(); }
Penjelasan: Karena widget ini adalah StatefulWidget, setiap perubahan pada keadaan (state) akan dikelola oleh kelas _JadwalPelajaranState.
5. State dari JadwalPelajaran
Di dalam kelas _JadwalPelajaranState, kita mendefinisikan beberapa variabel seperti PageController untuk mengatur halaman, daftar hari (days), dan data jadwal (schedule).
dartclass _JadwalPelajaranState extends State<JadwalPelajaran> { final PageController _pageController = PageController(); final List<String> _days = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat']; final Map<String, List<Map<String, String>>> _schedule = { 'Senin': [ {'mataPelajaran': 'Matematika', 'kelas': 'Kelas 101', 'waktu': '08:00 - 09:00'}, {'mataPelajaran': 'Fisika', 'kelas': 'Kelas 102', 'waktu': '09:00 - 10:00'}, ], 'Selasa': [ {'mataPelajaran': 'Kimia', 'kelas': 'Kelas 101', 'waktu': '08:00 - 09:00'}, {'mataPelajaran': 'Biologi', 'kelas': 'Kelas 102', 'waktu': '09:00 - 10:00'}, ], // ... data lainnya }; }
Penjelasan:
_pageController: Digunakan untuk mengontrol halaman yang bisa digeser (di-swiping)._days: Daftar hari dalam seminggu._schedule: Data jadwal pelajaran yang berisi mata pelajaran, kelas, dan waktu.
6. Scaffold dan AppBar
Pada metode build(), kita membuat struktur tampilan aplikasi. Dimulai dengan Scaffold yang menyediakan struktur dasar halaman, dan AppBar untuk judul halaman.
dart@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Jadwal Pelajaran'), actions: [ PopupMenuButton<String>( onSelected: (day) { final int dayIndex = _days.indexOf(day); if (dayIndex != -1) { _pageController.jumpToPage(dayIndex); } }, itemBuilder: (context) => _days .map((day) => PopupMenuItem( value: day, child: Text(day), )) .toList(), ), ], ), // ... ); }
Penjelasan:
AppBar: Menampilkan judul "Jadwal Pelajaran".PopupMenuButton: Tombol di pojok kanan atas yang memungkinkan pengguna memilih hari tertentu, kemudian halaman akan melompat ke jadwal hari itu.
7. Body dengan PageView
PageView digunakan untuk menggulir antar halaman yang menampilkan jadwal per hari. Setiap halaman berisi jadwal pelajaran untuk satu hari.
dartbody: PageView.builder( controller: _pageController, itemCount: _days.length, itemBuilder: (context, index) { final day = _days[index]; final lessons = _schedule[day] ?? []; return Padding( padding: const EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( day, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), ), SizedBox(height: 16), Expanded( child: ListView.builder( itemCount: lessons.length, itemBuilder: (context, lessonIndex) { final lesson = lessons[lessonIndex]; return Card( child: ListTile( title: Text(lesson['mataPelajaran'] ?? ''), subtitle: Text('${lesson['kelas']} | ${lesson['waktu']}'), ), ); }, ), ), ], ), ); }, ),
Penjelasan:
PageView.builder: Membuat halaman-halaman yang bisa digeser, di mana setiap halaman menampilkan jadwal untuk satu hari.ListView.builder: Untuk menampilkan daftar mata pelajaran pada setiap hari, di mana setiap item menampilkan nama mata pelajaran, kelas, dan waktu.CarddanListTile: Digunakan untuk menampilkan informasi setiap mata pelajaran dalam bentuk yang lebih menarik dengan gaya material design.
8. Hasil Akhir
Aplikasi ini menampilkan jadwal pelajaran dari Senin hingga Jumat dengan kemampuan untuk menggulir antar hari, serta melompat ke hari tertentu menggunakan tombol di AppBar.
Tidak ada komentar:
Posting Komentar