Posts

Bismillah pada tips kali ini, kita akan membahas bagaimana jika kita ingin apabila user menekan tombol back maka kita bisa mengembalikan nilai ke halaman sebelumnya.

Pada Flutter, untuk membuka halaman statefull widget atau stateless widget, kita menggunakan Navigator.push, sedangkan untuk kembali kita menggunakan Navigator.pop.

Saat membuka halaman baru, kita bisa dengan mudah mengirim data dengan memasukan variabel ke dalam konstraktor class yang akan dibuka.

Lalu bagaimana untuk mengirim data dari sebuah halaman yang sedang tampil ke halaman sebelumnya?

Caranya kita bisa gunakan Navigator

Buat sebuah project baru

Saya asumsikan kita punya dua halaman, yaitu :

1. Halaman Homepage
2. Halaman Pilihan Warna yang nantinya warna yang dipilih akan kita balikan ke halaman Homepage pada saat user menekan tombol back.

Untuk halaman Homepage kita akan isi pada file main.dart, buat seperti berikut :

main.dart

import 'package:flutter/material.dart';
import 'package:passing_navigator_pop/pilih_warna.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext itemBuilder: (context, index) {
              Color warna = generateRandomColor();

              return InkWell(
                child: Container(
                  color: warna,
                ),
                onTap: () {
                  Navigator.pop(context, warna);
                },
              );
            }context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Color warnaKu = Colors.purple;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Color Quiz"),
      ),
      backgroundColor: warnaKu,
      body: Center(
        child: MaterialButton(
          color: Colors.blue,
          child: Text("Pilih warna kesukaanmu", style: TextStyle(color: Colors.white),),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return PilihWarna();
            }));
          },),
      )
    );
  }
}

Lalu satu lagi kita buat seperti berikut :

pilih_warna.dart

import 'dart:math';

import 'package:flutter/material.dart';

class PilihWarna extends StatefulWidget {
  @override
  _PilihWarnaState createState() => _PilihWarnaState();
}

class _PilihWarnaState extends State<PilihWarna> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Pilih Warna"),
      ),

      body: Center(
        child: GridView.builder(
            itemCount: 200,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 5,
                mainAxisSpacing: 3.0,
                crossAxisSpacing: 3.0
            ),
            itemBuilder: (context, index) {
              return InkWell(
                child: Container(
                  color: generateRandomColor(),
                ),
                onTap: () {
                  Navigator.pop(context);
                },
              );
            }
        ),
      ),
    );
  }

  Color generateRandomColor() {
    Random rand = Random();

    return Color.fromARGB(255, rand.nextInt(255), rand.nextInt(255), rand.nextInt(255));
  }
}

Kode diatas belum mengembalikan nilai

Untuk mengembalikan nilai pertama-tama, kita edit main.dart pada onPressed menjadi async agar bisa await Navigatornya, lalu kita tampung nilainya didalam variabel seperti berikut :

onPressed: () async {
            var warna = await Navigator.push(context, MaterialPageRoute(builder: (context) {
              return PilihWarna();
            }));

            setState(() {
              warnaKu = warna;
            });
          },),

Untuk pilih_warna.dart, kita taruh nilai yang akan dikembalikan di parameter kedua popnya, kita ubah menjadi seperti berikut :

itemBuilder: (context, index) {
              Color warna = generateRandomColor();

              return InkWell(
                child: Container(
                  color: warna,
                ),
                onTap: () {
                  Navigator.pop(context, warna);
                },
              );
            }

Sekarang kita jalankan, maka sudah bisa dengan baik.

Lalu bagaimana jika kita ingin mengembalikan data apabila user menekan tombol back baik tombol virtual atau tombol fisik pada android?

Caranya kita bisa gunakan widget WillPopScope, seperti berikut :

tambahkan Widgetnya diatas seperti berikut pada pilih_warna.dart

body: WillPopScope(
        onWillPop: () async {
          Navigator.pop(context, generateRandomColor());
          return false;
        },
        child: Center(
          child: GridView.builder(
              itemCount: 200,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 5,
                  mainAxisSpacing: 3.0,
                  crossAxisSpacing: 3.0
              ),
              itemBuilder: (context, index) {
                Color warna = generateRandomColor();

                return InkWell(
                  child: Container(
                    color: warna,
                  ),
                  onTap: () {
                    Navigator.pop(context, warna);
                  },
                );
              }
          ),
        ),
      ),

Nah sekarang silahkan dicoba 😀