Di tahun 2025 ini saya ada rencana mau mulai menulis lagi di medium. Walaupun sempat vakum beberapa tahun karena urusan pekerjaan. Tapi, di tahun 2025 ini mudah-mudahan saya bisa kembali menulis lagi di medium.

Pengenalan

Ketika kita ingin membuat sebuah tampilan antarmuka di Flutter pastinya kita sering menjumpai sebuah case yang mana, kita buat sebuah pengkondisian ketika kita ingin menampilkan sebuah widget. Contoh sederhananya misal, ketika si user pilih kategori A maka, akan tampil widget A. Dan jika si user pilih kategori B maka, akan tampil widget B. Nah, hal-hal seperti ini saya yakin kita semua pasti pernah mengalami case tersebut. Dan pada umumnya, untuk solusi tersebut biasanya kita buat pengkondisian secara manual menggunakan if else conditional. Di Flutter, kita sebagai developer benar-benar merasa terbantu dengan adanya kumpulan-kumpulan widget yang disediakan oleh Flutter. Jadi, di Flutter ada satu widget yang bernama IndexedStack. Widget ini berfungsi untuk membantu ketika kita ingin mengganti-ganti tampilan sebuah widget tanpa harus membuat if else conditional.

Contoh Projek

Untuk contohnya, kali ini kita akan membuat sebuah form sederhana saja yang mana didalamnya ada TextField pilih kategori, IndexedStack, dan Button. Kurang lebih kira-kira seperti inilah tampilan aplikasinya.

Buat Projek

Untuk langkah pertamanya, mari kita buat projek baru dengan nama flutter_indexed_stack.

Setup pubspec.yaml

Di projek ini kita membutuhkan sebuah plugin intl. Oleh karena itu, kita perlu menambahkan plugin tersebut kedalam projek. Untuk menambahkannya silakan jalankan perintah berikut.

flutter pub add intl

Lalu, jalankan perintah flutter pub get .

Atur file main.dart

Langkah berikutnya ialah kita buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter IndexedStack',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter IndexedStack'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final listCategories = <String>[
    'Peminjaman Dana',
    'Perjalanan Dinas',
    'Pengajuan Karyawan Baru',
  ];
  final listJobPositions = <String>[
    'Product Engineer',
    'Account Manager',
    'Copywriter',
  ];
  final controllerCategory = TextEditingController();
  final controllerJobPosition = TextEditingController();

  int? indexCategory;
  var selectedCategory = '';
  var widthScreen = 0.0;
  var heightScreen = 0.0;
  var selectedJobPosition = '';

  @override
  Widget build(BuildContext context) {
    final mediaQueryData = MediaQuery.of(context);
    widthScreen = mediaQueryData.size.width;
    heightScreen = mediaQueryData.size.height;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        width: double.infinity,
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            buildWidgetTextFieldCategory(),
            indexCategory == null ? Container() : IndexedStack(
              index: indexCategory,
              children: [
                buildWidgetInputPeminjamanDana(),
                buildWidgetInputPerjalananDinas(),
                buildWidgetInputPengajuanKaryawanBaru(),
              ],
            ),
            const SizedBox(height: 16),
            buildWidgetButtonSubmit(),
          ],
        ),
      ),
    );
  }

  Widget buildWidgetTextFieldCategory() {
    // TODO: Buat widget text field category
    return Container();
  }

  Widget buildWidgetInputPeminjamanDana() {
    // TODO: Buat widget input peminjaman dana
    return Container();
  }

  Widget buildWidgetInputPerjalananDinas() {
    // TODO: Buat widget input perjalanan dinas
    return Container();
  }

  Widget buildWidgetInputPengajuanKaryawanBaru() {
    // TODO: Buat widget input pengajuan karyawan baru
    return Container();
  }

  Widget buildWidgetButtonSubmit() {
    // TODO: Buat widget button submit
    return Container();
  }

  void unfocus() {
    // TODO: Buat function untuk unfocus setelah pilih data
  }
}

Buat StatefulWidget WidgetDialogChoose

Masih didalam file main.dart kita buat StatefulWidget baru dengan nama WidgetDialogChoose. Lalu, kita isi kode didalamnya menjadi seperti berikut.

class WidgetDialogChoose extends StatefulWidget {
  final double widthScreen;
  final double heightScreen;
  final String title;
  final List<String> listOptions;
  final String? defaultSelected;

  const WidgetDialogChoose({
    Key? key,
    required this.widthScreen,
    required this.heightScreen,
    required this.title,
    required this.listOptions,
    required this.defaultSelected,
  }) : super(key: key);

  @override
  State<WidgetDialogChoose> createState() => _WidgetDialogChooseState();
}

class _WidgetDialogChooseState extends State<WidgetDialogChoose> {
  String? selectedCategory;

  @override
  void setState(VoidCallback fn) {
    if (mounted) {
      super.setState(fn);
    }
  }

