~ We are changing the world with technology. ~

Matt Mullenweg

Belajar Flutter Basic #7: Navigation Aplikasi Pariwisata

Belajar Flutter Basic #7: Navigation Aplikasi Pariwisata

625 Dilihat

Pendahuluan

Navigasi memeliki peran yang penting dalam mengontrol jalannya sebuah aplikasi, istilah lain yang sering digunakan adalah routing. Tepatnya pada Flutter atau aplikasi mobile, navigasi digunakan untuk berpindah antar screen yang satu dengan screen lainnya. Jika anda terbiasa dengan aplikasi web maka istilah screen sama halnya dengan halaman sebuah web.

Dalam setiap perpindahan juga terkadang kita harus mengirimkan data agar dapat digunakan pada screen selanjutnya. Maka pada serial kali ini kita akan belajar bagaimana menggunakan navigasi serta cara passing data ke halaman selanjutnya yang sedang dituju. Selain itu kita juga akan belajar bagaimana menggunakan ListView, bagaimana menampilkan gambar serta mencari data berdasarkan id yang dimiliki.

Baca Juga: Belajar Flutter Basic #6: Stateless & Stateful Widget

View List Categories

Bagian pertama sekaligus pembuka adalah kita akan membuat sebuah halaman untuk menampilkan data kategori dari pariwisata yang ada. Adapun hasil yang akan dicapai akan terlihat seperti gambar dibawah ini.

Pastikan kamu telah meng-install Flutter dengan command:

flutter create dw_pariwisata

Kemudian buat project tersebut dan buka file main.dart lalu modifikasi menjadi:

import 'package:flutter/material.dart';

import './screens/category_screen.dart'; //import file categoryscreen yang nantinya berfungsi untuk menampilkan list kategori

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aplikasi Pariwisata',
      //KITA SET THEME-NYA SECARA UMUM AGAR KETIKA MELAKUKAN PERUBAHAN, CUKUP PADA SETTING DIBAWAH AKAN MEMBERIKAN EFEK KE SEMUA PAGE YANG ADA
      theme: ThemeData(
        primaryColor: Colors.pinkAccent, //WARNA UTAMA KITA GUNAKAN pinkAccent
        accentColor: Colors.pink, //SECONDARY COLORNYA KITA SET KE PINK
        canvasColor: Color.fromRGBO(255, 254, 229, 1), //WARNA BACKGROUND CANVASNYA PAKAI RGBO DIMANA CODE DIATAS AKAN MENGHASILKAN WARNA KUNING 
      
        //SET JUGA KONFIGURASI UNTUK TEXT-NYA
        textTheme: ThemeData.light().textTheme.copyWith(
          title: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), //TITLE KITA GUNAKAN BOLD DAN SIZE 20
          subhead: TextStyle(fontWeight: FontWeight.bold), //SUBHEADNYA CUKUP BOLD SAJA
        )
      ),
        
      //SET ROUTING YANG AKAN MENGATUR ALUR APLIKASI
      routes: {
        '/': (ctx) => CategoryScreen()  //DIMANA ROOT ROUTINGNYA AKAN ME-LOAD CategoryScreen
        // TANDA / BERARTI SECARA DEFAULT KETIKA APLIKASI DI-LOAD MAKA ROUTE TERSEBUT AKAN DIJALANKAN
      },
    );
  }
}

Selanjut adalah membuat file category_screen.dart dan tempatkan di dalam folder lib/screens, kemudian masukkan code berikut:

import 'package:flutter/material.dart';
import '../components/list_category.dart'; //IMPORT FILE list_category.dart YANG BERFUNGSI SEBAGAI LAYOUT UNTUK TIAP ITEM CATEGORY YANG AKAN DITAMPILKAN
import '../dummy_data.dart'; //FILE INI BERISI DATA DUMMY CATEGORY

class CategoryScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Daengweb Pariwisata"), //SET TEXT PADA APPBAR
      ),
      //KITA AKAN MENGGUNAKAN GRIDVIEW AGAR TAMPILANNYA SESUAI NAMANYA AKAN MEMBENTUK GRID SESUAI BESARAN ELEMEN YANG DITAMPILKAN
      body: GridView(
        padding: EdgeInsets.all(15), //SET PADDINGNYA AGAR TIDAK TERLALU KE TEPI SCREEN
        //ADAPUN CHILDRENNYA ADALAH HASIL LOOPING DARI DATA DUMMY CATEGORY
        //DIMANA SETIAP DATANYA AKAN ME-LOAD COMPONENT ListCategory SEKALIGUS MENGIRIMKAN DATA YANG AKAN DITAMPILKAN
        children: CATEGORIES_DUMMY_DATA
            .map((cat) => ListCategory(cat.id, cat.title, cat.description, cat.image))
            .toList(),
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 300, //MENGATUR BESARNYA ELEMEN GRID PER ITEMNYA, 
          childAspectRatio: 1.5, //MENGATUR ASPEK RASIO
          crossAxisSpacing: 20, //MENGATUR JARAK ELEMENT SECARA HORIZONTAL
          mainAxisSpacing: 20, //MENGATUR JARAK ELEMENT SECARA VERTICAL
        ),
      ),
    );
  }
}

Sampai pada tahap ini kita masih menemukan error karena ada dua buah file yang dibutuhkan, maka mari kita buat satu persatu. Pertama buat file dummy_data.dart di dalam folder lib dan tambahkan code:

import './models/category.dart';
const CATEGORIES_DUMMY_DATA = const [
  Category(
    id: 'P1',
    title: 'Pantai',
    description: '',
    image: 'http://pluspng.com/img-png/the-beach-png-black-and-white--952.png',
  ),
  Category(
    id: 'P2',
    title: 'Gunung',
    description: '',
    image: 'https://images.vexels.com/media/users/3/137476/isolated/preview/d89adf16dc6fce8b9abe54aec3af2546-four-peak-mountain-icon-by-vexels.png',
  ),
  Category(
    id: 'P3',
    title: 'Budaya',
    description: '',
    image: 'https://upload.wikimedia.org/wikipedia/commons/f/f8/Drama-icon.png',
  ),
  Category(
    id: 'P4',
    title: 'Kuliner',
    description: '',
    image: 'https://cdn3.iconfinder.com/data/icons/vacation-line-1/48/culinary_restaurant_food_vacatipn_traveling-512.png',
  ),
  Category(
    id: 'P5',
    title: 'Religi',
    description: '',
    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Religion_icon.svg/1138px-Religion_icon.svg.png',
  ),
  Category(
    id: 'P6',
    title: 'Edukasi',
    description: '',
    image: 'https://upload.wikimedia.org/wikipedia/commons/e/e8/Education%2C_Studying%2C_University%2C_Alumni_-_icon.png',
  ),
];

Code diatas hanyalah sebuah data dummy yang akan ditampilkan dimana struktur datanya diatur oleh model category.dart, buat file tersebut dan letakkan di dalam folder lib/models:

import 'package:flutter/foundation.dart';

class Category {
  //DEFINISIKAN SELURUH VARIABLE YANG DIINGINGKAN
  final String id;
  final String title;
  final String description;
  final String image;

  //KEMUDIAN BUAT CONSTRUCTOR UNTUK MEMINTA DATA TERSEBUT
  //KITA MENGGUNAKAN REQUIRED MAKA DIPERLUKAN UNTUK MENGIMPORT foundation.dart
  const Category({
    @required this.id,
    @required this.title,
    @required this.description,
    @required this.image
  });
}

Tugas selanjutnya adalah membuat component list_category.dart yang berisi view untuk menampilkan data category yang telah dikirimkan oleh GridView dari file category_screen.dart, kemudian letakkan file tersebut di dalam folder lib/components dan tambahkan code:

import 'package:flutter/material.dart';

class ListCategory extends StatelessWidget {
  //KARENA ADA DATA YANG DIKIRIM DARI FILE YANG MEMANGGILNYA MAKA KITA PERLU MENDEFINISIKAN DATA YANG AKAN DITERIMA
  final String id;
  final String title;
  final String description;
  final String imageUrl;

  //KEMUDIAN BUAT CONSTRUCTOR UNTUK MENERIMA DATA TERSEBUT
  ListCategory(this.id, this.title, this.description, this.imageUrl);

