Anda di halaman 1dari 4

Tugas Pemrogaman Bergerak

Teknologi Informasi

By Zumar Nur Firdaus(1202210007)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: TodoList(),
);
}
}

class TodoList extends StatefulWidget {


@override
_TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {


List<String> tasks = [];
TextEditingController taskController = TextEditingController();

void addTask(String task) {


setState(() {
tasks.add(task);
taskController.clear();
});
}

void removeTask(int index) {


setState(() {
tasks.removeAt(index);
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('To-Do List Sederhana'),
),
body: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
Expanded(
child: TextField(
controller: taskController,
decoration: InputDecoration(
hintText: 'Tambahkan tugas baru',
),
),
),
IconButton(
icon: Icon(Icons.add),
onPressed: () {
if (taskController.text.isNotEmpty) {
addTask(taskController.text);
}
},
),
],
),
),
Expanded(
child: ListView.builder(
itemCount: tasks.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(tasks[index]),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () {
removeTask(index);
},
),
);
},
),
),
],
),
);
}
}

Penjelasan:

1. Kelas MyApp (StatelessWidget):


class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TodoList(),
);
}
}
Ini adalah kelas utama aplikasi yang mewarisi StatelessWidget. Dalam metode build(), kita
mengembalikan widget MaterialApp dengan TodoList() sebagai halaman beranda.
2. Kelas TodoList (StatefulWidget):
class TodoList extends StatefulWidget {
@override
_TodoListState createState() => _TodoListState();
}
TodoList adalah kelas yang mewarisi StatefulWidget. Ini digunakan untuk mengelola dan
merender tampilan daftar tugas.
3. Kelas _TodoListState (State):
class _TodoListState extends State<TodoList> {
List<String> tasks = [];
TextEditingController taskController = TextEditingController();
Ini adalah kelas yang mewarisi State dari TodoList. Di dalamnya, kita memiliki variabel tasks untuk
menyimpan daftar tugas sebagai daftar string dan taskController untuk mengendalikan input
pengguna.
4. Metode addTask:
void addTask(String task) {
setState(() {
tasks.add(task);
taskController.clear();
});
}
Metode addTask digunakan untuk menambahkan tugas ke dalam daftar tasks. Ini memperbarui
daftar tugas dengan menggunakan setState() untuk memastikan tampilan diperbarui saat tugas
ditambahkan.
5. Metode removeTask:
void removeTask(int index) {
setState(() {
tasks.removeAt(index);
});
}
Metode removeTask digunakan untuk menghapus tugas dari daftar berdasarkan indeks. Ini juga
memanggil setState() untuk memperbarui tampilan setelah menghapus tugas.
6. Metode build dalam _TodoListState:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('To-Do List Sederhana'),
),
body: Column(
children: <Widget>[
// ...
],
),
);
}
Metode build ini mengembalikan widget utama aplikasi, yaitu Scaffold. Di dalam Scaffold, ada
AppBar di atas dan Column yang berisi elemen-elemen tampilan, termasuk input untuk
menambahkan tugas dan daftar tugas.
7. Bagian Input dan Daftar Tugas:
Di dalam Column, ada dua bagian utama:
• Bagian pertama adalah input untuk menambahkan tugas baru. Ini terdiri dari TextField
dan IconButton yang akan menambahkan tugas ke daftar saat tombol "Tambahkan"
ditekan.
• Bagian kedua adalah daftar tugas, diimplementasikan sebagai ListView.builder, yang
mengambil item dari tasks dan memungkinkan pengguna untuk menghapus tugas dengan
tombol "Hapus".

Anda mungkin juga menyukai