  @override
  void initState() {
    selectedCategory = widget.defaultSelected;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final children = <Widget>[];
    final listWidgetRadioButton = <Widget>[];
    for (final itemCategory in widget.listOptions) {
      final widgetRadioButton = Radio<String>(
        value: itemCategory,
        groupValue: selectedCategory,
        onChanged: (value) => setState(() => selectedCategory = itemCategory),
      );
      final widgetText = Expanded(
        child: Text(
          itemCategory,
          style: Theme.of(context).textTheme.caption?.copyWith(
                color: Colors.grey[900],
              ),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
      );
      final widgetItem = GestureDetector(
        onTap: () => setState(() => selectedCategory = itemCategory),
        child: Row(
          children: [
            widgetRadioButton,
            widgetText,
          ],
        ),
      );
      listWidgetRadioButton.add(widgetItem);
    }
    children.addAll(listWidgetRadioButton);

    return AlertDialog(
      title: Text(
        widget.title,
        textAlign: TextAlign.start,
      ),
      titleTextStyle: Theme.of(context).textTheme.subtitle2?.copyWith(
            fontSize: 16,
          ),
      titlePadding: const EdgeInsets.only(
        left: 16,
        top: 16,
      ),
      contentPadding: const EdgeInsets.all(16),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(
            width: widget.widthScreen / 1.2,
            height: widget.heightScreen / 2,
            child: ListView(
              shrinkWrap: true,
              children: children,
            ),
          ),
          Row(
            children: [
              Expanded(
                child: buildWidgetButtonCancel(),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: buildWidgetButtonOk(),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget buildWidgetButtonCancel() {
    return TextButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('Batal'),
    );
  }

  Widget buildWidgetButtonOk() {
    return TextButton(
      onPressed: selectedCategory == null || selectedCategory!.isEmpty
          ? null
          : () {
              Navigator.pop(context, selectedCategory);
            },
      child: const Text('OK'),
    );
  }
}

Jadi, widget yang kita buat tadi berfungsi untuk menampilkan dialog yang didalamnya ada sebuah radio button yang bisa dipilih oleh user.

Buat Class CurrencyIndonesiaInputFormatter

Masih didalam file main.dart silakan kita buat class baru dengan nama CurrencyIndonesiaInputFormatter dan isi kode didalamnya menjadi seperti berikut.

class CurrencyIndonesiaInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    if (newValue.text.isEmpty) {
      return const TextEditingValue(
        text: '0',
        selection: TextSelection.collapsed(offset: 1),
      );
    } else if (newValue.selection.baseOffset == 0) {
      return newValue;
    }
    var newNumberValue = double.parse(newValue.text.replaceAll(',', '').replaceAll('.', ''));
    final formatter = NumberFormat('#,###');
    final newText = formatter.format(newNumberValue).replaceAll(',', '.');
    return newValue.copyWith(
      text: newText,
      selection: TextSelection.collapsed(offset: newText.length),
    );
  }
}

Class tersebut berfungsi untuk melakukan formatting angka rupiah ketika kita input angka didalam TextField.

Buat Widget TextField Category

Kemudian, kita akan membuat sebuah widget TextField untuk pilih kategori. Buka file main.dart dan ubah kode berikut.

Widget buildWidgetTextFieldCategory() {
  // TODO: Buat widget text field category
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetTextFieldCategory() {
  return TextFormField(
    controller: controllerCategory,
    decoration: const InputDecoration(
      labelText: 'Kategori',
      isDense: true,
      suffixIcon: Icon(
        Icons.arrow_drop_down,
      ),
    ),
    readOnly: true,
    onTap: () async {
      final chooseCategory = await showDialog<String>(
        context: context,
        builder: (context) {
          return WidgetDialogChoose(
            widthScreen: widthScreen,
            heightScreen: heightScreen,
            title: 'Pilih Kategori',
            listOptions: listCategories,
            defaultSelected: selectedCategory,
          );
        },
      );
      if (chooseCategory != null) {
        setState(() {
          controllerJobPosition.clear();
          selectedJobPosition = '';
          selectedCategory = chooseCategory;
          indexCategory = listCategories.indexWhere((element) => element == selectedCategory);
          controllerCategory.text = selectedCategory;
        });
      }
      unfocus();
    },
  );
}

Sekarang coba kita jalankan programnya maka, outputnya akan menjadi seperti berikut.

Buat Widget Input Peminjaman Dana

Langkah berikutnya kita akan membuat inputan peminjaman dana. Jadi, inputan ini akan muncul jika si user pilih kategorinya peminjaman dana. Ubah kode berikut.

Widget buildWidgetInputPeminjamanDana() {
  // TODO: Buat widget input peminjaman dana
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetInputPeminjamanDana() {
  return Padding(
    padding: const EdgeInsets.only(top: 16),
    child: TextFormField(
      decoration: const InputDecoration(
        labelText: 'Jumlah',
        isDense: true,
        prefix: Text('Rp.'),
      ),
      keyboardType: TextInputType.number,
      minLines: 1,
      maxLines: 1,
      inputFormatters: [
        CurrencyIndonesiaInputFormatter(),
      ],
    ),
  );
}

Sekarang coba kita jalankan kembali programnya. Maka, output-nya akan menjadi seperti berikut.

Buat Widget Input Perjalanan Dinas

Langkah selanjutnya, kita akan membuat widget input perjalanan dinas jika si user pilih kategori perjalanan dinas. Silakan kita ubah kode berikut.

Widget buildWidgetInputPerjalananDinas() {
  // TODO: Buat widget input perjalanan dinas
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetInputPerjalananDinas() {
  return Padding(
    padding: const EdgeInsets.only(top: 16),
    child: TextFormField(
      decoration: const InputDecoration(
        labelText: "Lokasi",
        isDense: true,
      ),
      keyboardType: TextInputType.text,
      minLines: 1,
      maxLines: 1,
    ),
  );
}

Jika dijalankan programnya maka, outputnya akan menjadi seperti berikut.

Buat Widget Input Pengajuan Karyawan Baru

Selanjutnya, kita akan membuat input pengajuan karyawan baru jika si user pilih kategori pengajuan karyawan baru. Untuk membuatnya silakan ubah kode berikut.

Widget buildWidgetInputPengajuanKaryawanBaru() {
  // TODO: Buat widget input pengajuan karyawan baru
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetInputPengajuanKaryawanBaru() {
  return Padding(
    padding: const EdgeInsets.only(top: 16),
    child: TextFormField(
      controller: controllerJobPosition,
      decoration: const InputDecoration(
        labelText: 'Posisi pekerjaan',
        isDense: true,
        suffixIcon: Icon(
          Icons.arrow_drop_down,
        ),
      ),
      readOnly: true,
      onTap: () async {
        final chooseJobPosition = await showDialog<String>(
          context: context,
          builder: (context) {
            return WidgetDialogChoose(
              widthScreen: widthScreen,
              heightScreen: heightScreen,
              title: 'Pilih Posisi Pekerjaan',
              listOptions: listJobPositions,
              defaultSelected: selectedJobPosition,
            );
          },
        );
        if (chooseJobPosition != null) {
          setState(() {
            selectedJobPosition = chooseJobPosition;
            controllerJobPosition.text = selectedJobPosition;
          });
        }
        unfocus();
      },
    ),
  );
}

Dan berikut ialah outputnya.

Buat Function unfocus

Silakan kita ubah kode berikut.

void unfocus() {
  // TODO: Buat function untuk unfocus setelah pilih data
}

Menjadi seperti berikut.

void unfocus() {
  final primaryFocus = FocusManager.instance.primaryFocus;
  if (primaryFocus != null) {
    primaryFocus.unfocus();
  }
}

Jadi, function tersebut berfungsi agar ketika si user pilih kategori yang didalam TextField maka, fokus-nya itu tidak mengarah ke TextField setelah selesai pilih kategori-nya.

Buat Widget Button Submit

Langkah terakhir kita akan membuat widget button submit. Silakan kita ubah kode berikut.

Widget buildWidgetButtonSubmit() {
  // TODO: Buat widget button submit
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetButtonSubmit() {
  return SizedBox(
    width: double.infinity,
    height: 42,
    child: ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(
            content: Text('Data berhasil dikirimkan'),
          ),
        );
      },
      child: const Text('Kirim'),
    ),
  );
}

Kesimpulan

Jadi, kurang lebih seperti itulah cara menggunakan widget IndexedStack di Flutter. Sangat gampangkan cara pakainya. Seperti biasa untuk source code lengkapnya bisa dicek di Github ya.

GitHub - CoderJava/flutter-indexed-stack: How to use IndexedStack widget in Flutter

Flutter: IndexedStack was originally published in Nusanet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Pengenalan

Melihat perkembangan Flutter pada acara Google I/O 2022 kemarin saya benar-benar sangat antusias. Dan benar saja sesuai prediksi saya bahwa tahun ini Flutter desktop sudah benar-benar bisa kita coba di production. Dan untuk Flutter web saya lihat juga sudah lumayan bagus ya performance-nya daripada versi yang sebelumnya. Nah, berhubung si Flutter ini sudah semakin bagus saja perkembangannya saya jadi tertarik untuk membahas Flutter web. Jadi, di tulisan kali ini saya akan coba membahas bagaimana cara membuat extension Google Chrome menggunakan Flutter. Oya, untuk versi Flutter-nya kita nggak perlu pakai yang versi 3 ya. Yang versi 2 saja sudah cukup.

Contoh projek

Untuk contoh projeknya kali ini kita akan membuat extension Google Chrome yang berfungsi untuk membuat QR kode dari teks yang diinput oleh user.

Buat projek

Langkah pertamanya silakan kita buka text editor favorit kita masing-masing terus buat projek baru dengan nama qr_code_chrome_extension.

Setup manifest.json

Buka file manifest.json dimana, didalamnya kita bisa lihat kode didalamnya kira-kira seperti berikut ini.

{
    "name": "qr_code_chrome_extension",
    "short_name": "qr_code_chrome_extension",
    "start_url": ".",
    "display": "standalone",
    "background_color": "#0175C2",
    "theme_color": "#0175C2",
    "description": "QR code tools for chrome extension",
    "orientation": "portrait-primary",
    "prefer_related_applications": false,
    "icons": [
        {
            "src": "icons/Icon-192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "icons/Icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        },
        {
            "src": "icons/Icon-maskable-192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "maskable"
        },
        {
            "src": "icons/Icon-maskable-512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        }
    ]
}

Kemudian, kita ubah menjadi seperti berikut.

{
    "name": "qr_code_chrome_extension",
    "description": "QR code tools for chrome extension",
    "version": "1.0.0",
    "content_security_policy": {
        "extension_pages": "script-src 'self' ; object-src 'self'"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "/icons/Icon-192.png"
    },
    "manifest_version": 3
}

Catatan: Yang saya tandain bold harap disesuaikan dengan lokal kita masing-masing ya.

Setup index.html

Langkah berikutnya ialah kita buka file index.html.

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="QR code tools for chrome extension">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="qr_code_chrome_extension">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>qr_code_chrome_extension</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    var serviceWorkerVersion = null;
    var scriptLoaded = false;
    function loadMainDartJs() {
      if (scriptLoaded) {
        return;
      }
      scriptLoaded = true;
      var scriptTag = document.createElement('script');
      scriptTag.src = 'main.dart.js';
      scriptTag.type = 'application/javascript';
      document.body.append(scriptTag);
    }

    if ('serviceWorker' in navigator) {
      // Service workers are supported. Use them.
      window.addEventListener('load', function () {
        // Wait for registration to finish before dropping the <script> tag.
        // Otherwise, the browser will load the script multiple times,
        // potentially different versions.
        var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
        navigator.serviceWorker.register(serviceWorkerUrl)
          .then((reg) => {
            function waitForActivation(serviceWorker) {
              serviceWorker.addEventListener('statechange', () => {
                if (serviceWorker.state == 'activated') {
                  console.log('Installed new service worker.');
                  loadMainDartJs();
                }
              });
            }
            if (!reg.active && (reg.installing || reg.waiting)) {
              // No active web worker and we have installed or are installing
              // one for the first time. Simply wait for it to activate.
              waitForActivation(reg.installing || reg.waiting);
            } else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
              // When the app updates the serviceWorkerVersion changes, so we
              // need to ask the service worker to update.
              console.log('New service worker available.');
              reg.update();
              waitForActivation(reg.installing);
            } else {
              // Existing service worker is still good.
              console.log('Loading app from service worker.');
              loadMainDartJs();
            }
          });

        // If service worker doesn't succeed in a reasonable amount of time,
        // fallback to plaint <script> tag.
        setTimeout(() => {
          if (!scriptLoaded) {
            console.warn(
              'Failed to load app from service worker. Falling back to plain <script> tag.',
            );
            loadMainDartJs();
          }
        }, 4000);
      });
    } else {
      // Service workers not supported. Just drop the <script> tag.
      loadMainDartJs();
    }
  </script>
</body>
</html>

Kemudian, kita ubah bagian tag script -nya menjadi seperti berikut.

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="QR code tools for chrome extension">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="qr_code_chrome_extension">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>qr_code_chrome_extension</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

Lalu, kita perlu atur size window dari extension yang akan kita buat. Caranya, kita perlu tambahkan style di bagian tag html -nya menjadi seperti berikut.

<html style="height: 300px; width: 300px">

Tes pasang extension

Sekarang kita coba build flutter web-nya menggunakan perintah berikut.

flutter build web --web-renderer html --csp

Setelah berhasil ter-build. Coba kita buka Google Chrome. Kemudian, buka chrome://extensions.

Pilih Load unpacked dan pilih directory build/web hasil dari perintah build diatas. Jika berhasil pada tahap-tahap sebelumnya maka, aplikasi yang kita build tadi seharusnya akan tampil.

Sekarang coba kita buka aplikasi extension-nya maka, tampil programnya seperti berikut.

Buat fitur QR kode

Nah, jika proses pembuatan extension-nya sudah berhasil. Maka, langkah berikutnya adalah kita tinggal buat fitur QR kode-nya aja nih.

Setup pubspec.yaml

Untuk membuat fitur tersebut kita perlu menggunakan plugin berikut ini.

qr_flutter | Flutter Package

Untuk menambahkan plugin tersebut kedalam projek silakan gunakan perintah berikut ini ya.

flutter pub add qr_flutter

Tunggu beberapa saat sampai proses download plugin-nya selesai. Jika proses tersebut berhasil seharusnya didalam file pubspec.yaml kita akan menemukan bahwa plugin qr_flutter sudah ditambahkan.

Buat tampilan utama

Nah, langkah berikutnya kita akan membuat tampilan utamanya ya. Untuk membuatnya silakan buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

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

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

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

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final controllerText = TextEditingController();
  final valueNotifierQr = ValueNotifier('');
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Form(
              key: formKey,
              child: TextFormField(
                controller: controllerText,
                decoration: const InputDecoration(
                  isDense: true,
                  hintText: 'Enter a text or URL',
                ),
                maxLines: 1,
                minLines: 1,
                onFieldSubmitted: (value) {
                  // TODO: Buat fitur membuat QR kode
                },
              ),
            ),
            const SizedBox(height: 16),
            SizedBox(
              width: double.infinity,
              height: 36,
              child: ElevatedButton(
                onPressed: () {
                  // TODO: Buat fitur membuat QR kode
                },
                child: const Text('Create QR'),
              ),
            ),
            const SizedBox(height: 16),
            ValueListenableBuilder(
              valueListenable: valueNotifierQr,
              builder: (BuildContext context, String value, _) {
                return QrImage(
                  data: value,
                  version: QrVersions.auto,
                  size: 180,
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Sekarang coba kita jalankan terlebih dahulu aplikasinya ya. Biar kelihatan tampilannya gimana.

flutter run -d chrome

Buat fitur QR kode

Jika tampilannya sudah selesai maka, langkah berikutnya adalah kita tinggal buat fungsi untuk membuat QR kode dari teks yang diinput oleh si user. Silakan kita buka kembali file main.dart dan buat function berikut.

void doCreateQrCode() {
  if (formKey.currentState!.validate()) {
    final qrData = controllerText.text.trim();
    valueNotifierQr.value = qrData;
  }
}

Lalu, kita ubah kode todo berikut ini.

// TODO: Buat fitur membuat QR kode

Menjadi seperti ini.

doCreateQrCode();

Kemudian, coba kita jalankan lagi programnya dan tes apakah fungsi buat QR kode sudah berhasil atau tidak.

Build ulang extension-nya

Sekarang coba kita build ulang extension-nya ya.

flutter build web --web-renderer --csp

Lalu, kita reload extension di Google chrome-nya dengan cara tekan tombol seperti yang ada di gambar berikut.

Tes fitur QR kode

Sekarang coba kita tes fitur QR kode di Google Chrome extension-nya.

Sekarang coba saya tes apakah QR kode-nya sudah sesuai atau belum ya menggunakan aplikasi QR code scanner di HP.

Kesimpulan

Jadi kesimpulannya adalah bahwa Flutter web sudah bisa membuat extension untuk Google Chrome. Dan ini merupakan tanda bahwa Flutter benar-benar serius dikembangkan untuk web. Dan mudah-mudahan saja Flutter web bisa ikut berpartisipasi dalam daftar web framework yang ada.

GitHub - CoderJava/qr_code_chrome_extension: QR code tools for chrome extension using Flutter

Create chrome extension using Flutter was originally published in Nusanet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Pengenalan

Pada tulisan kali ini kita akan membahas mengenai salah satu widget yang bernama StatefulBuilder . Dari namanya saja pasti kita sudah tahu apa fungsi dari widget tersebut. Jadi, StatefulBuilder berfungsi untuk membuat state tersendiri didalam builder. Fungsi dari widget ini menurut saya cukup bagus ya karena widget ini seperti membuat state tersendiri sehingga state-nya itu terpisah dari parent-nya dan kadang kalau widget-nya yang ingin kita buat itu cukup sederhana saya pikir lebih baik pakai StatefulBuilder aja sih. Ketimbang harus buat class sendiri yang extends ke StatefulWidget .

Contoh Projek

Jadi, untuk contoh projek kali ini kita akan menggunakan salah satu design yang ada di material design miliknya si Google.

Bisa kita lihat bahwa pada design diatas sebenarnya sangat sederhana banget ya. Jadi, kalau teman-teman sudah paham di Flutter pasti sudah bisa membayangkan kalau untuk membuat design diatas kita pasti akan membuat sebuah widget Stateful tersendiri untuk dialog tersebut agar ketika di-setState (user pilih options-nya) maka, parent-nya tidak ikut ter-build juga. Jadi, di tulisan kali ini saya akan buat 2 versi. Versi pertamanya kita akan pakai class tersendiri khusus untuk dialog-nya dan versi keduanya kita akan pakai StatefulBuilder.

Mulai Pembuatan Projek

Untuk langkah pertamanya silakan buat projek baru dengan nama belajar_stateful_builder.

Buat Tampilan Utama

Buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Belajar Stateful Builder',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final listRingtones = <String>[
    'None',
    'Callisto',
    'Ganymede',
    'Luna',
    'Mash-up',
    'School\'s out',
    'Zen too',
  ];
  late String selectedRingtone;

  @override
  void initState() {
    selectedRingtone = listRingtones.first;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Belajar Stateful Builder'),
      ),
      body: InkWell(
        onTap: () {
          // TODO: tampilkan dialog untuk pilih phone ringtone
        },
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SizedBox(
            width: double.infinity,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Phone ringtone',
                  style: Theme.of(context).textTheme.bodyText2?.copyWith(
                    fontWeight: FontWeight.w500,
                  ),
                ),
                Text(
                  selectedRingtone,
                  style: Theme.of(context).textTheme.bodyText2?.copyWith(
                    color: Colors.grey,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Berikut adalah output dari kode diatas.

Buat Versi Pertama

Untuk versi pertamanya kita akan membuat dialog-nya menggunakan class StatefulWidget. Untuk membuatnya silakan kita buka file main.dart dan tambahkan kode berikut.

class DialogPhoneRingtone extends StatefulWidget {
  final List<String> listRingtones;
  final String defaultSelectedRingtone;

  const DialogPhoneRingtone({
    Key? key,
    required this.listRingtones,
    required this.defaultSelectedRingtone,
  }) : super(key: key);

  @override
  State<DialogPhoneRingtone> createState() => _DialogPhoneRingtoneState();
}

class _DialogPhoneRingtoneState extends State<DialogPhoneRingtone> {
  late String selectedRingtone;

  @override
  void initState() {
    selectedRingtone = widget.defaultSelectedRingtone;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final mediaQueryData = MediaQuery.of(context);
    final widthScreen = mediaQueryData.size.width;
    final heightScreen = mediaQueryData.size.height;
    return AlertDialog(
      title: const Text(
        'Phone ringtone',
        textAlign: TextAlign.start,
      ),
      titlePadding: const EdgeInsets.only(
        left: 16,
        top: 16,
      ),
      contentPadding: const EdgeInsets.all(16),
      content: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(
            width: widthScreen / 1.2,
            height: heightScreen / 2,
            child: ListView(
              shrinkWrap: true,
              children: widget.listRingtones.map((element) {
                return Row(
                  children: [
                    Radio<String>(
                      value: element,
                      groupValue: selectedRingtone,
                      onChanged: (_) {
                        setState(() {
                          selectedRingtone = element;
                        });
                      },
                    ),
                    Text(
                      element,
                      style: Theme.of(context).textTheme.caption?.copyWith(
                            color: Colors.grey[900],
                          ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                );
              }).toList(),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              TextButton(
                child: const Text('CANCEL'),
                style: TextButton.styleFrom(
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              TextButton(
                child: const Text('OK'),
                style: TextButton.styleFrom(
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
                onPressed: () {
                  Navigator.pop(context, selectedRingtone);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Lalu, kita ubah kode todo berikut ini.

onTap: () async {
  // TODO: tampilkan dialog untuk pilih phone ringtone  
},

Menjadi seperti berikut.

final resultSelectedRingtone = await showDialog<String?>(
  context: context,
  builder: (context) {
    return DialogPhoneRingtone(
      listRingtones: listRingtones,
      defaultSelectedRingtone: selectedRingtone,
    );
  },
);
if (resultSelectedRingtone != null) {
  setState(() {
    selectedRingtone = resultSelectedRingtone;
  });
}

Sekarang coba jalankan kembali aplikasinya. Dan seharusnya didalam aplikasinya kita sudah bisa pilih phone ringtone-nya.

Buat Versi Kedua

Nah, untuk versi keduanya kita akan membuat tampilan yang sama hanya saja kita menggunakan StatefulBuilder . Untuk membuatnya silakan kita buka kembali file main.dart dan tambahkan function berikut kedalam class _MyHomePageState.

Widget buildDialogPhoneRingtone() {
  return StatefulBuilder(
    builder: (context, setState) {
      debugPrint('build stateful builder');
      final mediaQueryData = MediaQuery.of(context);
      final widthScreen = mediaQueryData.size.width;
      final heightScreen = mediaQueryData.size.height;
      return AlertDialog(
        title: const Text(
          'Phone ringtone',
          textAlign: TextAlign.start,
        ),
        titlePadding: const EdgeInsets.only(
          left: 16,
          top: 16,
        ),
        contentPadding: const EdgeInsets.all(16),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            SizedBox(
              width: widthScreen / 1.2,
              height: heightScreen / 2,
              child: ListView(
                shrinkWrap: true,
                children: listRingtones.map((element) {
                  return Row(
                    children: [
                      Radio<String>(
                        value: element,
                        groupValue: selectedRingtone,
                        onChanged: (_) {
                          setState(() {
                            selectedRingtone = element;
                          });
                        },
                      ),
                      Text(
                        element,
                        style: Theme.of(context).textTheme.caption?.copyWith(
                          color: Colors.grey[900],
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  );
                }).toList(),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(
                  child: const Text('CANCEL'),
                  style: TextButton.styleFrom(
                    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  ),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                TextButton(
                  child: const Text('OK'),
                  style: TextButton.styleFrom(
                    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  ),
                  onPressed: () {
                    Navigator.pop(context, selectedRingtone);
                  },
                ),
              ],
            ),
          ],
        ),
      );
    },
  );
}

Lalu, kita ubah kode berikut.

context: context,
builder: (context) {
  return DialogPhoneRingtone(
    listRingtones: listRingtones,
    defaultSelectedRingtone: selectedRingtone,
  );
},

Menjadi seperti berikut.

context: context,
builder: (context) {
  return buildDialogPhoneRingtone(); 
},

Kemudian, biar kelihatan proses build state dari class _MyHomePageState kita perlu tambahkan kode debugging-nya didalam method build .

@override
Widget build(BuildContext context) {
  debugPrint('build parent');
  return Scaffold(
...

Sekarang coba kita jalankan lagi aplikasinya maka, outputnya akan tetap sama.

Nah, bisa kita lihat di video diatas dibagian log console-nya bahwa widget StatefulBuilder menggunakan state tersendiri sehingga ketika melakukan setState didalam StatefulBuilder maka, state dari parent-nya tidak akan ter-build ulang.

Kesimpulan

Jadi, kesimpulannya adalah widget StatefulBuilder bisa membantu kita untuk membuat widget stateful tanpa harus buat class yang terpisah. Tapi, perlu dicatat ya bahwa jika widget stateful yang kita pakai itu ingin reusable atau bisa dipakai secara berulang-ulang di halaman lain maka, saya lebih sarankan pakai yang buat class sendiri daripada pakai StatefulBuilder . Untuk source code lengkapnya bisa kamu lihat di Github ya.

GitHub - CoderJava/belajar-stateful-builder: How to use Stateful Builder widget in Flutter

Flutter: StatefulBuilder was originally published in Nusanet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Pengenalan

Salah satu tantangan terbesar untuk framework cross platform seperti Flutter ini ialah bagaimana cara mereka agar si Flutter ini tetap bisa menggunakan fungsi-fungsi native dari sebuah platform. Baik itu di sisi mobile ada Android dan iOS maupun nanti kedepannya untuk platform Web dan Desktop (Mac, Linux, dan Windows). Beruntungnya di Flutter sudah mereka sediakan yang namanya itu platform channel. Jadi, platform channel ini ialah cara bagaimana si Flutter atau bahasa Dart bisa berkomunikasi dengan kode-kode native-nya si platform. Misal, kalau di Android kita bisa berkomunikasi dengan kode Java atau Kotlin. Dan di iOS bisa berkomunikasi dengan Obj-C atau Swift. Jadi, di platform channel ini ada 3 metode yang bisa kita gunakan untuk melakukan komunikasi dengan kode native-nya. Berikut adalah beberapa metodenya.

1. Method Channel

Untuk yang pertama, method channel ini ialah sebuah metode dimana, kita membuat kode Dart yang memanggil fungsi yang ada di native-nya. Jadi, secara sederhana saya katakan saja bahwa method channel ini cara kerjanya hampir mirip seperti kita memanggil sebuah method. Kita panggil method yang ada di native dari bahasa Dart lalu, kita tunggu respon yang diberikan oleh si native.

Untuk pembahasan detail-nya bisa kamu baca pada link berikut ini ya.

Flutter to Native Code

2. Event Channel

Untuk metode kedua, ini cara kerjanya berbeda dengan metode pertama. Jadi, jika di method channel kita panggil method yang ada di native dan menunggu kembalian datanya. Maka, di event channel kita cukup meng-listen data yang diberikan oleh si native. Cara kerjanya ini hampir mirip kayak stream. Jadi, di sisi Dart kita cukup listen aja. Dan di sisi native-nya nanti yang akan mengirimkan datanya.

3. Basic Message Channel

Untuk metode yang ketiga ini jujur saja saya kurang begitu paham gimana cara kerjanya. Tapi, nanti kalau saya sudah paham akan saya buat tulisan terpisah mengenai detail penggunaannya.

Dari ketiga metode tersebut yang pernah saya pakai di lapangan itu hanya yang method channel saja. Untuk event channel saya belum pakai karena belum ada kebutuhan untuk menggunakannya. Jadi, untuk method channel saya pernah pakai untuk menggunakan plugin camera native-nya si Android ketimbang menggunakan plugin camera-nya si Flutter. Alasannya cukup sederhana yaitu, karena pas dipakai oleh user ternyata ada beberapa sebagian device Android yang error ketika coba pakai plugin camera-nya si Flutter. Alhasil saya kepikiran untuk memisahkan kode untuk fitur camera-nya. Untuk Android-nya saya pakai method channel agar menggunakan plugin camera-nya si Android sementara, untuk iOS saya tetap pakai plugin camera-nya si Flutter. So far sih untuk plugin camera di iOS belum ada kendala ya.

Contoh Kasus

Jadi, di tulisan ini saya akan bahas detail mengenai penggunaan event channel. Untuk projeknya silakan kita buat projek baru dengan nama belajar_flutter_event_channel.

Untuk platform-nya nanti kita coba buat untuk Android dan iOS saja ya.

Buat UI Utama

Jadi, di contoh kasus kali ini kita akan coba buat aplikasi timer. Cuma timer-nya itu dibuat dari kode native-nya bukan dari Dart. Untuk memulai membuatnya kita perlu buat UI-nya terlebih dahulu. Silakan kita buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Belajar Event Channel',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Belajar Event Channel'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final eventChannel = const EventChannel('belajar_flutter_event_channel');
  final valueNotifier = ValueNotifier<String>('value');

  @override
  void initState() {
    eventChannel.receiveBroadcastStream().listen((event) {
      if (event is String) {
        valueNotifier.value = event;
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ValueListenableBuilder<String>(
          valueListenable: valueNotifier,
          builder: (BuildContext context, String value, Widget? child) {
            return Text(
              value,
              style: Theme.of(context).textTheme.headline6,
            );
          },
        ),
      ),
    );
  }
}

Bisa kita lihat pada kode diatas bahwa kita ada menggunakan widget ValueListenableBuilder untuk meng-listen perubahan dari variable valueNotifier . Kemudian, didalam method initState kita ada menggunakan event channel untuk meng-listen data yang diberikan dari si native dan data yang dari native akan kita masukkan kedalam variable valueNotifier . Dan berikut ini adalah tampilan dari programnya.

Buat Event Channel di Android

Untuk membuat event channel di Android silakan kita buka file MainActivity.kt (sesuaikan dengan bahasa native-nya masing-masing ya) dan ubah kode didalamnya menjadi seperti berikut.

package com.example.belajar_flutter_event_channel

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.EventChannel
import java.util.*

class MainActivity: FlutterActivity() {
    private val channel = "belajar_flutter_event_channel"
    private lateinit var timer: Timer
    private var eventSink: EventChannel.EventSink? = null
    private var counter = 0

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        val eventChannel = EventChannel(flutterEngine.dartExecutor.binaryMessenger, channel)
        eventChannel.setStreamHandler(object : EventChannel.StreamHandler {
            override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {
                eventSink = events
            }

            override fun onCancel(arguments: Any?) {
                stopTimer()
            }
        })
        startTimer()
    }

    private fun startTimer() {
        timer = Timer()
        timer.scheduleAtFixedRate(object : TimerTask() {
            override fun run() {
                this@MainActivity.runOnUiThread {
                    counter += 1
                    eventSink?.success("Counter from Android: $counter")
                }
            }
        }, 0, 1000)
    }

    private fun stopTimer() {
        timer.cancel()
    }
}

Jadi, didalam file tersebut kita ada menggunakan timer miliknya si Android lalu, data counter-nya kita kirim kedalam variable eventSink . Nah, data yang kita kirim ini nantinya akan diterima oleh si Flutter karena si Flutter kan tadinya sudah meng-listen ya. Sehingga jika kita jalankan programnya maka, output untuk di Android akan menjadi seperti berikut.

Buat Event Channel di iOS

Untuk yang iOS kita bisa buka file AppDelegate.swift dan ubah kode didalamnya menjadi seperti berikut.

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate, FlutterStreamHandler {
    private var eventSink: FlutterEventSink?
    private var timer: Timer?
    private var counter = 0
    
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        let eventChannel = FlutterEventChannel(name: "belajar_flutter_event_channel", binaryMessenger: controller.binaryMessenger)
        eventChannel.setStreamHandler(self)
        
        timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: "increaseCounter", userInfo: nil, repeats: true)
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
    
    @objc func increaseCounter() {
        counter += 1
        eventSink?("Counter from iOS: \(counter)")
    }
    
    public func onListen(withArguments arguments: Any?, eventSink: @escaping FlutterEventSink) -> FlutterError? {
        self.eventSink = eventSink
        return nil
    }
    
    public func onCancel(withArguments arguments: Any?) -> FlutterError? {
        timer?.invalidate()
        eventSink = nil
        return nil
    }
}

Cara kerjanya sama seperti di Android. Kita ada menggunakan timer-nya si iOS lalu data dari variable counter kita masukkan kedalam variable eventSink.

Kesimpulan

Jadi, kesimpulannya adalah Flutter memiliki 3 metode untuk bisa melakukan komunikasi dari Dart ke platform-nya masing-masing yaitu, method channel, event channel, dan basic message channel. Event channel memiliki cara kerja mirip seperti stream. Dari Dart cukup meng-listen datanya dan native-nya akan mengirimkan datanya. Untuk source code lengkapnya bisa di Github ya.

GitHub - CoderJava/belajar-flutter-event-channel: How to use event channel in Flutter

Flutter: Event Channel was originally published in Nusanet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Pengenalan

Shelf

Di tulisan kali ini saya mau bahas lagi mengenai server side menggunakan bahasa Dart. Sebelumnya saya pernah juga membahas mengenai cara membuat CRUD API dengan Dart menggunakan Aqueduct.

Restful API dengan Aqueduct

Namun, setelah saya lihat ternyata perkembangan dari Aqueduct sudah tidak dilanjutkan lagi. Oleh karena itu, di tulisan ini saya mau bahas lagi mengenai server side menggunakan bahasa Dart tapi, menggunakan plugin yang berbeda pula. Kali ini kita akan mencoba menggunakan plugin yang bernama Shelf.

GitHub - dart-lang/shelf: Web server middleware for Dart

Jadi, Shelf ini merupakan plugin yang dibuat langsung oleh tim Dart. Dan saat ini saya lihat commit-an terakhir mereka sekitar 17 hari yang lalu. Yang menandakan bahwa ini plugin masih dikembangkan (mudah-mudahan saja 😄)

Tapi, berhubung ini plugin dibuat oleh tim Dart-nya. Saya jadi semakin penasaran gimana cara membuat server side menggunakan plugin tersebut.

Supabase

Nah, kalau bahas server side rasanya kurang lengkap kalau kita tidak bahas juga mengenai database-nya. Jadi, biar lebih kece untuk server side-nya nanti kita akan pakai database miliknya si Supabase ya.

Supabase | The Postgres Development Platform.

Jadi, Supabase ini hampir mirip seperti Firebase gitu ya. Cuma kalau dilihat dari halaman depannya saat ini mereka bilang kalau Supabase ini salah satu alternatif dari Firebase yang open source. Dan biasanya nih produk-produk yang open source begini prospek kedepannya bakalan cerah apalagi fungsinya hampir mirip atau bahkan melebihi expectation dari produk yang serupa.

Dan setelah saya cek di pub.dev ternyata plugin supabase untuk projek Dart sudah ada yang buat.

supabase | Dart Package

Btw, perlu dicatat ya bahwa plugin diatas merupakan plugin untuk projek Dart bukan untuk Flutter. Kalau Supabase untuk Flutter bisa coba yang ini.

supabase_flutter | Flutter package

Tapi, untuk saat ini kita nggak akan bahas mengenai Supabase untuk Flutter. Fokus kita di tulisan ini adalah bagaimana cara membuat CRUD API menggunakan Shelf dan Supabase.

Pembuatan Projek

Buat Projek Supabase

Untuk langkah pertamanya, kita perlu buat akun terlebih dahulu di Supabase.

Selanjutnya, kita perlu buat sebuah projek di Supabase.

Kemudian, kita perlu isi sebuah form untuk membuat projeknya.

Setelah itu, kita perlu menunggu beberapa menit sampai projeknya benar-benar berhasil dibuat.

Jika sudah selesai seharusnya tampilan dashboard-nya menjadi seperti gambar berikut ini ya.

Buat Table Profile

Masih di Supabase. Kita perlu buat table baru dengan nama profile di Database. Caranya, kita tekan saja menu Database lalu, tekan tombol New.

Kemudian, kita atur kolomnya menjadi seperti gambar berikut.

Oya, pada kolom diatas pastikan yang nullable hanya kolom email dan phone_number. Kemudian, kita coba insert row di table tersebut dengan cara tekan tombol Insert row.

Kemudian, kita isi datanya.

Selanjutnya, tekan Save.

Buat Projek Dart

Oke, sekarang kita beralih ke Dart. Untuk langkah pertama di sisi Dart, kita perlu buat projek baru Dart-nya. Untuk membuatnya kita bisa menggunakan IDE atau command line. Biar seragam saya contohkan menggunakan command line saja ya.

dart create dart_profile

Setelah itu kita buka projeknya.

Kemudian, kita perlu rename dart_profile.dart menjadi main.dart.

Atur pubspec.yaml

Langkah berikutnya kita perlu menambahkan plugin berikut kedalam pubspec.yaml.

name: dart_profile
description: A simple command-line application.
version: 1.0.0

environment:
  sdk: '>=2.15.1 <3.0.0'

dependencies:
  args: ^2.3.0
  shelf: ^1.2.0
  shelf_router: ^1.1.2
  supabase: ^0.2.14
  jiffy: ^5.0.0
  json_annotation: ^4.4.0

dev_dependencies:
  lints: ^1.0.0
  http: ^0.13.0
  build_runner: ^2.1.7
  json_serializable: ^6.1.4

Selanjutnya, kita jalankan perintah dart pub get untuk mengunduh dependency-nya.

Buat Class Model

Biar lebih gampang kita akan membuat class model dari table profile. Untuk membuatnya, silakan buat file baru dengan nama profile.dart dan isikan dengan kode berikut.

import 'package:json_annotation/json_annotation.dart';

part 'profile.g.dart';

@JsonSerializable()
class Profile {
  @JsonKey(name: 'id')
  final int? id;
  @JsonKey(name: 'created_at')
  final String? createdAt;
  @JsonKey(name: 'full_name')
  final String? fullName;
  @JsonKey(name: 'email')
  final String? email;
  @JsonKey(name: 'phone_number')
  final String? phoneNumber;
  @JsonKey(name: 'birth_date')
  final String? birthDate;

  Profile({
    this.id,
    this.createdAt,
    this.fullName,
    this.email,
    this.phoneNumber,
    this.birthDate,
  });

  factory Profile.fromJson(Map<String, dynamic> json) => _$ProfileFromJson(json);

  Map<String, dynamic> toJson() => _$ProfileToJson(this);

  @override
  String toString() {
    return 'Profile{id: $id, createdAt: $createdAt, fullName: $fullName, '
        'email: $email, phoneNumber: $phoneNumber, birthDate: $birthDate}';
  }
}

Kemudian, jalankan perintah dart run build_runner build untuk membuat file generator-nya. Jika berhasil seharusnya ada 1 file baru yang terbentuk secara otomatis dengan nama profile.g.dart.

Buat Fungsi Supabase

Langkah berikutnya kita akan membuat fungsi CRUD kedalam database Supabase. Caranya, kita buat file baru dengan nama supabase_helper.dart. Kemudian, kita isi kode didalamnya menjadi seperti berikut.

class SupabaseHelper {
  final supabaseUrl = '';
  final supabaseKey = '';
  final profileTableName = 'profile';
  late SupabaseClient supabaseClient;

  SupabaseHelper() {
    supabaseClient = SupabaseClient(supabaseUrl, supabaseKey);
  }

  Map<String, dynamic> getTemplateErrorMessage({
    String title = 'Info',
    String message = 'Data not found',
  }) {
    return {
      'title': title,
      'message': message,
    };
  }

  Future<Response> getAllProfile() async {
    // TODO: Tampilkan semua data profile
    return Response.ok('get all profile');
  }

  Future<Response> getProfileById(String id) async {
    // TODO: Tampilkan profile berdasarkan id yang diberikan
    return Response.ok('get profile by id');
  }

  Future<Response> createProfile(String bodyRequest) async {
    // TODO: Masukkan data profile baru kedalam table
    return Response.ok('create profile');
  }

  Future<Response> updateProfile(String id, String bodyRequest) async {
    // TODO: Update data profile kedalam table
    return Response.ok('update profile');
  }

  Future<Response> deleteProfile(String id) async {
    // TODO: Hapus data profile dari table
    return Response.ok('delete profile');
  }
}

Untuk nilai supabaseUrl dan supabaseKey bisa kamu ambil dari Supabase. Caranya, pilih menu Settings-Project settings-API. Salin nilai anon public kedalam variable supabaseKey. Dan salin juga nilai URL kedalam variable supabaseUrl.

Buat Fungsi Menampilkan Semua Data Profile

Masih didalam file supabase_helper.dart kita akan membuat fungsi yang menampilkan semua data profile. Untuk membuatnya, silakan kita ubah kode berikut.

Future<Response> getAllProfile() async {
  // TODO: Tampilkan semua data profile
  return Response.ok('get all profile');
}

Menjadi seperti berikut.

Future<Response> getAllProfiles() async {
  try {
    final response = await supabaseClient.from(profileTableName).select().execute();
    late Map<String, dynamic> responseJson;
    if (response.data == null) {
      responseJson = getTemplateErrorMessage();
      return Response.notFound(jsonEncode(responseJson));
    }
    final listProfiles = List.from(response.data).map((e) => Profile.fromJson(e)).toList();
    responseJson = {
      'data': listProfiles,
    };
    return Response.ok(jsonEncode(responseJson));
  } catch (error) {
    return Response.internalServerError(
      body: getTemplateErrorMessage(
        title: 'Error',
        message: error.toString(),
      ),
    );
  }
}

Bisa kita lihat pada kode diatas bahwa kita ada handle untuk beberapa case misal datanya tidak ada, datanya ada dan error-nya pun juga kita tangkap dalam blok try-catch . Jadi, seumpama ada case yang tidak ter-handle bisa langsung masuk kedalam catch -nya.

Buat Fungsi Menampilkan Profile Berdasarkan ID

Langkah berikutnya kita akan membuat fungsi yang berguna untuk menampilkan sebuah data profile berdasarkan ID yang diberikan. Untuk membuatnya silakan ubah kode berikut.

Future<Response> getProfileById(String id) async {
  // TODO: Tampilkan profile berdasarkan id yang diberikan
  return Response.ok('get profile by id');
}

Menjadi seperti berikut.

Future<Response> getProfileById(String id) async {
  try {
    final response = await supabaseClient.from(profileTableName).select().eq('id', id).execute();
    final listProfiles = List.from(response.data).map((e) => Profile.fromJson(e)).toList();
    late Map<String, dynamic> responseJson;
    if (listProfiles.isEmpty) {
      responseJson = getTemplateErrorMessage();
      return Response.notFound(jsonEncode(responseJson));
    }
    responseJson = listProfiles.first.toJson();
    return Response.ok(jsonEncode(responseJson));
  } catch (error) {
    return Response.internalServerError(
      body: getTemplateErrorMessage(
        title: 'Error',
        message: error.toString(),
      ),
    );
  }
}

Buat Fungsi Tambah Data Profile

Fungsi ini berguna untuk menambahkan data profile baru kedalam table. Untuk membuatnya ubah kode berikut.

Future<Response> createProfile(String bodyRequest) async {
  // TODO: Masukkan data profile baru kedalam table
  return Response.ok('create profile');
}

Menjadi seperti berikut.

Future<Response> createProfile(String bodyRequest) async {
  try {
    final profile = Profile.fromJson(jsonDecode(bodyRequest)).toJson()
      ..remove('id')
      ..remove('created_at');
    final response = await supabaseClient.from(profileTableName).insert(profile).execute();
    late Map<String, dynamic> responseJson;
    if (response.data == null) {
      responseJson = getTemplateErrorMessage(message: 'Create profile failed');
      return Response.internalServerError(body: jsonEncode(responseJson));
    }
    final listData = List.from(response.data).map((e) => Profile.fromJson(e)).toList();
    if (listData.isEmpty) {
      responseJson = getTemplateErrorMessage();
      return Response.notFound(jsonEncode(responseJson));
    }
    responseJson = listData.first.toJson();
    return Response(201, body: jsonEncode(responseJson));
  } catch (error) {
    return Response.internalServerError(
      body: getTemplateErrorMessage(
        title: 'Error',
        message: error.toString(),
      ),
    );
  }
}

Mungkin kamu bertanya-tanya mengapa respon dari Supabase selalu kita handle dalam bentuk List. Karena, tipe data dari response.data berbentuk List. Makanya, kita selalu handle-nya dalam bentuk List yang kemudian, kita mapping-kan kedalam class model Profile .

Buat Fungsi Ubah Data Profile

Fungsi ini berguna untuk mengubah data yang sudah ada atau sering kita sebut dengan edit data. Untuk membuatnya silakan ubah kode berikut.

Future<Response> updateProfile(String id, String bodyRequest) async {
  // TODO: Update data profile kedalam table
  return Response.ok('update profile');
}

Menjadi seperti berikut.

Future<Response> updateProfile(String id, String bodyRequest) async {
  try {
    final profile = Profile.fromJson(jsonDecode(bodyRequest)).toJson()
      ..remove('id')
      ..remove('created_at');
    final response = await supabaseClient.from(profileTableName).update(profile).eq('id', id).execute();
    late Map<String, dynamic> responseJson;
    if (response.data == null) {
      responseJson = getTemplateErrorMessage(message: 'Update profile failed');
      return Response.internalServerError(body: jsonEncode(responseJson));
    }
    final listData = List.from(response.data).map((e) => Profile.fromJson(e)).toList();
    if (listData.isEmpty) {
      responseJson = getTemplateErrorMessage();
      return Response.notFound(jsonEncode(responseJson));
    }
    responseJson = listData.first.toJson();
    return Response.ok(jsonEncode(responseJson));
  } catch (error) {
    return Response.internalServerError(
      body: getTemplateErrorMessage(
        title: 'Error',
        message: error.toString(),
      ),
    );
  }
}

Buat Fungsi Hapus Data Profile

Fungsi ini berguna untuk menghapus data profile yang ada. Untuk membuatnya silakan ubah kode berikut.

Future<Response> deleteProfile(String id) async {
  // TODO: Hapus data profile dari table
  return Response.ok('delete profile');
}

Menjadi seperti berikut.

Future<Response> deleteProfile(String id) async {
  try {
    final response = await supabaseClient.from(profileTableName).delete().eq('id', id).execute();
    late Map<String, dynamic> responseJson;
    if (response.data == null) {
      responseJson = getTemplateErrorMessage(message: 'Delete profile failed');
      return Response.internalServerError(body: jsonEncode(responseJson));
    }
    final listData = List.from(response.data).map((e) => Profile.fromJson(e)).toList();
    if (listData.isEmpty) {
      responseJson = getTemplateErrorMessage();
      return Response.notFound(jsonEncode(responseJson));
    }
    responseJson = listData.first.toJson();
    return Response.ok(jsonEncode(responseJson));
  } catch (error) {
    return Response.internalServerError(
      body: getTemplateErrorMessage(
        title: 'Error',
        message: error.toString(),
      ),
    );
  }
}

Buat Routing Endpoint-nya

Setelah fungsi CRUD-nya selesai kita buat. Maka, langkah selanjutnya adalah kita perlu define route endpoint-nya. Untuk membuatnya silakan buat file baru dengan nama profile_controller.dart dan isikan dengan kode berikut.

import 'package:shelf/shelf.dart';
import 'package:shelf_router/shelf_router.dart';

import 'supabase_helper.dart';

class ProfileController {
  Handler get handler {
    final router = Router();
    final supabaseHelper = SupabaseHelper();

    router.get('/profile', (Request request) async {
      return supabaseHelper.getAllProfiles();
    });

    router.get('/profile/<id>', (Request request, String id) async {
      return supabaseHelper.getProfileById(id);
    });

    router.post('/profile', (Request request) async {
      final strBodyRequest = await request.readAsString();
      return supabaseHelper.createProfile(strBodyRequest);
    });

    router.put('/profile/<id>', (Request request, String id) async {
      final strBodyRequest = await request.readAsString();
      return supabaseHelper.updateProfile(id, strBodyRequest);
    });

    router.delete('/profile/<id>', (Request request, String id) async {
      return supabaseHelper.deleteProfile(id);
    });

    router.all('/<ignored|.*>', (Request request) async {
      return Response.notFound('Page not found');
    });

    return router;
  }
}

Update File main.dart

Langkah terakhir adalah kita perlu ubah kode didalam file main.dart menjadi seperti berikut.

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart';

import 'profile_controller.dart';

void main(List<String> arguments) async {
  final handler = const Pipeline().addMiddleware(logRequests()).addHandler(ProfileController().handler);
  await serve(handler, 'localhost', 8080);
  print('Server is running');
}

Setelah selesai semuanya mari kita jalankan programnya menggunakan perintah berikut.

dart run bin/main.dart

Testing

Berikut adalah video hasil testing dari semua endpoint yang sudah kita buat.

Kesimpulan

Jadi kesimpulannya adalah bahwa penggunaan plugin Shelf ini jika kita lihat ternyata cukuplah mudah dan familiar. Untuk Supabase-nya menurut saya bagus ya. Database-nya itu loh mereka adopsi Postgres. Jadi, agak sedikit berbeda dengan database si Firebase yang bentuknya lebih ke NoSQL. Dan Supabase ini menurut saya bisa menjadi alternatif selain dari Firebase. Seperti biasa untuk source code lengkapnya bisa dilihat di Github ya.

GitHub - CoderJava/dart-profile: Server side dart with Shelf and Supabase

Server Side Dart with Shelf and Supabase was originally published in Nusanet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Pengenalan

Di tulisan kali ini kita akan membahas mengenai cara membuat pendeteksi wajah menggunakan layanan dari Google ML Kit. Btw, di tulisan-tulisan saya yang sebelumnya saya pernah bahas juga mengenai topik yang seperti ini namun bukan deteksi wajah melainkan deteksi penggunaan masker menggunakan TensorFlow Lite. Kalau kamu tertarik, tulisan tersebut bisa kamu baca pada link berikut ini ya.

Aplikasi Pendeteksi Masker di Flutter dengan TensorFlow Lite

Untuk membuat face detection di Flutter tidaklah terlalu sulit karena ada banyak sekali third party diluar sana yang sudah bagus-bagus mulai dari yang gratisan sampai yang berbayar pun juga ada. Tergantung dari kebutuhan kita mau buat pendeteksi wajah yang gimana. Berhubung ditulisan kali ini kita mau belajar maka, saya akan pakai yang gratisan saja ya. Untuk yang gratisan kita bisa pakai third party miliknya si Google yang bernama Google ML Kit. Dan kalau kita cek di pub.dev itu plugin-nya sudah lumayan banyak yang buat ya.

Ya, walaupun kalau kita perhatikan itu sebenarnya bukan milik official-nya langsung dari Google tapi nggak apa-apa lah. Itulah gunanya komunitas. Dan sedikit info aja nih kalau plugin yang miliknya Firebase itu plugin-nya sudah discontinued ya. Ini plugin official-nya milik si Firebase.

firebase_ml_vision | Flutter Package

Bisa kita lihat sendiri bahwa plugin firebase ml vision sudah discontinued dan mereka sarankan untuk pakai plugin google_ml_kit yang ini.

google_ml_kit | Flutter Package

Tapi, saya sudah coba duluan itu plugin google_ml_kit dan sayangnya plugin tersebut menyebabkan plugin image_picker tidak berfungsi dengan baik di iOS. Jadi, sorry to say bahwa untuk di tulisan kali ini saya tidak akan memakai plugin tersebut ya. Dan yang kena bukan cuma saya saja. Yang lain juga kena loh. Ini salah satu thread-nya di Stack Overflow.

Flutter: ImagePicker: await picker.pickImage(source: ImageSource.gallery) doesn't return

Jadi, berhubung plugin google_ml_kit bermasalah jadi kita akan pakai plugin yang ini saja ya.

google_ml_vision | Flutter Package

Pembuatan Aplikasi

Untuk langkah pertamanya silakan kita buat projek baru pada text editor masing-masing dengan nama flutter_face_detection_demo. Dan pastikan projeknya kita buat target-nya hanya ke Android dan iOS karena untuk platform web dan desktop tidak akan kita buat ya karena dari plugin-nya juga belum support.

Setup pubspec.yaml

Langkah selanjutnya kita perlu atur file pubspec.yaml-nya dan ubah bagian dependencies-nya menjadi seperti berikut.

...
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

  # Flutter plugin for Google ML Kit on-device vision apis. It includes barcode scanning,
  # image labeling, text recognition and face detection.
  google_ml_vision: ^0.0.7

  # Flutter plugin for selecting images from the Android and iOS image library, and
  # taking new pictures with the camera.
  image_picker: ^0.8.4+8

...

Bisa kita lihat diatas bahwa kita membutuhkan beberapa plugin untuk membuat aplikasi pada projek kali ini. Dan beberapa plugin tersebut adalah sebagai berikut:

1. google_ml_vision
   Plugin ini kita butuhkan untuk membuat fitur face detection-nya.
2. image_picker
   Plugin ini kita butuhkan untuk mengambil foto dari kamera dan galeri.

Selanjutnya, jangan lupa ya jalankan perintah flutter pub get untuk mengunduh paket-paket dependency-nya.

Setup Plugin Google ML Vision dan Image Picker

Setelah kita berhasil mengunduh paket-paket dependency-nya. Langkah berikutnya adalah kita perlu setup di sisi Android dan iOS-nya agar plugin Google ML Vision-nya dan Image Picker bisa berjalan dengan baik.

Android

Untuk di sisi Android kita hanya perlu mengubah nilai minSdkVersion-nya menjadi 19. Kamu bisa ubah nilainya didalam file android/app/build.gradle.

iOS

Untuk di sisi iOS kita hanya perlu mengubah iOS deployment target-nya menjadi 11.0

Dan karena di tulisan kali ini kita mau buat app-nya agar ambil gambar dari galeri maka, kita perlu menambahkan permission NSPhotoLibraryUsageDescription kedalam file Info.plist

...
<true/>
   <key>NSPhotoLibraryUsageDescription</key>
   <string>Butuh permission untuk mengambil gambar dari galeri</string>   
...

Buat UI Utama

Langkah berikutnya adalah kita perlu buat halaman utama dari app kita. Buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

import 'dart:io';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Face Detection',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Face Detection'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  var pathPhoto = '';
  var isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () async {
          // TODO: Ambil foto dari kamera atau galeri menggunakan plugin image_picker
        },
      ),
      body: buildWidgetBody(),
    );
  }

  Widget buildWidgetBody() {
    /// Tampilkan loading ditengah-tengah layar
    if (isLoading) {
      return const Center(
        child: CircularProgressIndicator.adaptive(),
      );
    }

    /// Tampilkan info bahwa tidak ada foto yang diambil
    if (pathPhoto.isEmpty) {
      return const Center(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Text(
            'Silakan ambil foto dulu ya\n'
            'dengan cara tekan tombol tambah di bagian kanan bawah',
            textAlign: TextAlign.center,
          ),
        ),
      );
    }

    /// Tampilkan foto yang kita ambil dari kamera atau galeri
    return Center(
      child: Image.file(
        File(
          pathPhoto,
        ),
      ),
    );
  }

  void showDialogMessage(String message) {
    // TODO: Tampilkan pesan dialog
  }
}

Sekarang coba kita jalankan programnya maka, outputnya akan menjadi seperti berikut.

Buat Fungsi Tampilkan Pesan Dialog

Sebelum kita membuat fungsi untuk mengambil gambar-nya. Kita perlu lengkapi dulu nih fungsi showDialogMessage . Silakan kita ubah kode berikut ini

void showDialogMessage(String message) {
  // TODO: Tampilkan pesan dialog
}

Menjadi seperti berikut.

void showDialogMessage(String message) {
  if (Platform.isIOS) {
    showCupertinoDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: const Text('Info'),
          content: Text(message),
          actions: [
            CupertinoDialogAction(
              child: const Text('Ok'),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        );
      },
    );
  } else {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('Info'),
          content: Text(message),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('OK'),
            ),
          ],
        );
      },
    );
  }
}

Buat Fitur Face Detection

Langkah berikutnya adalah kita masuk ke bagian pembuatan fitur face detection-nya ya. Untuk membuatnya silakan kita ubah bagian kode berikut ini.

floatingActionButton: FloatingActionButton(
  child: const Icon(Icons.add),
  onPressed: () async {
    // TODO: Ambil foto dari kamera atau galeri menggunakan plugin image_picker
  },
),

Menjadi seperti berikut.

floatingActionButton: FloatingActionButton(
  child: const Icon(Icons.add),
  onPressed: () async {
    /// Ambil gambar dari galeri
    final image = await ImagePicker().pickImage(source: ImageSource.gallery);

    /// Pastikan bahwa gambarnya valid
    if (image != null) {
      /// Tampilkan loading
      setState(() => isLoading = true);

      /// Ambil path image-nya
      pathPhoto = image.path;

      /// Buat objek GoogleVisionImage dengan datanya adalah gambar yang kita ambil dari galeri
      final googleVisionImage = GoogleVisionImage.fromFilePath(pathPhoto);

      /// Buat objek FaceDetector
      final faceDetector = GoogleVision.instance.faceDetector();

      /// Jalankan proses untuk deteksi wajahnya
      final faces = await faceDetector.processImage(googleVisionImage);

      /// Tampilkan pesan apakah wajahnya terdeteksi atau tidak
      if (faces.isEmpty) {
        showDialogMessage('Wajah tidak terdeteksi');
      } else {
        showDialogMessage('Wajah terdeteksi');
      }

      /// Sembunyikan loading
      setState(() => isLoading = false);
    }
  },
),

Berikut adalah output dari fitur face detection-nya.

Nah, fitur face detection-nya sudah berfungsi ya. Tapi, kalau face detection-nya cuma sekedar pesan dialog gitu kurang keren lah. Biar lebih keren kita perlu tambah sedikit fitur nih. Jadi, kita akan beri bingkai dimana letak wajahnya dari foto yang kita upload.

Buat Fitur Bingkai Wajah Yang Terdeteksi

Untuk membuatnya kita perlu menggunakan CustomPainter untuk menggambar bingkai-nya. Kita buat file baru dengan nama face_detector_painter.dart dan isi dengan kode berikut.

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

class FaceDetectorPainter extends CustomPainter {
  final Size imageSize;
  final List<Face> faces;
  final bool isReflection;

  const FaceDetectorPainter(
    this.imageSize,
    this.faces, {
    this.isReflection = false,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0
      ..color = Colors.blue;

    for (final face in faces) {
      final faceRect = _reflectionRect(face.boundingBox);
      canvas.drawRect(
        _scaleRect(
          rect: faceRect,
          imageSize: imageSize,
          widgetSize: size,
        ),
        paint,
      );
    }
  }

  @override
  bool shouldRepaint(covariant FaceDetectorPainter oldDelegate) {
    return oldDelegate.imageSize != imageSize || oldDelegate.faces != faces;
  }

  Rect _reflectionRect(Rect boundingBox) {
    if (isReflection) {
      return boundingBox;
    }
    final centerX = imageSize.width / 2;
    final left = ((boundingBox.left - centerX) * -1) + centerX;
    final right = ((boundingBox.right - centerX) * -1) + centerX;
    return Rect.fromLTRB(left, boundingBox.top, right, boundingBox.bottom);
  }

  Rect _scaleRect({
    required Rect rect,
    required Size imageSize,
    required Size widgetSize,
  }) {
    final scaleX = widgetSize.width / imageSize.width;
    final scaleY = widgetSize.height / imageSize.height;

    final scaledRect = Rect.fromLTRB(
      rect.left.toDouble() * scaleX,
      rect.top.toDouble() * scaleY,
      rect.right.toDouble() * scaleX,
      rect.bottom.toDouble() * scaleY,
    );

    return scaledRect;
  }
}

Lalu, kita perlu ubah sedikit kode kita yang didalam main.dart. Pertama, kita perlu tambahkan variable-variable berikut didalam class _MyHomePageState .

class _MyHomePageState extends State<MyHomePage> {
  var pathPhoto = '';
  var isLoading = false;
  var widthImage = 0.0;
  var heightImage = 0.0;
  var faces = <Face>[];
...

Kemudian, kita juga perlu ubah kode bagian berikut.

/// Tampilkan foto yang kita ambil dari kamera atau galeri
return Center(
  child: Image.file(
    File(
      pathPhoto,
    ),
  ),
);

Menjadi seperti berikut.

/// Tampilkan foto yang kita ambil dari kamera atau galeri
return Center(
  child: CustomPaint(
    foregroundPainter: FaceDetectorPainter(
      Size(widthImage, heightImage),
      faces,
      isReflection: true,
    ),
    child: Image.file(
      File(
        pathPhoto,
      ),
    ),
  ),
);

Langkah berikutnya, kita perlu tambahkan sedikit logic agar kita bisa menggambarkan bingkai didalam gambarnya. Untuk membuatnya kita perlu ubah kode bagian berikut.

/// Pastikan bahwa gambarnya valid
if (image != null) {
  /// Tampilkan loading
  setState(() => isLoading = true);

  /// Ambil path image-nya
  pathPhoto = image.path;

  /// Buat objek GoogleVisionImage dengan datanya adalah gambar yang kita ambil dari galeri
  final googleVisionImage = GoogleVisionImage.fromFilePath(pathPhoto);

  /// Buat objek FaceDetector
  final faceDetector = GoogleVision.instance.faceDetector();

  /// Jalankan proses untuk deteksi wajahnya
  final faces = await faceDetector.processImage(googleVisionImage);

  /// Tampilkan pesan apakah wajahnya terdeteksi atau tidak
  if (faces.isEmpty) {
    showDialogMessage('Wajah tidak terdeteksi');
  } else {
    showDialogMessage('Wajah terdeteksi');
  }

  /// Sembunyikan loading
  setState(() => isLoading = false);
}

Menjadi seperti berikut.

/// Pastikan bahwa gambarnya valid
if (imagePicker != null) {
  /// Tampilkan loading
  setState(() => isLoading = true);

  /// Ambil path image-nya
  pathPhoto = imagePicker.path;

  /// Ambil nilai width dan height dari gambar
  final imageBytes = await File(pathPhoto).readAsBytes();
  final image = await decodeImageFromList(imageBytes);
  widthImage = image.width.toDouble();
  heightImage = image.height.toDouble();

  /// Buat objek GoogleVisionImage dengan datanya adalah gambar yang kita ambil dari galeri
  final googleVisionImage = GoogleVisionImage.fromFilePath(pathPhoto);

  /// Buat objek FaceDetector
  final faceDetector = GoogleVision.instance.faceDetector();

  /// Jalankan proses untuk deteksi wajahnya
  faces.clear();
  faces = await faceDetector.processImage(googleVisionImage);

  /// Tampilkan pesan apakah wajahnya terdeteksi atau tidak
  if (faces.isEmpty) {
    showDialogMessage('Wajah tidak terdeteksi');
  } else {
    showDialogMessage('Wajah terdeteksi');
  }

  /// Sembunyikan loading
  setState(() => isLoading = false);
}

Sekarang coba kita jalankan lagi app-nya. Seharusnya sudah ada bingkainya untuk menunjukkan dimana letak wajahnya.

Kesimpulan

Jadi gimana? Gampang kan cara buatnya. Jadi, kesimpulannya adalah pada tulisan ini kita sudah berhasil membuat fitur face detection di Android dan iOS menggunakan plugin Google ML Vision. Selain itu, kita juga telah belajar gimana cara menambahkan bingkai di setiap wajah yang ada didalam foto. Seperti biasa untuk source code lengkapnya bisa dilihat di Github ya.

GitHub - CoderJava/flutter-face-detection-demo: How to create face detection with Google ML Kit in Flutter

Flutter: Face Detection with ML Kit was originally published in Nusanet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Flutter: Infinite ListView

Infinite ListView merupakan salah satu teknik di app mobile untuk membuat pagination. Jadi, cara kerjanya adalah ketika si user berada di posisi terakhir dari sebuah List maka, app akan menampilkan loading untuk memuat data di halaman berikutnya. Nah, ditulisan ini kita akan belajar bagaimana cara membuatnya di Flutter tanpa menggunakan plugin tambahan.

Flutter: ValueListenableBuilder

Kita semua tahu bahwa Flutter memiliki banyak banget widget yang tersedia. Nah, salah satu widget yang akan kita bahas di tulisan ini ialah ValueListenableBuilder. Jadi, widget ini berfungsi untuk mengubah state dari widget tertentu yang kita inginkan. Dan perubahannya itu hanya terjadi jika value yang di-listen dari widget ValueListenableBuilder berubah. Penasaran gimana cara buatnya? Langsung saja cek ke TKP ya.

New Post In January 2022 was originally published in Nusanet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Pengenalan

Di Flutter untuk mengubah state sebuah halaman kita bisa menggunakan setState. Selain setState, kita juga bisa menggunakan state management agar kode kita lebih rapi dan gampang dibaca. Walaupun penggunaan setState bisa dikatakan cukup mudah namun, jika kita salah dalam menggunakannya bisa-bisa performance app kita jadi jelek loh. Misalnya nih, kita mau mengubah widget Time yang ada di halaman Home. Let say widget Time ini nantinya kita mau buat realtime dimana setiap detik gitu jamnya berubah dengan format HH:mm:ss. Niat kita hanya ingin mengubah widget Time saja tapi, karena kita tidak tahu cara menggunakan setState yang baik. Alhasil kita langsung panggil saja tuh setState di halaman Home yang mana dampaknya adalah semua widget yang ada di halaman Home akan ter-build ulang. Terus pertanyaannya gimana caranya agar kita hanya bisa build ulang widget Time-nya saja? Sebenarnya ada banyak tekniknya namun, di tulisan kali ini saya akan contohkan caranya menggunakan widget ValueListenableBuilder.

Design

Biar pembahasan kali ini lebih menarik saya mau sekalian cari referensi design UI yang mau kita jadikan bahan di tulisan ini. Jadi, untuk referensi design-nya saya ada ambil dari dribbble ya.

Dribbble - #2 Aplikasi Pengawasan Kontruksi.png by Muhammad Ilham Julianto

Untuk design-nya nanti kita cuma akan pakai yang bagian ini aja ya.

Pembuatan Projek

Buat Projek

Untuk langkah pertamanya, silakan kita buat projek Flutter baru dengan nama flutter_mobile_attendance.

Persiapan Aset

Sebelum kita mulai membuatnya. Kita memerlukan aset foto profil. Untuk foto profilnya bebas mau pakai yang mana ya. Tapi, kali ini saya akan pakai salah satu foto dari website pexels.com. Setelah kita unduh fotonya kemudian, kita masukkan foto tersebut kedalam projek kedalam directory assets.

Selanjutnya, kita daftarkan directory assets kedalam file pubspec.yaml. Dan kita juga ada pakai plugin intl.

name: flutter_mobile_attendance
description: How to use ValueListenableBuilder
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: ">=2.15.1 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  intl: ^0.17.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - assets/

Selanjutnya, kita jalankan perintah flutter pub get.

Buat Kerangka UI

Sekarang kita buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

import 'dart:async';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: const MyHomePage(title: 'Flutter: ValueListenableBuilder'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var paddingTop = 0.0;
  var paddingBottom = 0.0;
  var widthScreen = 0.0;

  var now = DateTime.now();
  Timer? timer;

  @override
  Widget build(BuildContext context) {
    final mediaQueryData = MediaQuery.of(context);
    widthScreen = mediaQueryData.size.width;
    paddingTop = mediaQueryData.padding.top;
    paddingBottom = mediaQueryData.padding.bottom;

    return Scaffold(
      body: Container(
        width: double.infinity,
        color: Colors.white,
        padding: EdgeInsets.fromLTRB(
          16,
          paddingTop + 16,
          16,
          paddingBottom > 0 ? paddingBottom : 16,
        ),
        child: Column(
          children: [
            buildWidgetHeader(),
            const SizedBox(height: 24),
            buildWidgetDateTime(),
            buildWidgetButtonPresence(),
            buildWidgetHistoryPresence(),
            const SizedBox(height: 24),
            buildWidgetMenu(),
          ],
        ),
      ),
    );
  }

  Widget buildWidgetHeader() {
    // TODO: buat widget yang menampilkan info nama dan foto profil si user
    return Container();
  }

  Widget buildWidgetDateTime() {
    // TODO: buat widget yang menampilkan tanggal dan jam sekarang
    return Container();
  }

  Widget buildWidgetButtonPresence() {
    // TODO: buat widget yang menampilkan button presence
    return Container();
  }

  Widget buildWidgetHistoryPresence() {
    // TODO: buat widget yang menampilkan button ijin tidak hadir dan history presensi
    return Container();
  }

  Widget buildWidgetMenu() {
    // TODO: buat widget yang menampilkan menu-nya
    return Container();
  }
}

Nah, jadi kode diatas adalah kerangka dari UI yang akan kita buat.

Buat Widget Header

Sekarang kita akan coba membuat widget bagian header-nya dimana, dibagian tersebut kita akan menampilkan nama dan foto profil si pengguna.

Silakan kita ubah kode berikut.

Widget buildWidgetHeader() {
  // TODO: buat widget yang menampilkan info nama dan foto profil si user
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetHeader() {
  return Row(
    children: [
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Selamat Datang',
              style: Theme.of(context).textTheme.headline6?.copyWith(
                    fontWeight: FontWeight.normal,
                  ),
            ),
            Text(
              'Putri',
              style: Theme.of(context).textTheme.headline6,
            ),
          ],
        ),
      ),
      ClipOval(
        child: Image.asset(
          'assets/photo_profile.jpeg',
          width: 42,
          height: 42,
          fit: BoxFit.cover,
        ),
      ),
    ],
  );
}

Jika dijalankan maka, outputnya akan menjadi seperti berikut.

Buat Widget Date Time

Langkah selanjutnya adalah kita akan membuat widget yang menampilkan jam dan tanggal saat ini. Untuk membuatnya, silakan ubah kode berikut.

Widget buildWidgetDateTime() {
  // TODO: buat widget yang menampilkan tanggal dan jam sekarang
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetDateTime() {
  final formattedTime = DateFormat('HH:mm', 'id').format(now);
  final formattedTime2 = DateFormat(':ss', 'id').format(now);
  final formattedDate = DateFormat('EEEE, dd MMM yyy', 'id').format(now);
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.ideographic,
        children: [
          Text(
            formattedTime,
            style: Theme.of(context).textTheme.headline4?.copyWith(
                  fontWeight: FontWeight.w500,
                  color: Colors.grey[800],
                ),
          ),
          Text(
            formattedTime2,
            style: Theme.of(context).textTheme.bodyText2?.copyWith(
                  fontWeight: FontWeight.w500,
                  color: Colors.grey[800],
                ),
          ),
        ],
      ),
      Text(
        formattedDate,
        style: Theme.of(context).textTheme.headline6?.copyWith(
              color: Colors.grey,
            ),
      ),
    ],
  );
}

Jadi, untuk sementara widget date time-nya belum kita buat realtime. Kita fokus buat UI-nya dulu ya.

Buat Widget Button Presence

Nah, di langkah berikutnya kita akan membuat widget button presence. Silakan kita ubah kode berikut.

Widget buildWidgetButtonPresence() {
  // TODO: buat widget yang menampilkan button presence
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetButtonPresence() {
  return Expanded(
    child: Container(
      width: widthScreen / 1.5,
      height: widthScreen / 1.5,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment.topRight,
          colors: [
            Colors.orange[900]!,
            Colors.orange,
            Colors.orange[200]!,
          ],
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.orange.withOpacity(0.3),
            offset: const Offset(0, 8),
            blurRadius: 8,
            spreadRadius: 8,
          ),
        ],
      ),
      alignment: Alignment.center,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(
            Icons.fingerprint,
            color: Colors.white,
            size: widthScreen / 3,
          ),
          Text(
            'Absen Masuk',
            style: Theme.of(context).textTheme.subtitle2?.copyWith(
                  color: Colors.white,
                ),
          ),
        ],
      ),
    ),
  );
}

Buat Widget History Presence

Langkah selanjutnya kita akan membuat widget history presence. Silakan ubah kode berikut.

Widget buildWidgetHistoryPresence() {
  // TODO: buat widget yang menampilkan button ijin tidak hadir dan history presensi
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetHistoryPresence() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: [
      Column(
        children: [
          Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(color: Colors.grey),
            ),
            alignment: Alignment.center,
            padding: const EdgeInsets.all(12),
            child: const Icon(
              Icons.remove_circle,
              color: Colors.red,
            ),
          ),
          const SizedBox(height: 8),
          const Text('Ijin Tidak Hadir'),
        ],
      ),
      Column(
        children: [
          Container(
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(color: Colors.grey),
            ),
            alignment: Alignment.center,
            padding: const EdgeInsets.all(12),
            child: const Icon(
              Icons.article_rounded,
              color: Colors.orange,
            ),
          ),
          const SizedBox(height: 8),
          const Text("Lihat History"),
        ],
      ),
    ],
  );
}

Buat Widget Menu

Nah, ini widget terakhir yang akan kita buat. Untuk membuatnya, silakan ubah kode berikut.

Widget buildWidgetMenu() {
  // TODO: buat widget yang menampilkan menu-nya
  return Container();
}

Menjadi seperti berikut.

Widget buildWidgetMenu() {
  return Container(
    width: double.infinity,
    decoration: BoxDecoration(
      color: Colors.grey[900],
      borderRadius: BorderRadius.circular(8),
    ),
    padding: const EdgeInsets.symmetric(
      horizontal: 16,
      vertical: 8,
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Column(
          children: [
            const Icon(
              Icons.fingerprint,
              color: Colors.orange,
            ),
            const SizedBox(height: 4),
            Text(
              'Absensi',
              style: Theme.of(context).textTheme.subtitle2?.copyWith(
                    fontSize: 12,
                    color: Colors.orange,
                  ),
            ),
          ],
        ),
        Column(
          children: [
            const Icon(
              Icons.local_activity,
              color: Colors.grey,
            ),
            const SizedBox(height: 4),
            Text(
              'Kegiatan',
              style: Theme.of(context).textTheme.subtitle2?.copyWith(
                    fontSize: 12,
                    color: Colors.grey,
                  ),
            ),
          ],
        ),
        Column(
          children: [
            const Icon(
              Icons.help,
              color: Colors.grey,
            ),
            const SizedBox(height: 4),
            Text(
              'Problem',
              style: Theme.of(context).textTheme.subtitle2?.copyWith(
                    fontSize: 12,
                    color: Colors.grey,
                  ),
            ),
          ],
        ),
        Column(
          children: [
            const Icon(
              Icons.location_on,
              color: Colors.grey,
            ),
            const SizedBox(height: 4),
            Text(
              'Lokasi',
              style: Theme.of(context).textTheme.subtitle2?.copyWith(
                    fontSize: 12,
                    color: Colors.grey,
                  ),
            ),
          ],
        ),
      ],
    ),
  );
}

Bisa kita lihat sekarang bahwa UI-nya sudah selesai kita buat. Namun, kalau diperhatikan di sini masih ada yang kurang ya. Yaitu, kita mau widget date time-nya itu jalan atau dibuat realtime.

Buat Widget Date Time menjadi Realtime

Oke, sekarang akan kita buat ya. Tapi, sebelum kita buat. Saya mau tunjukkan dulu bahwa untuk membuatnya saya akan tunjukkan dengan 2 cara yaitu, cara pertama dengan menggunakan setState dan cara kedua menggunakan widget ValueListenableBuilder. Sengaja saya tunjukkan biar kita semua tahu mana yang lebih praktis dan efisien dalam penggunaannya untuk kasus seperti ini.

Menggunakan setState

Nah, untuk cara pertama kita akan coba menggunakan setState. Caranya, silakan kita update kode didalam file main.dart dan kita perlu override function initState dan dispose menjadi seperti berikut.

@override
void initState() {
  timer = Timer.periodic(const Duration(seconds: 1), (_) {
    now = now.add(const Duration(seconds: 1));
    setState(() {});
  });
  super.initState();
}

@override
void dispose() {
  timer?.cancel();
  super.dispose();
}

Kemudian, untuk membuktikan bahwa method build benar-benar ter-build ulang ketika timer-nya jalan kita perlu tambahkan kode berikut didalam method build .

@override
Widget build(BuildContext context) {
  print('Ini method build');
  final mediaQueryData = MediaQuery.of(context);
  widthScreen = mediaQueryData.size.width;
  paddingTop = mediaQueryData.padding.top;
  paddingBottom = mediaQueryData.padding.bottom;

  return Scaffold(
...

Sekarang kalau kita jalankan programnya maka, kita sudah bisa lihat bahwa widget date time-nya sudah berjalan secara realtime.

Tapi, kalau kita perhatikan kodenya. Cara pertama kuranglah efisien. Mengapa berani saya katakan kurang efisien? Karena, ketika kita menggunakan setState maka, tanpa kita sadari bahwa semua widget yang ada didalam method build akan terbuat ulang semuanya. Dan ini kurang efektif mengingat kembali bahwa tujuan diawalnya kita hanya mau meng-update state dari widget Date Time saja. Widget yang lain tidak perlu diupdate. Memang di contoh kasus kali ini kita tidak melihat secara langsung efeknya tapi, kalau UI-nya sudah cukup kompleks maka, itu akan sangat kelihatan sekali bahwa jank atau freeze-nya terjadi. Jadi, untuk cara pertama ini kurang efektif ya.

Menggunakan Widget ValueListenableBuilder

Oke sekarang kita coba cara kedua ya. Untuk cara kedua kita akan menggunakan widget yang bernama ValueListenableBuilder . Jadi, kalau kita baca-baca secara singkat dokumentasinya. Disebutkan bahwa widget ini berfungsi untuk build ulang widget yang ada didalamnya ketika nilai yang kita berikan berubah. Agak susah dimengerti ya? Oke, jadi bahasa gampangnya adalah widget ini hanya ter-build ulang kalau nilai didalamnya juga berubah.

Biar lebih gampang. Akan saya tunjukkan gimana cara buatnya. Pertama-tama kita hapus dulu tuh perintah setState yang ada didalam method initState. Sekaligus hapus variable yang bernama now.

Timer? timer;

@override
void initState() {
  timer = Timer.periodic(const Duration(seconds: 1), (_) {
    // TODO: do something in here  
  });
  super.initState();
}

Kemudian, kita perlu buat 1 variable global dengan nama valueNotifierNow. Dan kita inisialisasikan nilainya didalam method initState.

Timer? timer;
late ValueNotifier<DateTime> valueNotifierNow;

@override
void initState() {
  valueNotifierNow = ValueNotifier<DateTime>(DateTime.now());
  timer = Timer.periodic(const Duration(seconds: 1), (_) {
    valueNotifierNow.value = DateTime.now();
  });
  super.initState();
}

Untuk saat ini kita akan melihat bahwa kode kita mengalami error tapi, it’s okay. Kita abaikan dulu ya. Sekarang kita ubah kode bagian ini.

child: Column(
  children: [
    buildWidgetHeader(),
    const SizedBox(height: 24),
    buildWidgetDateTime(),
    buildWidgetButtonPresence(),
    buildWidgetHistoryPresence(),
    const SizedBox(height: 24),
    buildWidgetMenu(),
  ],
),

Menjadi seperti ini.

child: Column(
  children: [
    buildWidgetHeader(),
    const SizedBox(height: 24),
    ValueListenableBuilder<DateTime>(
      valueListenable: valueNotifierNow,
      builder: (BuildContext context, DateTime now, Widget? child) {
        return buildWidgetDateTime(now);
      },
    ),
    buildWidgetButtonPresence(),
    buildWidgetHistoryPresence(),
    const SizedBox(height: 24),
    buildWidgetMenu(),
  ],
),

Lalu, kita tambahkan parameter didalam method buildWidgetDateTime .

Widget buildWidgetDateTime(DateTime now) {
  final formattedTime = DateFormat('HH:mm', 'id').format(now);
  final formattedTime2 = DateFormat(':ss', 'id').format(now);
  final formattedDate = DateFormat('EEEE, dd MMM yyy', 'id').format(now);
  return Column(
...

Sekarang coba kita jalankan lagi app-nya maka, outputnya akan sama yaitu, waktu akan berjalan secara realtime. Mungkin kalau cuma dari UI-nya saja kita tidak percaya ya kalau yang ter-build ulang hanyalah method buildWidgetDateTime. Untuk membuktikannya silakan kita tambahkan kode print berikut didalam method buildWidgetDateTime .

...

Widget buildWidgetDateTime(DateTime now) {
  print('ini method buildWidgetDateTime');
  final formattedTime = DateFormat('HH:mm', 'id').format(now);
  final formattedTime2 = DateFormat(':ss', 'id').format(now);
  final formattedDate = DateFormat('EEEE, dd MMM yyy', 'id').format(now);
  return Column(
...

Sekarang coba kita jalankan programnya dan buka DevTools untuk melihat output di console-nya apakah yang ter-build hanya method buildWidgetDateTime saja atau method build juga ikut ter-build.

Nah, lihat kan perbedaannya? Kalau pakai widget ValueListenableBuilder maka, yang ter-build hanyalah method buildWidgetDateTime-nya saja.

Kesimpulan

Jadi, di tulisan ini kita telah mempelajari mengenai penggunaan widget ValueListenableBuilder. Jadi, widget ValueListenableBuilder ini berfungsi untuk membuat widget yang kita inginkan hanya ter-build ulang jika nilai yang diberikan berubah. Jadi, lebih efektif daripada setState jikalau kita hanya ingin mem-build ulang widget tertentu. Untuk source code lengkapnya bisa dicek di Github ya 😉.

GitHub - CoderJava/flutter-demo-value-listenable-builder: How to use widget ValueListenableBuilder in Flutter.

Flutter: ValueListenableBuilder was originally published in Nusanet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.

Pengenalan

Sebuah aplikasi pada umumnya pasti terdapat fitur untuk menampilkan sekumpulan data. Data-data tersebut biasanya ditampilkan sesuai dengan platform-nya masing-masing. Kalau di desktop/web umumnya menggunakan table pagination.

Lalu, untuk platform mobile biasanya kita menampilkan datanya dalam bentuk list.

Untuk mobile, implementasi pagination-nya kita bisa menggunakan teknik Infinite Scrolling atau Infinite ListView. Jadi, konsepnya itu adalah app-nya menampilkan list datanya dalam bentuk ListView lalu, ketika berada di paling bawah maka, app-nya akan memuat lagi ke API atau database untuk menampilkan data berikutnya.

Cara Pembuatan

Buat Projek

Langkah pertamanya, silakan kita buat projek baru dengan nama flutter-swapi.

Atur pubspec.yaml

Untuk membuatnya ada beberapa plugin yang perlu kita tambahkan kedalam projek kita. Silakan buka file pubspec.yaml dan tambahkan beberapa plugin berikut.

1. dio
2. json_annotation
3. json_serializable
4. build_runner

Catatan: Untuk versinya silakan pakai yang versi terbaru ya.

...
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  dio: ^4.0.4
  json_annotation: ^4.4.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^1.0.0
  json_serializable: ^6.1.4
  build_runner: ^2.1.7
...

Buat Class Model

Langkah berikutnya, kita perlu membuat class model dari respon endpoint yang bakalan kita pakai. Berikut adalah endpoint yang akan kita pakai.

https://swapi.dev/api/people?page=:page

Dan berikut adalah format respon dari endpoint tersebut.

{
  "count": 82,
  "next": "https://swapi.dev/api/people/?page=2",
  "previous": null,
  "results": [
    {
      "name": "Luke Skywalker",
      "height": "172",
      "mass": "77",
      "hair_color": "blond",
      "skin_color": "fair",
      "eye_color": "blue",
      "birth_year": "19BBY",
      "gender": "male",
      "homeworld": "https://swapi.dev/api/planets/1/",
      "films": [
        "https://swapi.dev/api/films/1/",
        "https://swapi.dev/api/films/2/",
        "https://swapi.dev/api/films/3/",
        "https://swapi.dev/api/films/6/"
      ],
      "species": [],
      "vehicles": [
        "https://swapi.dev/api/vehicles/14/",
        "https://swapi.dev/api/vehicles/30/"
      ],
      "starships": [
        "https://swapi.dev/api/starships/12/",
        "https://swapi.dev/api/starships/22/"
      ],
      "created": "2014-12-09T13:50:51.644000Z",
      "edited": "2014-12-20T21:17:56.891000Z",
      "url": "https://swapi.dev/api/people/1/"
    },
    ...
  ]
}

Nah, karena kita sudah tahu format respon JSON-nya. Maka, sekarang kita buat class modelnya. Caranya silakan buat file baru dengan nama people_response.dart. Dan isikan dengan kode berikut.

import 'package:json_annotation/json_annotation.dart';

part 'people_response.g.dart';

@JsonSerializable()
class PeopleResponse {
  @JsonKey(name: 'count')
  final int count;
  @JsonKey(name: 'next')
  final String? nextUrl;
  @JsonKey(name: 'previous')
  final String? previousUrl;
  @JsonKey(name: 'results')
  final List<ItemPeopleResponse> results;

  PeopleResponse({
    required this.count,
    required this.nextUrl,
    required this.previousUrl,
    required this.results,
  });

  factory PeopleResponse.fromJson(Map<String, dynamic> json) => _$PeopleResponseFromJson(json);

  Map<String, dynamic> toJson() => _$PeopleResponseToJson(this);
}

@JsonSerializable()
class ItemPeopleResponse {
  @JsonKey(name: 'name')
  final String? name;
  @JsonKey(name: 'birth_year')
  final String? birthYear;
  @JsonKey(name: 'gender')
  final String? gender;

  ItemPeopleResponse({
    required this.name,
    required this.birthYear,
    required this.gender,
  });

  factory ItemPeopleResponse.fromJson(Map<String, dynamic> json) => _$ItemPeopleResponseFromJson(json);

  Map<String, dynamic> toJson() => _$ItemPeopleResponseToJson(this);
}

Untuk menghilangkan tanda error-nya. Kita perlu jalankan build runner-nya untuk membuat file generator-nya. Untuk membuat file generator-nya silakan jalankan perintah berikut.

flutter pub run build_runner build

Buat UI

Langkah berikutnya kita perlu membuat tampilannya. Silakan buka file main.dart dan ubah kode didalamnya menjadi seperti berikut.

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swapi/people_response.dart';

enum ItemType {
  data,
  loading,
}

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Swapi',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Swapi'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _scrollController = ScrollController();
  final _listData = <Data>[];
  final _dio = Dio();

  String? _nextUrl;
  var _isLoading = false;
  var _paddingBottom = 0.0;
  var _errorMessage = '';

  @override
  void initState() {
    _doLoadData();
    // TODO: Buat fitur load more
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final mediaQueryData = MediaQuery.of(context);
    _paddingBottom = mediaQueryData.padding.bottom;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildWidgetBody(),
    );
  }

  Widget _buildWidgetBody() {
    if (_errorMessage.isNotEmpty) {
      return _buildWidgetInfoTryAgain(_errorMessage);
    }

    if (_listData.isEmpty) {
      if (_isLoading) {
        return const Center(
          child: CircularProgressIndicator.adaptive(),
        );
      } else {
        return _buildWidgetInfoTryAgain('Data not available');
      }
    } else {
      return ListView.separated(
        padding: EdgeInsets.only(
          left: 16,
          top: 16,
          right: 16,
          bottom: _paddingBottom > 0 ? _paddingBottom : 16,
        ),
        itemBuilder: (context, index) {
          final itemPeople = _listData[index];
          final typeData = itemPeople.itemType;
          if (typeData == ItemType.loading) {
            return const Center(
              child: CircularProgressIndicator.adaptive(),
            );
          } else if (typeData == ItemType.data) {
            return Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      itemPeople.people?.name ?? '-',
                      style: Theme.of(context).textTheme.headline6,
                    ),
                    Text(
                      itemPeople.people?.gender ?? '-',
                      style: Theme.of(context).textTheme.bodyText2,
                    ),
                    Text(
                      itemPeople.people?.birthYear ?? '-',
                      style: Theme.of(context).textTheme.caption,
                    ),
                  ],
                ),
              ),
            );
          } else {
            return Container();
          }
        },
        separatorBuilder: (context, index) => Container(
          height: 8,
        ),
        itemCount: _listData.length,
      );
    }
  }

  Widget _buildWidgetInfoTryAgain(String text) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(text),
          ElevatedButton(
            child: const Text('Try Again'),
            onPressed: () {
              _doLoadData();
            },
          ),
        ],
      ),
    );
  }

  Future<void> _doLoadData() async {
    _errorMessage = '';
    var url = '';
    if (_listData.isEmpty) {
      url = 'https://swapi.dev/api/people?page=1';
    } else {
      url = _nextUrl ?? '';
    }
    if (url.isEmpty) {
      return;
    }
    setState(() => _isLoading = true);
    try {
      final response = await _dio.get(url);
      if (response.statusCode.toString().startsWith('2')) {
        final peopleResponse = PeopleResponse.fromJson(response.data);
        if (_listData.isNotEmpty) {
          /// Hapus widget elemen loading
          final lastItem = _listData.last;
          if (lastItem.itemType == ItemType.loading) {
            _listData.removeLast();
          }
        }

        /// Masukkan data baru kedalam _listData
        _listData.addAll(
          peopleResponse.results.map(
            (element) {
              return Data(
                people: element,
                itemType: ItemType.data,
              );
            },
          ),
        );

        /// Jika nilai _nextUrl != null maka, tambahkan widget elemen loading
        _nextUrl = peopleResponse.nextUrl;
        if (_nextUrl != null) {
          _listData.add(
            Data(
              people: null,
              itemType: ItemType.loading,
            ),
          );
        }
      } else {
        /// Munculkan pesan error
        _listData.clear();
        _errorMessage = "Failed to get data";
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(_errorMessage)));
      }
    } catch (error) {
      /// Munculkan pesan error
      _errorMessage = 'Failed to get data';
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(_errorMessage)));
    } finally {
      setState(() => _isLoading = false);
    }
  }
}