  //METHOD INI AKAN BERJALAN KETIKA TOMBOL KATEGORI DI TAP (KLIK)
  void goToNewScreen(BuildContext context) {
    //FUNGSI NAVIGASINYA AKAN ADA DISINI TAPI AKAN DIBAHAS KEMUDIAN JADI TOLONG DIINGAT
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => goToNewScreen(context), //KETIKA DITAP MAKA MEMANGGIL METHOD DIATAS
      highlightColor: Colors.white.withAlpha(30),
      splashColor: Colors.white.withAlpha(20),
      child: Card(
        elevation: 5,
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              //BAGIAN PERTAMA DARI CARD KITA AKAN MENAMPIKKAN GAMBAR
              Padding(
                padding: EdgeInsets.only(top: 10),
                //DIMANA GAMBARNYA DIAMBIL DARI URL YANG TELAH DIDEFINISIKAN PADA DATA DUMMY
                child: Image.network(
                  imageUrl,
                  height: 65,
                  width: double.infinity, //BESAR GAMBARNYA SEBESAR MUNGKIN DARI ELEMEN YG TERSEDIA
                ),
              ),
              //ANTARA GAMBAR DAN TEXT KITA BUAT JARAK MENGGUNAKAN SIZEDBOX
              SizedBox(
                height: 4,
              ),
              //TEXT UNTUK MENAMPILKAN NAMA KATEGORINYA
              Center(
                  child: Text(title, style: Theme.of(context).textTheme.title))
            ],
          ),
        ),
      ),
    );
  }
}

View List Places

Ketika kategori pada screen kategori di tap (klik), maka akan berpindah pada screen selanjutnya yang berfungsi untuk menampilkan data tempat wisata yang berada pada kategori terkait. Tugas kita pada bagian ini adalah meng-handle data places yang akan ditampilkan menggunakan ListView.

Agar masih berkaitan pada file diatas, dimana masih ada method yang belum selesai perintah navigasinya, maka hal pertama yang akan dilakukan adalah dengan membuat file places_screen.dart dan tempat file tersebut di dalam folder lib/places. Masukkan code berikut:

import 'package:flutter/material.dart';

import '../dummy_data.dart'; //FILE DUMMY INI MASIH DIPERLUKAN KARENA DI DALAMNYA AKAN DITAMBAHKAN DATA DUMMY UNTUK PLACES
import '../components/list_place.dart'; //SAMA DENGAN YANG SEBELUMNYA, COMPONENT INI BERISI VIEW UNTUK MENAMPILKAN SETIAP TEMPAT WISATA

class PlacesScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //FUNGSI INI UNTUK MENGAMBIL ARGUMEN YANG DIKIRIMKAN MELALUI NAVIGATION KETIKA KATEGORI DI TAP
    final route =
        ModalRoute.of(context).settings.arguments as Map<String, String>;
    //DIMANA ARGUMEN YANG DIKIRIMKAN BERISI KUMPULAN DATA YANG DIDALMNYA ADALAH KEY DAN VALUE
    final id = route['id']; //KITA AMBIL VALUE DARI KEY ID CATEGORY
    final title = route['title']; //VALUE DARI TITLE CATEGORY
    
    //KEMUDIAN BUAT LOGIC UNTUK MENGAMBIL DATA TEMPAT BERDASARKAN ID CATEGORI DAN DITEMPATKAN KE DALAM VARIABLE placeLists
    final placeLists = PLACES_DUMMY_DATA.where((place) {
      return place.category == id;
    }).toList();

    return Scaffold(
      appBar: AppBar(
        title: Text("Wisata " + title), //BUAT APPBAR LAGI DIMANA TITLE DIAMBIL DARI TITLE DIATAS
      ),
      //KEMUDIAN LOOPING DATANYA MENGGUNAKAN LISTVIEW BUILDER
      body: ListView.builder(
        itemBuilder: (ctx, index) {
          //LOAD COMPONENT LISTPLACE DENGAN MENGIRIMKAN DATA YANG AKAN DITAMPILKAN
          return ListPlace(
            placeLists[index].id,
            placeLists[index].name,
            placeLists[index].image,
            placeLists[index].description,
          );
        },
        itemCount: placeLists.length, //TOTAL DATA YANG AKAN LOOPING
      ),
    );
  }
}

Sebelum melangkah lebih lanjut, kembali ke file components/list_category.dart dan modifikasi method yang tadi dikosongkan menjadi:

void goToNewScreen(BuildContext context) {
  //FUNGSI INI AKAN MEMBERIKAN INSTRUKSI UNTUK MEMBUAT SCREEN PLACES YANG NNTINYA AKAN DIDEFINSIKAN ROUTINGNYA DAN MENGIRIMKAN ARGUMENT BERUPA ID, TITLE DAN DESCRIPTION
  Navigator.of(context).pushNamed('/places', arguments: {'id': id, 'title': title, 'description': description});
}

