Mengirim Data antar Screen di Flutter

View Categories

Mengirim Data antar Screen di Flutter

Interaksi dengan UI adalah bagian penting dari setiap aplikasi. Namun, seringkali informasi harus dikirim dari satu layar ke layar lainnya. Misalnya, katakanlah Anda perlu melewatkan data tentang komponen UI tertentu ke halaman lainnya. Dalam artikel ini, kita akan mencoba membahas proses pengiriman data ke layar lain.

Untuk memahami lebih dalam, kita akan membangun aplikasi memo tugas yang mencantumkan semua tugas yang tertunda di halaman utama dan ketika diklik pada salah satu tugas, deskripsi rinci dari tugas tersebut ditampilkan di halaman lain. Di sini, kita akan melewatkan data dari layar halaman utama ke halaman deskripsi.

Untuk membangun aplikasi memo tugas, ikuti langkah-langkah berikut:

  1. Buat class Task
  2. Tampilkan daftar tugas pada halaman utama
  3. Desain layar yang menampilkan deskripsi tugas
  4. Kirimkan data dari halaman utama ke halaman deskripsi tugas

Mari kita lihat tugas secara detail.

Membuat Class Task

Cara sederhana untuk mendefinisikan class Task dapat dilihat di bawah ini:

class Task {
  final String taskName;
  final String description;

  Task(this.taskName, this.description);
}

Membuat List Task

Gunakan ListView untuk menghasilkan list task. Untuk mempermudah, kita akan membuat list 10 task sebagai berikut:

final tasks = List.generate(
10,
(i) => Task(
	'Task $i',
	'Task Description $i',
),
);

ListView.builder(
itemCount: tasks.length,
itemBuilder: (context, index) {
	return ListTile(
	title: Text(tasks[index].task_name),
	);
},
);

Sekarang buatlah halaman utama dimana daftar task dapat ditampilkan menggunakan StatelessWidget:

class TodosScreen extends StatelessWidget {
  final List tasks;

  const TodosScreen({Key? key, required this.tasks}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
        backgroundColor: Colors.blue,
      ),
      // List builder
      body: ListView.builder(
        itemCount: tasks.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(tasks[index].taskName),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(task: tasks[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Merancang Tampilan Deskripsi

Gunakan StatelessWidget untuk membuat route untuk halaman deskripsi. Bilah judul layar harus menampilkan taskName (nama tugas) dan isi halaman harus terdiri dari deskripsi tugas seperti yang ditunjukkan di bawah ini:

class DetailScreen extends StatelessWidget {
  final Task task;
  const DetailScreen({Key? key, required this.task}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(task.taskName),
        backgroundColor: Colors.blue,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(task.description),
      ),
    );
  }
}

Mentransfer Data ke Halaman Deskripsi

Di sini, kita akan menggunakan sebuah fungsi pada fungsi onTap yang menggunakan fungsi Navigator.push() dari class Navigator untuk mentransfer data ke halaman deskripsi seperti yang ditunjukkan di bawah ini:

ListView.builder(
        itemCount: tasks.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(tasks[index].taskName),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(task: tasks[index]),
                ),
              );
            },
          );
        },
      ),

Berikut ini adalah source code lengkap dari langkah-langkah di atas.

import 'package:flutter/material.dart';

class Task {
  final String taskName;
  final String description;

  Task(this.taskName, this.description);
}

void main() {
  runApp(MaterialApp(
    title: 'Passing Data',
    home: TodosScreen(
      // generate list
      tasks: List.generate(
        10,
        (i) => Task(
          'Task $i',
          'Task Description $i',
        ),
      ),
    ),
  ));
}

// Home screen
class TodosScreen extends StatelessWidget {
  final List tasks;

  const TodosScreen({Key? key, required this.tasks}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
        backgroundColor: Colors.blue,
      ),
      // List builder
      body: ListView.builder(
        itemCount: tasks.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(tasks[index].taskName),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(task: tasks[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

// detail screen
class DetailScreen extends StatelessWidget {
  final Task task;
  const DetailScreen({Key? key, required this.task}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(task.taskName),
        backgroundColor: Colors.blue,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(task.description),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Mengirimkan Data Ke Internet Di Flutter
Tutorial setelahnya : Flutter ImagePicker
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan