{item.hari} - {item.mapel}
{item.jam}Selasa, 21 April 2026
Pengembangan Aplikasi Jadwal Pelajaran Berbasis CRUD dengan setState
Di era digital, pengelolaan jadwal pelajaran tidak lagi harus dilakukan secara manual. Dengan memanfaatkan teknologi seperti React, kita dapat membuat aplikasi sederhana yang mampu mengatur jadwal secara dinamis menggunakan konsep **CRUD (Create, Read, Update, Delete)** dan pengelolaan state melalui `setState`.
### Pendahuluan
Aplikasi jadwal pelajaran bertujuan untuk membantu pengguna—baik siswa maupun guru—dalam mencatat dan mengelola kegiatan belajar. Dalam implementasinya, aplikasi ini memanfaatkan state untuk menyimpan data sementara dan memperbarui tampilan secara real-time.
---
### Perancangan Aplikasi
Aplikasi ini terdiri dari beberapa komponen utama:
1. Form input jadwal
2. Daftar jadwal
3. Tombol aksi (edit dan hapus)
State utama digunakan untuk menyimpan seluruh data jadwal.
```javascript id="d2g7x9"
const [jadwal, setJadwal] = useState([]);
```
---
### Implementasi Fitur CRUD
#### 1. Menambahkan Data (Create)
Saat pengguna mengisi form dan menekan tombol simpan, data baru akan ditambahkan ke state.
```javascript id="n82ksl"
const handleTambah = (dataBaru) => {
setJadwal(prev => [...prev, { id: Date.now(), ...dataBaru }]);
};
```
Pendekatan ini menggunakan spread operator untuk menjaga data lama tetap ada.
---
#### 2. Menampilkan Data (Read)
Data jadwal ditampilkan dalam bentuk list atau tabel.
```javascript id="lm1p0a"
{jadwal.map(item => (
))}
```
Render akan otomatis diperbarui setiap kali state berubah.
---
#### 3. Mengedit Data (Update)
Untuk mengubah data, kita perlu mengidentifikasi item berdasarkan ID.
```javascript id="q7v3hn"
const handleEdit = (id, dataUpdate) => {
setJadwal(prev =>
prev.map(item =>
item.id === id ? { ...item, ...dataUpdate } : item
)
);
};
```
---
#### 4. Menghapus Data (Delete)
Fitur hapus digunakan untuk menghilangkan jadwal yang tidak diperlukan.
```javascript id="8f2kdp"
const handleHapus = (id) => {
setJadwal(prev => prev.filter(item => item.id !== id));
};
```
---
### Penggunaan setState dalam Aplikasi
`setState` (melalui `useState`) memainkan peran penting dalam:
* Menyimpan data sementara
* Mengontrol perubahan data
* Memicu render ulang tampilan
Dengan pendekatan ini, aplikasi menjadi responsif tanpa perlu reload halaman.
---
### Studi Kasus Sederhana
Misalnya:
* Siswa menambahkan jadwal “Fisika, Rabu, 10:00”
* Data langsung muncul di layar
* Siswa mengedit menjadi “Fisika, Rabu, 11:00”
* Perubahan langsung terlihat tanpa refresh
* Jadwal bisa dihapus kapan saja
---
### Kelebihan dan Kekurangan
**Kelebihan:**
* Mudah diimplementasikan
* Cocok untuk pemula
* Responsif (real-time update)
**Kekurangan:**
* Data hilang saat refresh (tanpa database)
* Tidak cocok untuk aplikasi skala besar tanpa state management tambahan
---
### Pengembangan Lanjutan
Untuk meningkatkan kualitas aplikasi, kamu bisa menambahkan:
* Penyimpanan lokal (LocalStorage)
* Integrasi API
* Validasi form
* UI framework seperti Bootstrap atau Tailwind
* Penggunaan Context API atau Redux
---
### Penutup
Aplikasi jadwal pelajaran berbasis CRUD dengan `setState` merupakan fondasi yang baik dalam memahami alur data dalam aplikasi modern. Dengan latihan ini, kamu tidak hanya belajar membuat fitur, tetapi juga memahami bagaimana data dikelola secara efisien di sisi frontend.
---
Kalau kamu ingin, saya bisa bantu buatkan:
* versi **full project siap jalan**
* atau **penjelasan per langkah + UI form lengkap**
Senin, 13 April 2026
Jadwal Mata Pelajaran
Membuat Aplikasi Jadwal Pelajaran dengan Flutter
Di era digital saat ini, mengatur jadwal pelajaran tidak harus lagi menggunakan buku tulis. Dengan bantuan teknologi, kita bisa membuat aplikasi sederhana yang membantu mengelola jadwal dengan lebih praktis dan menarik. Pada artikel ini, kita akan belajar membuat aplikasi **jadwal pelajaran menggunakan Flutter** yang memiliki fitur lengkap seperti tambah data, edit, hapus, warna berbeda, hingga konfirmasi sebelum menghapus.
---
🎯 Tujuan Aplikasi
Aplikasi ini dirancang untuk:
* Menyimpan jadwal pelajaran harian
* Menampilkan data dengan tampilan menarik
* Memudahkan pengguna dalam mengelola jadwal
Contoh jadwal:
> Senin - Matematika - 08:00-09:45
---
✨ Fitur Utama
Aplikasi yang kita buat memiliki beberapa fitur penting, yaitu:
✅ Tambah jadwal
✅ Edit jadwal
✅ Hapus jadwal dengan konfirmasi
✅ Warna berbeda untuk setiap item
✅ Input hari, pelajaran, dan jam
✅ Tampilan sederhana dan mudah digunakan
---
🧱 Struktur Aplikasi
Aplikasi ini terdiri dari:
* **Model data** untuk menyimpan jadwal
* **Halaman utama (StatefulWidget)** untuk menampilkan daftar
* **Dialog input** untuk tambah/edit data
* **Konfirmasi dialog** saat menghapus
---
💻 Cara Kerja Singkat
1. Pengguna menekan tombol **+** untuk menambah jadwal
2. Muncul form untuk mengisi:
* Hari
* Mata pelajaran
* Jam
3. Pengguna bisa memilih warna untuk setiap jadwal
4. Data ditampilkan dalam bentuk list
5. Tombol edit untuk mengubah data
6. Tombol hapus akan memunculkan konfirmasi terlebih dahulu
---
🎨 Tampilan Aplikasi
Setiap jadwal akan ditampilkan dalam bentuk card dengan warna berbeda, sehingga lebih menarik dan mudah dibedakan.
Contoh tampilan:
* Senin - Matematika (biru)
* Selasa - Bahasa Indonesia (merah)
* Rabu - IPA (hijau)
---
🚀 Kelebihan Aplikasi
* Mudah digunakan (user friendly)
* Tampilan menarik dengan warna
* Tidak membutuhkan database (sederhana)
* Cocok untuk pemula belajar Flutter
---
🔧 Pengembangan Lanjutan
Jika ingin meningkatkan aplikasi ini, kamu bisa menambahkan:
* Dropdown pilihan hari otomatis
* Time picker untuk memilih jam
* Penyimpanan data permanen (SQLite / SharedPreferences)
* Notifikasi pengingat pelajaran
* Tampilan jadwal per hari
---
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class Schedule {
String day;
String subject;
String time;
Color color;
Schedule({
required this.day,
required this.subject,
required this.time,
required this.color,
});
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Jadwal Pelajaran',
theme: ThemeData(primarySwatch: Colors.blue),
home: SchedulePage(),
);
}
}
class SchedulePage extends StatefulWidget {
@override
_SchedulePageState createState() => _SchedulePageState();
}
class _SchedulePageState extends State {
List schedules = [];
void _addOrEditSchedule({Schedule? schedule, int? index}) {
TextEditingController dayController =
TextEditingController(text: schedule?.day ?? '');
TextEditingController subjectController =
TextEditingController(text: schedule?.subject ?? '');
TextEditingController timeController =
TextEditingController(text: schedule?.time ?? '');
Color selectedColor = schedule?.color ?? Colors.blue;
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text(schedule == null ? 'Tambah Jadwal' : 'Edit Jadwal'),
content: SingleChildScrollView(
child: Column(
children: [
TextField(
controller: dayController,
decoration: InputDecoration(labelText: 'Hari'),
),
TextField(
controller: subjectController,
decoration: InputDecoration(labelText: 'Mata Pelajaran'),
),
TextField(
controller: timeController,
decoration: InputDecoration(labelText: 'Jam (08:00)'),
),
SizedBox(height: 10),
DropdownButton(
value: selectedColor,
items: [
Colors.blue,
Colors.red,
Colors.green,
Colors.orange,
Colors.purple,
]
.map((color) => DropdownMenuItem(
value: color,
child: Container(
width: 50,
height: 20,
color: color,
),
))
.toList(),
onChanged: (color) {
setState(() {
selectedColor = color!;
});
},
),
],
),
),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Batal'),
),
ElevatedButton(
onPressed: () {
if (dayController.text.isNotEmpty &&
subjectController.text.isNotEmpty &&
timeController.text.isNotEmpty) {
setState(() {
if (schedule == null) {
schedules.add(Schedule(
day: dayController.text,
subject: subjectController.text,
time: timeController.text,
color: selectedColor,
));
} else {
schedules[index!] = Schedule(
day: dayController.text,
subject: subjectController.text,
time: timeController.text,
color: selectedColor,
);
}
});
Navigator.pop(context);
}
},
child: Text('Simpan'),
),
],
);
},
);
}
void _deleteSchedule(int index) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Konfirmasi'),
content: Text('Yakin ingin menghapus jadwal ini?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Batal'),
),
ElevatedButton(
onPressed: () {
setState(() {
schedules.removeAt(index);
});
Navigator.pop(context);
},
child: Text('Hapus'),
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Jadwal Pelajaran'),
),
body: schedules.isEmpty
? Center(child: Text('Belum ada jadwal'))
: ListView.builder(
itemCount: schedules.length,
itemBuilder: (context, index) {
final item = schedules[index];
return Card(
color: item.color.withOpacity(0.2),
child: ListTile(
title: Text('${item.day} - ${item.subject}'),
subtitle: Text(item.time),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(Icons.edit),
onPressed: () =>
_addOrEditSchedule(schedule: item, index: index),
),
IconButton(
icon: Icon(Icons.delete),
onPressed: () => _deleteSchedule(index),
),
],
),
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () => _addOrEditSchedule(),
child: Icon(Icons.add),
),
);
}
}
Senin, 02 Februari 2026
To do List
Belajar Flutter: Membuat Aplikasi To-Do List
Pendahuluan
Flutter adalah framework modern untuk membuat aplikasi mobile dan web. Pada tutorial ini, kita akan membuat aplikasi To-Do List dengan UI formal dan bersih. Aplikasi ini memungkinkan pengguna menambah, mengedit, menghapus, dan menandai tugas selesai.
Kode Flutter Dasar
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,
home: const TodoPage(),
);
}
}Penjelasan Widget
- Titik awal aplikasi, mengatur tema, routing, dan halaman utama.
- Menghilangkan banner debug di kanan atas.
-
Menentukan halaman utama
TodoPage().
StatefulWidget untuk UI Dinamis
Kita menggunakan StatefulWidget karena daftar tugas akan berubah ketika pengguna menambah, menghapus, atau menandai selesai.
class TodoPage extends StatefulWidget {
const TodoPage({super.key});
@override
State<TodoPage> createState() => _TodoPageState();
}Menyimpan Data Tugas
final TextEditingController _controller = TextEditingController();
final List<String> _tasks = [];
final List<bool> _completed = [];-
Mengontrol
input dari
TextField. - Menyimpan daftar tugas.
- Menyimpan status selesai setiap tugas.
Fungsi Utama
- _addTask(): Menambahkan tugas baru.
- _editTask(): Memunculkan dialog untuk mengubah tugas.
- _toggleCompleted(): Menandai tugas selesai.
- _deleteTask(): Menghapus tugas.
Membuat UI dengan Flutter Widgets
Scaffold(
appBar: AppBar(...),
body: Container(
color: Color.fromARGB(255, 240, 222, 162),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Row(
children: [
Expanded(child: TextField(...)),
IconButton(...),
],
),
Expanded(child: ListView.builder(...)),
],
),
),
),
);Penjelasan Widget
- Struktur dasar aplikasi, termasuk AppBar dan body.
- Bar atas dengan judul dan warna tema.
- Memberi background warna.
- Memberi jarak antar widget.
- Mengatur widget vertikal & horizontal.
- Membuat widget mengisi ruang tersedia.
- Input teks untuk tugas baru.
- Tombol interaktif (tambah, edit, hapus, checklist).
- Menampilkan daftar tugas secara scrollable.
- Membuat tampilan rapi untuk setiap item tugas.
Kesimpulan
Dengan Flutter, kita bisa membuat aplikasi To-Do List interaktif dengan UI formal dan bersih. Pengetahuan ini dapat dikembangkan untuk aplikasi yang lebih kompleks dengan tema dan fitur tambahan.
Senin, 19 Januari 2026
latihan 1 sem 2
Flutter adalah framework UI dari Google yang memungkinkan pembuatan aplikasi mobile dengan tampilan yang menarik dan interaktif. Pada proyek ini, kita membuat aplikasi sederhana yang menampilkan AppBar, teks, ikon, dan tombol dengan layout yang rapi, serta mempelajari cara mengatur warna, posisi widget, dan jarak antar widget.
1. Mengubah Warna AppBar dan Background
Langkah pertama adalah menyesuaikan tampilan aplikasi dengan mengubah warna AppBar dan background halaman utama. AppBar adalah bilah atas aplikasi yang biasanya berisi judul atau navigasi. Dengan memberi warna khusus pada AppBar, aplikasi terlihat lebih menarik dan berbeda dari default. Background halaman utama juga diubah agar senada dengan tema aplikasi. Hal ini membantu menciptakan tampilan yang konsisten dan visual yang menyenangkan bagi pengguna.
---
2. Mengatur Layout Column dan Row
Dalam Flutter, `Column` digunakan untuk menumpuk widget secara vertikal, sedangkan `Row` digunakan untuk menempatkan widget secara horizontal. Dalam proyek ini, awalnya teks dan ikon ditempatkan dalam `Row` agar sejajar horizontal. Namun untuk membuat ikon berada di atas teks, kita membungkus ikon dan teks dalam `Column`. Dengan kombinasi `Column` dan `Row`, kita dapat mengatur layout menjadi fleksibel, sehingga setiap teks bisa berada di atas atau di samping ikon sesuai kebutuhan desain.
---
3. Menambahkan Padding
Agar tampilan lebih rapi, kita menambahkan `Padding` di sekitar widget utama. Padding memberikan jarak antara widget dengan tepi layar atau widget lain. Tanpa padding, tampilan akan terlihat sempit dan kurang profesional. Dengan padding yang konsisten, aplikasi terlihat lebih seimbang dan nyaman untuk dilihat.
---
4. Menggunakan SizedBox untuk Jarak Antar Widget
Untuk mengatur jarak antar widget, baik secara horizontal maupun vertikal, digunakan `SizedBox`. `SizedBox` memungkinkan kita memberi ruang kosong di antara ikon, teks, atau tombol sehingga layout tidak terlalu padat. Misalnya, jarak antara ikon dan teks utama diberi ruang agar ikon tidak menempel langsung ke teks. Begitu juga jarak antara teks dan tombol di bawah dibuat lebih jelas agar pengguna mudah membedakan elemen-elemen yang ada di layar.
---
5. Menyusun Tombol dan Ikon Tambahan
Tombol dan ikon tambahan ditempatkan di bawah teks utama agar tampilan lebih terstruktur. Dengan menggunakan `Row`, tombol-tombol ini bisa berjejer horizontal dengan jarak yang sama. Padding dan SizedBox juga digunakan di sekitar tombol untuk memastikan tidak menempel satu sama lain dan tetap terlihat rapi. Dengan begitu, layout tetap teratur dan mudah dinavigasi.
---
6. Hasil Akhir Tampilan
Setelah semua langkah dilakukan, tampilan aplikasi menjadi lebih menarik: AppBar berwarna gelap, background halaman senada dengan tema, ikon utama berada di atas teks, teks tersusun dalam kolom masing-masing, dan tombol-tombol tambahan terletak rapi di bawah dengan jarak yang cukup. Layout ini memberikan kesan profesional meski hanya menggunakan widget dasar Flutter.
---
7. Kesimpulan
Melalui proyek ini, kita mempelajari beberapa konsep penting Flutter:
1. Mengubah warna AppBar dan background Scaffold agar tampilan sesuai tema.
2. Mengatur layout menggunakan Column dan Row untuk fleksibilitas penempatan widget.
3. Menambahkan Padding untuk memberi jarak dari tepi layar atau widget lain.
4. Menggunakan SizedBox untuk memberi jarak antar widget sehingga layout terlihat rapi.
5. Menyusun ikon dan tombol agar mudah dibaca dan digunakan oleh pengguna.
Dengan memahami konsep-konsep ini, pengembang Flutter pemula dapat membuat aplikasi yang sederhana namun menarik dan mudah digunakan. Teknik-teknik ini juga menjadi dasar untuk membuat tampilan yang lebih kompleks di proyek selanjutnya.
Ini kodenya gess
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Color.fromARGB(255, 150, 36, 36),
appBar: AppBar(
title: Text('APLIKASI latihan satu'),
backgroundColor: Color.fromARGB(255, 114, 30, 41),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.waves,
size: 80,
color: Color.fromARGB(255, 255, 255, 255),
),
SizedBox(height: 16),
Column(
children: [
Text(
'welkam',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 255, 255, 255),
),
),
],
),
SizedBox(height: 8),
Column(
children: [
Text(
'its my cenel',
style: TextStyle(
fontSize: 16,
color: Color.fromARGB(255, 254, 255, 255),
),
),
],
),
SizedBox(height: 8),
Column(
children: [
Text(
'merah merah delima alibaba',
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
],
),
],
),
SizedBox(height: 30),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Color.fromARGB(255, 99, 13, 13),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.flash_on, color: Colors.white),
SizedBox(width: 8),
Text(
'apa ni',
style: TextStyle(color: Colors.white),
),
],
),
),
SizedBox(width: 16),
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Color.fromARGB(255, 99, 13, 13),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.directions_boat, color: Colors.white),
SizedBox(width: 8),
Text(
'ni apa',
style: TextStyle(color: Colors.white),
),
],
),
),
],
),
],
),
),
),
),
);
}
}
alamat flutter
https://z8qm06l08qn0.zapp.page/#/
Rabu, 10 September 2025
BlogSpot Aisah
Membangun Aplikasi Responsif dengan Flutter Menggunakan Tema Hijau Pastel
Pendahuluan
Flutter adalah framework yang sangat populer untuk mengembangkan aplikasi mobile yang responsif dan dapat berjalan di berbagai platform, baik Android maupun iOS. Pada artikel ini, kita akan membahas bagaimana cara membuat aplikasi sederhana menggunakan Flutter dengan menggunakan tema hijau pastel dan layout responsif. Selain itu, aplikasi ini juga akan dilengkapi dengan elemen interaktif seperti kotak yang dapat diklik, di mana setiap kotak memberikan umpan balik kepada pengguna melalui Snackbar.
Struktur Aplikasi
Aplikasi yang akan kita buat terdiri dari beberapa komponen penting:
1. AppBar: Menampilkan judul aplikasi di bagian atas.
2. Body: Bagian utama aplikasi yang berisi daftar kotak-kotak yang bisa diklik.
3. Snackbar: Sebagai umpan balik saat kotak ditekan.
4. Footer: Teks footer di bagian bawah aplikasi.
5. Tema Hijau Pastel: Semua elemen aplikasi menggunakan warna hijau pastel yang ceria dan menyegarkan.
Langkah-langkah Membangun Aplikasi
1. Menyiapkan Tema Aplikasi
Pada tahap pertama, kita mendefinisikan MaterialApp yang merupakan root widget aplikasi kita. Dalam MaterialApp, kita juga menyetel tema aplikasi menggunakan `ThemeData`untuk menyesuaikan warna aplikasi. Pada aplikasi ini, kita memilih tema hijau pastel dengan `primarySwatch: Colors.green`.
```dart
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Menggunakan warna hijau pastel untuk aplikasi
visualDensity: VisualDensity.adaptivePlatformDensity, // Menyesuaikan tampilan pada berbagai platform
),
home: HomePage(), // Menunjukkan halaman utama aplikasi
debugShowCheckedModeBanner: false, // Menonaktifkan banner debug
);
```
Pada bagian ini, kita menonaktifkan debugShowCheckedModeBanner agar aplikasi tidak menampilkan banner debug yang biasanya muncul saat dalam mode pengembangan.
2. Membangun Halaman Utama (HomePage)
Halaman utama aplikasi diatur dalam widget HomePage yang menggunakan `Scaffold` sebagai struktur dasar aplikasi. Pada bagian ini, terdapat beberapa komponen utama seperti `AppBar`, `Column`, dan `SingleChildScrollView` yang memungkinkan tampilan aplikasi dapat digulirkan jika konten melebihi ukuran layar.
```dart
Scaffold(
appBar: AppBar(
title: Text("Praktikum1"), // Judul pada appbar
backgroundColor: Colors.green.shade700, // Warna appbar hijau pastel
),
body: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildHeader(),
_buildContent(),
],
),
);
},
),
);
```
AppBar: Menampilkan judul aplikasi dengan warna hijau pastel yang lebih gelap menggunakan `Colors.green.shade700`.
Body: Bagian utama aplikasi yang terdiri dari dua bagian: header dan konten utama.
3. Header dan Konten Utama
Pada header, kita menampilkan teks yang bersifat informatif:
```dart
Container(
padding: EdgeInsets.all(20),
color: Colors.green.shade100, // Warna hijau pastel untuk header
width: double.infinity,
child: Text(
'Klik box!',
style: TextStyle(
color: Colors.green.shade800,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
```
Konten utama terdiri dari beberapa kotak yang dapat diklik, yang masing-masing memiliki fungsi untuk menampilkan Snackbar ketika ditekan. Kita menggunakan`_buildClickableBox` untuk menghasilkan setiap kotak dengan warna hijau pastel yang berbeda, dan `GestureDetector` untuk menangkap interaksi pengguna.
```dart
Widget _buildClickableBox(String title, Color color) {
return GestureDetector(
onTap: () {
_showSnackBar(context, "$title Ditekan!");
},
child: Container(
margin: EdgeInsets.symmetric(vertical: 5),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: color,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: Center(
child: Text(
title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
);
}
```
`GestureDetector`: Digunakan untuk menangkap aksi ketukan (tap) pada kotak. Ketika kotak diklik, fungsi `onTap` akan dijalankan.
`_showSnackBar`: Fungsi ini menampilkan Snackbar dengan pesan yang menunjukkan nama kotak yang diklik.
4. Menampilkan Snackbar sebagai Umpan Balik
Fungsi `_showSnackBar` akan menampilkan umpan balik berupa pesan singkat di bagian bawah layar ketika kotak ditekan. Fungsi ini menggunakan `ScaffoldMessenger.of(context).showSnackBar` untuk menampilkan Snackbar dengan pesan yang telah diberikan.
```dart
void _showSnackBar(BuildContext context, String message) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(message),
duration: Duration(seconds: 2),
),
);
}
```
Snackbar adalah widget yang digunakan untuk menampilkan pesan singkat yang muncul di bagian bawah layar sebagai umpan balik kepada pengguna.
5. Footer dengan Pesan Ceria
Di bagian bawah aplikasi, kita menambahkan footer yang menampilkan teks ceria. Footer ini memiliki warna hijau pastel yang lebih gelap dan memberikan sentuhan akhir yang menyenangkan pada aplikasi.
```dart
Container(
padding: EdgeInsets.all(15),
color: Colors.green.shade800,
child: Center(
child: Text(
'Footer Ceria Layout Responsif',
style: TextStyle(color: Colors.white),
),
),
)
```
Footer ini ditambahkan menggunakan Container dengan padding dan warna latar belakang hijau pastel gelap, serta teks berwarna putih.
Kesimpulan
Dengan Flutter, kita bisa dengan mudah membuat aplikasi yang responsif dan interaktif. Dalam aplikasi ini, kita menggunakan beberapa widget penting seperti `LayoutBuilder`, `GestureDetector`, dan `Snack bar` untuk menciptakan pengalaman pengguna yang menyenangkan dan responsif. Desain dengan tema hijau pastel memberikan tampilan yang cerah dan menenangkan, sementara elemen-elemen yang dapat diklik memberikan interaksi yang menarik.
Flutter memberikan kemudahan dalam membangun aplikasi yang dapat beradaptasi dengan berbagai ukuran layar, serta menawarkan berbagai opsi untuk menambahkan interaktivitas dan desain yang menyenangkan. Dengan mengikuti tutorial ini, Anda dapat membuat aplikasi yang tidak hanya fungsional, tetapi juga estetis dan menyenangkan digunakan.
https://z91i206bq91i3.zapp.page/#/
_______________________________________________________
Membuat Aplikasi dengan Navigasi dan Bottom Navigation Bar di Flutter
Pada artikel ini, kita akan membahas kode Flutter yang membangun aplikasi dengan menggunakan navigasi antar halaman dan BottomNavigationBar. Aplikasi ini memiliki tiga halaman yang dapat diakses menggunakan tombol navigator.push() dan menu BottomNavigationBar di bagian bawah layar. Tema yang digunakan adalah hijau pastel, yang memberikan kesan lembut dan menyegarkan pada tampilan aplikasi.
Aplikasi ini cocok untuk praktikum bagi siswa yang baru belajar menggunakan Flutter untuk memahami konsep navigasi antar halaman dan penggunaan widget dasar seperti BottomNavigationBar dan Navigator.push().
Struktur Aplikasi
Aplikasi ini terdiri dari beberapa bagian penting:
1. MaterialApp - Merupakan widget root yang mengatur tema dan struktur aplikasi.
2. HomePage - Halaman utama dengan BottomNavigationBar dan pengaturan navigasi halaman.
3. Halaman 1 (FirstPage) - Halaman yang dapat mengarahkan pengguna ke halaman kedua dan ketiga.
4. Halaman 2 (SecondPage) - Halaman dengan tombol untuk kembali ke halaman pertama.
5. Halaman 3 (ThirdPage) - Halaman dengan tombol untuk kembali ke halaman pertama.
Kode yang Digunakan
Berikut adalah penjelasan kode untuk membangun aplikasi ini.
1. Menggunakan MaterialApp dan Tema
Pada bagian pertama aplikasi, kita menggunakan `MaterialApp` untuk menetapkan aplikasi sebagai aplikasi berbasis material design. Kita juga menetapkan tema hijau pastel dengan menggunakan `ThemeData`. Tema ini memberikan warna utama aplikasi menggunakan `primarySwatch: Colors.green`, yang memberikan kesan segar dan alami.
```dart
MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Tema hijau pastel
visualDensity: VisualDensity.adaptivePlatformDensity, // Menyesuaikan tampilan di berbagai platform
),
home: HomePage(), // Menetapkan halaman utama
debugShowCheckedModeBanner: false, // Menonaktifkan banner debug
);
```
`primarySwatch`: Menentukan warna utama aplikasi (dalam hal ini hijau).
`visualDensity`: Mengatur kepadatan tampilan agar dapat menyesuaikan dengan berbagai platform.
`home: HomePage()`: Menetapkan halaman utama aplikasi (HomePage).
2. Halaman Utama (HomePage) dengan BottomNavigationBar
Halaman utama HomePage menggunakan `StatefulWidget` untuk memungkinkan perubahan status saat pengguna memilih item pada BottomNavigationBar. Di dalam HomePage, kita mendefinisikan beberapa hal:
`_selectedIndex`: Menyimpan index yang dipilih pada BottomNavigationBar.
`_onItemTapped`: Fungsi untuk mengubah halaman yang ditampilkan saat pengguna memilih item pada navigasi bawah.
`_getPage`: Fungsi untuk mengembalikan halaman yang sesuai berdasarkan index yang dipilih.
```dart
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0; // Index halaman yang dipilih
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index; // Mengubah halaman berdasarkan index yang dipilih
});
}
Widget _getPage(int index) {
switch (index) {
case 0: return FirstPage(); // Halaman pertama
case 1: return SecondPage(); // Halaman kedua
case 2: return ThirdPage(); // Halaman ketiga
default: return FirstPage(); // Default menampilkan halaman pertama
}
}
}
```
* **BottomNavigationBar**: Menyediakan navigasi bawah dengan tiga item, yang masing-masing mengarah ke halaman utama, halaman kedua, dan halaman ketiga.
```dart
BottomNavigationBar(
currentIndex: _selectedIndex, // Menandakan halaman yang dipilih
onTap: _onItemTapped, // Fungsi yang dipanggil saat item dipilih
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home), // Ikon untuk halaman pertama
label: 'Halaman Utama', // Label untuk halaman pertama
),
BottomNavigationBarItem(
icon: Icon(Icons.face), // Ikon untuk halaman kedua
label: 'Halaman Kedua', // Label untuk halaman kedua
),
BottomNavigationBarItem(
icon: Icon(Icons.cake), // Ikon untuk halaman ketiga
label: 'Halaman Ketiga', // Label untuk halaman ketiga
),
],
backgroundColor: Colors.green.shade100, // Warna latar belakang BottomNavigationBar
selectedItemColor: Colors.green.shade800, // Warna untuk item yang dipilih
unselectedItemColor: Colors.grey.shade600, // Warna untuk item yang tidak dipilih
)
```
3. Halaman-Halaman Aplikasi
FirstPage (Halaman Utama)
Pada FirstPage, pengguna dapat memilih untuk berpindah ke halaman kedua atau ketiga dengan menggunakan `Navigator.push()`. Halaman ini juga menampilkan dua tombol yang mengarahkan pengguna ke halaman yang dimaksud.
```dart
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Selamat datang di Halaman Utama!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.green.shade700),
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
child: Text("Ke Halaman Kedua", style: TextStyle(color: Colors.white)),
style: ElevatedButton.styleFrom(primary: Colors.green.shade300),
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ThirdPage()),
);
},
child: Text("Ke Halaman Ketiga", style: TextStyle(color: Colors.white)),
style: ElevatedButton.styleFrom(primary: Colors.green.shade300),
),
],
),
);
}
}
```
SecondPage dan ThirdPage
Pada SecondPage dan ThirdPage, kita menggunakan
`Navigator.pop()` untuk kembali ke halaman utama. Setiap halaman memiliki ikon dan teks untuk membedakan tampilan.
```dart
ElevatedButton(
onPressed: () {
Navigator.pop(context); // Kembali ke halaman utama
},
child: Text("Kembali ke Halaman Utama", style: TextStyle(color: Colors.white)),
style: ElevatedButton.styleFrom(primary: Colors.green.shade300),
)
```
Halaman kedua dan ketiga menampilkan ikon yang berbeda dan memiliki tombol untuk kembali ke halaman utama.
Kesimpulan
Dengan menggunakan kode ini, kita dapat membuat aplikasi yang menyenangkan dengan navigasi antar halaman menggunakan BottomNavigationBar dan Navigator.push(). Aplikasi ini memberikan antarmuka yang mudah digunakan, dengan pilihan untuk berpindah antar halaman dengan tombol yang jelas dan intuitif.
Fitur yang Bisa Dipelajari
BottomNavigationBar: Memberikan cara yang sederhana untuk menavigasi antar halaman utama aplikasi.
`Navigator.push()` dan `Navigator.pop()`: Menyediakan cara untuk berpindah antar halaman dan kembali ke halaman sebelumnya.
StatefulWidget: Digunakan pada HomePage untuk mengelola status halaman yang dipilih pada BottomNavigationBar.
Aplikasi ini sangat cocok untuk praktikum Flutter di sekolah atau universitas karena mengajarkan dasar-dasar navigasi aplikasi di Flutter. Anda dapat menambahkan lebih banyak fitur seperti Drawer atau Dialog untuk memperkaya aplikasi ini lebih lanjut!
Rabu, 03 September 2025
Tampilan Login
✨ Pinterest: Tempat Nyari Inspo & Bikin Hidup Makin Estetik
Halo bestie! 👋
Kalian pasti udah nggak asing lagi sama Pinterest, kan? Yup, aplikasi kece yang penuh dengan vibes aesthetic, inspo outfit, desain kamar, sampe moodboard buat healing tipis-tipis. 🌸
Di Pinterest, kamu bisa:
-
🖼️ Cari inspirasi buat apa aja (literally apa aja, dari outfit kuliah sampe resep dessert kekinian).
-
🎨 Bikin board pribadi yang bisa jadi tempat ngumpulin semua hal yang bikin kamu happy.
-
💡 Explore tren baru biar nggak ketinggalan update dunia estetik & kreatif.
Nah, pas pertama kali buka aplikasinya, kamu bakal disambut sama tampilan kece kayak di atas. Ada pilihan buat login pake email, Facebook, atau Google—praktis banget kan? Tinggal klik lanjutkan, beres deh.
Pinterest tuh kayak dunia paralel penuh ide, aesthetic feed, dan kreatifitas tanpa batas. Buat kamu yang suka desain, fashion, atau sekadar cari motivasi hidup, trust me, Pinterest is your new bestie. 💕
So, tunggu apa lagi?
Ciptain kehidupan yang kamu suka di Pinterest.
Karena hidup tuh lebih seru kalo dipenuhi inspirasi yang bikin hati happy. 🌈✨
Mau aku bikinin versi yang lebih singkat ala caption Instagram juga biar bisa dipasang di sosmed
Rabu, 30 Juli 2025
Bagus! Kalau kamu ingin buat blog pembelajaran tentang kode Flutter yang kamu kirim, saya bisa bantu bikinkan draft artikel yang jelas dan menarik. Misalnya seperti ini
Bagus! Kalau kamu ingin buat blog pembelajaran tentang kode Flutter yang kamu kirim, saya bisa bantu bikinkan draft artikel yang jelas dan menarik. Misalnya seperti ini:
---
Membuat Aplikasi Flutter Sederhana: Demo Widget dengan Tombol dan Gambar
Halo teman-teman! Kali ini kita akan belajar membuat aplikasi Flutter sederhana yang menampilkan teks, gambar, dan tombol dengan aksi SnackBar. Yuk, simak penjelasannya!
1. Setup Dasar Aplikasi Flutter
Kita mulai dengan membuat aplikasi Flutter baru. Di main.dart, tulis kode berikut:
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(
title: 'Demo Widget Flutter',
theme: ThemeData(primarySwatch: Colors.blue),
home: const HomeScreen(),
);
}
}
Penjelasan:
Fungsi main() memanggil runApp() yang menjalankan aplikasi.
MyApp adalah widget utama yang menggunakan MaterialApp.
MaterialApp mengatur tema dan layar awal (home) yang akan kita buat berikutnya.
2. Membuat Halaman Utama (HomeScreen)
Halaman utama kita buat sebagai widget StatelessWidget yang menampilkan teks, gambar, dan tombol:
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Kelompok 1'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Aisah, Caca, Gadiza, Nasya, Qori',
style: TextStyle(fontSize: 20),
),
const SizedBox(height: 20),
Image.network(
'https://images.unsplash.com/photo-1753925984756-7505c50a3170?q=80&w=1029&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
width: 200,
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Well')),
);
},
child: const Text('Tekan sini guis'),
),
],
),
),
);
}
}
Penjelasan:
Scaffold memberikan struktur dasar layar dengan AppBar.
Center dan Column untuk mengatur tata letak vertikal.
Teks menampilkan nama-nama anggota kelompok.
Image.network menampilkan gambar dari URL.
Tombol ElevatedButton ketika ditekan akan memunculkan SnackBar dengan pesan "Well".
3. Jalankan Aplikasi
Setelah kode siap, jalankan aplikasi menggunakan:
flutter run
Kamu akan melihat layar dengan teks, gambar, dan tombol. Coba tekan tombolnya, dan akan muncul pesan singkat di bawah layar.
https://zs1es06rps1et.zapp.page/
---
Kalau kamu mau, saya juga bisa bantu buatkan versi blog yang lebih panjang, lengkap dengan penjelasan konsep Flutte
r atau cara kustomisasi widget. Mau saya buatkan? Atau ada bagian lain dari Flutter yang ingin kamu bahas?
Langganan:
Postingan (Atom)
-
https://zmhu068enhv0.zapp.page/#/ Belajar Flutter: Membuat Aplikasi To-Do List Pendahuluan ... -
13 Jenis Sistem Operasi Mobile yang Pernah Ada Deannisa Belvira Handayanti Mei 2, 2025 Daftar Isi Sistem operasi mobile menjadi bagian penti...