Kemudian definisikan routing /places dengan membuka file main.dart dan tambahkan code berikut:

routes: {
  '/': (ctx) => CategoryScreen(),
  '/places': (ctx) => PlacesScreen() //TAMBAHKAN BAGIAN INI
},

Masih dengan file yang sama, jangan lupa import PlacesScreen pada bagian import statement:

import './screens/places_screen.dart';

Melanjutkan fitur untuk menampilkan data tempat wisata, maka bagian yang akan diselesaikan kali ini adalah data dummy tempat wisata. Buka file dummy_data.dart (red: kita satukan file-nya dengan dummy data kategori) dan tambahkan code:

import './models/places.dart';
const PLACES_DUMMY_DATA = const [
  Places(
    id: 'A1',
    name: 'Pantai Bira Bulukumba',
    description: 'Tanjung bira terletak di daerah Sulawesi Selatan. Lokasi khususnya adalah Kabupaten Bulukumba yang jaraknya sangat jauh, sekitar 200 km dari pusat ibukota Makassar. Sehingga tanjung bira bisa diaktakan terletak di ujung selatan daratan sulawesi selatan. Tanjung bira memang bisa dikatakan senjata oleh masyarakat sekitar untuk menarik masyarakat luar dan wisatawan baik lokal maupun asing untuk datang ke sana. Tanjung bira tentu saja menawarkan hal seperti pantai putih, alam bawah laut dan juga pemandangan senja yang tidak ada duanya.',
    author: 'Nuge',
    category: 'P1',
    image: "https://www.alorinatours.co.id/wp-content/uploads/2018/07/Pulau-Liukang.jpg",
    price: 50000
  ),
  Places(
    id: 'A2',
    name: 'Pantai Bara Bulukumba',
    description: 'Soal indah, Pantai Bara dan Pantai Bira ibarat saudara kembar. Selain namanya yang mirip, letaknya sama-sama di Bulukumba, Sulsel. Pantai pasir putih nan lembut dan laut biru ada di sini. Pantai Bara memang belum setenar Tanjung Bira. Meski demikian, pemandangan di sini tak kalah menarik. Hamparan pasir putih dipadukan dengan tenangnya laut dari arah Flores, membuat kita betah berlama-lama di Pantai Bara.',
    author: 'Riski',
    category: 'P1',
    image: "https://media.travelingyuk.com/wp-content/uploads/2019/05/Pantai-Bara-di-Bulukumba.jpg",
    price: 20000
  ),

  Places(
    id: 'A3',
    name: 'Ke\'te Kesu Toraja',
    description: 'Di sini kamu dapat menemukan banyak rumah tongkonan yang telah berdiri semenjak zaman leluhur. Di atas bagian pintu masuk kamu dapat menemukan kepala kerbau yang ditempelkan di dinding. Dalam budaya masyarakat Toraja, hal tersebut memiliki arti kemakmuran, kejayaan, dan status sosial.',
    author: 'Riski',
    category: 'P3',
    image: "https://www.panentour.com/wp-content/uploads/2019/03/3D-TORAJA-MAKASSAR-PARE-PARE-2-1024x578.jpg",
    price: 15000
  ),

  Places(
    id: 'A4',
    name: 'Ammatoa Kajang Bulukumba',
    description: 'Suku Kajang Ammatoa terletak di kabupaten Bulukumba, Kecamatan Kajang, Sulawesi Selatan. Desa ini dinamakan Tana Toa yang merupakan tanah yang tertua di dunia dikarenakan kepercayaan masyarakat adatnya. Secara geografis, luas wilayah Desa Kajang Ammatoa sekitar 331,17 ha dan memiliki kondisi hutan yang sangat lebat. Hampir seluruh dusun yang berada di dalamnya di kelilingi hutan dan tidak ada jalan beraspal di dalam kawasan ini.',
    author: 'Nuge',
    category: 'P3',
    image: "https://ammatoa.com/wp-content/uploads/2016/09/kajang.jpg",
    price: 24000
  ),
];

Note: Saya hanya memasukkan tempat untuk kategori Pantai (P1) dan Budaya (P3) agar tidak terlalu panjang, jadi kalau mau ditambahkan sendiri silahkan.