class Data {
  final ItemPeopleResponse? people;
  final ItemType itemType;

  Data({
    required this.people,
    required this.itemType,
  });
}

Adapun output dari kode UI diatas adalah sebagai berikut.

Buat Fitur Infinite List

Di langkah sebelumnya, kita sudah berhasil menampilkan datanya dari endpoint. Tapi, fitur infinite list-nya belum bisa berfungsi. Nah, di langkah ini kita akan membuatnya. Silakan buka kembali file main.dart dan ubah kode berikut.

// TODO: Buat fitur load more

Menjadi seperti berikut.

_scrollController.addListener(() {
  if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
    _doLoadData();
  }
});

Kemudian, kita set property controller dari widget ListView.separated .

return ListView.separated(
  controller: _scrollController,
  padding: EdgeInsets.only(
    left: 16,

Berikut adalah video hasilnya.

Kesimpulan

Jadi, di tulisan ini kita telah berhasil membuat Infinite ListView di Flutter. Caranya cukup mudah kan. Daripada kita pakai plugin spesial untuk fitur tersebut mending kita buat sendiri dan lebih fully customize. Untuk source code lengkapnya bisa dilihat di Github berikut ya.

GitHub - CoderJava/flutter-swapi-infinite-list: How to create infinite ListView in Flutter

Flutter Infinite ListView was originally published in Nusanet Developers on Medium, where people are continuing the conversation by highlighting and responding to this story.