Membangun Aplikasi Todo List dengan Flutter

Daftar Isi

• Pendahuluan
• Persiapan
• Membuat Proyek Baru
• Mendesain Antarmuka
• Menambahkan Fungsi
• Pengujian Aplikasi
• Kesimpulan

Pendahuluan

Dalam artikel ini, kita akan membahas cara membangun aplikasi Todo List menggunakan Flutter. Flutter adalah framework UI yang dikembangkan oleh Google untuk membangun aplikasi natively compiled untuk mobile, web, dan desktop dari satu basis kode. Aplikasi Todo List adalah proyek yang sempurna untuk pemula karena mencakup berbagai konsep penting dalam pengembangan aplikasi.

Persiapan

Sebelum memulai, pastikan Anda telah menginstal Flutter dan Dart SDK di sistem Anda. Anda juga memerlukan editor kode seperti Visual Studio Code atau Android Studio. Pastikan juga Anda memiliki emulator atau perangkat fisik untuk pengujian.

Membuat Proyek Baru

Untuk membuat proyek baru, buka terminal dan jalankan perintah berikut:

flutter create todo_list_app

Setelah proyek dibuat, navigasikan ke direktori proyek:

cd todo_list_app

Kemudian, buka proyek di editor kode Anda.

Mendesain Antarmuka

Dalam file lib/main.dart, kita akan mendesain antarmuka aplikasi. Kita akan menggunakan widget Scaffold untuk membuat struktur dasar aplikasi.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Todo List')),
        body: Center(child: Text('Welcome to Todo List App')),
      ),
    );
  }
}
    

Dengan kode di atas, kita telah membuat antarmuka dasar untuk aplikasi Todo List.

Menambahkan Fungsi

Selanjutnya, kita akan menambahkan fungsi untuk menambah dan menghapus item dari daftar todo. Kita akan menggunakan ListView untuk menampilkan daftar todo.

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State {
  List todos = [];

  void addTodo(String todo) {
    setState(() {
      todos.add(todo);
    });
  }

  void removeTodo(int index) {
    setState(() {
      todos.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(todos[index]),
          trailing: IconButton(
            icon: Icon(Icons.delete),
            onPressed: () => removeTodo(index),
          ),
        );
      },
    );
  }
}
    

Dengan menambahkan fungsi ini, kita dapat mengelola daftar todo dengan lebih baik.

Pengujian Aplikasi

Setelah semua fungsi ditambahkan, saatnya untuk menguji aplikasi. Jalankan perintah berikut di terminal:

flutter run

Pastikan emulator atau perangkat fisik Anda terhubung dan siap digunakan. Anda seharusnya dapat melihat aplikasi Todo List yang telah Anda buat.

Kesimpulan

Dalam artikel ini, kita telah membahas langkah-langkah untuk membangun aplikasi Todo List menggunakan Flutter. Dari persiapan hingga pengujian, Anda sekarang memiliki pemahaman dasar tentang cara kerja Flutter dan bagaimana membangun aplikasi sederhana. Dengan pengetahuan ini, Anda dapat mulai menjelajahi fitur lebih lanjut dan mengembangkan aplikasi yang lebih kompleks.