Buat model places.dart di dalam folder lib/models dan tambahkan code untuk struktur data yang diinginkan:

import 'package:flutter/foundation.dart';

class Places {
  //DEFINISIKAN SEMUA DATA YANG DIPERLUKAN
  final String id;
  final String name;
  final String category;
  final String description;
  final String image;
  final String author;
  final int price;

  //MINTA DATA TERSEBUT DENGAN MENAMBAHKAN REQUIRED AGAR KETIKA MODEL DILOAD DATANYA WAJIB ADA
  const Places({
    @required this.id,
    @required this.name,
    @required this.category,
    @required this.description,
    @required this.image,
    @required this.author,
    @required this.price
  });
}

Terakhir buat file list_place.dart di dalam folder lib/components dan tambahkan code:

import 'package:flutter/material.dart';

class ListPlace extends StatelessWidget {
  //DEFINISIKAN VARIABLE UNTUK MENAMPUNG DATA YANG DITERIMA
  final String id;
  final String name;
  final String image;
  final String description;

  //MENERIMA DATA YANG DIKIRIMKAN MELALUI CONSTRUCTOR
  ListPlace(this.id, this.name, this.image, this.description);

  void goToDetail(BuildContext context) {
    //Kosongkan lagi bagian ini untuk saat ini
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      child: Padding(
        padding: EdgeInsets.only(top: 15, bottom: 15),
        //MENGGUNAKAN LIST TILE UNTUK MENAMPILKAN DATA TEMPATNYA
        child: ListTile(
          leading: Image.network(image), //BAGIAN KIRI ADALAH ME-LOAD GAMBAR
          title: Text(name), //BAGIAN TENGAH AKAN MENAMPIKAN NAMA TEMPAT WISATANYA
          subtitle: Text(description.substring(0, 100) + '...'), //DIBAWAH TITLE AKAN MENAMPILKAN DESKRIPSI SINGKAT YANG DILIMIT HANYA 100 HURUF
          onTap: () => goToDetail(context), //KETIKA DITAP AKAN MEJALAN METHOD goToDetail()
        ),
      ),
    );
  }
}

View Detail Place

Ketika salah satu dari list tempat wisata di tap maka akan diarahkan ke halaman detail untuk melihat data tempat wisata tersebut secara lebih detail mencakup deskripsi yang lengkap, gambar yang lebih besar, beserta biaya masuknya.

Buat file detail_screen.dart di dalam folder lib/screens dan tambahkan code:

import 'package:flutter/material.dart';
import '../dummy_data.dart';

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //TERIMA DATA DARI ARGUMEN, KARENA ARGUMEN YANG AKAN DIKIRIMKAN DATANYA HANYA SEBUAH STRING BIASA MAKA DARI .arguments LANGSUNG AKAN BERISI DATA TERSEBUT
    final id = ModalRoute.of(context).settings.arguments as String;
    
    //KEMUDIAN MENCARI DATA PLACE DARI DATA DUMMY BERDASARKAN ID MENGGUNAKAN FIRSTWHERE()
    final selectedPlace =
        PLACES_DUMMY_DATA.firstWhere((place) => place.id == id);
    
    return Scaffold(
      appBar: AppBar(
        title: Text("Detail Informasi"),
      ),
      //KITA GUNAKAN SingleChildScrollView() AGAR HALAMAN BISA DI SCROLL
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            //BAGIAN PERTAMA ADALAH FUNGSI UNTUK ME-LOAD GAMBAR
            Stack(
              children: <Widget>[
                //DIMANA PADA SISI BAWAH KANAN DAN KIRIM AKAN DIBUAT MELENGKUNG
                //MENGGUNAKAN BORDERRADIUS
                ClipRRect(
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(15),
                    bottomRight: Radius.circular(15),
                  ),
                  //LOAD GAMBARNYA DARI INTERNET
                  child: Image.network(
                    selectedPlace.image,
                    width: double.infinity,
                    height: 250,
                    fit: BoxFit.cover,
                  ),
                ),
                //BAGIAN INI AKAN MENAMPILKAN NAMA TEMPAT WISATA
                //KITA GUNAKAN POSITIONED KARENA AKAN MENAMPILKAN TEKSNYA DI DALAM GAMBAR
                //AGAR LEBIH MUDAH DI ATUR POSISINYA
                Positioned(
                  bottom: 20, //JARAKNYA 20 DARI BAWAH
                  right: 15, //DAN 15 DARI KANAN
                  child: Container(
                    width: 300,
                    color: Colors.black54,
                    padding: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        //KEMUDIAN KITA TAMPILKAN NAMA TEMPAT WISATANYA
                        Text(
                          selectedPlace.name,
                          style: TextStyle(fontSize: 26, color: Colors.white),
                          softWrap: true,
                          overflow: TextOverflow.fade,
                        ),
                        //DIBAWAH TEKSNYA KITA TAMPILKAN NAMA PENULISNYA / INFORMATORNYA
                        Text(
                          "Author: " + selectedPlace.author,
                          style: TextStyle(fontSize: 15, color: Colors.grey),
                          softWrap: true,
                          overflow: TextOverflow.fade,
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
            //BUAT JARAK DENGAN SIZEDBOX
            SizedBox(
              height: 4,
            ),
            //BUAT CARD LAGI UNTUK MENAMPILKAN HARGA TIKET MASUK
            Card(
              margin: EdgeInsets.all(10),
              child: Row(
                children: <Widget>[
                  Icon(Icons.money_off, size: 40,),
                  Text("Tiket Masuk: Rp ${selectedPlace.price}", style: Theme.of(context).textTheme.title,)
                ],
              ),
            ),
            //BUAT CARD LAGI UNTUK MENAMPILKAN DESCRIPTION
            Card(
              margin: EdgeInsets.all(10),
              elevation: 4,
              child: Padding(
                padding: EdgeInsets.all(10),
                child: Text(selectedPlace.description),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Kembali ke file sebelumnya yang belum selesai fungsi untuk navigation-nya, buka file list_place.dart dan modifikasi method yang dikosongkan menjadi:

void goToDetail(BuildContext context) {
  //BERPINDAH KE SCREEN /DETAIL DENGAN MENGIRIMKAN ARGUMEN ID
  Navigator.of(context).pushNamed('/detail', arguments: id);
}

Kemudian buka file main.dart dan definisikan routes-nya dengan menambahkan line:

routes: {
  '/': (ctx) => CategoryScreen(),
  '/places': (ctx) => PlacesScreen(),
  '/detail': (ctx) => DetailScreen() //TAMBAHKAN LINE INI
},

Masih dengan file yang sama, jangan lupa tambahkan import statement:

import './screens/detail_screen.dart';

Baca Juga: Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #7: Push Notification Expenses

Kesimpulan

Banyak hal yang diperolah dari serial ini dimana kita telah belajar bagaimana berpindah screen menggunakan Navigator, mengirimkan arguments setiap kali berpindah screen dimana pada argument tersebut bisa berisi kumpulan data ataupun hanya sebuah string (single data). Tidak hanya itu tapi pada screen yang dituju juga telah memperlihat bagaimana cara menerima data yang dikirimkan dari screen sebelumnya.

Selain itu kita juga belajar menampilkan list data menggunakan GridView maupun ListView, dimana keduanya memiliki fungsi yang serupa tapi tak sama. Adapun penggunaannya keduanya tergantung kebutuhan dan view yang diinginkan.

Adapun dokumentasi code dari artikel ini bisa kamu lihat di Github.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Belajar Flutter Basic #8: State Management & Http Request Flutter

Belajar Flutter Basic #8: State Manageme...

Mengelompokkan data ke dalam sebuah state berdasarkan kelompok data tersebut menjadi pilihan yang menarik untuk digunakan dengan tujuan agar lebih maintenable & mudah digunakan kembali dimanapun data...

Belajar Flutter Basic #6: Stateless & Stateful Widget Flutter

Belajar Flutter Basic #6: Stateless & St...

Bahasan mengenai stateless dan stateful widget akan kita bahas dengan menyelesaikan sebuah case sederhana agar lebih mudah dimengerti. Jadi ceritanya, saat masih kecil saya sering dapat tugas untuk be...

Belajar Flutter Basic #5: HTTP Request Flutter

Belajar Flutter Basic #5: HTTP Request

Hal penting yang wajib diketahui dalam mobile programming, terkhusus ketika menggunakan Flutter adalah HTTP Request. Sebab, hal ini menjadi kunci sekaligus jembatan untuk berinteraksi dengan backend a...

Komentar